first round of custom nodes for visualizer (#799)

openziti · Dec 5, 2024 · 8582077 · 8582077
1 parent 9f2a335
commit 8582077
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 6 deletions.
diff --git a/ui100/AccountNode.tsx b/ui100/AccountNode.tsx
@@ -0,0 +1,17 @@
+import {Handle, Position} from "@xyflow/react";
+import {Grid2} from "@mui/material";
+import AccountIcon from "@mui/icons-material/Person4";
+
+const AccountNode = ({ data }) => {
+    return (
+        <>
+            <Handle type="source" position={Position.Bottom} />
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex"><AccountIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
+                <Grid2 display="flex">{data.label}</Grid2>
+            </Grid2>
+        </>
+    );
+}
+
+export default AccountNode;
diff --git a/ui100/src/EnvironmentNode.tsx b/ui100/src/EnvironmentNode.tsx
@@ -0,0 +1,22 @@
+import {Handle, Position} from "@xyflow/react";
+import {Grid2} from "@mui/material";
+import EnvironmentIcon from "@mui/icons-material/Computer";
+
+const EnvironmentNode = ({ data }) => {
+    let shareHandle = <Handle type="source" position={Position.Bottom} />;
+    if(data.empty) {
+        shareHandle = <></>;
+    }
+    return (
+        <>
+            <Handle type="target" position={Position.Top} />
+            {shareHandle}
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
+                <Grid2 display="flex">{data.label}</Grid2>
+            </Grid2>
+        </>
+    );
+}
+
+export default EnvironmentNode;
diff --git a/ui100/src/ShareNode.tsx b/ui100/src/ShareNode.tsx
@@ -0,0 +1,17 @@
+import {Handle, Position} from "@xyflow/react";
+import {Grid2} from "@mui/material";
+import ShareIcon from "@mui/icons-material/Share";
+
+const ShareNode = ({ data }) => {
+    return (
+        <>
+            <Handle type="target" position={Position.Top} />
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex"><ShareIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
+                <Grid2 display="flex">{data.label}</Grid2>
+            </Grid2>
+        </>
+    );
+}
+
+export default ShareNode;
diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx
@@ -4,11 +4,16 @@ import {Background, Controls, ReactFlow, ReactFlowProvider, useEdgesState, useNo
 import {VisualOverview} from "./model/visualizer.ts";
 import {useEffect} from "react";
 import {stratify, tree} from "d3-hierarchy";
+import ShareNode from "./ShareNode.tsx";
+import EnvironmentNode from "./EnvironmentNode.tsx";
+import AccountNode from "../AccountNode.tsx";
 
 interface VisualizerProps {
     overview: VisualOverview;
 }
 
+const nodeTypes = { account: AccountNode, environment: EnvironmentNode, share: ShareNode };
+
 const Visualizer = ({ overview }: VisualizerProps) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -43,6 +48,7 @@ const Visualizer = ({ overview }: VisualizerProps) => {
 
     return (
         <ReactFlow
+            nodeTypes={nodeTypes}
             nodes={nodes}
             edges={edges}
             onNodesChange={onNodesChange}

diff --git a/ui100/src/model/visualizer.ts b/ui100/src/model/visualizer.ts
@@ -1,6 +1,5 @@
 import {Overview} from "../api";
 import {Edge, Node} from "@xyflow/react";
-import ShareIcon from "@mui/icons-material/Share";
 
 export class VisualOverview {
     nodes: Node[];
@@ -10,7 +9,7 @@ export class VisualOverview {
 const buildVisualizerGraph = (overview: Overview): VisualOverview => {
     let out = new VisualOverview();
     out.nodes = [
-        { id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" }, type: "input" }
+        { id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" }, type: "account" }
     ];
     out.edges = [];
 
@@ -19,8 +18,8 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
             let envNode = {
                 id: env.environment.zId,
                 position: { x: 0, y: 0 },
-                data: { label: env.environment?.description! },
-                type: "output",
+                data: { label: env.environment?.description!, empty: true },
+                type: "environment",
             }
             out.nodes.push(envNode);
             out.edges.push({
@@ -29,13 +28,13 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
                 target: env.environment.zId
             });
             if(env.shares) {
-                envNode.type = "default";
+                envNode.data.empty = false;
                 env.shares.forEach(shr => {
                     out.nodes.push({
                         id: shr.token!,
                         position: { x: 0, y: 0 },
                         data: { label: shr.token! },
-                        type: "output",
+                        type: "share",
                     });
                     out.edges.push({
                         id: env.environment?.zId + "-" + shr.token!,