improved UI

pnnl · Jun 27, 2024 · 387c6eb · 387c6eb
1 parent 190cd90
commit 387c6eb
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 287 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 GLIMPSE is a graph-based web application to visualize and update GridLAB-D power grid models. The tool can be used to search and highlight power grid model objects. Additionally, it also update the model attributes and export the modified model future simulations. The application is developed using React.js, Node.js, and Python.
 
-## Build Installation Instructions
+## Build Instructions
 **Download Node and Nim** 
 - [Node.js](https://nodejs.org/en)
 - [Nim](https://nim-lang.org/install.html)
@@ -21,7 +21,6 @@ cd /GLIMPSE/glimpse/local-server/
 
 python -m venv venv
 ```
-### If on `Windows` go to `/venv/Scripts/` and rename **json2glm** to **json2glm.exe**
 
 ### In `/GLIMPSE/glimpse/local-server/` Activate Virtual Environment using the following command for your system
 | Platform | Shell      | Command to activate virtual environment |

diff --git a/glimpse/main.js b/glimpse/main.js
@@ -8,9 +8,9 @@ const Ajv = require("ajv");
 // const log = require('electron-log');
 // const { autoUpdater } = require("electron-updater");
 
-require("electron-reload")(__dirname, {
-   electron: path.join(__dirname, "node_modules", ".bin", "electron"),
-});
+// require("electron-reload")(__dirname, {
+//    electron: path.join(__dirname, "node_modules", ".bin", "electron"),
+// });
 
 const jsonUploadSchema = require("./schemas/json_upload.schema.json");
 const themeUploadSchema = require("./schemas/theme_upload.schema.json");
@@ -19,8 +19,8 @@ const isMac = process.platform === "darwin";
 let mainWindow = null;
 let splashWindow = null;
 
-const rootDir = __dirname;
-// const rootDir = process.resourcesPath;
+// const rootDir = __dirname;
+const rootDir = process.resourcesPath;
 
 //------------------ for debugging ------------------
 // autoUpdater.logger = log;

diff --git a/glimpse/package.json b/glimpse/package.json
@@ -58,6 +58,7 @@
     "fs": "^0.0.1-security",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "socket.io-client": "^4.7.4",
     "tree-kill": "^1.2.2",
     "vis-data": "^7.1.7",

diff --git a/glimpse/renderer/src/components/ActionBar.js b/glimpse/renderer/src/components/ActionBar.js
diff --git a/glimpse/renderer/src/components/ActionDrawer.js b/glimpse/renderer/src/components/ActionDrawer.js
@@ -27,6 +27,7 @@ const ActionDrawer = ({
    attachOverlay,
    removeOverlay,
    reset,
+   graphDataObj,
 }) => {
    const nodes = getNodeIds();
    const [nodeID, setNodeID] = useState("");

diff --git a/glimpse/renderer/src/components/Graph.js b/glimpse/renderer/src/components/Graph.js
@@ -537,7 +537,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
             },
          },
       });
-   }, []);
+   });
 
    // a d3.js example
    // useEffect(() => {
@@ -641,22 +641,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
    // });
 
    return (
-      <>
-         {/* <ActionBar
-            graphDataObj={GLIMPSE_OBJECT}
-            nodesDataObj={graphData.nodes}
-            physicsToggle={TogglePhysics}
-            reset={Reset}
-            onFind={(id) => NodeFocus(id, glmNetwork)}
-            prev={() => Prev(glmNetwork, highlightedNodes, counter)}
-            next={() => Next(glmNetwork, highlightedNodes, counter)}
-            addGraphOverlay={setCommunicationNetwork}
-            getNodeIds={() => graphData.nodes.getIds()}
-            toggleLegendRef={toggleLegendRef}
-            showLegendStateRef={showLegendStateRef}
-            removeOverlay={removeOverlay}
-         /> */}
-
+      <Box className="gl-wrapper" component={"div"} sx={{ width: "100%", height: "calc(100vh - 4rem)" }}>
          <NodePopup onMount={onChildMount} onSave={saveEdits} close={closePopUp} />
 
          <NewNodeForm
@@ -692,43 +677,42 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
             attachOverlay={attachOverlay}
             removeOverlay={removeOverlay}
             reset={Reset}
+            graphDataObj={GLIMPSE_OBJECT}
          />
 
-         <Box component={"div"} sx={{ width: "100%", height: "calc(100vh - 4rem)" }}>
-            <Stack sx={{ height: "100%", width: "100%" }} direction={"row"}>
-               <Box
-                  id="graph"
-                  component={"div"}
-                  sx={{ width: "72%", height: "100%" }}
-                  ref={container}
-                  onContextMenu={handleContextmenu}
-               />
-
-               <div id="layout-form" />
-
-               <Legend
-                  highlightNodes={(nodeType) =>
-                     HighlightGroup(nodeType, graphData, highlightedNodes, highlightedEdges)
-                  }
-                  highlightEdges={(edgeType) =>
-                     HighlightEdges(edgeType, highlightedNodes, graphData, edgeOptions, highlightedEdges)
-                  }
-                  hideObjects={(objType, type) => hideObjects(objType, type, graphData)}
-                  legendData={getLegendData(objectTypeCount, theme, edgeOptions)}
-                  onMount={legendMount}
-                  setShowLegendRef={toggleLegendRef}
-                  legendStateRef={showLegendStateRef}
-               />
-            </Stack>
-
-            <VisActionsDial
-               rotateCW={() => rotateCW(graphData, glmNetwork, ANGLE)}
-               rotateCCW={() => rotateCCW(graphData, glmNetwork, ANGLE)}
-               prev={() => Prev(glmNetwork, highlightedNodes, counter)}
-               next={() => Next(glmNetwork, highlightedNodes, counter)}
+         <Stack sx={{ height: "100%", width: "100%" }} direction={"row"}>
+            <Box
+               id="graph"
+               component={"div"}
+               sx={{ width: "72%", height: "100%" }}
+               ref={container}
+               onContextMenu={handleContextmenu}
+            />
+
+            <div id="layout-form" />
+
+            <Legend
+               highlightNodes={(nodeType) =>
+                  HighlightGroup(nodeType, graphData, highlightedNodes, highlightedEdges)
+               }
+               highlightEdges={(edgeType) =>
+                  HighlightEdges(edgeType, highlightedNodes, graphData, edgeOptions, highlightedEdges)
+               }
+               hideObjects={(objType, type) => hideObjects(objType, type, graphData)}
+               legendData={getLegendData(objectTypeCount, theme, edgeOptions)}
+               onMount={legendMount}
+               setShowLegendRef={toggleLegendRef}
+               legendStateRef={showLegendStateRef}
             />
-         </Box>
-      </>
+         </Stack>
+
+         <VisActionsDial
+            rotateCW={() => rotateCW(graphData, glmNetwork, ANGLE)}
+            rotateCCW={() => rotateCCW(graphData, glmNetwork, ANGLE)}
+            prev={() => Prev(glmNetwork, highlightedNodes, counter)}
+            next={() => Next(glmNetwork, highlightedNodes, counter)}
+         />
+      </Box>
    );
 };