support for accesses in visualizer (#799)

ui100/src/AccessNode.tsx

@@ -0,0 +1,17 @@
+import {Handle, Position} from "@xyflow/react";
+import {Grid2} from "@mui/material";
+import AccessIcon from "@mui/icons-material/Lan";
+
+const AccessNode = ({ data }) => {
+    return (
+        <>
+            <Handle type="target" position={Position.Top} />
+            <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                <Grid2 display="flex"><AccessIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
+                <Grid2 display="flex">{data.label}</Grid2>
+            </Grid2>
+        </>
+    );
+}
+
+export default AccessNode;

ui100/src/Visualizer.tsx

@@ -7,12 +7,18 @@ import {stratify, tree} from "d3-hierarchy";
 import ShareNode from "./ShareNode.tsx";
 import EnvironmentNode from "./EnvironmentNode.tsx";
 import AccountNode from "../AccountNode.tsx";
+import AccessNode from "./AccessNode.tsx";
 
 interface VisualizerProps {
     overview: VisualOverview;
 }
 
-const nodeTypes = { account: AccountNode, environment: EnvironmentNode, share: ShareNode };
+const nodeTypes = {
+    access: AccessNode,
+    account: AccountNode,
+    environment: EnvironmentNode,
+    share: ShareNode
+};
 
 const Visualizer = ({ overview }: VisualizerProps) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);

ui100/src/model/visualizer.ts

@@ -43,6 +43,22 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
                     });
                 });
             }
+            if(env.frontends) {
+                envNode.data.empty = false;
+                env.frontends.forEach(acc => {
+                    out.nodes.push({
+                        id: acc.token!,
+                        position: { x: 0, y: 0 },
+                        data: { label: acc.token! },
+                        type: "access",
+                    });
+                    out.edges.push({
+                        id: env.environment?.zId + "-" + acc.token!,
+                        source: env.environment?.zId!,
+                        target: acc.token!
+                    });
+                });
+            }
         }
     });