feat: implement highlighting of mutuality

src/Network.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { apiAuth } from "./api";
 import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, SelectionProps, SelectionResult, useSelection } from "reagraph";
 import { customTheme } from "./NetworkTheme";
@@ -25,6 +25,7 @@ export const GraphComponent = () => {
   const [threed, setThreed] = useState(false);
   const [likes, setLikes] = useState(2);
   const [popularity, setPopularity] = useState(false);
+  const [mutuality, setMutuality] = useState(false);
   const logo = document.getElementById("logo")
   if (logo) {
     logo.className = "logo networkroute";
@@ -50,9 +51,11 @@ export const GraphComponent = () => {
 
   function handlePopularity() {
     setPopularity(!popularity)
-    //graphRef.current?.fitNodesInView();
-    //graphRef.current?.centerGraph();
-    //graphRef.current?.resetControls();
+  }
+
+  function handleMutuality() {
+    colorMatches(!mutuality);
+    setMutuality(!mutuality);
   }
 
   function showLabel() {
@@ -63,6 +66,27 @@ export const GraphComponent = () => {
     }
   }
 
+  function findMatches(edges: GraphEdge[]) {
+    const adjacencyList = edges.map((edge) => edge.source + edge.target + edge.data.relation);
+    return edges.filter((edge) => adjacencyList.includes(edge.target + edge.source + edge.data.relation))
+  }
+  //const matches = useMemo(() => findMatches(data.edges), [])
+
+  function colorMatches(mutuality: boolean) {
+    const matches = findMatches(data.edges);
+    const newEdges = data.edges;
+    if (mutuality) {
+      newEdges.forEach((edge) => { if ((likes === 1 || edge.data.relation === likes) && matches.map((edge) => edge.id).includes(edge.id)) { edge.fill = "#9c3"; edge.size = edge.size * 1.5 } })
+    } else {
+      newEdges.forEach((edge) => { if ((likes === 1 || edge.data.relation === likes) && matches.map((edge) => edge.id).includes(edge.id)) { edge.fill = edge.data.origFill; edge.size = edge.data.origSize } })
+    }
+    setData({ nodes: data.nodes, edges: newEdges })
+  }
+  useEffect(() => {
+    if (mutuality) colorMatches(false);
+    colorMatches(mutuality)
+  }, [likes])
+
   const { selections, actives, onNodeClick, onCanvasClick } = useCustomSelection({
     ref: graphRef,
     nodes: data.nodes,
@@ -77,6 +101,14 @@ export const GraphComponent = () => {
     <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
       <div className="controls" >
 
+        <div className="control" onClick={handleMutuality}>
+          <div className="switch">
+            <input type="checkbox" checked={mutuality} />
+            <span className="slider round"></span>
+          </div>
+          <span>mutuality</span>
+        </div>
+
         <div className="control" onClick={handleThreed}>
           <span>2D</span>
           <div className="switch">