account added to network graph; rounded rectangles (#107)

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>

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}
         />
     )
 }

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

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;
+}

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;