back to react flow (for now)

ui/package-lock.json

@@ -13,9 +13,11 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "dagre": "^0.8.5",
         "react": "^18.2.0",
         "react-data-table-component": "^7.5.2",
         "react-dom": "^18.2.0",
+        "react-flow-renderer": "^10.3.12",
         "react-force-graph-2d": "^1.23.10",
         "react-scripts": "5.0.1",
         "styled-components": "^5.3.5",
@@ -5589,6 +5591,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classcat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.3.tgz",
+      "integrity": "sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -6503,6 +6510,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -8770,6 +8786,14 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -14629,6 +14653,26 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-flow-renderer": {
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.12.tgz",
+      "integrity": "sha512-DTaz4HV0rA/qtvY80fjdb/QwIvtZEhqCQ2iAqfzFH08RjWCrLmESX4Nc400EB3CGcCK8/pDn/ta4cOS3udunTw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^3.7.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "16 || 17 || 18",
+        "react-dom": "16 || 17 || 18"
+      }
+    },
     "node_modules/react-force-graph-2d": {
       "version": "1.23.10",
       "resolved": "https://registry.npmjs.org/react-force-graph-2d/-/react-force-graph-2d-1.23.10.tgz",
@@ -16424,6 +16468,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -17445,6 +17502,22 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
     }
   },
   "dependencies": {
@@ -21385,6 +21458,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classcat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.3.tgz",
+      "integrity": "sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -22044,6 +22122,15 @@
         "d3-transition": "2 - 3"
       }
     },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -23708,6 +23795,14 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -27775,6 +27870,19 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-flow-renderer": {
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.12.tgz",
+      "integrity": "sha512-DTaz4HV0rA/qtvY80fjdb/QwIvtZEhqCQ2iAqfzFH08RjWCrLmESX4Nc400EB3CGcCK8/pDn/ta4cOS3udunTw==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^3.7.2"
+      }
+    },
     "react-force-graph-2d": {
       "version": "1.23.10",
       "resolved": "https://registry.npmjs.org/react-force-graph-2d/-/react-force-graph-2d-1.23.10.tgz",
@@ -29104,6 +29212,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -29884,6 +29998,12 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "requires": {}
     }
   }
 }

ui/package.json

@@ -8,9 +8,11 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "dagre": "^0.8.5",
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.2",
     "react-dom": "^18.2.0",
+    "react-flow-renderer": "^10.3.12",
     "react-force-graph-2d": "^1.23.10",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",

ui/src/Network.js

@@ -1,23 +1,19 @@
 import * as metadata from './api/metadata';
 import {useEffect, useLayoutEffect, useRef, useState} from "react";
-import ForceGraph2D from 'react-force-graph-2d';
+import ReactFlow, {isNode, useNodesState} from "react-flow-renderer";
-
+import dagre from 'dagre';
-let g1 = {}
 
 const Network = (props) => {
-    const ref = useRef();
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
-    const [graph, setGraph] = useState({nodes: [], links: []})
+    const [edges, setEdges] = useState([]);
 
     useEffect(() => {
         let mounted = true
-        let g1 = graph
         let interval = setInterval(() => {
             metadata.overview().then(resp => {
                 let g = buildGraph(resp.data)
-                if(!compareGraphs(g, g1)) {
+                setNodes(getLayout(g))
-                    setGraph(g)
+                setEdges(g.edges)
-                    g1 = g
-                }
             })
         }, 1000)
         return () => {
@@ -29,34 +25,10 @@ const Network = (props) => {
     return (
         <div className={"network"}>
             <h1>Network</h1>
-            <ForceGraph2D
+            <ReactFlow
-                ref={ref}
+                nodes={nodes}
-                width={1024}
+                edges={edges}
-                height={300}
+                onNodesChange={onNodesChange}
-                graphData={graph}
-                nodeDefaultSize={[100, 50]}
-                nodeCanvasObject={(node, ctx, globalScale) => {
-                    const label = node.name;
-                    const fontSize = 12/globalScale;
-                    ctx.font = `${fontSize}px JetBrains Mono`;
-                    const textWidth = ctx.measureText(label).width;
-                    const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 2.2); // some padding
-
-                    ctx.fillStyle = '#3b2693';
-                    ctx.strokeStyle = '#3b2693'
-                    ctx.lineWidth = 0.5
-                    ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
-
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.fillStyle = 'white';
-                    ctx.fillText(label, node.x, node.y);
-
-                    node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
-                }}
-                onEngineStop={() => {
-                    ref.current.zoomToFit(200);
-                }}
             />
         </div>
     )
@@ -65,24 +37,34 @@ const Network = (props) => {
 function buildGraph(overview) {
     let out = {
         nodes: [],
-        links: []
+        edges: []
     }
+    let id = 1
     overview.forEach((item) => {
+        let envId = id
         out.nodes.push({
-            id: item.environment.zitiIdentityId,
+            id: '' + envId,
-            name: 'Environment: ' + item.environment.zitiIdentityId
+            data: {label: 'Environment: ' + item.environment.zitiIdentityId},
+            position: {x: (id * 25), y: 0},
+            draggable: true
         });
+        id++
         if(item.services != null) {
-            item.services.forEach((svc) => {
+            item.services.forEach((item) => {
-                if(svc.active) {
+                if(item.active) {
                     out.nodes.push({
-                        id: svc.zitiServiceId,
+                        id: '' + id,
-                        name: 'Service: ' + svc.zitiServiceId
+                        data: {label: 'Service: ' + item.zitiServiceId},
+                        position: {x: (id * 25), y: 0},
+                        draggable: true
                     })
-                    out.links.push({
+                    out.edges.push({
-                        source: item.environment.zitiIdentityId,
+                        id: 'e' + envId + '-' + id,
-                        target: svc.zitiServiceId
+                        source: '' + envId,
+                        target: '' + id,
+                        animated: true
                     })
+                    id++
                 }
             });
         }
@@ -90,18 +72,33 @@ function buildGraph(overview) {
     return out
 }
 
-function compareGraphs(g, g1) {
+const nodeWidth = 215;
-    if(g.nodes.length !== g1.nodes.length) return false;
+const nodeHeight = 75;
-    for(let i = 0; i < g.nodes.length; i++) {
+
-        if(!compareNodes(g.nodes[i], g1.nodes[i])) return false;
+function getLayout(overview) {
-    }
+    const dagreGraph = new dagre.graphlib.Graph();
-    return true
+    dagreGraph.setGraph({ rankdir: 'TB' });
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    overview.nodes.forEach((n) => {
+        dagreGraph.setNode(n.id, { width: nodeWidth, height: nodeHeight });
+    })
+    overview.edges.forEach((e) => {
+        dagreGraph.setEdge(e.source, e.target);
+    })
+    dagre.layout(dagreGraph);
+
+    return overview.nodes.map((n) => {
+        const nodeWithPosition = dagreGraph.node(n.id);
+        n.targetPosition = 'top';
+        n.sourcePosition = 'bottom';
+        n.position = {
+            x: nodeWithPosition.x - (nodeWidth / 2) + (Math.random() / 1000) + 50,
+            y: nodeWithPosition.y - (nodeHeight / 2) + 50,
+        }
+        return n;
+    });
 }
 
-function compareNodes(n, n1) {
-    if(n.id !== n1.id) return false;
-    if(n.name !== n1.name) return false;
-    return true;
-}
 
 export default Network;

ui/src/index.css

@@ -118,3 +118,7 @@ h1, h2, h3, h4, h5, h6 {
 .network {
   height: 400px;
 }
+
+.react-flow__attribution {
+  display: none;
+}