From dcf662ebffaa3f9f90b64f6db55b76dc59b4f4ae Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Thu, 22 Dec 2022 11:40:44 -0500
Subject: [PATCH] account added to network graph; rounded rectangles (#107)

---
 ui/src/console/Console.js               |  2 +-
 ui/src/console/visualizer/Network.js    | 26 +++++++++++++++++++------
 ui/src/console/visualizer/Visualizer.js |  2 +-
 ui/src/console/visualizer/draw.js       | 12 ++++++++++++
 ui/src/console/visualizer/graph.js      | 15 +++++++++++++-
 5 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/console/visualizer/draw.js

diff --git a/ui/src/console/Console.js b/ui/src/console/Console.js
index 8679de1b..6282d891 100644
--- a/ui/src/console/Console.js
+++ b/ui/src/console/Console.js
@@ -60,7 +60,7 @@ const Console = (props) => {
                     </Navbar.Collapse>
                 </Container>
             </Navbar>
-            <Visualizer overview={overview} />
+            <Visualizer user={props.user} overview={overview} />
             <Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} />
             <Version show={showVersionModal} onHide={closeVersionModal} />
         </Container>
diff --git a/ui/src/console/visualizer/Network.js b/ui/src/console/visualizer/Network.js
index 417fae47..768b1119 100644
--- a/ui/src/console/visualizer/Network.js
+++ b/ui/src/console/visualizer/Network.js
@@ -2,6 +2,7 @@ import {withSize} from "react-sizeme";
 import {useEffect, useRef} from "react";
 import {ForceGraph2D} from "react-force-graph";
 import * as d3 from "d3-force-3d";
+import {roundRect} from "./draw";
 
 const Network = (props) => {
     const targetRef = useRef();
@@ -11,15 +12,19 @@ const Network = (props) => {
 
     useEffect(() => {
         const fg = targetRef.current;
-        fg.d3Force('collide', d3.forceCollide().radius(30));
+        fg.d3Force('collide', d3.forceCollide().radius(35));
     }, []);
 
     const paintNode = (node, ctx) => {
-        let nodeColor = "#777";
+        let nodeColor = "#555";
         let textColor = "white";
         switch(node.type) {
+            case "environment":
+                nodeColor = "#777";
+                textColor = "black";
+                break;
             case "service":
-                nodeColor = "#7e67e2";
+                nodeColor = "#291A66";
                 break;
         }
 
@@ -27,10 +32,17 @@ const Network = (props) => {
         ctx.textAlign = "center";
         ctx.font = "6px 'JetBrains Mono'";
         let extents = ctx.measureText(node.label);
-        let nodeWidth = extents.width + 5;
+        let nodeWidth = extents.width + 10;
 
         ctx.fillStyle = nodeColor;
-        ctx.fillRect(node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14);
+        roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
+        ctx.fill();
+
+        switch(node.type) {
+            case "service":
+                ctx.strokeStyle = "#433482";
+                ctx.stroke();
+        }
 
         ctx.fillStyle = textColor;
         ctx.fillText(node.label, node.x, node.y);
@@ -51,7 +63,9 @@ const Network = (props) => {
             linkWidth={1.5}
             nodeCanvasObject={paintNode}
             backgroundColor={"#3b2693"}
-            cooldownTicks={100}
+            cooldownTicks={300}
+            d3VelocityDecay={0.3}
+            d3AlphaDecay={0.0128}
         />
     )
 }
diff --git a/ui/src/console/visualizer/Visualizer.js b/ui/src/console/visualizer/Visualizer.js
index 2181aa86..c2914555 100644
--- a/ui/src/console/visualizer/Visualizer.js
+++ b/ui/src/console/visualizer/Visualizer.js
@@ -7,7 +7,7 @@ const Visualizer = (props) => {
     const [networkGraph, setNetworkGraph] = useState({nodes: [], links: []});
 
     useEffect(() => {
-        setNetworkGraph(mergeGraph(networkGraph, props.overview));
+        setNetworkGraph(mergeGraph(networkGraph, props.user, props.overview));
     }, [props]);
 
     // fgRef to access force graph controls from this component
diff --git a/ui/src/console/visualizer/draw.js b/ui/src/console/visualizer/draw.js
new file mode 100644
index 00000000..5a7d80b1
--- /dev/null
+++ b/ui/src/console/visualizer/draw.js
@@ -0,0 +1,12 @@
+export const roundRect = (ctx, x, y, w, h, r) => {
+    if (w < 2 * r) r = w / 2;
+    if (h < 2 * r) r = h / 2;
+    ctx.beginPath();
+    ctx.moveTo(x+r, y);
+    ctx.arcTo(x+w, y,   x+w, y+h, r);
+    ctx.arcTo(x+w, y+h, x,   y+h, r);
+    ctx.arcTo(x,   y+h, x,   y,   r);
+    ctx.arcTo(x,   y,   x+w, y,   r);
+    ctx.closePath();
+    return this;
+}
\ No newline at end of file
diff --git a/ui/src/console/visualizer/graph.js b/ui/src/console/visualizer/graph.js
index 74f1a88f..5f9fa1ca 100644
--- a/ui/src/console/visualizer/graph.js
+++ b/ui/src/console/visualizer/graph.js
@@ -15,11 +15,19 @@ const nodesEqual = (a, b) => {
     return a.every((e, i) => e.id === b[i].id);
 }
 
-export const mergeGraph = (oldGraph, newOverview) => {
+export const mergeGraph = (oldGraph, user, newOverview) => {
     let newGraph = {
         nodes: [],
         links: []
     }
+
+    let accountNode = {
+        id: user.token,
+        label: user.email,
+        type: "account"
+    }
+    newGraph.nodes.push(accountNode);
+
     newOverview.forEach(env => {
         let envNode = {
             id: env.environment.zId,
@@ -27,6 +35,11 @@ export const mergeGraph = (oldGraph, newOverview) => {
             type: "environment"
         };
         newGraph.nodes.push(envNode);
+        newGraph.links.push({
+            target: accountNode.id,
+            source: envNode.id,
+            color: "#777"
+        });
         if(env.services) {
             env.services.forEach(svc => {
                 let svcLabel = svc.token;