feat: CF-423: additional styling on course node hover

frontend/src/pages/GraphicalSelector/CourseGraph/CourseGraph.tsx

@@ -18,11 +18,18 @@ import { useAppWindowSize } from 'hooks';
 import { ZOOM_IN_RATIO, ZOOM_OUT_RATIO } from '../constants';
 import {
   defaultEdge,
-  defaultNode,
+  edgeInHoverStyle,
+  edgeOpacity,
+  edgeOutHoverStyle,
+  edgeUnhoverStyle,
+  mapNodeOpacity,
+  mapNodePrereq,
+  mapNodeRestore,
   mapNodeStyle,
   nodeLabelHoverStyle,
   nodeLabelUnhoverStyle,
-  nodeStateStyles
+  nodeStateStyles,
+  plannedNode
 } from './graph';
 import S from './styles';
 
@@ -33,6 +40,10 @@ type Props = {
   focused?: string;
 };
 
+interface CoursePrerequisite {
+  [key: string]: string[];
+}
+
 const CourseGraph = ({ onNodeClick, handleToggleFullscreen, fullscreen, focused }: Props) => {
   const { theme } = useSelector((state: RootState) => state.settings);
   const previousTheme = useRef<typeof theme>(theme);
@@ -42,26 +53,94 @@ const CourseGraph = ({ onNodeClick, handleToggleFullscreen, fullscreen, focused
   const windowSize = useAppWindowSize();
 
   const graphRef = useRef<Graph | null>(null);
+  const initialising = useRef(false); // prevents multiple graphs being loaded
   const [loading, setLoading] = useState(true);
   const [unlockedCourses, setUnlockedCourses] = useState(false);
+  const [prerequisites, setPrerequisites] = useState<CoursePrerequisite>({});
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
+    const isCoursePrerequisite = (target: string, neighbour: string) => {
+      const prereqs = prerequisites[target] || [];
+      return prereqs.includes(neighbour);
+    };
+
+    const addAdjacentStyles = async (nodeItem: Item) => {
+      const node = nodeItem as INode;
+      const neighbours = node.getNeighbors();
+      const opacity = theme === 'light' ? 0.3 : 0.4;
+      const { Arrow } = await import('@antv/g6');
+
+      // Every other node and edge becomes less visible
+      graphRef.current?.getNodes().forEach((n) => {
+        graphRef.current?.updateItem(n as Item, mapNodeOpacity(n.getID(), opacity));
+        n.getEdges().forEach((e) => {
+          graphRef.current?.updateItem(e, edgeOpacity(e.getID(), opacity));
+        });
+        n.toBack();
+      });
+      // Highlight node's edges
+      node.getOutEdges().forEach((e) => {
+        graphRef.current?.updateItem(e, edgeOutHoverStyle(Arrow, theme, e.getID()));
+        graphRef.current?.updateItem(e, edgeOpacity(e.getID(), 1));
+        e.toFront();
+      });
+      node.getInEdges().forEach((e) => {
+        graphRef.current?.updateItem(e, edgeInHoverStyle(Arrow, theme, e.getID()));
+        graphRef.current?.updateItem(e, edgeOpacity(e.getID(), 1));
+        e.toFront();
+      });
+      // Target node and neighbouring nodes remain visible
+      node.toFront();
+      graphRef.current?.updateItem(node as Item, mapNodeOpacity(node.getID(), 1));
+      neighbours.forEach((n) => {
+        graphRef.current?.updateItem(n as Item, mapNodeOpacity(n.getID(), 1));
+        n.toFront();
+        const courseId = n.getID();
+        if (isCoursePrerequisite(node.getID(), courseId)) {
+          graphRef.current?.updateItem(n as Item, mapNodePrereq(courseId, theme));
+        }
+      });
+    };
+
+    const removeAdjacentStyles = async (nodeItem: Item) => {
+      const node = nodeItem as INode;
+      const edges = node.getEdges();
+      const { Arrow } = await import('@antv/g6');
+
+      edges.forEach((e) => {
+        graphRef.current?.updateItem(e, edgeUnhoverStyle(Arrow, theme, e.getID()));
+      });
+      graphRef.current?.getNodes().forEach((n) => {
+        const courseId = n.getID();
+        graphRef.current?.updateItem(n as Item, mapNodeRestore(courseId, plannedCourses, theme));
+        graphRef.current?.updateItem(n as Item, mapNodeOpacity(courseId, 1));
+        n.toFront();
+      });
+      graphRef.current?.getEdges().forEach((e) => {
+        graphRef.current?.updateItem(e, edgeOpacity(e.getID(), 1));
+      });
+    };
+
+    // On hover: add styles
     const addHoverStyles = (ev: IG6GraphEvent) => {
       const node = ev.item as Item;
       graphRef.current?.setItemState(node, 'hover', true);
       graphRef.current?.updateItem(node, nodeLabelHoverStyle(node.getID()));
+      addAdjacentStyles(node);
       graphRef.current?.paint();
     };
 
+    // On hover: remove styles
     const addUnhoverStyles = (ev: IG6GraphEvent) => {
       const node = ev.item as Item;
       graphRef.current?.clearItemStates(node, 'hover');
       graphRef.current?.updateItem(
         node,
         nodeLabelUnhoverStyle(node.getID(), plannedCourses, theme)
       );
+      removeAdjacentStyles(node);
       graphRef.current?.paint();
     };
 
@@ -94,7 +173,8 @@ const CourseGraph = ({ onNodeClick, handleToggleFullscreen, fullscreen, focused
           duration: 500, // Number, the duration of one animation
           easing: 'easeQuadInOut' // String, the easing function
         },
-        defaultNode,
+        groupByTypes: false,
+        defaultNode: plannedNode,
         defaultEdge: defaultEdge(Arrow, theme),
         nodeStateStyles
       };
@@ -124,47 +204,63 @@ const CourseGraph = ({ onNodeClick, handleToggleFullscreen, fullscreen, focused
       });
     };
 
+    // Store a hashmap for performance reasons when highlighting nodes
+    const makePrerequisitesMap = (edges: CourseEdge[]) => {
+      const prereqs: CoursePrerequisite = prerequisites;
+      edges.forEach((e) => {
+        if (!prereqs[e.target]) {
+          prereqs[e.target] = [e.source];
+        } else {
+          prereqs[e.target].push(e.source);
+        }
+      });
+      setPrerequisites(prereqs);
+    };
+
+    // Update styling for: each node, hovering state and edges
+    const repaintCanvas = async () => {
+      const nodes = graphRef.current?.getNodes();
+      nodes?.map((n) =>
+        graphRef.current?.updateItem(n, mapNodeStyle(n.getID(), plannedCourses, theme))
+      );
+
+      graphRef.current?.off('node:mouseenter');
+      graphRef.current?.off('node:mouseleave');
+      graphRef.current?.on('node:mouseenter', async (ev) => {
+        addHoverStyles(ev);
+      });
+      graphRef.current?.on('node:mouseleave', async (ev) => {
+        addUnhoverStyles(ev);
+      });
+
+      const { Arrow } = await import('@antv/g6');
+      const edges = graphRef.current?.getEdges();
+      edges?.map((e) => graphRef.current?.updateItem(e, defaultEdge(Arrow, theme)));
+      graphRef.current?.paint();
+    };
+
     const setupGraph = async () => {
       try {
+        initialising.current = true;
         const res = await axios.get<GraphPayload>(
           `/programs/graph/${programCode}/${specs.join('+')}`
         );
         const { edges, courses } = res.data;
+        makePrerequisitesMap(edges);
         if (courses.length !== 0 && edges.length !== 0) initialiseGraph(courses, edges);
       } catch (e) {
         // eslint-disable-next-line no-console
         console.error('Error at setupGraph', e);
       }
     };
 
-    // Update styling for: each node, hovering state and edges
-    const repaintCanvas = async () => {
-      if (graphRef.current) {
-        const nodes = graphRef.current.getNodes();
-        nodes.map((n) =>
-          graphRef.current?.updateItem(n, mapNodeStyle(n.getID(), plannedCourses, theme))
-        );
-
-        graphRef.current.on('node:mouseenter', async (ev) => {
-          addHoverStyles(ev);
-        });
-        graphRef.current.on('node:mouseleave', async (ev) => {
-          addUnhoverStyles(ev);
-        });
-
-        const { Arrow } = await import('@antv/g6');
-        const edges = graphRef.current.getEdges();
-        edges.map((e) => graphRef.current?.updateItem(e, defaultEdge(Arrow, theme)));
-        graphRef.current.paint();
-      }
-    };
-
-    if (!graphRef.current) setupGraph();
+    if (!initialising.current) setupGraph();
+    // Repaint canvas when theme is changed without re-render
     if (previousTheme.current !== theme) {
       previousTheme.current = theme;
       repaintCanvas();
     }
-  }, [onNodeClick, plannedCourses, programCode, specs, theme]);
+  }, [onNodeClick, plannedCourses, programCode, specs, theme, prerequisites]);
 
   const showAllCourses = () => {
     if (!graphRef.current) return;