Small UI changes and more recognized node and edge style options thro…

…ugh GLIMPSE local WebSocket
pnnl · Apr 12, 2024 · d640168 · d640168
1 parent 3461376
commit d640168
Show file tree

Hide file tree

Showing 18 changed files with 1,673 additions and 772 deletions.
diff --git a/glimpse/config/appConfig.json b/glimpse/config/appConfig.json
@@ -21,19 +21,33 @@
       }
    },
    "graphOptions": {
+      "configure": {
+         "enabled": false,
+         "filter": [
+            "physics",
+            "layout",
+            "interaction",
+            "renderer"
+         ],
+         "showButton": true
+      },
       "edges": {
          "font": {"multi": true, "align": "horizontal"},
          "smooth": {
-            "enabled": false,
-            "type": "dynamic",
-            "roundness": 0.5
-         },
-         "hidden": true
+            "enabled": true,
+            "type": "continuous"
+         }
       },
       "nodes": {
          "borderWidth": 2,
          "shapeProperties": {
-            "useBorderWithImage": false
+            "useBorderWithImage": true
+         },
+         "color": {
+            "hover": {
+               "border": "#2B7CE9",
+               "background": "white"
+            }
          },
          "font": {
             "color": "#000",
@@ -47,14 +61,22 @@
          "hover": true,
          "hideEdgesOnDrag": true,
          "hideEdgesOnZoom": true,
-         "navigationButtons": false
+         "navigationButtons": true
       },
       "physics": {
          "barnesHut": {
             "gravitationalConstant": -10000,
             "springConstant": 0.3,
             "springLength": 75
          },
+         "forceAtlas2Based": {
+            "gravitationalConstant": -250,
+            "centralGravity": 0.01,
+            "springLength": 50,
+            "springConstant": 0.18
+         },
+         "maxVelocity": 146,
+         "timestep": 0.35,
          "solver": "barnesHut",
          "stabilization": {
             "enabled": true,

diff --git a/glimpse/main.js b/glimpse/main.js
@@ -13,9 +13,9 @@ const kill = require("tree-kill");
 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")
+});
 // app.commandLine.appendSwitch("js-flags", '--max-old-space-size=4096');
 
 const jsonSchema = fs.readFileSync(path.join(__dirname,"upload.schema.json"), {"encoding": "utf-8"});

diff --git a/glimpse/renderer/public/imgs/capacitor.jpg b/glimpse/renderer/public/imgs/capacitor.jpg
diff --git a/glimpse/renderer/public/imgs/capacitor.png b/glimpse/renderer/public/imgs/capacitor.png
diff --git a/glimpse/renderer/src/ActionBar.js b/glimpse/renderer/src/ActionBar.js
@@ -161,7 +161,7 @@ const ActionBar = ({
 
    return (
       <>
-      <Box sx={{padding: 1, display: "flex", flexDirection: "row", justifyContent: "end"}}>
+      <Box sx={{padding: 0.5, display: "flex", flexDirection: "row", justifyContent: "end"}}>
          <ThemeProvider theme={theme}>
                <Stack direction="row" spacing={1} sx={{marginRight: "auto"}}>
                   <Button 

diff --git a/glimpse/renderer/src/Graph.js b/glimpse/renderer/src/Graph.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef} from "react";
+import { Box, Stack } from "@mui/material"
 import { Network } from "vis-network";
 import { DataSet } from "vis-data";
 import ActionBar from "./ActionBar";
@@ -16,13 +17,13 @@ const options = appConfig.graphOptions;
 * @returns {string}
 */
 const getTitle = (attributes) => {
-   let str = "";
+   const title = [];
 
    for (let [key, val] of Object.entries(attributes)) {
-      str += `${key}: ${val}\n`;
+      title.push(`${key}: ${val}`);
    }
 
-   return str;
+   return title.join("\n");
 }
 
 const getHtmlLabel = (id, attributes) => {
@@ -404,6 +405,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
                      "to": nodeID
                   }
                });
+
                return ({
                   "id": `${parent}-${nodeID}`,
                   "from": parent,
@@ -499,6 +501,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
          delete node.size;
          delete node.color;
          delete node.shape;
+         node.hidden = false;
          node.label = node.id;
 
          return node;
@@ -598,7 +601,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
          else if (node.group !== nodeType && !highlightedNodes.includes(node.id)) {
             node.size = 10;
             node.shape = "dot"
-            node.color = "rgba(200,200,200,0.5)";
+            node.color = "rgba(200, 200, 200, 0.5)";
             node.label = " ";
             return node;
          }
@@ -618,7 +621,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
       const edgesMap = data.edges.map((edge) => {
          if (edge.width !== 8) {
             edge.width = 0.15;
-            edge.color = "rgba(200,200,200,0.5)";
+            edge.color = "rgba(200, 200, 200, 0.5)";
          }
 
          return edge;
@@ -747,11 +750,11 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
     * @param {string} edgeType - The type of edges to hide like: "overhead_line" 
     */
    const hideEdges = (edgeType) => {
-      const edgesToHide = data.edges.get().map(e => {
-         if (e.id.includes(edgeType)) {
-            e.hidden = true;
+      const edgesToHide = data.edges.get().map((edge) => {
+         if (edge.type === edgeType) {
+            edge.hidden = true;
          }
-         return e;
+         return edge;
       });
       data.edges.update(edgesToHide);
    }
@@ -765,8 +768,8 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
       if (contextMenuData !== null) {
          setContextMenuData({
             ...contextMenuData,
-            "mouseX": e.pageX + 2,
-            "mouseY": e.pageY + 6
+            "mouseX": e.clientX + 2,
+            "mouseY": e.clientY + 6
          });
       }
       else {
@@ -780,6 +783,8 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
     * @param {string} type - "node" or "edge"
     */
    const hideObjects = (objectType, type) => {
+
+      console.log(objectType, type);
       if (type === "node") {
          const nodesToHide = data.nodes.get().map( node => {
             if (node.group === objectType) {
@@ -791,7 +796,7 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
       }
       else if (type === "edge") {
          const edgesToHide = data.edges.get().map( edge => {
-            if (edge.id.includes(objectType)) {
+            if (edge.type === objectType) {
                edge.hidden = true;
             }
             return edge;
@@ -906,17 +911,11 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
 
       if (updateDataStream.elementType === "node") {
          const node = data.nodes.get(updateDataStream.id);
-         node.size = updateDataStream.new_size;
-         node.color = updateDataStream.color;
-
-         data.nodes.update(node);
+         data.nodes.update({...node, ...updateDataStream.updates});
       }
       else {
          const edge = data.edges.get(updateDataStream.id);
-         edge.color = updateDataStream.color;
-         edge.width = updateDataStream.width;
-
-         data.edges.update(edge);
+         data.edges.update({...edge, ...updateDataStream.updates});
       }
    });
    window.glimpseAPI.onShowAttributes(showAttributes);
@@ -960,8 +959,6 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
          });
 
          glmNetwork.once("stabilizationIterationsDone", () => {
-            glmNetwork.setOptions({"edges": {"hidden": false}})
-
             /* Once stabilization is done the circular progress with display 100% for half a second then hide */
             document.getElementById("circularProgress").style.background = "conic-gradient(#b25a00 360deg, #333 0deg)";
             document.getElementById("progressValue").innerText = "100%";
@@ -1019,34 +1016,37 @@ const Graph = ({ dataToVis, theme, isGlm }) => {
             onClose = {closePopUp}
          />
 
-         <div id="networks-wrapper">
-         <div
-            id="graph"
-            className="main-network"
-            onContextMenu={handleContextmenu}
-            ref={container}
-         />
+         <div id="circularProgress">
+            <span id="progressValue">0%</span>
+         </div>
 
          <EdgeContextMenu
             onMount = {onContextMenuChildMount} 
             hideEdge = {hideEdge}
             hideEdges = {hideEdges}
          />
 
-         <div id="circularProgress">
-            <span id="progressValue">0%</span>
-         </div>
-
-         <Legend 
-            findGroup = {HighlightGroup} 
-            findEdges = {HighlightEdges}
-            hideObjects={hideObjects}
-            legendData = {getLegendData(objectTypeCount)}
-            onMount={legendMount}
-            setShowLegendRef={toggleLegendRef}
-            legendStateRef={showLegendStateRef}
-         />
-         </div>
+         <Box component={"div"} sx={{"width":"100%", "height": "calc(100vh - 7rem)"}}>
+         <Stack sx={{"height":"100%", "width": "100%", "borderTop": "1px solid lightgrey"}} direction={"row"}>
+            <Box
+               id="graph"
+               component={"div"}
+               sx={{"width": "70%","height": "100%"}} 
+               ref={container}
+               onContextMenu={handleContextmenu}
+            />
+
+            <Legend 
+               findGroup = {HighlightGroup} 
+               findEdges = {HighlightEdges}
+               hideObjects={hideObjects}
+               legendData = {getLegendData(objectTypeCount)}
+               onMount={legendMount}
+               setShowLegendRef={toggleLegendRef}
+               legendStateRef={showLegendStateRef}
+            />
+         </Stack>
+         </Box>
       </>
    );
 }

diff --git a/glimpse/renderer/src/Legend.js b/glimpse/renderer/src/Legend.js
@@ -1,5 +1,6 @@
-import { Network } from "vis-network";
 import React, { useEffect, useRef, useState} from "react";
+import { Network } from "vis-network";
+import { Box } from "@mui/material";
 import LegendContextMenu from "./LegendContextMenu";
 import "./styles/vis-network.css";
 import "./styles/Legend.css";
@@ -43,8 +44,8 @@ const Legend = ({
       if (contextMenuData !== null) {
          setContextMenuData({
             ...contextMenuData,
-            mouseX: e.pageX + 2,
-            mouseY: e.pageY + 6,
+            mouseX: e.clientX + 2,
+            mouseY: e.clientY + 6,
          });
       }
       else {
@@ -86,11 +87,12 @@ const Legend = ({
 
    return (
       <>
-         <div
-            className="visLegend"
+         <Box
+            component={"div"}
+            sx={{"height": "100%", "width": "30%"}}
             ref={container}
             onContextMenu={handleContext}
-         />
+            />
 
          <LegendContextMenu
             onMount={onContextMenuChildMount}

diff --git a/glimpse/renderer/src/NodePopup.js b/glimpse/renderer/src/NodePopup.js
@@ -7,6 +7,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
+import Stack from "@mui/material/Stack";
 
 const NodePopup = ({onMount, onSave, onClose}) => {
    const [open, setOpen] = useState(false);
@@ -33,15 +34,17 @@ const NodePopup = ({onMount, onSave, onClose}) => {
       >
          <DialogTitle id="scroll-dialog-title">Edit Node</DialogTitle>
          <DialogContent dividers>
+         <Stack direction="row" justifyContent="center" spacing={1} useFlexGap flexWrap="wrap">
          {selectedNode.attributes &&
             Object.entries(selectedNode.attributes).map(([key, val], index) => {
                return(
-                  <TextField sx={{mt: 1, ml: 5.5}} key={index} label={key} defaultValue={val} onChange={(e) => { 
+                  <TextField key={index} label={key} defaultValue={val} onChange={(e) => { 
                      setSelectedNode({...selectedNode, attributes: {...selectedNode.attributes, [key]: e.target.value}}) 
                   }}/>
                );
             }) 
          }
+         </Stack>
          </DialogContent>
          <DialogActions>
             <Button onClick={saveChanges}>Save</Button>

diff --git a/glimpse/renderer/src/StatsTableModal.js b/glimpse/renderer/src/StatsTableModal.js
@@ -11,8 +11,7 @@ import {
    TableBody,
 } from '@mui/material';
 
-const StatsTableModal = ({show, close, data}) =>
-{
+const StatsTableModal = ({show, close, data}) => {
    if (!show) return null;
 
    return ReactDom.createPortal(

diff --git a/glimpse/renderer/src/styles/FileUpload.css b/glimpse/renderer/src/styles/FileUpload.css
@@ -28,6 +28,7 @@
   border-style: dashed;
   border-color: #cbd5e1;
   background-color: #f8fafc;
+  cursor: pointer;
 }
 
 #label-file-upload.drag-active {

diff --git a/glimpse/renderer/src/styles/Graph.css b/glimpse/renderer/src/styles/Graph.css
@@ -1,13 +1,12 @@
 #networks-wrapper {
-  display: block;
+  display: inline-block;
   width: 100%;
-  height: calc(100vh - 7.5rem);
+  height: calc(100vh - 7rem);
 }
 
 .main-network {
-  display: inline-block;
-  border: 1px solid lightgrey;
-  border-radius: 5px;
+  border-top: 1px solid lightgrey;
+  /* border-radius: 5px; */
   width: 70%;
   height: 100%;
 }

diff --git a/glimpse/renderer/src/styles/Legend.css b/glimpse/renderer/src/styles/Legend.css
@@ -1,8 +1,7 @@
 .visLegend {
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
-   border: 1px solid lightgrey;
-   border-radius: 5px;
-   display: inline-block;
+   /* border: 1px solid lightgrey; */
+   /* border-radius: 5px; */
    width: 30%;
    height: 100%;
 }