Incorporate Circular Implementation by obaidkhwaja · Pull Request #33 · ANL-CEEESA/RELOG

obaidkhwaja · 2025-06-11T16:37:41Z

Created an interface in the CircularData.ts file to add some sort of organization for building out the circular model, if you have another idea I'd be happy to go with that!

…ation for the new circular model

…terfaces for defaultPlant and defaultProduct, imported idex.css as well

…to pipelineblock

…om products to plants

…ustomize) all added

iSoron · 2025-07-15T19:23:34Z

+  centers: {},
+
+
+});


Please reformat all source code files using prettier

iSoron · 2025-07-15T19:24:21Z

 import "../Common/Forms/Tables.css";
 import Footer from "./Footer";
+import React, { useState,useRef } from "react";
+import {CircularData} from "./CircularData";


There is no need to refer to everything as CircularSomething. This could be InstanceData instead.

iSoron · 2025-07-15T19:31:09Z

+export interface CircularPlant {
+    uid: string;
+    name: string;
+    x: number;
+    y: number;
+    inputs: string[];
+    outputs: string[];
+
+
+}
+
+export interface CircularProduct { 
+    uid: string;
+    name: string;
+    x: number;
+    y: number;
+}
+
+export interface CircularData {
+    plants: Record<string, CircularPlant>;
+    products: Record<string, CircularProduct>;
+    centers: Record<string, CircularCenter>;
+
+
+}
+
+export interface CircularCenter {
+    uid: string;
+    name: string;
+    x: number;
+    y: number;
+
+    //single input, multiple outputs 
+    input?: string;
+    output: string[];
+}


Instead of having these isolated data structures in a custom format, could you modify this code so that we have a single structure containing the entire data for the test case, in the JSON format we describe in our documentation? See UnitCommitmentScenario in the UCJL case builder for an example. Each operation in the web interface (such as adding a plant) should modify this data structure while ensuring that the JSON format remains in a valid format. This is also important because we should be able to load/save the test case.

Feel free to add any necessary fields to the JSON format required to persist the pipeline visualization (e.g., x/y location of each copy of that component).

Added RELOGScenario interface that uses the current interfaces as shapes and combines them into one

iSoron · 2025-07-15T19:32:40Z

+  const randomPosition = (): [number,number] => {
+    if (window.nextX === undefined) window.nextX = 15;
+    if (window.nextY === undefined) window.nextY = 15;
+
+    window.nextY +=60;
+    if (window.nextY >=500) {
+      window.nextY = 15;
+      window.nextX += 150;
+
+    }
+    return [window.nextX, window.nextY];
+
+  };


Could you rename this method? It's not really generating a random position.

Taken from current casebuilder, changed to nextNodePosition

iSoron · 2025-07-15T19:33:26Z

+  const onAddPlant = () => {
+    setCircularData((prevData) => {
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+
+      const uid = `${name}-${nextUid.current++}`;
+      const [x,y] = randomPosition();
+      const newData: CircularData = {
+         ...prevData,
+         plants: {
+          ...prevData.plants,
+          [uid]: {
+            ...defaultPlant,
+            x,
+            y,
+            name,
+            uid
+          }
+         }
+        };
+     return newData;
+    });
+  };
+
+  const onAddProduct = () => {
+    setCircularData((prevData) => {
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+      const uid = `${name}-${nextUid.current++}`;
+      const [x,y] = randomPosition();
+      const newData: CircularData = {
+         ...prevData,
+         products: {
+          ...prevData.products,
+          [uid]: {
+            ...defaultProduct,
+            x,
+            y,
+            name,
+            uid
+          }
+         }
+        };
+     return newData;
+    });
+
+  };
+
+  const onAddCenter = () => {
+    setCircularData((prevData) => {
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+      const uid = `${name}-${nextUid.current++}`;
+      const [x,y] = randomPosition();
+      const newData: CircularData = {
+         ...prevData,
+         centers: {
+          ...prevData.centers,
+          [uid]: {
+            ...defaultCenter,
+            x,
+            y,
+            name,
+            uid
+          }
+         }
+        };
+     return newData;
+    });
+};


This looks quite repetitive.

This logic was taken from the current casebuilder but you are right and there shouldn't be a reason why these can be connected to 'onAdd' function

Consolidated to onAddNode function

iSoron · 2025-07-15T19:43:36Z

