Improved node appearance

Reduced CPU-load by limiting the simulation time after node drag events.

src/display/renderer.tsx

@@ -18,7 +18,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, Vector3 } from "three";
 import Graph, {
     Coordinate,
     GraphLink,
@@ -86,16 +86,44 @@ export class GraphRenderer extends React.Component<
     // }
 
     drawNode(node: GraphNode): Object3D {
-        const sprite = new SpriteText(node.name);
-        sprite.color = "white";
-        sprite.backgroundColor = "black"; // TODO: Set this dynamically based on the node type
-        sprite.textHeight = 5;
-        sprite.padding = 2;
-        sprite.borderRadius = 5;
-        sprite.borderWidth = 3;
-        sprite.borderColor = "black";
-
-        return sprite;
+        const group = new THREE.Group();
+
+        const text = new SpriteText(node.name);
+        text.color = "white";
+        text.backgroundColor = "black"; // TODO: Set this dynamically based on the node type
+        text.textHeight = 5;
+        // text.padding = 2;
+        text.borderRadius = 5;
+        text.borderWidth = 3;
+        text.borderColor = "black";
+        text.translateY(12);
+        text.material.opacity = 0.85;
+        group.add(text);
+
+        // Draw node circle image
+        const textureLoader = new THREE.TextureLoader();
+        textureLoader.setCrossOrigin("anonymous");
+        const imageAlpha = textureLoader.load(
+            Config.PLUGIN_PATH + "datasets/images/alpha.png"
+        );
+
+        const material = new THREE.SpriteMaterial({
+            //map: imageTexture,
+            color: this.nodeColors.get(node.type),
+            alphaMap: imageAlpha,
+            transparent: true,
+            alphaTest: 0.2,
+            depthWrite: false,
+            depthTest: false,
+        });
+
+        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.scale.set(8, 8, 8);
+
+        group.add(sprite);
+
+        return group;
     }
 
     drawLink(link: LinkData) {
@@ -180,7 +208,7 @@ export class GraphRenderer extends React.Component<
 
     onNodeClick(node: GraphNode) {
         this.focusOnNode(node);
-        if (MODE === "default") {
+        if (MODE === "default" && this.props.onNodeClicked) {
             this.props.onNodeClicked(node);
         }
     }
@@ -268,7 +296,7 @@ export class GraphRenderer extends React.Component<
         if (!(line instanceof Line2)) {
             return false;
         }
-
+        console.log("Updating links");
         const startR = 4;
         const endR = 4;
         const lineLen = Math.sqrt(
@@ -288,7 +316,7 @@ export class GraphRenderer extends React.Component<
                 )
             )
             .flat();
-
+        // line.geometry.setFromPoints()
         line.geometry.setPositions(positions);
         // line.geometry.getAttribute("position").needsUpdate = true;
         // line.computeLineDistances();
@@ -300,7 +328,7 @@ export class GraphRenderer extends React.Component<
         return (
             <ForceGraph3D
                 ref={this.forceGraph}
-                width={Helpers.getWidth()} // TODO: Replace Helpers?
+                width={Helpers.getWidth()} // TODO: Replace Helpers downstream? This could be a prop
                 height={Helpers.getHeight()}
                 //                extraRenderers={[new CSS3DRenderer()]}
                 graphData={this.props.graph}
@@ -310,6 +338,9 @@ export class GraphRenderer extends React.Component<
                 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)
@@ -318,9 +349,9 @@ export class GraphRenderer extends React.Component<
                     line: Line2,
                     coords: { start: Coordinate; end: Coordinate }
                 ) => this.updateLinkPosition(line, coords.start, coords.end)}
-                // onNodeDragEnd={(node: GraphNode, translate: Coordinate) =>
-                //     this.onNodeDragEnd(node, translate)
-                // }
+                onNodeDragEnd={(node: GraphNode, translate: Coordinate) =>
+                    this.onNodeDragEnd(node, translate)
+                }
             />
         );
     }