From af5becb52ef96264f8bf8b66876e6095a9c701f1 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Wed, 4 Dec 2024 20:53:00 -0500
Subject: [PATCH] tweaks; better 'VisualOverview' building (#799)

---
 ui100/src/Visualizer.tsx      |  2 +-
 ui100/src/model/visualizer.ts | 25 ++++++++++++++-----------
 ui100/src/react-flow.css      |  1 +
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx
index 6db04585..e1a8038e 100644
--- 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
index dc0e1654..1ca70533 100644
--- 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
index 8d1af30f..cd6564d3 100644
--- 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;
 }