src/visualProgrammingUI/VisProgUI.css

@@ -1,6 +1,6 @@
 .default-node {
     padding: 10px 15px;
-    background-color: white;
+    background-color: canvas;
     border-radius: 5pt;
     outline: black solid 2pt;
     filter: drop-shadow(0 0 0.75rem black);
@@ -8,7 +8,7 @@
 
 .default-node__norm {
     padding: 10px 15px;
-    background-color: white;
+    background-color: canvas;
     border-radius: 5pt;
     outline: forestgreen solid 2pt;
     filter: drop-shadow(0 0 0.25rem forestgreen);
@@ -16,7 +16,7 @@
 
 .default-node__phase {
     padding: 10px 15px;
-    background-color: white;
+    background-color: canvas;
     border-radius: 5pt;
     outline: dodgerblue solid 2pt;
     filter: drop-shadow(0 0 0.25rem dodgerblue);
@@ -24,7 +24,7 @@
 
 .default-node__start {
     padding: 10px 15px;
-    background-color: white;
+    background-color: canvas;
     border-radius: 5pt;
     outline: orange solid 2pt;
     filter: drop-shadow(0 0 0.25rem orange);
@@ -32,7 +32,7 @@
 
 .default-node__end {
     padding: 10px 15px;
-    background-color: white;
+    background-color: canvas;
     border-radius: 5pt;
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);

src/visualProgrammingUI/VisProgUI.tsx

@@ -13,6 +13,7 @@ import {
     useEdgesState,
     reconnectEdge,
     addEdge,
+    MiniMap,
     MarkerType,
     type Edge,
     type Connection,
@@ -110,6 +111,7 @@ const VisProgUI = ()=>  {
                     proOptions={{hideAttribution: true }}
                 >
                     <Controls />
+                    <MiniMap />
                     <Background />
                 </ReactFlow>
             </div>