ANL-CEEESA
/
RELOG
mirror of https://github.com/ANL-CEEESA/RELOG.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added center to interface

Browse Source
pull/33/head
Khwaja 3 months ago
parent 315c80c03d
commit 6e6a4cc175
6 changed files with 269 additions and 96 deletions
Show Stats Download Patch File Download Diff File

112
web/src/components/CaseBuilder/CaseBuilder.tsx
Unescape View File

@ -11,10 +11,10 @@ import "../Common/Forms/Tables.css";
import Footer from "./Footer"; import Footer from "./Footer";
import React, { useState } from "react"; import React, { useState } from "react";
import {CircularData} from "./CircularData"; import {CircularData} from "./CircularData";
import { defaultPlant, defaultProduct } from "./defaults"; import { defaultPlant, defaultProduct, defaultCenter } from "./defaults";
import PipelineBlock from "./PipelineBlock"; import PipelineBlock from "./PipelineBlock";
import '@xyflow/react/dist/style.css'; import '@xyflow/react/dist/style.css';
import { CircularPlant } from "./CircularData"; import { CircularPlant, CircularCenter} from "./CircularData";
declare global { declare global {
interface Window { interface Window {
nextX: number; nextX: number;
@ -25,7 +25,8 @@ declare global {
const CaseBuilder = () => { const CaseBuilder = () => {
const [circularData, setCircularData] = useState<CircularData> ( { const [circularData, setCircularData] = useState<CircularData> ( {
plants: {}, plants: {},
products: {} products: {},
centers: {}
}); });
const onClear = () => {}; const onClear = () => {};
@ -97,6 +98,39 @@ const CaseBuilder = () => {
}; };
const onAddCenter = () => {
setCircularData(prev => {
const name = prompt("Center name");
if (!name || name in prev.centers) return prev;
const [x,y] = randomPosition();
const next = {
...prev,
centers: {
...prev.centers,
[name]: { ...defaultCenter, id:name, x, y, outputs: []}
}
};
return next;
});
};
const onSetCenterInput = (centerName: string, productName: string) => {
setCircularData((prev) => {
const center = prev.centers[centerName];
if (!center) return prev;
return {
...prev,
centers: {
...prev.centers,
[centerName]: { ...center, input: productName},
},
};
});
};
const onSetPlantInput = (plantName: string, productName: string) => { const onSetPlantInput = (plantName: string, productName: string) => {
setCircularData((prevData: CircularData) => { setCircularData((prevData: CircularData) => {
@ -135,43 +169,46 @@ const CaseBuilder = () => {
}; };
const onAddPlantOutput = (plantName: string, productName: string) => {
setCircularData((prevData) => {
const plant = prevData.plants[plantName];
const onAddPlantOutput = (plantName: string, productName: string) => {
setCircularData(prevData => {
const plant = prevData.plants[plantName];
if (!plant) return prevData; if (!plant) return prevData;
const updatedPlant: CircularPlant = { // Build a new array of outputs, avoiding duplicates
const newOutputs = plant.outputs.includes(productName)
...plant, ? plant.outputs
: [...plant.outputs, productName];
outputs: {
...plant.outputs,
[productName]: 0,
},
};
// Return updated state with outputs as an array
return { return {
...prevData, ...prevData,
plants: { plants: {
...prevData.plants, ...prevData.plants,
[plantName]: {
[plantName]: updatedPlant, ...plant,
outputs: newOutputs,
},
}, },
}; };
}); });
};
const onAddCenterOutput = (centerName: string, productName: string) => {
setCircularData((prev) => {
const center = prev.centers[centerName];
if (!center) return prev;
const updatedOutputs = [...center.output, productName];
return {
...prev,
centers: {
...prev.centers,
[centerName]: { ...center, output: updatedOutputs},
},
};
});
}; };
@ -199,6 +236,20 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
}; };
const onMoveCenter = (centerName: string, x: number, y: number) => {
setCircularData((prev) => {
const center = prev.centers[centerName];
if (!center) return prev;
return {
...prev,
centers: {
...prev.centers,
[centerName]: { ...center,x,y},
},
};
});
};
return ( return (
<div> <div>
<Header onClear={onClear} onSave={onSave} onLoad={onLoad} /> <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
@ -214,6 +265,11 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
products={circularData.products} products={circularData.products}
onSetPlantInput={onSetPlantInput} onSetPlantInput={onSetPlantInput}
onAddPlantOutput={onAddPlantOutput} onAddPlantOutput={onAddPlantOutput}
onAddCenter= {onAddCenter}
onAddCenterInput={onSetCenterInput}
onAddCenterOutput={onAddCenterOutput}
onMoveCenter={onMoveCenter}
centers={circularData.centers}
/> />
</div> </div>
</div> </div>

14
web/src/components/CaseBuilder/CircularData.ts
Unescape View File

@ -3,7 +3,7 @@ export interface CircularPlant {
x: number; x: number;
y: number; y: number;
inputs: string[]; inputs: string[];
outputs: Record<string, number>; outputs: string[];
} }
@ -16,8 +16,18 @@ export interface CircularProduct {
export interface CircularData { export interface CircularData {
plants: Record<string, CircularPlant>; plants: Record<string, CircularPlant>;
products: Record<string, CircularProduct>; products: Record<string, CircularProduct>;
centers: Record<string, CircularCenter>;
}
export interface CircularCenter {
id: string;
x: number;
y: number;
//single input, multiple outputs
input?: string;
output: string[];
} }

63
web/src/components/CaseBuilder/NodesAndEdges.tsx
Unescape View File

@ -1,24 +1,57 @@
// NodesAndEdges.tsx
import React from 'react'; import React from 'react';
import { Position, NodeProps, Handle } from '@xyflow/react';
import styles from './PipelineBlock.module.css';
import { Handle, Position, NodeProps } from '@xyflow/react';
import styles from './PipelineBlock.module.css';
export interface CustomNodeData { export interface CustomNodeData {
label: string;
type: 'plant' | 'product'; label: string;
type: 'plant' | 'product' | 'center';
} }
export default function CustomNode({ data }: NodeProps<any>) { export default function CustomNode({ data, isConnectable }: NodeProps<Node<CustomNodeData>>) {
const nodeStyle = const typeClass =
data.type === 'plant' data.type === 'plant' ? styles.PlantNode :
? styles.PlantNode: styles.ProductNode; data.type === 'product' ? styles.ProductNode:
styles.CenterNode;
return ( return (
<div className={`${styles.node} ${nodeStyle}`}> <div className={`${styles.node} ${typeClass}`}>
{data.type === 'plant' && ( <Handle
<Handle type="target" position={Position.Left} style={{ background: '#555' }} />
)} type="target"
<div>{data.label}</div>
<Handle type="source" position={Position.Right} style={{ background: '#555' }} /> position={Position.Left}
isConnectable={isConnectable}
style={{ background: '#555' }}
/>
<div>{data.label}</div>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
style={{ background: '#555' }}
/>
</div> </div>
); );
};
}

10
web/src/components/CaseBuilder/PipelineBlock.module.css
Unescape View File

@ -6,14 +6,16 @@
} }
.PlantNode, .PlantNode,
.ProductNode { .ProductNode,
.CenterNode {
border-color: rgba(0, 0, 0, 0.8) !important; border-color: rgba(0, 0, 0, 0.8) !important;
color: black !important; color: black !important;
font-size: 13px !important; font-size: 13px !important;
border-width: 1px !important; border-width: 1px !important;
border-radius: 6px !important; border-radius: 6px !important;
box-shadow: 0px 2px 4px -3px black !important; box-shadow: 0px 2px 4px -3px black !important;
width: 100px !important; width: 100%;
height: 100%;
} }
.PlantNode { .PlantNode {
@ -23,3 +25,7 @@
.ProductNode { .ProductNode {
background-color: #e6e6e6 !important; background-color: #e6e6e6 !important;
} }
.CenterNode {
background-color: #d3a610;
}

137
web/src/components/CaseBuilder/PipelineBlock.tsx
Unescape View File

@ -1,4 +1,4 @@
import { CircularPlant, CircularProduct } from "./CircularData"; import { CircularPlant, CircularProduct, CircularCenter } from "./CircularData";
import { Node, Edge } from "@xyflow/react"; import { Node, Edge } from "@xyflow/react";
import styles from "./PipelineBlock.module.css"; import styles from "./PipelineBlock.module.css";
import { ReactFlow, Background, Controls,MarkerType } from '@xyflow/react'; import { ReactFlow, Background, Controls,MarkerType } from '@xyflow/react';
@ -13,12 +13,18 @@ import CustomNode, { CustomNodeData }from "./NodesAndEdges";
interface PipelineBlockProps { interface PipelineBlockProps {
onAddPlant: () => void; onAddPlant: () => void;
onAddProduct: () => void; onAddProduct: () => void;
onAddCenter: () => void;
onMovePlant: (name: string , x: number, y: number) => void; onMovePlant: (name: string , x: number, y: number) => void;
onMoveProduct: (name: string, x: number, y: number) => void; onMoveProduct: (name: string, x: number, y: number) => void;
onMoveCenter: (name: string, x: number, y: number) => void;
onSetPlantInput: (plantName:string, productName: string) => void; onSetPlantInput: (plantName:string, productName: string) => void;
onAddPlantOutput: (plantName: string, productName: string) => void; onAddPlantOutput: (plantName: string, productName: string) => void;
onAddCenterInput: (plantName: string, productName: string) => void;
onAddCenterOutput: (plantName: string, productName: string) => void;
products: Record<string, CircularProduct>; products: Record<string, CircularProduct>;
plants: Record<string, CircularPlant>; plants: Record<string, CircularPlant>;
centers: Record<string, CircularCenter>;
} }
const onNodeDoubleClick = () => {}; const onNodeDoubleClick = () => {};
@ -46,6 +52,13 @@ const PipelineBlock: React.FC<PipelineBlockProps> = (props) => {
props.onAddPlantOutput(source, target); props.onAddPlantOutput(source, target);
} }
else if (sourceType === "product" && targetType === "center") {
props.onAddCenterInput(target, source);
}
else if (sourceType === "center" && targetType === "product") {
props.onAddCenterOutput(source, target);
}
}; };
const onNodeDragStop =(_:any, node: Node) => { const onNodeDragStop =(_:any, node: Node) => {
@ -56,9 +69,11 @@ const onNodeDragStop =(_:any, node: Node) => {
if (data.type === "product") { if (data.type === "product") {
props.onMoveProduct(id, position.x, position.y); props.onMoveProduct(id, position.x, position.y);
} }
if (data.type === "center") {
props.onMoveCenter(id, position.x, position.y);
}
}; };
for (const [productName, product] of Object.entries(props.products) as [string, CircularProduct][]) { for (const [productName, product] of Object.entries(props.products) as [string, CircularProduct][]) {
if(!product.x || !product.y) hasNullPositions = true; if(!product.x || !product.y) hasNullPositions = true;
mapNameToType[productName] = "product"; mapNameToType[productName] = "product";
@ -69,7 +84,7 @@ const onNodeDragStop =(_:any, node: Node) => {
position: { x:product.x, y:product.y} position: { x:product.x, y:product.y}
}); });
} }
console.log("ALL PLANTS:", props.plants);
for (const [plantName, plant] of Object.entries(props.plants) as [string, CircularPlant][]) { for (const [plantName, plant] of Object.entries(props.plants) as [string, CircularPlant][]) {
if(!plant.x || !plant.y) hasNullPositions = true; if(!plant.x || !plant.y) hasNullPositions = true;
mapNameToType[plantName] = "plant"; mapNameToType[plantName] = "plant";
@ -93,21 +108,50 @@ const onNodeDragStop =(_:any, node: Node) => {
}, },
}); });
} }
/**for (const outputProduct of plant.inputs){ for (const outputProduct of plant.outputs ?? []) {
edges.push({ edges.push({
id: `${plantName}-${outputProduct}`, id: `${plantName}-${outputProduct}`,
source: plantName, source: plantName,
target: outputProduct, target: outputProduct,
animated: true, animated: true,
style: { stroke: "black" }, style: { stroke: 'black' },
markerEnd: { type: MarkerType.ArrowClosed },
}); });
} }
*/
} }
} }
for (const [centerName, center] of Object.entries(props.centers)) {
mapNameToType[centerName] = "center";
nodes.push({
id: centerName,
type: "default",
data: { label: centerName, type: "center"},
position: {x: center.x, y: center.y},
});
if (center.input) {
edges.push({
id: `${center.input}-${centerName}`,
source: center.input,
target:centerName,
style: { stroke: "black"},
markerEnd: { type: MarkerType.ArrowClosed},
});
}
for (const out of center.output) {
edges.push({
id: `${centerName}-${out}`,
source: centerName,
target:out,
style: { stroke: "black"},
markerEnd: { type: MarkerType.ArrowClosed},
});
}
}
useEffect(() => { useEffect(() => {
if (hasNullPositions) onLayout(); if (hasNullPositions) onLayout();
@ -116,11 +160,11 @@ const onNodeDragStop =(_:any, node: Node) => {
return ( return (
<> <>
<Section title="Pipeline" /> <Section title="Pipeline" />
<Card> <Card>
<div className={styles.PipelineBlock}> <div className={styles.PipelineBlock}>
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
onNodeDoubleClick={onNodeDoubleClick} onNodeDoubleClick={onNodeDoubleClick}
@ -133,41 +177,46 @@ return (
minZoom={0.5} minZoom={0.5}
snapToGrid={true} snapToGrid={true}
preventScrolling={false} preventScrolling={false}
nodeTypes={{default: CustomNode}} nodeTypes={{ default: CustomNode }}
> >
<Background /> <Background />
<Controls showInteractive={false} /> <Controls showInteractive={false} />
</ReactFlow> </ReactFlow>
</div> </div>
<div style={{ textAlign: "center", marginTop: "1rem" }}> <div style={{ textAlign: "center", marginTop: "1rem" }}>
<button <button
style={{ margin: "0 8px" }} style={{ margin: "0 8px" }}
onClick={props.onAddProduct} onClick={props.onAddProduct}
> >
Add product Add product
</button> </button>
<button <button
style={{ margin: "0 8px" }} style={{ margin: "0 8px" }}
onClick={props.onAddPlant} onClick={props.onAddPlant}
> >
Add plant Add plant
</button> </button>
<button <button
style={{ margin: "0 8px" }}
onClick={props.onAddCenter}
>
Add center
</button>
<button
style={{ margin: "0 8px" }} style={{ margin: "0 8px" }}
onClick={onLayout} onClick={onLayout}
> >
Auto Layout Auto Layout
</button> </button>
<button <button
style={{ margin: "0 8px" }} style={{ margin: "0 8px" }}
title="Drag from one connector to another to create links between products and plants. Double click to rename an element. Click an element to select and move it. Press the [Delete] key to remove it." title="Drag from one connector to another to create links between products, plants, and centers. Double click to rename an element. Click an element to select and move it. Press the [Delete] key to remove it."
> >
? ?
</button> </button>
</div> </div>
</Card> </Card>
</> </>
); );
}; };
export default PipelineBlock; export default PipelineBlock;

29
web/src/components/CaseBuilder/defaults.ts
Unescape View File

@ -1,4 +1,4 @@
import { CircularPlant, CircularProduct } from "./CircularData"; import { CircularData, CircularPlant, CircularProduct, CircularCenter } from "./CircularData";
export interface DefaultProduct extends CircularProduct{ export interface DefaultProduct extends CircularProduct{
x: number; x: number;
@ -10,16 +10,35 @@ export interface DefaultPlant extends CircularPlant{
y: number; y: number;
} }
export interface DefaultCenter extends CircularPlant{
x: number;
y: number;
}
export const defaultProduct: DefaultProduct = { export const defaultProduct: DefaultProduct = {
"id": "", id: "",
x: 0, x: 0,
y: 0, y: 0,
}; };
export const defaultPlant: CircularPlant = { export const defaultPlant: CircularPlant = {
"id": "", id: "",
x: 0, x: 0,
y: 0, y: 0,
inputs : [], inputs : [],
outputs: {}, outputs: [],
}; };
export const defaultCenter: CircularCenter = {
id: "",
x: 0,
y: 0,
output: [],
};
export const DefaultData: CircularData = {
products: {},
plants: {},
centers: {}
};

Write Preview
Loading…
Cancel
Save