+<button style={{ margin: '0 8px' }} onClick={props.onAddProduct}>Add product</button>
+<button style={{ margin: '0 8px' }} onClick={props.onAddPlant}>Add plant</button>
+<button style={{ margin: '0 8px' }} onClick={props.onAddCenter}>Add center</button>
+<button style={{ margin: '0 8px' }} onClick={onLayout}>Auto Layout</button>


Please use a common style for these buttons. I think we already have some CSS for buttons that you could use here.

Incorporated Buttons.module.css file from current casebuilder

iSoron · 2025-07-15T19:44:28Z

+<button style={{ margin: '0 8px' }} onClick={props.onAddCenter}>Add center</button>
+<button style={{ margin: '0 8px' }} onClick={onLayout}>Auto Layout</button>
+<DownloadButton />
+<button style={{ margin: '0 8px' }} title="Drag & connect. Double-click to rename. Delete to remove.">?</button>


This tooltip is not working properly. Compared to the one in relog.axavier.org, it takes too long to show.

iSoron · 2025-07-15T19:45:07Z

+export interface DefaultProduct extends CircularProduct{ 
+  x: number;
+  y: number;
+}
+
+export interface DefaultPlant extends CircularPlant{
+  x: number;
+  y: number;
+}
+
+export interface DefaultCenter extends CircularPlant{
+  x: number;
+  y: number;
+}


I don't see the need to declare these interfaces. They are also duplicated.

These interfaces are the "objects" for the state while the interfaces in CircularData (now InitialData) are purely types.

iSoron · 2025-07-15T19:45:51Z

    "noUnusedParameters": false,
-    "checkJs": true
+    "checkJs": false,
+    "allowImportingTsExtensions": true


Could you clarify why is this required?

Anything updated in the tsconfig file was updated on the download of any libraries used, if you want I can take a deeper dive but I never went in and messed with it.

iSoron · 2025-07-15T19:46:23Z

    "noUnusedLocals": false,
    "noUnusedParameters": false,
-    "checkJs": true
+    "checkJs": false,


We shouldn't have any .js files in this project, so I'm not sure why is this change required.

Yes definetely, I'll take this out. I know that having it set as false raised a type warning earlier in the code that I wasn't able to get rid of and it was fully typed but if any issues arise now I'll make note of them and let you know.

checkJs works simultaneously with allowJs, if checkJs is set to true then allowJs has to true as well otherwise it raises errors.

Added CircularData interface under casebuilder to add a sense organiz…

5e5655f

…ation for the new circular model

obaidkhwaja closed this Jun 11, 2025

obaidkhwaja reopened this Jun 11, 2025

obaidkhwaja changed the base branch from master to circular June 11, 2025 16:43

Khwaja added 11 commits June 11, 2025 11:53

Re-adding the CircularData.ts file

eb2003a

removed RELOG submodule

936d9e8

Added functions for circular UI

6d75a60

Refactored the onAddPlant and onAddProduct setup, created typesafe in…

357e312

…terfaces for defaultPlant and defaultProduct, imported idex.css as well

Added PipelineBlock as well as necessary helper files

fc5280d

"Deleted node_modules from commit"

5e7aab6

meeting 6/24 code

7df33d2

Added a nodes and edges file to ensure customizability, connected it …

5a3c356

…to pipelineblock

Changed css and added customized edge to include an arrow to point fr…

315c80c

…om products to plants

Added center to interface

6e6a4cc

7-1 meeting code

3291f08

obaidkhwaja changed the title ~~Add circular interface~~ Incorporate Circular Implementation Jul 1, 2025

Khwaja added 7 commits July 3, 2025 16:20

Changes made to css and in process of adding delete feature

d80f956

added uids to allow duplicate-named nodes

b095e4b

autoformat button works

6262047

meeting code 7/8

a463b8e

changed to controlled react state and added edit feature

acd3b46

4 mandatory features of visualization interface (add, delete, edit, c…

2062be1

…ustomize) all added

export pipeline button added and completed

46ca6a7

iSoron requested changes Jul 15, 2025

View reviewed changes

Khwaja added 5 commits July 17, 2025 14:11

changed to single structure

9761a47

consolidated add, move, remove functions

052cd37

meeting 7/22 progress

41a51d4

Fixed buttons in Pipeline Block

0dda419

deleted DefaultProduct, DefaultPlant,DefaultCenter

778e901

Conversation

obaidkhwaja commented Jun 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants