Improved typing

src/display/renderer.tsx

@@ -10,23 +10,16 @@ import React from "react";
 import PropTypes, { InferType } from "prop-types";
 import SpriteText from "three-spritetext";
 import { Object3D, Sprite } from "three";
-import { Graph, Coordinate, Link, Node } from "../common/graph/graph";
-
-export interface GraphNode extends Node {
-    x: number;
-    y: number;
-    z: number;
-    vx: number;
-    vy: number;
-    vz: number;
-    fx: number;
-    fy: number;
-    fz: number;
+import { Graph, Coordinate } from "../common/graph/graph";
+import { Node } from "../common/graph/node";
+import { Link } from "../common/graph/link";
+
+export interface VisualGraphNode extends Node {
     color: string;
     __threeObj: THREE.Group;
 }
 
-export interface GraphLink extends Link {
+export interface VisualGraphLink extends Link {
     __lineObj?: Line2;
 }
 
@@ -43,9 +36,9 @@ export class GraphRenderer extends React.PureComponent<
     props: InferType<typeof GraphRenderer.propTypes>;
     state: InferType<typeof GraphRenderer.stateTypes>;
     private forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
-    private highlightedNodes: Set<GraphNode>;
-    private highlightedLinks: Set<GraphLink>;
-    private hoverNode: GraphNode;
+    private highlightedNodes: Set<VisualGraphNode>;
+    private highlightedLinks: Set<VisualGraphLink>;
+    private hoverNode: VisualGraphNode;
     private node3dObjects: Map<number, THREE.Group>;
 
     static propTypes = {
@@ -91,7 +84,7 @@ export class GraphRenderer extends React.PureComponent<
         this.forceGraph.current.scene().add(mesh);
     }
 
-    drawNode(node: GraphNode): Object3D {
+    drawNode(node: VisualGraphNode): Object3D {
         const group = new THREE.Group();
 
         const text = new SpriteText(node.name);
@@ -167,7 +160,7 @@ export class GraphRenderer extends React.PureComponent<
         return line;
     }
 
-    onNodeHover(node: GraphNode) {
+    onNodeHover(node: VisualGraphNode) {
         // no state change
         if (
             (!node && !this.highlightedNodes.size) ||
@@ -175,16 +168,16 @@ export class GraphRenderer extends React.PureComponent<
         )
             return;
 
-        const highlightedNodes = new Set<GraphNode>();
-        const highlightedLinks = new Set<GraphLink>();
+        const highlightedNodes = new Set<VisualGraphNode>();
+        const highlightedLinks = new Set<VisualGraphLink>();
 
         if (node) {
             highlightedNodes.add(node);
             node.neighbors.forEach((neighbor) =>
-                highlightedNodes.add(neighbor as GraphNode)
+                highlightedNodes.add(neighbor as VisualGraphNode)
             );
             node.links.forEach((link) =>
-                highlightedLinks.add(link as GraphLink)
+                highlightedLinks.add(link as VisualGraphLink)
             );
         }
 
@@ -192,22 +185,22 @@ export class GraphRenderer extends React.PureComponent<
         this.updateHighlight(highlightedNodes, highlightedLinks);
     }
 
-    onLinkHover(link: GraphLink) {
-        const highlightedNodes = new Set<GraphNode>();
-        const highlightedLinks = new Set<GraphLink>();
+    onLinkHover(link: VisualGraphLink) {
+        const highlightedNodes = new Set<VisualGraphNode>();
+        const highlightedLinks = new Set<VisualGraphLink>();
 
         if (link && link.__lineObj) {
             highlightedLinks.add(link);
-            highlightedNodes.add(link.source as GraphNode);
-            highlightedNodes.add(link.target as GraphNode);
+            highlightedNodes.add(link.source as VisualGraphNode);
+            highlightedNodes.add(link.target as VisualGraphNode);
         }
 
         this.updateHighlight(highlightedNodes, highlightedLinks);
     }
 
     updateHighlight(
-        highlightedNodes: Set<GraphNode>,
-        highlightedLinks: Set<GraphLink>
+        highlightedNodes: Set<VisualGraphNode>,
+        highlightedLinks: Set<VisualGraphLink>
     ) {
         // Update Links
         this.highlightedLinks.forEach(
@@ -243,7 +236,7 @@ export class GraphRenderer extends React.PureComponent<
         }
     }
 
-    displayNodeSelection(node: GraphNode) {
+    displayNodeSelection(node: VisualGraphNode) {
         // Set all nodes to a grayed out state
         this.node3dObjects.forEach((nodeObj) => {
             this.makeNodeInvisible(nodeObj);
@@ -262,7 +255,7 @@ export class GraphRenderer extends React.PureComponent<
 
         // Reset for current connections
         for (const l of node.links) {
-            const lObj = l as GraphLink;
+            const lObj = l as VisualGraphLink;
             lObj.__lineObj.material.opacity = 1.0;
         }
 
@@ -287,7 +280,7 @@ export class GraphRenderer extends React.PureComponent<
         circle.material.opacity = 1.0;
     }
 
-    onNodeClick(node: GraphNode) {
+    onNodeClick(node: VisualGraphNode) {
         this.focusOnNode(node);
         if (MODE === "default" && this.props.onNodeClicked) {
             this.props.onNodeClicked(node);
@@ -295,7 +288,7 @@ export class GraphRenderer extends React.PureComponent<
         this.displayNodeSelection(node);
     }
 
-    onNodeDragEnd(node: GraphNode, translate: Coordinate) {
+    onNodeDragEnd(node: VisualGraphNode, translate: Coordinate) {
         // NodeDrag is handled like NodeClick if distance is very short
         if (
             Math.hypot(translate.x, translate.y, translate.z) <
@@ -305,7 +298,7 @@ export class GraphRenderer extends React.PureComponent<
         }
     }
 
-    focusOnNode(node: GraphNode) {
+    focusOnNode(node: VisualGraphNode) {
         const distance = 400; // Aim at node from outside it
         const speed = 0.5; // Camera travel speed through space
         const minTime = 1000; // Minimum transition time
@@ -369,21 +362,21 @@ export class GraphRenderer extends React.PureComponent<
                 graphData={this.props.graph}
                 rendererConfig={{ antialias: true }}
                 // nodeLabel={"hidden"}
-                nodeThreeObject={(node: GraphNode) => this.drawNode(node)}
+                nodeThreeObject={(node: VisualGraphNode) => this.drawNode(node)}
                 linkThreeObject={(link: Link) => this.drawLink(link)}
-                onNodeClick={(node: GraphNode) => this.onNodeClick(node)}
+                onNodeClick={(node: VisualGraphNode) => this.onNodeClick(node)}
                 onBackgroundClick={() => this.deselectNode()}
                 //d3AlphaDecay={0.1}
                 warmupTicks={150}
                 cooldownTime={1000} // TODO: Do we want the simulation to unfreeze on node drag?
                 enableNodeDrag={false}
-                onNodeHover={(node: GraphNode) => this.onNodeHover(node)}
-                onLinkHover={(link: GraphLink) => this.onLinkHover(link)}
+                onNodeHover={(node: VisualGraphNode) => this.onNodeHover(node)}
+                onLinkHover={(link: VisualGraphLink) => this.onLinkHover(link)}
                 linkPositionUpdate={(
                     line: Line2,
                     coords: { start: Coordinate; end: Coordinate }
                 ) => this.updateLinkPosition(line, coords.start, coords.end)}
-                onNodeDragEnd={(node: GraphNode, translate: Coordinate) =>
+                onNodeDragEnd={(node: VisualGraphNode, translate: Coordinate) =>
                     this.onNodeDragEnd(node, translate)
                 }
             />