Re-implemented node and edge highlighting

src/display/graph.ts

-import { LineMaterial } from "three-fatline";
-
-export interface GraphNode extends NodeData {
-    x: number;
-    y: number;
-    z: number;
-    vx: number;
-    vy: number;
-    vz: number;
-    fx: number;
-    fy: number;
-    fz: number;
-    color: string;
-}
-
-export interface GraphLink extends LinkData {
-    material?: LineMaterial;
-}
-
 interface Link {
     source: string;
     target: string;

src/display/renderer.tsx

@@ -18,16 +18,28 @@ import { Line2, LineGeometry, LineMaterial } from "three-fatline";
 import React from "react";
 import PropTypes, { InferType } from "prop-types";
 import SpriteText from "three-spritetext";
-import { Object3D, Vector3 } from "three";
-import Graph, {
-    Coordinate,
-    GraphLink,
-    GraphNode,
-    LinkData,
-    NodeData,
-} from "./graph";
+import { Object3D } from "three";
+import Graph, { Coordinate, LinkData, NodeData } from "./graph";
 // import { graph } from "../editor/js/editor";
 
+export interface GraphNode extends NodeData {
+    x: number;
+    y: number;
+    z: number;
+    vx: number;
+    vy: number;
+    vz: number;
+    fx: number;
+    fy: number;
+    fz: number;
+    color: string;
+    __threeObj: THREE.Group;
+}
+
+export interface GraphLink extends LinkData {
+    __lineObj?: Line2;
+}
+
 export class GraphRenderer extends React.Component<
     InferType<typeof GraphRenderer.propTypes>,
     InferType<typeof GraphRenderer.stateTypes>
@@ -37,6 +49,9 @@ export class GraphRenderer extends React.Component<
     forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
     edgeColors: Map<string, string>;
     nodeColors: Map<string, string>;
+    highlightedNodes: Set<GraphNode>;
+    highlightedLinks: Set<GraphLink>;
+    hoverNode: GraphNode;
 
     static propTypes = {
         graph: PropTypes.instanceOf(Graph).isRequired,
@@ -45,19 +60,14 @@ export class GraphRenderer extends React.Component<
         isFullscreen: PropTypes.bool,
     };
 
-    static stateTypes = {
-        highlightedNodes: PropTypes.array,
-        highlightedLinks: PropTypes.array,
-        hoverNode: PropTypes.object,
-    };
+    static stateTypes = {};
 
     constructor(props: InferType<typeof GraphRenderer.propTypes>) {
         super(props);
-        this.state = {
-            highlightedNodes: [],
-            highlightedLinks: [],
-            hoverNode: null,
-        };
+
+        this.highlightedNodes = new Set();
+        this.highlightedLinks = new Set();
+        this.hoverNode = null;
         this.forceGraph = React.createRef();
         this.edgeColors = new Map<string, string>();
         this.nodeColors = new Map<string, string>();
@@ -98,6 +108,7 @@ export class GraphRenderer extends React.Component<
         text.borderColor = "black";
         text.translateY(12);
         text.material.opacity = 0.85;
+        text.renderOrder = 999;
         group.add(text);
 
         // Draw node circle image
@@ -118,7 +129,7 @@ export class GraphRenderer extends React.Component<
         });
 
         const sprite = new THREE.Sprite(material);
-        sprite.renderOrder = 999; // This may not be optimal. But it allows us to render the sprite on top of everything else.
+        //sprite.renderOrder = 999; // This may not be optimal. But it allows us to render the sprite on top of everything else.
         sprite.scale.set(8, 8, 8);
 
         group.add(sprite);
@@ -162,47 +173,62 @@ export class GraphRenderer extends React.Component<
     onNodeHover(node: GraphNode) {
         // no state change
         if (
-            (!node && !this.state.highlightNodes.size) ||
-            (node && this.state.hoverNode === node)
+            (!node && !this.highlightedNodes.size) ||
+            (node && this.hoverNode === node)
         )
             return;
 
-        const highlightNodes: Set<NodeData> = new Set<NodeData>();
-        const highlightLinks: Set<LinkData> = new Set<LinkData>();
+        const highlightedNodes = new Set<GraphNode>();
+        const highlightedLinks = new Set<GraphLink>();
 
         if (node) {
-            highlightNodes.add(node);
-            node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor));
-            node.links.forEach((link) => highlightLinks.add(link));
+            highlightedNodes.add(node);
+            node.neighbors.forEach((neighbor) =>
+                highlightedNodes.add(neighbor as GraphNode)
+            );
+            node.links.forEach((link) =>
+                highlightedLinks.add(link as GraphLink)
+            );
         }
 
