Add some styling

Author: MasloMaslane

example_graphs/run.json

@@ -805,62 +805,62 @@
         {
             "type": "script",
             "name": "Check results for abc0a",
-            "reactive": true,
+            "reactive": false,
             "input_registers": [6],
             "output_registers": [11],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Check results for abc0b",
-            "reactive": true,
+            "reactive": false,
             "input_registers": [7],
             "output_registers": [12],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Check results for abc1a",
-            "reactive": true,
+            "reactive": false,
             "input_registers": [8],
             "output_registers": [13],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Check results for abc1b",
-            "reactive": true,
+            "reactive": false,
             "input_registers": [9],
             "output_registers": [14],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Check results for abc2a",
-            "reactive": true,
+            "reactive": false,
             "input_registers": [10],
             "output_registers": [15],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Grade group 0",
-            "reactive": false,
+            "reactive": true,
             "input_registers": [11, 12],
             "output_registers": [16],
             "script": "<PLACEHOLDER>"
         },
         {
             "type": "script",
             "name": "Grade group 1",
-            "reactive": false,
+            "reactive": true,
             "input_registers": [13, 14],
             "output_registers": [17]
         },
         {
             "type": "script",
             "name": "Grade group 2",
-            "reactive": false,
+            "reactive": true,
             "input_registers": [15],
             "output_registers": [18],
             "script": "<PLACEHOLDER>"

src/sio3pack/visualizer/__init__.py

@@ -55,8 +55,11 @@ def main():
                     "id": id,
                     "label": task.get("name", f"Script {script_i}"),
                     "info": task
-                }
+                },
+                "classes": "script"
             })
+            if task["reactive"]:
+                elements[-1]["classes"] += " reactive"
             script_i += 1
             for register in task["input_registers"]:
                 if register not in ins:
@@ -69,8 +72,11 @@ def main():
                     "id": id,
                     "label": task.get("name", f"Execution {execution_i}"),
                     "info": task
-                }
+                },
+                "classes": "execution"
             })
+            if task["exclusive"]:
+                elements[-1]["classes"] += " exclusive"
 
             # To delete, final spec is different
             if "input_register" in task:
@@ -160,6 +166,18 @@ def main():
                     {"selector": ".register", "style": {
                         "shape": "rectangle",
                     }},
+                    {"selector": ".script", "style": {
+                       "shape": "roundrectangle",
+                    }},
+                    {"selector": ".execution", "style": {
+                        "shape": "ellipse",
+                    }},
+                    {"selector": ".reactive", "style": {
+                        "background-color": "#ff851b",
+                    }},
+                    {"selector": ".exclusive", "style": {
+                        "background-color": "#ff4136",
+                    }},
                 ],
             ),
         ], style={"flex": "3", "height": "100vh"}),