Dynamically changing the node rendering based on node selection.

src/display/display.tsx

@@ -128,7 +128,10 @@ class Display extends React.Component<
                         node={this.state.currentNode}
                         nodeColors={this.state.graph.nodeColors}
                         height={this.state.nodeActive ? this.state.height : 0}
-                        onClose={this.handleNodeClose}
+                        onClose={() => {
+                            this.handleNodeClose();
+                            this.rendererRef.current.deselectNode();
+                        }}
                         nodeClickedCallback={this.handleNodeChangeRequest}
                     ></NodeInfoBar>
                 )}
@@ -148,6 +151,7 @@ class Display extends React.Component<
                             width={this.state.width}
                             height={this.state.height}
                             onNodeClicked={this.handleNodeClicked}
+                            onNodeDeselected={this.handleNodeClose}
                         />
                     )}
                 </div>

src/display/renderer.tsx

@@ -9,7 +9,7 @@ import { Line2, LineGeometry, LineMaterial } from "three-fatline";
 import React from "react";
 import PropTypes, { InferType } from "prop-types";
 import SpriteText from "three-spritetext";
-import { Object3D } from "three";
+import { Object3D, Sprite } from "three";
 import Graph, { Coordinate, LinkData, NodeData } from "./graph";
 
 export interface GraphNode extends NodeData {
@@ -42,16 +42,18 @@ export class GraphRenderer extends React.PureComponent<
 > {
     props: InferType<typeof GraphRenderer.propTypes>;
     state: InferType<typeof GraphRenderer.stateTypes>;
-    forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
-    highlightedNodes: Set<GraphNode>;
-    highlightedLinks: Set<GraphLink>;
-    hoverNode: GraphNode;
+    private forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
+    private highlightedNodes: Set<GraphNode>;
+    private highlightedLinks: Set<GraphLink>;
+    private hoverNode: GraphNode;
+    private node3dObjects: Map<string, THREE.Group>;
 
     static propTypes = {
         graph: PropTypes.instanceOf(Graph).isRequired,
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
         onNodeClicked: PropTypes.func,
+        onNodeDeselected: PropTypes.func,
         isFullscreen: PropTypes.bool,
     };
 
@@ -62,6 +64,7 @@ export class GraphRenderer extends React.PureComponent<
 
         this.highlightedNodes = new Set();
         this.highlightedLinks = new Set();
+        this.node3dObjects = new Map<string, THREE.Group>();
         this.hoverNode = null;
         this.forceGraph = React.createRef();
     }
@@ -122,7 +125,7 @@ export class GraphRenderer extends React.PureComponent<
         sprite.scale.set(...Config.NODE_SIZE);
 
         group.add(sprite);
-
+        this.node3dObjects.set(node.id, group);
         return group;
     }
 
@@ -156,6 +159,7 @@ export class GraphRenderer extends React.PureComponent<
         const line = new Line2(geometry, material);
         line.computeLineDistances();
         line.scale.set(1, 1, 1);
+
         return line;
     }
 
@@ -223,11 +227,68 @@ export class GraphRenderer extends React.PureComponent<
         });
     }
 
+    deselectNode() {
+        this.node3dObjects.forEach((nodeObj) => this.makeNodeVisible(nodeObj));
+
+        for (const l of this.props.graph.links) {
+            l.__lineObj.material.opacity = 1.0;
+        }
+
+        if (this.props.onNodeDeselected !== undefined) {
+            this.props.onNodeDeselected();
+        }
+    }
+
+    displayNodeSelection(node: GraphNode) {
+        // Set all nodes to a grayed out state
+        this.node3dObjects.forEach((nodeObj) => {
+            this.makeNodeInvisible(nodeObj);
+        });
+
+        // Reset neighbors
+        for (const neighbor of node.neighbors) {
+            const neighborObj = this.node3dObjects.get(neighbor.id);
+            this.makeNodeVisible(neighborObj);
+        }
+
+        // Set all links to a grayed out state
+        for (const l of this.props.graph.links) {
+            l.__lineObj.material.opacity = 0.15;
+        }
+
+        // Reset for current connections
+        for (const l of node.links) {
+            const lObj = l as GraphLink;
+            lObj.__lineObj.material.opacity = 1.0;
+        }
+
+        // Reset for current node
+        const nodeObj = this.node3dObjects.get(node.id);
+        this.makeNodeVisible(nodeObj);
+    }
+
+    private makeNodeInvisible(nodeObjectGroup: THREE.Group) {
+        const text = nodeObjectGroup.children[0] as SpriteText;
+        text.material.opacity = 0.0;
+
+        const circle = nodeObjectGroup.children[1] as Sprite;
+        circle.material.opacity = 0.5;
+    }
+
+    private makeNodeVisible(nodeObjectGroup: THREE.Group) {
+        const text = nodeObjectGroup.children[0] as SpriteText;
+        text.material.opacity = 0.85;
+
+        const circle = nodeObjectGroup.children[1] as Sprite;
+        circle.material.opacity = 1.0;
+    }
+
     onNodeClick(node: GraphNode) {
         this.focusOnNode(node);
         if (MODE === "default" && this.props.onNodeClicked) {
             this.props.onNodeClicked(node);
         }
+        this.displayNodeSelection(node);
     }
 
     onNodeDragEnd(node: GraphNode, translate: Coordinate) {
@@ -306,6 +367,7 @@ export class GraphRenderer extends React.PureComponent<
                 nodeThreeObject={(node: GraphNode) => this.drawNode(node)}
                 linkThreeObject={(link: LinkData) => this.drawLink(link)}
                 onNodeClick={(node: GraphNode) => this.onNodeClick(node)}
+                onBackgroundClick={() => this.deselectNode()}
                 //d3AlphaDecay={0.1}
                 warmupTicks={150}
                 cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag?