feat: working WebGL graph with selection/highlighting

src/Network.tsx

@@ -1,17 +1,31 @@
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { apiAuth } from "./api";
-import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, recommendLayout, useSelection } from "reagraph";
+import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, SelectionProps, SelectionResult, useSelection } from "reagraph";
 import { customTheme } from "./NetworkTheme";
 
 interface NetworkData {
   nodes: GraphNode[],
   edges: GraphEdge[],
 }
+interface CustomSelectionProps extends SelectionProps {
+  ignore: string[];
+}
+
+const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
+  var result = useSelection(props);
+  result.actives = result.actives.filter((s) => !props.ignore.includes(s))
+  return result
+}
 
 export const GraphComponent = () => {
   const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
   const [loading, setLoading] = useState(true);
   const [threed, setThreed] = useState(false);
+  const [likes, setLikes] = useState(2);
+  const logo = document.getElementById("logo")
+  if (logo) {
+    logo.className = "logo networkroute";
+  }
 
   async function loadData() {
     setLoading(true);
@@ -24,12 +38,6 @@ export const GraphComponent = () => {
 
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
-  const { selections, actives, onNodeClick, onCanvasClick } = useSelection({
-    ref: graphRef,
-    nodes: data.nodes,
-    edges: data.edges,
-    pathSelectionType: 'out',
-  });
 
   function handleThreed() {
     setThreed(!threed)
@@ -38,9 +46,28 @@ export const GraphComponent = () => {
     graphRef.current?.resetControls();
   }
 
+  function showLabel() {
+    switch (likes) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
+
+  const { selections, actives, onNodeClick, onCanvasClick } = useCustomSelection({
+    ref: graphRef,
+    nodes: data.nodes,
+    edges: data.edges.filter((edge) => edge.data.relation === likes),
+    ignore: data.edges.map((edge) => { return (likes === 1 && edge.data.relation !== 2) ? edge.id : "" }),
+    pathSelectionType: 'out',
+    type: 'multiModifier'
+  });
+
+
   return (
     <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
       <div className="controls" >
+
         <div className="control" onClick={handleThreed}>
           <span>2D</span>
           <div className="switch">
@@ -49,26 +76,56 @@ export const GraphComponent = () => {
           </div>
           <span>3D</span>
         </div>
+
+        <div className="control">
+          <div className="stack column">
+            <datalist id="markers">
+              <option value="0"></option>
+              <option value="1"></option>
+              <option value="2"></option>
+            </datalist>
+            <div id="three-slider">
+              <label>😬</label>
+              <input
+                type="range"
+                list="markers"
+                min="0"
+                max="2"
+                step="1"
+                width="16px"
+                onChange={(evt) => setLikes(Number(evt.target.value))}
+              />
+              <label>😍</label>
+            </div>
+            {showLabel()}
+          </div>
+        </div>
+
       </div>
-      <GraphCanvas
-        draggable
-        cameraMode={threed ? "rotate" : "pan"}
-        layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
-        layoutOverrides={{
-          linkDistance: 200
-        }}
-        labelType="auto"
-        ref={graphRef}
-        theme={customTheme}
-        nodes={data.nodes}
-        edges={data.edges}
-        selections={selections}
-        actives={actives}
-        onCanvasClick={onCanvasClick}
-        onNodeClick={onNodeClick}
-      />
+
+      {loading ? <span className="loader" /> :
+        <GraphCanvas
+          draggable
+          cameraMode={threed ? "rotate" : "pan"}
+          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
+          layoutOverrides={{
+            nodeStrength: -200,
+            linkDistance: 100
+          }}
+          defaultNodeSize={1}
+          labelType="nodes"
+          sizingType="attribute"
+          sizingAttribute="inDegree"
+          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}
+        />}
     </div>
   );
-
 }