working access->share edges (#799)

ui100/src/AccessEdge.tsx

@@ -0,0 +1,10 @@
+import {BaseEdge, EdgeProps} from "@xyflow/react";
+
+const AccessEdge = (props: EdgeProps) => {
+    const { sourceX, sourceY, targetX, targetY, id, markerEnd } = props;
+    const edgePath = `M ${sourceX} ${sourceY} L ${sourceX} ${sourceY + 20} L ${targetX} ${targetY + 20} L ${targetX} ${targetY}`;
+
+    return <BaseEdge path={edgePath} markerEnd={markerEnd} />;
+}
+
+export default AccessEdge;

ui100/src/AccessNode.tsx

@@ -1,12 +1,16 @@
-import {Handle, Position} from "@xyflow/react";
+import {Handle, Position, useUpdateNodeInternals} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import AccessIcon from "@mui/icons-material/Lan";
 
 const AccessNode = ({ data }) => {
+    const updateNodeInternals = useUpdateNodeInternals();
+
     let shareHandle = <></>;
     if(data.ownedShare) {
-        shareHandle = <Handle type="source" position={Position.Bottom} />;
+        shareHandle = <Handle type="source" position={Position.Bottom} id="share" />;
+        updateNodeInternals(data.id);
     }
+
     return (
         <>
             <Handle type="target" position={Position.Top} />

ui100/src/AccessPanel.tsx

@@ -1,12 +1,49 @@
 import {Node} from "@xyflow/react";
-import {Grid2, Typography} from "@mui/material";
+import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import AccessIcon from "@mui/icons-material/Lan";
+import useStore from "./model/store.ts";
+import {useEffect, useState} from "react";
+import {Configuration, Frontend, MetadataApi} from "./api";
+import DeleteIcon from "@mui/icons-material/Delete";
+import PropertyTable from "./PropertyTable.tsx";
 
 interface AccessPanelProps {
     access: Node;
 }
 
 const AccessPanel = ({ access }: AccessPanelProps) => {
+    const user = useStore((state) => state.user);
+    const [detail, setDetail] = useState<Frontend>(null);
+
+    useEffect(() => {
+        let cfg = new Configuration({
+            headers: {
+                "X-TOKEN": user.token
+            }
+        });
+        let metadataApi = new MetadataApi(cfg);
+        metadataApi.getFrontendDetail({feId: access.data.feId as number})
+            .then(d => {
+                delete d.id;
+                setDetail(d);
+            })
+            .catch(e => {
+                console.log("AccessPanel", e);
+            })
+    }, [access]);
+
+    const customProperties = {
+        createdAt: row => new Date(row.value).toLocaleString(),
+        updatedAt: row => new Date(row.value).toLocaleString()
+    }
+
+    const labels = {
+        createdAt: "Created",
+        shrToken: "Share Token",
+        token: "Frontend Token",
+        updatedAt: "Updated",
+    }
+
     return (
         <Typography component="div">
             <Grid2 container spacing={2}>
@@ -15,6 +52,16 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
                         <Grid2 display="flex"><AccessIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
                         <Grid2 display="flex" component="h3">{String(access.data.label)}</Grid2>
                     </Grid2>
+                    <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
+                        <Tooltip title="Release Access">
+                            <Button variant="contained" color="error"><DeleteIcon /></Button>
+                        </Tooltip>
+                    </Grid2>
+                    <Grid2 container sx={{ flexGrow: 1 }}>
+                        <Grid2 display="flex">
+                            <PropertyTable object={detail} custom={customProperties} labels={labels} />
+                        </Grid2>
+                    </Grid2>
                 </Grid2>
             </Grid2>
         </Typography>

ui100/src/ShareNode.tsx

@@ -1,15 +1,17 @@
-import {Handle, Position} from "@xyflow/react";
+import {Handle, Position, useUpdateNodeInternals} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import useStore from "./model/store.ts";
 import {SparkLineChart} from "@mui/x-charts";
 
 const ShareNode = ({ data }) => {
     const sparkdata = useStore((state) => state.sparkdata);
+    const updateNodeInternals = useUpdateNodeInternals();
 
     let shareHandle = <></>;
     if(data.accessed) {
-        shareHandle = <Handle type="target" position={Position.Bottom} id="access"/>;
+        shareHandle = <Handle type="target" position={Position.Bottom} id="access" />;
+        updateNodeInternals(data.id);
     }
 
     const hiddenSparkline = <></>;

ui100/src/Visualizer.tsx

@@ -17,6 +17,11 @@ import AccountNode from "./AccountNode.tsx";
 import AccessNode from "./AccessNode.tsx";
 import {Box} from "@mui/material";
 import useStore from "./model/store.ts";
+import AccessEdge from "./AccessEdge.tsx";
+
+const edgeTypes = {
+    access: AccessEdge
+};
 
 const nodeTypes = {
     access: AccessNode,
@@ -65,6 +70,7 @@ const Visualizer = () => {
 
     return (
         <ReactFlow
+            edgeTypes={edgeTypes}
             nodeTypes={nodeTypes}
             nodes={nodes}
             onNodesChange={onNodesChange}

ui100/src/model/graph.ts

@@ -43,7 +43,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
                 id: accountNode.id + "-" + envNode.id,
                 source: accountNode.id!,
                 target: envNode.id!,
-                type: "smoothstep"
+                type: "straight"
             });
             if(env.shares) {
                 envNode.data.empty = false;
@@ -70,7 +70,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
                         id: envNode.id + "-" + shrNode.id,
                         source: envNode.id!,
                         target: shrNode.id!,
-                        type: "smoothstep"
+                        type: "straight"
                     });
                 });
             }
@@ -93,20 +93,26 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
                         id: envNode.id + "-" + feNode.id,
                         source: envNode.id!,
                         target: feNode.id!,
-                        type: "smoothstep"
+                        type: "straight"
                     });
                 });
             }
         });
         allFrontends.forEach(fe => {
             let target = allShares[fe.data.target];
             if(target) {
-                newVov.edges.push({
+                target.data.accessed = true;
+                fe.data.ownedShare = true;
+                let edge: Edge = {
                     id: target.id + "-" + fe.id,
-                    source: target.id!,
-                    target: fe.id!,
-                    type: "smoothstep",
-                });
+                    source: fe.id!,
+                    sourceHandle: "share",
+                    target: target.id!,
+                    targetHandle: "access",
+                    type: "access",
+                    animated: true
+                }
+                newVov.edges.push(edge);
             }
         });
     }