Add precompute and zoom to fit on load

Author: OskarDamkjaer

src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx

@@ -277,6 +277,7 @@ LIMIT ${maxNewNeighbours}`
           updateStyle={this.props.updateStyle}
           getNeighbours={this.getNeighbours.bind(this)}
           nodes={this.state.nodes}
+          autocompleteRelationships={this.props.autoComplete ?? false}
           relationships={this.state.relationships}
           isFullscreen={this.props.isFullscreen}
           assignVisElement={this.props.assignVisElement}
@@ -301,6 +302,7 @@ LIMIT ${maxNewNeighbours}`
           DetailsPaneOverride={DetailsPane}
           OverviewPaneOverride={OverviewPane}
           useGeneratedDefaultColors={false}
+          initialZoomToFit
         />
       </StyledVisContainer>
     )

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/Graph.tsx

@@ -61,6 +61,7 @@ export type GraphProps = {
   styleVersion: number
   onGraphModelChange: (stats: GraphStats) => void
   assignVisElement: (svgElement: any, graphElement: any) => void
+  autocompleteRelationships: boolean
   getAutoCompleteCallback: (
     callback: (internalRelationships: BasicRelationship[]) => void
   ) => void
@@ -105,20 +106,21 @@ export class Graph extends React.Component<GraphProps, GraphState> {
 
   componentDidMount(): void {
     const {
-      nodes,
-      relationships,
-      graphStyle,
+      assignVisElement,
+      autocompleteRelationships,
+      getAutoCompleteCallback,
       getNodeNeighbours,
+      graphStyle,
+      initialZoomToFit,
+      isFullscreen,
+      nodes,
+      onGraphInteraction,
+      onGraphModelChange,
       onItemMouseOver,
       onItemSelect,
-      onGraphModelChange,
-      onGraphInteraction,
+      relationships,
       setGraph,
-      getAutoCompleteCallback,
-      assignVisElement,
-      isFullscreen,
-      wheelZoomRequiresModKey,
-      initialZoomToFit
+      wheelZoomRequiresModKey
     } = this.props
 
     if (!this.svgElement.current) return
@@ -137,7 +139,8 @@ export class Graph extends React.Component<GraphProps, GraphState> {
       graph,
       graphStyle,
       isFullscreen,
-      wheelZoomRequiresModKey
+      wheelZoomRequiresModKey,
+      initialZoomToFit
     )
 
     const graphEventHandler = new GraphEventHandlerModel(
@@ -153,30 +156,28 @@ export class Graph extends React.Component<GraphProps, GraphState> {
 
     onGraphModelChange(getGraphStats(graph))
     this.visualization.resize(isFullscreen, !!wheelZoomRequiresModKey)
-    if (initialZoomToFit) {
-      this.visualization.endInitCallback = () => {
-        setTimeout(() => {
-          this.visualization?.zoomByType(ZoomType.FIT)
-        }, 150)
-      }
-    }
-    this.visualization.init()
 
     if (setGraph) {
       setGraph(graph)
     }
-    if (getAutoCompleteCallback) {
+    if (autocompleteRelationships) {
       getAutoCompleteCallback((internalRelationships: BasicRelationship[]) => {
+        this.visualization?.init()
         graph.addInternalRelationships(
           mapRelationships(internalRelationships, graph)
         )
         onGraphModelChange(getGraphStats(graph))
         this.visualization?.update({
           updateNodes: false,
-          updateRelationships: true
+          updateRelationships: true,
+          restartSimulation: false
         })
+        this.visualization?.precomputeAndStart()
         graphEventHandler.onItemMouseOut()
       })
+    } else {
+      this.visualization?.init()
+      this.visualization?.precomputeAndStart()
     }
     if (assignVisElement) {
       assignVisElement(this.svgElement.current, this.visualization)

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/ForceSimulation.ts

@@ -36,8 +36,8 @@ import {
   FORCE_COLLIDE_RADIUS,
   FORCE_LINK_DISTANCE,
   LINK_DISTANCE,
-  PRECOMPUTED_TICKS,
-  TICKS_PER_RENDER,
+  MAX_PRECOMPUTED_TICKS,
+  EXTRA_TICKS_PER_RENDER,
   VELOCITY_DECAY
 } from '../../../constants'
 import { GraphModel } from '../../../models/Graph'
@@ -52,14 +52,15 @@ export class ForceSimulation {
   simulation: Simulation<NodeModel, RelationshipModel>
   simulationTimeout: null | number = null
 
-  constructor(private render: () => void) {
+  constructor(render: () => void) {
     this.simulation = forceSimulation<NodeModel, RelationshipModel>()
       .velocityDecay(VELOCITY_DECAY)
       .force('charge', forceManyBody().strength(FORCE_CHARGE))
       .force('centerX', forceX(0).strength(FORCE_CENTER_X))
       .force('centerY', forceY(0).strength(FORCE_CENTER_Y))
+      .alphaMin(DEFAULT_ALPHA_MIN)
       .on('tick', () => {
-        this.simulation.tick(TICKS_PER_RENDER)
+        this.simulation.tick(EXTRA_TICKS_PER_RENDER)
         render()
       })
       .stop()
@@ -91,12 +92,26 @@ export class ForceSimulation {
     )
   }
 
-  precompute(): void {
-    this.simulation.stop().tick(PRECOMPUTED_TICKS)
-    this.render()
+  precomputeAndStart(onEnd: () => void = () => undefined): void {
+    this.simulation.stop()
+
+    let precomputeTicks = 0
+    const start = performance.now()
+    while (
+      performance.now() - start < 250 &&
+      precomputeTicks < MAX_PRECOMPUTED_TICKS
+    ) {
+      this.simulation.tick(1)
+      precomputeTicks += 1
+      if (this.simulation.alpha() <= this.simulation.alphaMin()) {
+        break
+      }
+    }
+
+    this.simulation.restart().on('end', onEnd)
   }
 
   restart(): void {
-    this.simulation.alphaMin(DEFAULT_ALPHA_MIN).alpha(DEFAULT_ALPHA).restart()
+    this.simulation.alpha(DEFAULT_ALPHA).restart()
   }
 }

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts

@@ -70,17 +70,17 @@ export class Visualization {
   // 'canvasClick' event when panning ends.
   private draw = false
   private isZoomClick = false
-  public endInitCallback: null | (() => void) = null
 
   constructor(
     element: SVGElement,
     private measureSize: MeasureSizeFn,
-    private onZoomEvent: (limitsReached: ZoomLimitsReached) => void,
-    private onDisplayZoomWheelInfoMessage: () => void,
+    onZoomEvent: (limitsReached: ZoomLimitsReached) => void,
+    onDisplayZoomWheelInfoMessage: () => void,
     private graph: GraphModel,
     public style: GraphStyleModel,
     public isFullscreen: boolean,
-    public wheelZoomRequiresModKey?: boolean
+    public wheelZoomRequiresModKey?: boolean,
+    private initialZoomToFit?: boolean
   ) {
     this.root = d3Select(element)
 
@@ -330,12 +330,23 @@ export class Visualization {
 
     this.updateNodes()
     this.updateRelationships()
-    this.forceSimulation.precompute()
 
     this.adjustZoomMinScaleExtentToFitGraph()
+    this.setInitialZoom()
+  }
+
+  setInitialZoom(): void {
+    const count = this.graph.nodes().length
 
-    this.endInitCallback && this.endInitCallback()
-    this.endInitCallback = null
+    // chosen by *feel* (graph fitting guesstimate)
+    const scale = -0.02364554 + 1.913 / (1 + (count / 12.7211) ** 0.8156444)
+    this.zoomBehavior.scaleBy(this.root, Math.max(0, scale))
+  }
+
+  precomputeAndStart(): void {
+    this.forceSimulation.precomputeAndStart(
+      () => this.initialZoomToFit && this.zoomByType(ZoomType.FIT)
+    )
   }
 
   update(options: {

src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx

@@ -84,6 +84,7 @@ type GraphVisualizerProps = GraphVisualizerDefaultProps & {
   OverviewPaneOverride?: React.FC<OverviewPaneProps>
   onGraphInteraction?: GraphInteractionCallBack
   useGeneratedDefaultColors?: boolean
+  autocompleteRelationships: boolean
 }
 
 type GraphVisualizerState = {
@@ -265,6 +266,7 @@ export class GraphVisualizer extends Component<
           onGraphModelChange={this.onGraphModelChange.bind(this)}
           assignVisElement={this.props.assignVisElement}
           getAutoCompleteCallback={this.props.getAutoCompleteCallback}
+          autocompleteRelationships={this.props.autocompleteRelationships}
           setGraph={this.props.setGraph}
           offset={
             (this.state.nodePropertiesExpanded ? this.state.width + 8 : 0) + 8

src/neo4j-arc/graph-visualization/constants.ts

@@ -20,8 +20,8 @@
 import { NodeModel } from './models/Node'
 import { RelationshipModel } from './models/Relationship'
 
-export const PRECOMPUTED_TICKS = 300
-export const TICKS_PER_RENDER = 10
+export const MAX_PRECOMPUTED_TICKS = 300
+export const EXTRA_TICKS_PER_RENDER = 10
 
 // Friction.
 export const VELOCITY_DECAY = 0.4