Skip to content

Commit

Permalink
new and improved UI
Browse files Browse the repository at this point in the history
  • Loading branch information
itsMando committed Jun 21, 2024
1 parent 64de6b2 commit 190cd90
Show file tree
Hide file tree
Showing 44 changed files with 1,320 additions and 430 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

## Dev Installation Instructions
## Build Installation Instructions
**Download Node and Nim**
- [Node.js](https://nodejs.org/en)
- [Nim](https://nim-lang.org/install.html)
Expand Down Expand Up @@ -43,7 +43,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, press `ctrl + R` or click `view` then `reload`**
**To re-uplaod files after visualization, click on the HOME button, press `ctrl + R`, or click `view` then `reload`**

![image](https://github.com/pnnl/glm_viz/assets/4779453/5c74d781-6491-49a9-afec-7fcf13a2ba56)

Expand Down
45 changes: 27 additions & 18 deletions glimpse/config/appConfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@
"showButton": false
},
"edges": {
"font": {"multi": true, "align": "horizontal"},
"font": {
"multi": true,
"align": "horizontal"
},
"smooth": {
"enabled": true,
"type": "continuous"
Expand All @@ -35,6 +38,9 @@
"nodes": {
"size": 15,
"borderWidth": 2,
"shapeProperties": {
"interpolation": false
},
"font": {
"color": "#000",
"multi": true,
Expand All @@ -51,11 +57,11 @@
"physics": {
"enabled": true,
"barnesHut": {
"gravitationalConstant": -10000,
"centralGravity": 0.2,
"springConstant": 0.5,
"springLength": 70,
"avoidOverlap": 0.4
"gravitationalConstant": -10000,
"centralGravity": 0.2,
"springConstant": 0.5,
"springLength": 70,
"avoidOverlap": 0.4
},
"forceAtlas2Based": {
"gravitationalConstant": -400,
Expand All @@ -64,19 +70,19 @@
"springConstant": 0.1
},
"repulsion": {
"centralGravity": 0.2,
"springLength": 200,
"springConstant": 0.05,
"nodeDistance": 100,
"damping": 0.09
"centralGravity": 0.2,
"springLength": 200,
"springConstant": 0.05,
"nodeDistance": 100,
"damping": 0.09
},
"hierarchicalRepulsion": {
"centralGravity": 0.1,
"springLength": 100,
"springConstant": 0.01,
"nodeDistance": 120,
"damping": 0.09,
"avoidOverlap": 0
"centralGravity": 0.1,
"springLength": 100,
"springConstant": 0.01,
"nodeDistance": 120,
"damping": 0.09,
"avoidOverlap": 0
},
"stabilization": {
"enabled": true,
Expand All @@ -88,7 +94,10 @@
"solver": "barnesHut",
"timestep": 0.25,
"adaptiveTimestep": false,
"wind": { "x": 0, "y": 0 }
"wind": {
"x": 0,
"y": 0
}
},
"layout": {
"improvedLayout": false,
Expand Down
230 changes: 230 additions & 0 deletions glimpse/data/123-bus-model/PowerGridTheme.theme.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
{
"groups": {
"load": {
"size": 15,
"color": {
"border": "#20a4f3",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#20a4f3",
"background": "#fff"
}
},
"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"
}
},
"shape": "circularImage",
"image": "./imgs/Load.svg"
},
"capacitor": {
"size": 15,
"color": {
"border": "#023047",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#023047",
"background": "#fff"
}
},
"shape": "circularImage",
"image": "./imgs/Capacitor.svg"
},
"triplex_node": {
"size": 4,
"color": "#219ebc",
"shape": "dot"
},
"substation": {
"size": 15,
"color": {
"border": "#fca311",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#fca311",
"background": "#fff"
}
},
"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"
}
},
"shape": "circularImage",
"image": "./imgs/meter.jpg"
},
"node": {
"size": 4,
"color": "#219ebc",
"shape": "dot"
},
"meter": {
"size": 15,
"color": {
"border": "#d90429",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#d90429",
"background": "#fff"
}
},
"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",
"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",
"image": "./imgs/generator.svg"
},
"communication_node": {
"size": 15,
"color": {
"border": "#c1121f",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#c1121f",
"background": "#fff"
}
},
"shape": "circularImage",
"image": "./imgs/comm.jpg"
},
"microgrid": {
"size": 15,
"color": {
"border": "#6b9080",
"background": "#fff",
"hover": {
"border": "#000",
"background": "#fff"
},
"highlight": {
"border": "#6b9080",
"background": "#fff"
}
},
"shape": "circularImage",
"image": "./imgs/microgrid.svg"
}
},
"edgeOptions": {
"overhead_line": {
"width": 2,
"color": "#000000"
},
"switch": {
"width": 2,
"color": "#3a0ca3"
},
"series_reactor": {
"width": 2,
"color": "#3c1642"
},
"triplex_line": {
"width": 2,
"color": "#c86bfa"
},
"underground_line": {
"width": 2,
"color": "#FFFF00"
},
"regulator": {
"width": 2,
"color": "#ff447d"
},
"transformer": {
"width": 2,
"color": "#00FF00"
},
"parentChild": {
"width": 2,
"color": {"inherit": true}
},
"mapping": {
"width": 0.15,
"color": "lightgrey"
},
"communication": {
"width": 1,
"color": {"inherit": false}
},
"microgrid_connection": {
"width": 0.15,
"color": "cyan"
}
}
}
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
clock {
};








object inverter {
name inv_pv_pv_6;
parent sx2000404a_pvmtr;
Expand Down
33 changes: 33 additions & 0 deletions glimpse/data/demo_examples/custom.theme.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"groups": {
"R": {
"color": "#F00",
"shape": "star"
},
"G": {
"color": "#0F0",
"shape": "dot"
},
"B": {
"color": "#00F",
"shape": "dot"
}
},
"edgeOptions": {
"M": {
"color": "#F0F",
"dashes": [5, 5, 3, 3],
"width": 3
},
"Y": {
"color": "#FF0",
"dashes": [3, 3],
"width": 5
},
"C": {
"color": "#0FF",
"dashes": false,
"width": 1
}
}
}
Loading

0 comments on commit 190cd90

Please sign in to comment.