updated edge animations feature to be more stable

README.md

@@ -1,6 +1,6 @@
 ![NSD_2294_BRAND_HAGEN-GLIMPSE_final_color](https://github.com/user-attachments/assets/182d1235-eb30-4467-b880-aec3000e786f)
 
-# v0.4.1 ✨
+# v0.4.2 ✨
 
 GLIMPSE is a graph-based desktop 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, Electron.js, Node.js, and Python.
 

glimpse/config/appConfig.json

@@ -26,6 +26,10 @@
          "showButton": false
       },
       "edges": {
+         "scaling": {
+            "min": 5,
+            "max": 20
+         },
          "font": {
             "multi": true,
             "align": "horizontal"
@@ -45,6 +49,10 @@
             "color": "#000",
             "multi": true,
             "bold": "20px arial black"
+         },
+         "scaling": {
+            "min": 5,
+            "max": 75
          }
       },
       "interaction": {

glimpse/data/demo_examples/socialExample.json

@@ -1,5 +1,5 @@
 {
-   "objects":[
+   "objects": [
       {
          "objectType": "person",
          "elementType": "node",
@@ -58,7 +58,7 @@
       {
          "objectType": "location",
          "elementType": "node",
-         "attributes":{
+         "attributes": {
             "id": "LVIII",
             "event": "Super Bowl",
             "location": "Las Vegas"
@@ -67,7 +67,7 @@
       {
          "objectType": "location",
          "elementType": "node",
-         "attributes":{
+         "attributes": {
             "id": "PNNL1965",
             "location": "Richland WA",
             "locationName": "Pacific Northwest National Laboratory",
@@ -145,4 +145,4 @@
          }
       }
    ]
-}
+}

glimpse/local-server/server.py

@@ -30,7 +30,7 @@ def create_graph(data: dict, set_communities: bool=False) -> dict:
          GRAPH.add_edge(obj["attributes"]["from"], obj["attributes"]["to"], obj["attributes"]["id"])
 
    if set_communities : 
-      partition = nx.algorithms.community.louvain_communities(G=GRAPH, max_level=5)
+      partition = nx.algorithms.community.louvain_communities(G=GRAPH, resolution=1, max_level=5)
 
       community_ids = {node: community_id for community_id, community in enumerate(partition) for node in community}
 

glimpse/local-server/server.spec

@@ -20,6 +20,7 @@ a = Analysis(
     noarchive=False,
     optimize=0,
 )
+
 pyz = PYZ(a.pure)
 
 exe = EXE(
@@ -39,6 +40,7 @@ exe = EXE(
     codesign_identity=None,
     entitlements_file=None,
 )
+
 coll = COLLECT(
     exe,
     a.binaries,

glimpse/main.js

@@ -25,6 +25,7 @@ if (!app.isPackaged) {
 const jsonUploadSchema = require("./schemas/json_upload.schema.json");
 const themeUploadSchema = require("./schemas/theme_upload.schema.json");
 const socket = io("http://127.0.0.1:5051");
+// const socket2 = io("http://127.0.0.1:5051");
 const isMac = process.platform === "darwin";
 let mainWindow = null;
 let splashWindow = null;
@@ -133,6 +134,7 @@ const validateJson = (filePaths) => {
    const data = {};
    const nodeLinkDataKeys = ["directed", "multigraph", "graph", "nodes", "edges"];
    let valid = true;
+   // let edgesKeyName = null;
 
    for (const filePath of filePaths) {
       const fileData = JSON.parse(fs.readFileSync(filePath, { encoding: "utf-8" }));
@@ -143,8 +145,18 @@ const validateJson = (filePaths) => {
          };
 
          for (const node of fileData.nodes) {
+            let objectType = null;
+
+            if ("type" in node && typeof node.type === "object") {
+               objectType = node.type.join("-");
+            } else if ("type" in node) {
+               objectType = node.type;
+            } else {
+               objectType = "node";
+            }
+
             data[path.basename(filePath)].objects.push({
-               objectType: "type" in node ? node.type : "node",
+               objectType: objectType,
                elementType: "node",
                attributes: node,
             });
@@ -390,7 +402,7 @@ const initiateServer = () => {
 
    if (fs.existsSync(serverExecutablePath)) {
       try {
-         execFile(serverPath, (error, stdout, stderr) => {
+         execFile(serverExecutablePath, (error, stdout, stderr) => {
             if (error) throw error;
             if (stderr) throw stderr;
             console.log(stdout);

glimpse/package.json

@@ -1,6 +1,6 @@
 {
    "productName": "GLIMPSE",
-   "version": "0.4.1",
+   "version": "0.4.2",
    "main": "main.js",
    "description": "A lightweight graph-based power grid model visualization tool",
    "author": "Armando Mendoza Sanchez",

glimpse/renderer/public/index.html

@@ -10,6 +10,6 @@
 <body>
    <div id="root"></div>
    <div id="portal"></div>
-   <script src="../build/renderer.js"></script>
+   <script defer="defer" src="../build/renderer.js"></script>
 </body>
 </html>

glimpse/renderer/src/components/About.js

@@ -24,7 +24,7 @@ const About = ({ show, close }) => {
             </div>
             <DialogContent sx={{ maxWidth: "72rem", padding: "0 2rem" }}>
                <div className="about-title">
-                  <h1>GLIMPSE v0.4.1</h1>
+                  <h1>GLIMPSE v0.4.2</h1>
                   <h3>(Grid Layout Interface for Model Preview and System Exploration)</h3>
                </div>
                <div className="description">
@@ -95,10 +95,10 @@ const About = ({ show, close }) => {
                      </li>
                      <li>
                         Uploading larger models and larger networks will be clustered in to
-                        communities allowing for smoother visualization experience. Clicking on
-                        these clustered nodes will release all nodes in that cluster for further
-                        examination utilizing the tools highlighting, exploration, and modification
-                        features.
+                        communities allowing for smoother visualization experience. Right-clicking
+                        on these clustered nodes will give you the option to open the cluster. This
+                        will release all nodes in that cluster for further examination utilizing the
+                        tools highlighting, exploration, and modification features.
                      </li>
                      <li>
                         To upload multiple models or related files simply use the overlay upload
@@ -117,7 +117,8 @@ const About = ({ show, close }) => {
                         animate edge context menu item will remove the animation.
                      </li>
                      <li>
-                        {`Using GLIMPSE's local WebSocket API a key value pair such as {animation: true} can be supplied to an existing edge to show an animation of a small red circle following the edge's path.`}
+                        {`Using GLIMPSE's local WebSocket API a key value pair such as {animation: true} 
+                        can be supplied to an existing edge to show an animation of a small red circle following the edge's path.`}
                      </li>
                   </ul>
                </div>

glimpse/renderer/src/components/ContextMenu.js

@@ -9,6 +9,7 @@ const ContextMenu = ({
    openNewEdgeForm,
    deleteNode,
    createCluster,
+   openCluster,
    animateEdge,
    deleteEdge,
 }) => {
@@ -83,6 +84,11 @@ const ContextMenu = ({
       setContextMenu(null);
    };
 
+   const handleOpenCluster = () => {
+      openCluster(contextMenu.clusterNodeID);
+      setContextMenu(null);
+   };
+
    const EdgeMenuItems = () => {
       return (
          <>
@@ -115,6 +121,11 @@ const ContextMenu = ({
                   Cluster
                </MenuItem>
             )}
+            {"clusterNodeID" in contextMenu && (
+               <MenuItem key={"open-cluster"} onClick={handleOpenCluster}>
+                  Open Cluster
+               </MenuItem>
+            )}
          </>
       );
    };
@@ -131,7 +142,7 @@ const ContextMenu = ({
                : { top: 0, left: 0 }
          }
       >
-         {"nodeID" in contextMenu ? (
+         {"nodeID" in contextMenu || "clusterNodeID" in contextMenu ? (
             <NodeMenuItems />
          ) : "edgeID" in contextMenu ? (
             <EdgeMenuItems />