feat: towards multi-team support

also testing at different points whether team association is correct

src/Network.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { apiAuth } from "./api";
 import {
   GraphCanvas,
@@ -10,6 +10,7 @@ import {
   useSelection,
 } from "reagraph";
 import { customTheme } from "./NetworkTheme";
+import { useSession } from "./Session";
 
 interface NetworkData {
   nodes: GraphNode[];
@@ -36,26 +37,38 @@ const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
 };
 
 export const GraphComponent = () => {
-  const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
+  let initialData = { nodes: [], edges: [] } as NetworkData;
+  const [data, setData] = useState(initialData);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
   const [threed, setThreed] = useState(false);
   const [likes, setLikes] = useState(2);
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
+  const { teams } = useSession();
 
   async function loadData() {
     setLoading(true);
-    await apiAuth("analysis/graph_json", null)
-      .then((json) => json as Promise<NetworkData>)
-      .then((json) => {
-        setData(json);
-      });
-    setLoading(false);
+    if (teams) {
+      await apiAuth(`analysis/graph_json/${teams?.activeTeam}`, null)
+        .then((data) => {
+          if (data.detail) {
+            setError(data.detail);
+            return initialData;
+          } else {
+            setError("");
+            return data as Promise<NetworkData>;
+          }
+        })
+        .then((data) => setData(data))
+        .catch(() => setError("no access"));
+      setLoading(false);
+    } else setError("team unknown");
   }
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [teams]);
 
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
@@ -161,6 +174,74 @@ export const GraphComponent = () => {
     type: "multiModifier",
   });
 
+  let content: ReactNode;
+  if (loading) {
+    content = <span className="loader" />;
+  } else if (error) {
+    content = <span>{error}</span>;
+  } else {
+    content = (
+      <>
+        <GraphCanvas
+          draggable
+          cameraMode={threed ? "rotate" : "pan"}
+          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
+          layoutOverrides={{
+            nodeStrength: -200,
+            linkDistance: 100,
+          }}
+          labelType="nodes"
+          sizingType="attribute"
+          sizingAttribute={popularity ? "inDegree" : undefined}
+          ref={graphRef}
+          theme={customTheme}
+          nodes={data.nodes}
+          edges={data.edges.filter(
+            (edge) => edge.data.relation === likes || likes === 1
+          )}
+          selections={selections}
+          actives={actives}
+          onCanvasClick={onCanvasClick}
+          onNodeClick={onNodeClick}
+          onNodePointerOut={onNodePointerOut}
+          onNodePointerOver={onNodePointerOver}
+        />
+        <button
+          className="infobutton"
+          onClick={() => {
+            const dialog = document.querySelector("dialog[id='InfoDialog']");
+            (dialog as HTMLDialogElement).showModal();
+          }}
+        >
+          info
+        </button>
+
+        <dialog
+          id="InfoDialog"
+          style={{ textAlign: "left" }}
+          onClick={(event) => {
+            event.currentTarget.close();
+          }}
+        >
+          scroll to zoom
+          <br />
+          <br />
+          <b>hover</b>: show inbound links
+          <br />
+          <b>click</b>: show outward links
+          <br />
+          <br />
+          multi-selection possible
+          <br />
+          with <i>Ctrl</i> or <i>Shift</i>
+          <br />
+          <br />
+          drag to pan/rotate
+        </dialog>
+      </>
+    );
+  }
+
   return (
     <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
       <div className="controls">
@@ -225,67 +306,7 @@ export const GraphComponent = () => {
           </span>
         </div>
       )}
-
-      {loading ? (
-        <span className="loader" />
-      ) : (
-        <GraphCanvas
-          draggable
-          cameraMode={threed ? "rotate" : "pan"}
-          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
-          layoutOverrides={{
-            nodeStrength: -200,
-            linkDistance: 100,
-          }}
-          labelType="nodes"
-          sizingType="attribute"
-          sizingAttribute={popularity ? "inDegree" : undefined}
-          ref={graphRef}
-          theme={customTheme}
-          nodes={data.nodes}
-          edges={data.edges.filter(
-            (edge) => edge.data.relation === likes || likes === 1
-          )}
-          selections={selections}
-          actives={actives}
-          onCanvasClick={onCanvasClick}
-          onNodeClick={onNodeClick}
-          onNodePointerOut={onNodePointerOut}
-          onNodePointerOver={onNodePointerOver}
-        />
-      )}
-      <button
-        className="infobutton"
-        onClick={() => {
-          const dialog = document.querySelector("dialog[id='InfoDialog']");
-          (dialog as HTMLDialogElement).showModal();
-        }}
-      >
-        info
-      </button>
-
-      <dialog
-        id="InfoDialog"
-        style={{ textAlign: "left" }}
-        onClick={(event) => {
-          event.currentTarget.close();
-        }}
-      >
-        scroll to zoom
-        <br />
-        <br />
-        <b>hover</b>: show inbound links
-        <br />
-        <b>click</b>: show outward links
-        <br />
-        <br />
-        multi-selection possible
-        <br />
-        with <i>Ctrl</i> or <i>Shift</i>
-        <br />
-        <br />
-        drag to pan/rotate
-      </dialog>
+      {content}
     </div>
   );
 };