New Theme Builder with v0.3.0

pnnl · Aug 1, 2024 · 78b6efd · 78b6efd
1 parent 44612e9
commit 78b6efd
Show file tree

Hide file tree

Showing 72 changed files with 1,655 additions and 9,950 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# GLIMPSE (Grid Layout Interface for Model Preview and System Exploration)
+# GLIMPSE (Grid Layout Interface for Model Preview and System Exploration) v0.3.0 ✨
 
-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.
+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, Electron.js, Node.js, and Python.
 
 ## Build Instructions
 **Download Node and Nim** 
 - [Node.js](https://nodejs.org/en)
-- [Nim](https://nim-lang.org/install.html)
+- [Nim](https://nim-lang.org/install.html) (Only if planning to export glm files updated with GLIMPSE tool)
 
 ```
 git clone http://github.com/pnnl/GLIMPSE
@@ -42,7 +42,7 @@ npm run start
 ### Example:
 We provide few examples of exploring starndard IEEE bus models using GLIMPSE. From the home page, upload all the ".glm" files from `data/123-bus-model`.
 
-**To re-uplaod files after visualization, click on the HOME button, press `ctrl + R`, or click `view` then `reload`**
+**To re-uplaod files after visualization, click on the HOME button**
 
 ![image](https://github.com/pnnl/glm_viz/assets/4779453/5c74d781-6491-49a9-afec-7fcf13a2ba56)
 

diff --git a/glimpse/.gitignore b/glimpse/.gitignore
@@ -29,5 +29,6 @@ yarn-debug.log*
 yarn-error.log*
 package-lock.json
 
-#jar
-/backend/jar/uber-STM-1.4-SNAPSHOT.jar
+/jar
+/metrics
+/jar/uber-STM-1.4-SNAPSHOT.jar
diff --git a/glimpse/data/123-bus-model/PowerGridTheme.theme.json b/glimpse/data/123-bus-model/PowerGridTheme.theme.json
@@ -1,53 +1,20 @@
 {
    "groups": {
       "load": {
-         "size": 15,
-         "color": {
-            "border": "#20a4f3",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#20a4f3",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#20a4f3",
          "shape": "circularImage",
          "image": "./imgs/Load.svg"
       },
       "triplex_load": {
-         "size": 15,
-         "color": {
-            "border": "#ffea00",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#ffea00",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#ffea00",
          "shape": "circularImage",
          "image": "./imgs/Load.svg"
       },
       "capacitor": {
-         "size": 15,
-         "color": {
-            "border": "#023047",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#023047",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#023047",
          "shape": "circularImage",
          "image": "./imgs/Capacitor.svg"
       },
@@ -57,36 +24,14 @@
          "shape": "dot"
       },
       "substation": {
-         "size": 15,
-         "color": {
-            "border": "#fca311",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#fca311",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#fca311",
          "shape": "circularImage",
          "image": "./imgs/substation.jpg"
       },
       "triplex_meter": {
-         "size": 15,
-         "color": {
-            "border": "#072ac8",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#072ac8",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#072ac8",
          "shape": "circularImage",
          "image": "./imgs/meter.jpg"
       },
@@ -96,87 +41,32 @@
          "shape": "dot"
       },
       "meter": {
-         "size": 15,
-         "color": {
-            "border": "#d90429",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#d90429",
-               "background": "#fff"
-            }
-         },
-         "shape": "circularImage", 
+         "size": 12,
+         "color": "#d90429",
+         "shape": "circularImage",
          "image": "./imgs/meter.jpg"
       },
       "inverter_dyn": {
-         "size": 15,
-         "color": {
-            "border": "#ffb703",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#ffb703",
-               "background": "#fff"
-            }
-         },
-         "shape": "circularImage", 
+         "size": 12,
+         "color": "#ffb703",
+         "shape": "circularImage",
          "image": "./imgs/Inverter.svg"
       },
       "diesel_dg": {
-         "size": 15,
-         "color": {
-            "border": "#fb8500",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#fb8500",
-               "background": "#fff"
-            }
-         },
-         "shape": "circularImage", 
+         "size": 12,
+         "color": "#fb8500",
+         "shape": "circularImage",
          "image": "./imgs/generator.svg"
       },
       "communication_node": {
-         "size": 15,
-         "color": {
-            "border": "#c1121f",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#c1121f",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#c1121f",
          "shape": "circularImage",
          "image": "./imgs/comm.jpg"
       },
       "microgrid": {
-         "size": 15,
-         "color": {
-            "border": "#6b9080",
-            "background": "#fff",
-            "hover": {
-               "border": "#000",
-               "background": "#fff"
-            },
-            "highlight": {
-               "border": "#6b9080",
-               "background": "#fff"
-            }
-         },
+         "size": 12,
+         "color": "#6b9080",
          "shape": "circularImage",
          "image": "./imgs/microgrid.svg"
       }
@@ -187,23 +77,23 @@
          "color": "#000000"
       },
       "switch": {
-         "width": 2, 
+         "width": 2,
          "color": "#3a0ca3"
       },
       "series_reactor": {
-         "width": 2, 
+         "width": 2,
          "color": "#3c1642"
       },
       "triplex_line": {
-         "width": 2, 
+         "width": 2,
          "color": "#c86bfa"
       },
       "underground_line": {
-         "width": 2, 
+         "width": 2,
          "color": "#FFFF00"
       },
       "regulator": {
-         "width": 2, 
+         "width": 2,
          "color": "#ff447d"
       },
       "transformer": {
@@ -212,18 +102,22 @@
       },
       "parentChild": {
          "width": 2,
-         "color": {"inherit": true}
+         "color": {
+            "inherit": true
+         }
       },
       "mapping": {
-         "width": 0.15, 
+         "width": 0.30,
          "color": "lightgrey"
       },
       "communication": {
-         "width": 1, 
-         "color": {"inherit": false}
+         "width": 2,
+         "color": {
+            "inherit": false
+         }
       },
       "microgrid_connection": {
-         "width": 0.15, 
+         "width": 0.30,
          "color": "cyan"
       }
    }

diff --git a/glimpse/themes/FishingTheme.json → ...ata/demo_examples/FishingTheme.theme.json b/glimpse/themes/FishingTheme.json → ...ata/demo_examples/FishingTheme.theme.json
diff --git a/glimpse/themes/LevelTheme.json → .../data/demo_examples/LevelTheme.theme.json b/glimpse/themes/LevelTheme.json → .../data/demo_examples/LevelTheme.theme.json
diff --git a/glimpse/themes/SocialTheme.json → ...data/demo_examples/SocialTheme.theme.json b/glimpse/themes/SocialTheme.json → ...data/demo_examples/SocialTheme.theme.json
diff --git a/glimpse/data/demo_examples/custom.theme.json b/glimpse/data/demo_examples/custom.theme.json
@@ -1,31 +1,42 @@
 {
    "groups": {
       "R": {
-         "color": "#F00",
-         "shape": "star"
+         "color": "#FF0000",
+         "shape": "star",
+         "size": 5
       },
       "G": {
-         "color": "#0F0",
-         "shape": "dot"
-         },
-         "B": {
-            "color": "#00F",
-            "shape": "dot"
+         "color": "#00FF00",
+         "shape": "dot",
+         "size": 5
+      },
+      "B": {
+         "color": "#0000FF",
+         "shape": "dot",
+         "size": 5
       }
    },
    "edgeOptions": {
       "M": {
-         "color": "#F0F",
-         "dashes": [5, 5, 3, 3],
+         "color": "#FF00FF",
+         "dashes": [
+            5,
+            5,
+            3,
+            3
+         ],
          "width": 3
       },
       "Y": {
-         "color": "#FF0",
-         "dashes": [3, 3],
+         "color": "#FFFF00",
+         "dashes": [
+            3,
+            3
+         ],
          "width": 5
       },
       "C": {
-         "color": "#0FF",
+         "color": "#00FFFF",
          "dashes": false,
          "width": 1
       }

diff --git a/glimpse/electron-builder.yml b/glimpse/electron-builder.yml
@@ -0,0 +1,22 @@
+appId: com.github.pnnl.GLIMPSE
+win:
+   target:
+      - target: nsis
+        arch:
+           - x64
+           - ia32
+
+asar: true
+
+extraResources:
+   - ./themes/**
+   - ./data/**
+   - ./config/**
+
+nsis:
+   oneClick: false
+   allowToChangeInstallationDirectory: true
+# mac:
+#    target:
+#       - target: dmg
+#         arch: univeral
diff --git a/glimpse/jar/desc.txt b/glimpse/jar/desc.txt