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

changed to single structure

Browse Source
pull/33/head
Khwaja 2 months ago
parent 46ca6a7620
commit 9761a47c86
4 changed files with 97 additions and 83 deletions
Show Stats Download Patch File Download Diff File

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

@ -10,11 +10,11 @@ import "tabulator-tables/dist/css/tabulator.min.css";
import "../Common/Forms/Tables.css"; import "../Common/Forms/Tables.css";
import Footer from "./Footer"; import Footer from "./Footer";
import React, { useState,useRef } from "react"; import React, { useState,useRef } from "react";
import {CircularData} from "./CircularData";
import { defaultPlant, defaultProduct, defaultCenter } 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, CircularCenter} from "./CircularData"; import { PlantNode, CenterNode, ProductNode, RELOGScenario} from "./CircularData";
declare global { declare global {
interface Window { interface Window {
nextX: number; nextX: number;
@ -22,15 +22,17 @@ declare global {
} }
} }
const Default_Scenario: RELOGScenario = {
Parameters: { version: "1.0"},
Plants: {},
Products: {},
Centers: {},
};
const CaseBuilder = () => { const CaseBuilder = () => {
const nextUid= useRef(1); const nextUid= useRef(1);
const [circularData, setCircularData] = useState<CircularData> ( { const [scenario, setScenario] = useState<RELOGScenario>(Default_Scenario);
plants: {},
products: {},
centers: {},
});
const onClear = () => {}; const onClear = () => {};
const onSave = () => {}; const onSave = () => {};
const onLoad = () => {}; const onLoad = () => {};
@ -52,7 +54,7 @@ const CaseBuilder = () => {
}; };
const promptName = (prevData:CircularData): string | undefined => { const promptName = (prevData:RELOGScenario): string | undefined => {
const name = prompt("Name"); const name = prompt("Name");
if (!name || name.length ===0) return; if (!name || name.length ===0) return;
return name; return name;
@ -60,16 +62,16 @@ const CaseBuilder = () => {
}; };
const onAddPlant = () => { const onAddPlant = () => {
setCircularData((prevData) => { setScenario((prevData) => {
const name = promptName(prevData); const name = promptName(prevData);
if (name ===undefined) return prevData; if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`; const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition(); const [x,y] = randomPosition();
const newData: CircularData = { const newData: RELOGScenario = {
...prevData, ...prevData,
plants: { Plants: {
...prevData.plants, ...prevData.Plants,
[uid]: { [uid]: {
...defaultPlant, ...defaultPlant,
x, x,
@ -84,15 +86,15 @@ const CaseBuilder = () => {
}; };
const onAddProduct = () => { const onAddProduct = () => {
setCircularData((prevData) => { setScenario((prevData) => {
const name = promptName(prevData); const name = promptName(prevData);
if (name ===undefined) return prevData; if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`; const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition(); const [x,y] = randomPosition();
const newData: CircularData = { const newData: RELOGScenario = {
...prevData, ...prevData,
products: { Products: {
...prevData.products, ...prevData.Products,
[uid]: { [uid]: {
...defaultProduct, ...defaultProduct,
x, x,
@ -108,15 +110,15 @@ const CaseBuilder = () => {
}; };
const onAddCenter = () => { const onAddCenter = () => {
setCircularData((prevData) => { setScenario((prevData) => {
const name = promptName(prevData); const name = promptName(prevData);
if (name ===undefined) return prevData; if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`; const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition(); const [x,y] = randomPosition();
const newData: CircularData = { const newData: RELOGScenario = {
...prevData, ...prevData,
centers: { Centers: {
...prevData.centers, ...prevData.Centers,
[uid]: { [uid]: {
...defaultCenter, ...defaultCenter,
x, x,
@ -131,13 +133,13 @@ const CaseBuilder = () => {
}; };
const onSetCenterInput = (centerName: string, productName: string) => { const onSetCenterInput = (centerName: string, productName: string) => {
setCircularData((prev) => { setScenario((prev) => {
const center = prev.centers[centerName]; const center = prev.Centers[centerName];
if (!center) return prev; if (!center) return prev;
return { return {
...prev, ...prev,
centers: { centers: {
...prev.centers, ...prev.Centers,
[centerName]: { ...center, input: productName}, [centerName]: { ...center, input: productName},
}, },
}; };
@ -146,13 +148,13 @@ const onSetCenterInput = (centerName: string, productName: string) => {
const onSetPlantInput = (plantName: string, productName: string) => { const onSetPlantInput = (plantName: string, productName: string) => {
setCircularData((prevData: CircularData) => { setScenario((prevData: RELOGScenario) => {
const plant = prevData.plants[plantName]; const plant = prevData.Plants[plantName];
if (!plant) return prevData; if (!plant) return prevData;
const updatedPlant: CircularPlant = { const updatedPlant: PlantNode = {
...plant, ...plant,
@ -170,7 +172,7 @@ const onSetCenterInput = (centerName: string, productName: string) => {
plants: { plants: {
...prevData.plants, ...prevData.Plants,
[plantName]: updatedPlant, [plantName]: updatedPlant,
@ -185,8 +187,8 @@ const onSetCenterInput = (centerName: string, productName: string) => {
const onAddPlantOutput = (plantName: string, productName: string) => { const onAddPlantOutput = (plantName: string, productName: string) => {
setCircularData(prevData => { setScenario(prevData => {
const plant = prevData.plants[plantName]; const plant = prevData.Plants[plantName];
if (!plant) return prevData; if (!plant) return prevData;
const newOutputs = plant.outputs.includes(productName) const newOutputs = plant.outputs.includes(productName)
@ -196,7 +198,7 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
return { return {
...prevData, ...prevData,
plants: { plants: {
...prevData.plants, ...prevData.Plants,
[plantName]: { [plantName]: {
...plant, ...plant,
outputs: newOutputs, outputs: newOutputs,
@ -207,15 +209,15 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
}; };
const onAddCenterOutput = (centerName: string, productName: string) => { const onAddCenterOutput = (centerName: string, productName: string) => {
setCircularData((prev) => { setScenario((prev) => {
const center = prev.centers[centerName]; const center = prev.Centers[centerName];
if (!center) return prev; if (!center) return prev;
const updatedOutputs = [...center.output, productName]; const updatedOutputs = [...center.output, productName];
return { return {
...prev, ...prev,
centers: { centers: {
...prev.centers, ...prev.Centers,
[centerName]: { ...center, output: updatedOutputs}, [centerName]: { ...center, output: updatedOutputs},
}, },
}; };
@ -225,20 +227,20 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
const onMovePlant = (plantName: string, x: number, y: number) => { const onMovePlant = (plantName: string, x: number, y: number) => {
setCircularData((prevData: CircularData): CircularData => { setScenario((prevData: RELOGScenario): RELOGScenario => {
const newData: CircularData ={ ...prevData}; const newData: RELOGScenario ={ ...prevData};
if (!newData.plants[plantName]) return prevData; if (!newData.Plants[plantName]) return prevData;
newData.plants[plantName].x =x; newData.Plants[plantName].x =x;
newData.plants[plantName].y =y; newData.Plants[plantName].y =y;
return newData; return newData;
}); });
}; };
const onMoveProduct = (productName: string, x: number, y: number) => { const onMoveProduct = (productName: string, x: number, y: number) => {
setCircularData((prevData: CircularData): CircularData => { setScenario((prevData: RELOGScenario): RELOGScenario => {
const newData: CircularData ={ ...prevData}; const newData: RELOGScenario ={ ...prevData};
const product = newData.products[productName]; const product = newData.Products[productName];
if (!product) return prevData; if (!product) return prevData;
product.x = x; product.x = x;
product.y =y; product.y =y;
@ -248,13 +250,13 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
}; };
const onMoveCenter = (centerName: string, x: number, y: number) => { const onMoveCenter = (centerName: string, x: number, y: number) => {
setCircularData((prev) => { setScenario((prev) => {
const center = prev.centers[centerName]; const center = prev.Centers[centerName];
if (!center) return prev; if (!center) return prev;
return { return {
...prev, ...prev,
centers: { centers: {
...prev.centers, ...prev.Centers,
[centerName]: { ...center,x,y}, [centerName]: { ...center,x,y},
}, },
}; };
@ -262,39 +264,39 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
}; };
const onRemovePlant = (plantName: string) => { const onRemovePlant = (plantName: string) => {
setCircularData(prev => { setScenario(prev => {
const next = { ...prev }; const next = { ...prev };
delete next.plants[plantName]; delete next.Plants[plantName];
return next; return next;
}); });
}; };
const onRemoveProduct = (productName: string) => { const onRemoveProduct = (productName: string) => {
setCircularData(prev => { setScenario(prev => {
const next = { ...prev }; const next = { ...prev };
delete next.products[productName]; delete next.Products[productName];
return next; return next;
}); });
}; };
const onRemoveCenter = (centerName: string) => { const onRemoveCenter = (centerName: string) => {
setCircularData(prev => { setScenario(prev => {
const next = { ...prev }; const next = { ...prev };
delete next.centers[centerName]; delete next.Centers[centerName];
return next; return next;
}); });
}; };
const onRenamePlant = (uniqueId: string, newName: string) => { const onRenamePlant = (uniqueId: string, newName: string) => {
setCircularData(prev => { setScenario(prev => {
const plant = prev.plants[uniqueId]; const plant = prev.Plants[uniqueId];
if (!plant) return prev; if (!plant) return prev;
const next = { const next = {
...prev, ...prev,
plants: { plants: {
...prev.plants, ...prev.Plants,
[uniqueId]: { ...plant, name: newName}, [uniqueId]: { ...plant, name: newName},
}, },
}; };
@ -305,13 +307,13 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
}; };
const onRenameProduct = (uniqueId: string, newName: string) => { const onRenameProduct = (uniqueId: string, newName: string) => {
setCircularData(prev => { setScenario(prev => {
const product = prev.products[uniqueId]; const product = prev.Products[uniqueId];
if (!product) return prev; if (!product) return prev;
const next = { const next = {
...prev, ...prev,
products: { products: {
...prev.products, ...prev.Products,
[uniqueId]: { ...product, name: newName}, [uniqueId]: { ...product, name: newName},
}, },
}; };
@ -320,13 +322,13 @@ const onRenameProduct = (uniqueId: string, newName: string) => {
}; };
const onRenameCenter = (uniqueId: string, newName: string) => { const onRenameCenter = (uniqueId: string, newName: string) => {
setCircularData(prev => { setScenario(prev => {
const center = prev.centers[uniqueId]; const center = prev.Centers[uniqueId];
if (!center) return prev; if (!center) return prev;
const next = { const next = {
...prev, ...prev,
centers: { centers: {
...prev.centers, ...prev.Centers,
[uniqueId]: { ...center, name: newName}, [uniqueId]: { ...center, name: newName},
}, },
}; };
@ -345,15 +347,15 @@ const onRenameCenter = (uniqueId: string, newName: string) => {
onAddProduct={onAddProduct} onAddProduct={onAddProduct}
onMovePlant={onMovePlant} onMovePlant={onMovePlant}
onMoveProduct={onMoveProduct} onMoveProduct={onMoveProduct}
plants={circularData.plants} plants={scenario.Plants}
products={circularData.products} products={scenario.Products}
onSetPlantInput={onSetPlantInput} onSetPlantInput={onSetPlantInput}
onAddPlantOutput={onAddPlantOutput} onAddPlantOutput={onAddPlantOutput}
onAddCenter= {onAddCenter} onAddCenter= {onAddCenter}
onAddCenterInput={onSetCenterInput} onAddCenterInput={onSetCenterInput}
onAddCenterOutput={onAddCenterOutput} onAddCenterOutput={onAddCenterOutput}
onMoveCenter={onMoveCenter} onMoveCenter={onMoveCenter}
centers={circularData.centers} centers={scenario.Centers}
onRemovePlant={onRemovePlant} onRemovePlant={onRemovePlant}
onRemoveProduct={onRemoveProduct} onRemoveProduct={onRemoveProduct}
onRemoveCenter={onRemoveCenter} onRemoveCenter={onRemoveCenter}

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

@ -1,4 +1,4 @@
export interface CircularPlant { export interface PlantNode {
uid: string; uid: string;
name: string; name: string;
x: number; x: number;
@ -9,22 +9,15 @@ export interface CircularPlant {
} }
export interface CircularProduct { export interface ProductNode {
uid: string; uid: string;
name: string; name: string;
x: number; x: number;
y: number; y: number;
} }
export interface CircularData {
plants: Record<string, CircularPlant>;
products: Record<string, CircularProduct>;
centers: Record<string, CircularCenter>;
}
export interface CircularCenter { export interface CenterNode {
uid: string; uid: string;
name: string; name: string;
x: number; x: number;
@ -33,4 +26,23 @@ export interface CircularCenter {
//single input, multiple outputs //single input, multiple outputs
input?: string; input?: string;
output: string[]; output: string[];
}
export interface CircularData {
plants: Record<string, PlantNode>;
products: Record<string, ProductNode>;
centers: Record<string, CenterNode>;
}
export interface RELOGScenario {
Parameters: {
version: string;
};
Plants: Record<string, PlantNode>;
Products: Record< string, ProductNode>;
Centers: Record<string,CenterNode>;
} }

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

@ -6,7 +6,7 @@ import {
getNodesBounds, getNodesBounds,
getViewportForBounds, getViewportForBounds,
useReactFlow} from '@xyflow/react'; useReactFlow} from '@xyflow/react';
import { CircularPlant, CircularProduct, CircularCenter } from './CircularData'; import { PlantNode, ProductNode, CenterNode } from './CircularData';
import CustomNode, { CustomNodeData } from './NodesAndEdges'; import CustomNode, { CustomNodeData } from './NodesAndEdges';
import Section from '../Common/Section'; import Section from '../Common/Section';
import Card from '../Common/Card'; import Card from '../Common/Card';
@ -30,9 +30,9 @@ interface PipelineBlockProps {
onRenameProduct: (uid: string, newName: string) => void; onRenameProduct: (uid: string, newName: string) => void;
onRenamePlant: (uid: string, newName: string) => void; onRenamePlant: (uid: string, newName: string) => void;
onRenameCenter: (uid: string, newName: string) => void; onRenameCenter: (uid: string, newName: string) => void;
products: Record<string, CircularProduct>; products: Record<string, ProductNode>;
plants: Record<string, CircularPlant>; plants: Record<string, PlantNode>;
centers: Record<string, CircularCenter>; centers: Record<string, CenterNode>;
} }
function getLayouted( function getLayouted(

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

@ -1,16 +1,16 @@
import { CircularData, CircularPlant, CircularProduct, CircularCenter } from "./CircularData"; import { CircularData, PlantNode, ProductNode, CenterNode } from "./CircularData";
export interface DefaultProduct extends CircularProduct{ export interface DefaultProduct extends ProductNode{
x: number; x: number;
y: number; y: number;
} }
export interface DefaultPlant extends CircularPlant{ export interface DefaultPlant extends PlantNode{
x: number; x: number;
y: number; y: number;
} }
export interface DefaultCenter extends CircularPlant{ export interface DefaultCenter extends PlantNode{
x: number; x: number;
y: number; y: number;
} }
@ -22,7 +22,7 @@ export const defaultProduct: DefaultProduct = {
y: 0, y: 0,
}; };
export const defaultPlant: CircularPlant = { export const defaultPlant: PlantNode = {
uid: "", uid: "",
name: "", name: "",
x: 0, x: 0,
@ -31,7 +31,7 @@ export const defaultPlant: CircularPlant = {
outputs: [], outputs: [],
}; };
export const defaultCenter: CircularCenter = { export const defaultCenter: CenterNode = {
uid: "", uid: "",
name: "", name: "",
x: 0, x: 0,

Write Preview
Loading…
Cancel
Save