Smoothed camera transition when focusing on nodes

src/display/renderer.tsx

@@ -235,29 +235,35 @@ export class GraphRenderer extends React.Component<
     onNodeDragEnd(node: GraphNode, translate: Coordinate) {
         // NodeDrag is handled like NodeClick if distance is very short
         if (
-            Math.sqrt(
-                Math.pow(translate.x, 2) +
-                    Math.pow(translate.y, 2) +
-                    Math.pow(translate.z, 2)
-            ) < DRAG_THRESHOLD_3D
+            Math.hypot(translate.x, translate.y, translate.z) <
+            DRAG_THRESHOLD_3D
         ) {
             this.onNodeClick(node);
         }
     }
 
     focusOnNode(node: GraphNode) {
-        // Aim at node from outside it
-        const distance = 400;
+        const distance = 400; // Aim at node from outside it
+        const speed = 0.5; // Camera travel speed through space
+        const minTime = 1000; // Minimum transition time
         const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
 
+        const currentPos = this.forceGraph.current.cameraPosition();
+        const newPos = {
+            x: node.x * distRatio,
+            y: node.y * distRatio,
+            z: node.z * distRatio,
+        };
+        const travelDist = Math.hypot(
+            newPos.x - currentPos.x,
+            newPos.y - currentPos.y,
+            newPos.z - currentPos.z
+        );
+
         this.forceGraph.current.cameraPosition(
-            {
-                x: node.x * distRatio,
-                y: node.y * distRatio,
-                z: node.z * distRatio,
-            }, // new position
+            newPos,
             node, // lookAt ({ x, y, z })
-            1000 // ms transition duration
+            Math.max(travelDist / speed, minTime) // ms transition duration
         );
     }
 
@@ -296,10 +302,10 @@ export class GraphRenderer extends React.Component<
         // console.log("Updating links");
         const startR = 4;
         const endR = 4;
-        const lineLen = Math.sqrt(
-            Math.pow(end.x - start.x, 2) +
-                Math.pow(end.y - start.y, 2) +
-                Math.pow(end.z - start.z, 2)
+        const lineLen = Math.hypot(
+            end.x - start.x,
+            end.y - start.y,
+            end.z - start.z
         );
 
         const positions = [startR / lineLen, 1 - endR / lineLen]