improved sparkdata state (#823)

ui100/src/ApiConsole.tsx

@@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx";
 import EnvironmentPanel from "./EnvironmentPanel.tsx";
 import SharePanel from "./SharePanel.tsx";
 import AccessPanel from "./AccessPanel.tsx";
-import useStore from "./model/store.ts";
+import useStore, {Sparkdata} from "./model/store.ts";
 import TabularView from "./TabularView.tsx";
 import {Node} from "@xyflow/react";
 
@@ -21,6 +21,10 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const graph = useStore((state) => state.graph);
     const updateGraph = useStore((state) => state.updateGraph);
     const oldGraph = useRef<Graph>(graph);
+    const sparkdata = useStore((state) => state.sparkdata);
+    const sparkdataRef = useRef<Map<string, Sparkdata>>();
+    sparkdataRef.current = sparkdata;
+    const updateSparkdata = useStore((state) => state.updateSparkdata);
     const nodes = useStore((state) => state.nodes);
     const nodesRef = useRef<Node[]>();
     nodesRef.current = nodes;
@@ -97,30 +101,25 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
                 "X-TOKEN": user.token
             }
         });
+
         let api = new MetadataApi(cfg);
         api.getSparklines({body: {environments: environments, shares: shares}})
             .then(d => {
                 if(d.sparklines) {
-                    let updatedNodes = nodesRef.current;
-                    updatedNodes.map((n) => {
-                        let spark = d.sparklines!.find(s => s.scope === n.type && s.id === n.id);
-                        if(spark) {
-                            let activity = new Array<Number>(31);
-                            if(spark.samples) {
-                                spark.samples?.forEach((sample, i) => {
-                                    let v = 0;
-                                    v += sample.rx! ? sample.rx! : 0;
-                                    v += sample.tx! ? sample.tx! : 0;
-                                    activity[i] = v;
-                                });
-                                n.data.activity = activity;
-                            }
+                    let sparkdataIn = new Map<string, Number[]>();
+                    d.sparklines!.forEach(s => {
+                        let activity = new Array<Number>(31);
+                        if(s.samples) {
+                            s.samples?.forEach((sample, i) => {
+                                let v = 0;
+                                v += sample.rx! ? sample.rx! : 0;
+                                v += sample.tx! ? sample.tx! : 0;
+                                activity[i] = v;
+                            });
+                            sparkdataIn.set(s.id!, activity);
                         }
                     });
-                    if(updatedNodes) {
-                        updateNodes(updatedNodes);
-                        console.log("updatedNodes", updatedNodes);
-                    }
+                    updateSparkdata(sparkdataIn);
                 }
             })
             .catch(e => {

ui100/src/EnvironmentNode.tsx

@@ -2,12 +2,15 @@ import {Handle, Position} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
 import {SparkLineChart} from "@mui/x-charts";
+import useStore from "./model/store.ts";
 
 const EnvironmentNode = ({ data }) => {
+    const sparkdata = useStore((state) => state.sparkdata);
+
     const hiddenSparkline = <></>;
     const visibleSparkline = (
         <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
-            <SparkLineChart data={data.activity ? data.activity : []} height={30} width={100} colors={['#04adef']}  />
+            <SparkLineChart data={sparkdata.get(data.envZId) ? sparkdata.get(data.envZId)! : []} height={30} width={100} colors={['#04adef']}  />
         </Grid2>
     );
 
@@ -19,7 +22,7 @@ const EnvironmentNode = ({ data }) => {
                 <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex">{data.label}</Grid2>
             </Grid2>
-            {data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
+            {sparkdata.get(data.envZId)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
         </>
     );
 }

ui100/src/ShareNode.tsx

@@ -1,12 +1,24 @@
 import {Handle, Position} 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);
+
     let shareHandle = <></>;
     if(data.accessed) {
         shareHandle = <Handle type="target" position={Position.Bottom} id="access"/>;
     }
+
+    const hiddenSparkline = <></>;
+    const visibleSparkline = (
+        <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
+            <SparkLineChart data={sparkdata.get(data.shrToken) ? sparkdata.get(data.shrToken)! : []} height={30} width={100} colors={['#04adef']}  />
+        </Grid2>
+    );
+
     return (
         <>
             <Handle type="target" position={Position.Top} />
@@ -15,6 +27,7 @@ const ShareNode = ({ data }) => {
                 <Grid2 display="flex"><ShareIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex">{data.label}</Grid2>
             </Grid2>
+            {sparkdata.get(data.shrToken)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
         </>
     );
 }

ui100/src/model/store.ts

@@ -8,6 +8,7 @@ type StoreState = {
     user: User;
     graph: Graph;
     environments: Array<Environment>;
+    sparkdata: Map<string, Number[]>;
     nodes: Node[];
     edges: Edge[];
     selectedNode: Node;
@@ -18,9 +19,10 @@ type StoreAction = {
     updateUser: (user: StoreState['user']) => void,
     updateGraph: (vov: StoreState['graph']) => void,
     updateEnvironments: (environments: StoreState['environments']) => void,
-    updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
+    updateSparkdata: (sparkdata: StoreState['sparkdata']) => void,
     updateNodes: (nodes: StoreState['nodes']) => void,
     updateEdges: (edges: StoreState['edges']) => void,
+    updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
     updateViewport: (viewport: StoreState['viewport']) => void,
 };
 
@@ -28,6 +30,7 @@ const useStore = create<StoreState & StoreAction>((set) => ({
     user: null,
     graph: new Graph(),
     environments: new Array<Environment>(),
+    sparkdata: new Map<string, Sparkdata>(),
     nodes: [],
     edges: [],
     selectedNode: null,
@@ -35,6 +38,7 @@ const useStore = create<StoreState & StoreAction>((set) => ({
     updateUser: (user) => set({user: user}),
     updateGraph: (vov) => set({overview: vov}),
     updateEnvironments: (environments) => set({environments: environments}),
+    updateSparkdata: (sparkdata) => set({sparkdata: sparkdata}),
     updateNodes: (nodes) => set({nodes: nodes}),
     updateEdges: (edges) => set({edges: edges}),
     updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode}),