-        this.setState({
-            highlightedNodes: highlightNodes,
-            highlightedLinks: highlightLinks,
-            hoverNode: node || null,
-        });
+        this.hoverNode = node || null;
+        this.updateHighlight(highlightedNodes, highlightedLinks);
     }
 
-    onLinkHover(link: GraphLink, previousLink: GraphLink) {
-        const highlightNodes: Set<NodeData> = new Set<NodeData>();
-        const highlightLinks: Set<LinkData> = new Set<LinkData>();
+    onLinkHover(link: GraphLink) {
+        const highlightedNodes = new Set<GraphNode>();
+        const highlightedLinks = new Set<GraphLink>();
 
-        if (previousLink && previousLink.material) {
-            // A bit hacky, but the alternative would require additional data structures
-            previousLink.material.linewidth = Config.LINK_WIDTH;
+        if (link && link.__lineObj) {
+            highlightedLinks.add(link);
+            highlightedNodes.add(link.source as GraphNode);
+            highlightedNodes.add(link.target as GraphNode);
         }
 
-        if (link && link.material) {
-            link.material.linewidth = Config.HOVER_LINK_WIDTH;
+        this.updateHighlight(highlightedNodes, highlightedLinks);
+    }
 
-            highlightLinks.add(link);
-            highlightNodes.add(link.source);
-            highlightNodes.add(link.target);
-        }
+    updateHighlight(
+        highlightedNodes: Set<GraphNode>,
+        highlightedLinks: Set<GraphLink>
+    ) {
+        // Update Links
+        this.highlightedLinks.forEach(
+            (link) => (link.__lineObj.material.linewidth = Config.LINK_WIDTH)
+        );
+        this.highlightedLinks = highlightedLinks;
+        this.highlightedLinks.forEach(
+            (link) =>
+                (link.__lineObj.material.linewidth = Config.HOVER_LINK_WIDTH)
+        );
 
-        this.setState({
-            highlightedNodes: highlightNodes,
-            highlightedLinks: highlightLinks,
+        // Update Nodes
+        this.highlightedNodes.forEach((node) => {
+            node.__threeObj.children[1].scale.set(8, 8, 8);
+        });
+        this.highlightedNodes = highlightedNodes;
+        this.highlightedNodes.forEach((node) => {
+            node.__threeObj.children[1].scale.set(12, 12, 12);
         });
     }
 
@@ -296,7 +322,7 @@ export class GraphRenderer extends React.Component<
         if (!(line instanceof Line2)) {
             return false;
         }
-        console.log("Updating links");
+        // console.log("Updating links");
         const startR = 4;
         const endR = 4;
         const lineLen = Math.sqrt(
@@ -330,21 +356,17 @@ export class GraphRenderer extends React.Component<
                 ref={this.forceGraph}
                 width={Helpers.getWidth()} // TODO: Replace Helpers downstream? This could be a prop
                 height={Helpers.getHeight()}
-                //                extraRenderers={[new CSS3DRenderer()]}
                 graphData={this.props.graph}
                 rendererConfig={{ antialias: true }}
-                nodeLabel={"hidden"}
-                // nodeThreeObjectExtend={false}
+                // nodeLabel={"hidden"}
                 nodeThreeObject={(node: GraphNode) => this.drawNode(node)}
                 linkThreeObject={(link: LinkData) => this.drawLink(link)}
                 onNodeClick={(node: GraphNode) => this.onNodeClick(node)}
                 //d3AlphaDecay={0.1}
                 warmupTicks={150}
                 cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag?
-                // onNodeHover={(node: GraphNode) => this.onNodeHover(node)}
-                // onLinkHover={(link: GraphLink, previousLink: GraphLink) =>
-                //     this.onLinkHover(link, previousLink)
-                // }
+                onNodeHover={(node: GraphNode) => this.onNodeHover(node)}
+                onLinkHover={(link: GraphLink) => this.onLinkHover(link)}
                 linkPositionUpdate={(
                     line: Line2,
                     coords: { start: Coordinate; end: Coordinate }