tweaks; better 'VisualOverview' building (#799)

openziti · Dec 5, 2024 · af5becb · af5becb
1 parent 3df2924
commit af5becb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx
@@ -51,7 +51,7 @@ const Visualizer = ({ overview }: VisualizerProps) => {
             nodesDraggable={false}
         >
             <Background/>
-            <Controls />
+            <Controls position="bottom-right" orientation="horizontal" />
         </ReactFlow>
     );
 }

diff --git a/ui100/src/model/visualizer.ts b/ui100/src/model/visualizer.ts
@@ -9,21 +9,24 @@ export class VisualOverview {
 const buildVisualizerGraph = (overview: Overview): VisualOverview => {
     let out = new VisualOverview();
     out.nodes = [
-        { id: "1", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" } }
+        { id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" } }
     ];
     out.edges = [];
 
     overview.environments?.forEach((env, i) => {
-        out.nodes.push({
-            id: (i+2).toString(),
-            position: { x: 0, y: 0 },
-            data: { label: env.environment?.description! },
-        });
-        out.edges.push({
-            id: "e" + (i+2) + "-1",
-            source: "1",
-            target: (i+2).toString()
-        });
+        if(env.environment && env.environment.zId) {
+            out.nodes.push({
+                id: env.environment.zId,
+                position: { x: 0, y: 0 },
+                data: { label: env.environment?.description! },
+            });
+            out.edges.push({
+                id: env.environment.zId + "-0",
+                source: "0",
+                target: env.environment.zId
+            });
+
+        }
     })
 
     console.log(out);

diff --git a/ui100/src/react-flow.css b/ui100/src/react-flow.css
@@ -3,6 +3,7 @@
     font-size: 0.6em;
     color: white;
     border: 1px solid #241775;
+    border-radius: 10px;
     background-color: #241775;
     text-color: white;
 }