@neo4j-nvl/base 1.1.0 → 1.2.0-090ec876

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
 import type { CircularOptions, ForceDirectedOptions, HierarchicalOptions, Renderer as InternalRenderer, Layout, LayoutOptions, NvlOptions, NvlState, ZoomOptions } from './modules/state/types';
 import { CanvasRendererType, CircularLayoutType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, SvgRendererType, WebGLRendererType, d3ForceLayoutType } from './modules/state/types';
-import { drawCircleBand } from './renderers/domrenderer/canvasrenderer/canvasUtils';
+import { drawCircleBand } from './renderers/domrenderer/canvasrenderer/nodeDrawing';
 import type { StyledCaption } from './renderers/domrenderer/shared/types';
 import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
 import { CompatibilityError } from './utils/errors';
@@ -289,6 +289,25 @@ declare class NVL {
     getImageDataUrl(options?: {
         backgroundColor?: string;
     }): string;
+    /**
+     * Returns the entire graph visualization as an SVG data URL.
+     * @param options - Options for the SVG export
+     * @param options.backgroundColor - The background color of the SVG (defaults to transparent).
+     * @returns A Promise resolving to a data URL string representing the graph as SVG (data:image/svg+xml;...)
+     * @experimental
+     *
+     * @example
+     * ```typescript
+     * const svgDataUrl = await nvl.getSvgDataUrl({ backgroundColor: '#ffffff' })
+     * const img = document.createElement('img')
+     * img.src = svgDataUrl
+     * img.alt = 'Graph Visualization'
+     * document.body.appendChild(img)
+     * ```
+     */
+    getSvgDataUrl(options?: {
+        backgroundColor?: string;
+    }): Promise<string>;
     /**
      * Saves the entire graph visualization canvas as a png to the client.
      * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.

package/dist/types/layouts/d3forcelayout/__mocks__/d3ForceLayout.d.ts

@@ -0,0 +1,10 @@
+export declare class D3ForceLayout {
+    update(): void;
+    getNodePositions(items: unknown[]): unknown[];
+    getShouldUpdate(): boolean;
+    getComputing(): boolean;
+    destroy(): void;
+    setOptions(): void;
+    updateNodes(): void;
+    terminateUpdate(): void;
+}

package/dist/types/layouts/d3forcelayout/constants.d.ts

@@ -12,7 +12,6 @@ export declare const BARNES_HUT_THETA = 1.2;
 export declare const FORCE_LINK_DISTANCE: (relationship: SimulationLinkDatum<D3Node>) => number;
 export declare const FORCE_LINK_STRENGTH: (link: SimulationLinkDatum<SimulationNodeDatum>, count: number[]) => number;
 export declare const FORCE_COLLIDE_RADIUS: (node: D3Node) => number;
-export declare const LAYOUT_RADIUS: (numberOfNodes: number) => number;
 export declare const FORCE_CHARGE: () => number;
 export declare const FORCE_CHARGE_START: () => number;
 export declare const FORCE_CENTER_X = 0.03;

package/dist/types/layouts/d3forcelayout/d3ForceLayout.d.ts

@@ -1,33 +1,33 @@
-export class d3ForceLayout {
-    constructor(config: any);
-    state: any;
-    d3Nodes: {};
-    d3RelList: {};
+import type { Simulation, SimulationLinkDatum, SimulationNodeDatum } from 'd3-force';
+import type { NvlState } from '../../modules/state/types';
+import type { Node, Relationship } from '../../types/graph-element';
+import type { Point } from '../../utils/geometry';
+import type { D3Node } from './types';
+export declare class D3ForceLayout {
+    state: NvlState;
+    d3Nodes: Record<string, D3Node>;
+    d3RelList: SimulationLinkDatum<D3Node>[];
     computing: boolean;
-    center: {
-        x: number;
-        y: number;
-    };
-    nodeRelCount: any[];
-    simulation: import("d3-force").Simulation<import("d3-force").SimulationNodeDatum, undefined>;
+    center: Point;
+    nodeRelCount: number[];
+    simulation: Simulation<SimulationNodeDatum, undefined>;
     simulationStopped: boolean;
     shouldUpdate: boolean;
     shouldReheatNodes: boolean;
     shouldCountNodeRels: boolean;
-    stateDisposers: any[];
+    stateDisposers: (() => void)[];
+    constructor(config: {
+        state: NvlState;
+    });
     setOptions(options: any): void;
-    updateNodes(positionList: any): void;
+    updateNodes(positionList: D3Node[]): void;
     update(refreshPositions?: boolean): void;
-    layout(_nodes: any, _rels: any, firstTimeAddingNodes: any): void;
-    getNodePositions(nodeList: any): {
-        id: any;
-        x: any;
-        y: any;
-    }[];
+    layout(_nodes: Node[], _rels: Relationship[], firstTimeAddingNodes: boolean): void;
+    getNodePositions(nodeList: D3Node[]): any[];
     getShouldUpdate(): boolean;
     getComputing(): boolean;
     terminateUpdate(): void;
     destroy(): void;
-    setAlpha(alpha: any): void;
+    setAlpha(alpha: number): void;
     countNodeRels(): any[];
 }

package/dist/types/layouts/d3forcelayout/d3ForceLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/layouts/d3forcelayout/types.d.ts

@@ -1,9 +1,8 @@
-export type D3Node = {
-    x: number | undefined;
-    y: number | undefined;
+import type { Node } from '../../types/graph-element';
+export type D3Node = Node & {
     vx?: number;
     vy?: number;
-    fx?: number | null;
-    fy?: number | null;
-    size?: number;
+    fx?: number;
+    fy?: number;
+    index?: number;
 };

package/dist/types/layouts/forcedirectedlayout/physlayout/PhysLayout.d.ts

@@ -7,7 +7,6 @@ export declare class PhysLayout {
     private physProjection;
     private physSmallProjection;
     private gl;
-    private useReadpixelWorkaround;
     private averageNodeSize;
     private shouldUpdate;
     private iterationCount;
@@ -19,7 +18,6 @@ export declare class PhysLayout {
     private stateDisposers;
     private state;
     private dpr;
-    private intelWorkaround;
     private simulationStopVelocitySquared;
     private gravity;
     private force;
@@ -31,6 +29,9 @@ export declare class PhysLayout {
     private subGraphs;
     private nodeSortMap;
     private firstUpdate;
+    private precomputeMs;
+    private precomputeStarted;
+    private precomputing;
     private curPhysData;
     private apprxRepForceShader;
     private levelsClusterTexture;
@@ -40,26 +41,22 @@ export declare class PhysLayout {
     private collisionDetectionMultiplier;
     private physShader;
     private physData;
-    private workaroundData;
     private pinData;
     private updateData;
     private updateShader;
-    private workaroundShader;
     private physPositions;
     private springTexture;
     private sizeTexture;
     private offsetTexture;
     private pinTexture;
     private addedNodes;
+    private seedingMethod;
     private updateTexture;
-    private vaoExt;
     private physVao;
     private physSmallVao;
     private updateVao;
-    private workaroundVao;
-    enableVerlet: boolean;
     constructor(config: ForceDirectedOptions & {
-        webGLContext: WebGLRenderingContext;
+        webGLContext: WebGL2RenderingContext;
         state: NvlState;
     });
     /**
@@ -77,6 +74,17 @@ export declare class PhysLayout {
         nodes: Node[];
         rels: Relationship[];
     }): import("./solarmerger/types").CoarsenedGraph;
+    /**
+     * Synchronously runs physics simulation for the configured time budget before
+     * the layout is first rendered.
+     * Sets `getComputing()` to `true` while running and clears
+     * it when precompute finishes (including early exit when the layout halts).
+     */
+    private runPrecompute;
+    private isPrecomputeEnabled;
+    private hasPendingPrecompute;
+    private hasInteractingNodes;
+    private shouldRunPrecompute;
     /**
      * Updates the node's positions for the next step in the physics layout iterations if the layout needs to update
      * @param refreshPositions whether the entire layout should be reheated
@@ -93,9 +101,7 @@ export declare class PhysLayout {
      */
     getShouldUpdate(): boolean;
     /**
-     * Returns whether the current layout is computing.
-     * Always returns false because the force-directed layout has no computing step
-     * @returns Whether the layout is computing.
+     * @returns Whether the layout is running the precompute step.
      */
     getComputing(): boolean;
     /**
@@ -169,7 +175,5 @@ export declare class PhysLayout {
     private setupPhysicsForCoarse;
     private setupPinData;
     private setupUpdates;
-    private setupReadpixelWorkaround;
-    private doReadpixelWorkaround;
     private definePhysicsArrays;
 }

package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/multilevel-fragment.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "precision mediump float;\n\nuniform sampler2D u_physData;\nuniform sampler2D u_connections;\nuniform sampler2D u_connectionOffsets;\nuniform sampler2D u_pinnedNodes;\nuniform sampler2D u_sizeTexture;\nuniform float u_baseLength;\nuniform float u_curIteration;\nuniform float u_iterationMultiplier;\nuniform vec2 u_gravityCenter;\nuniform float u_numNodes;\nuniform float u_gravity;\n\nuniform sampler2D u_clusterData;\nuniform sampler2D u_prevForce;\nuniform float u_collisionMultiplier;\n\nfloat TIMESTEP = 1.0 / 30.0;\nfloat VELOCITYDECAY = 0.6;\nfloat accLimitLow = 500000.0;\nfloat accLimitHigh = 750000.0;\nfloat accLimitPosHigh = 10000000.0;\n\nconst float denseNodeThreshold = 1000.0;\nconst float MIN_DISTANCE = 0.00000001;\nconst float MAX_DISTANCE = 1000000000.0;\nconst float MAX_ACCELERATION = 500000.0;\n\nvec4 getTextureData(sampler2D texture, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture2D(texture, vec2(x + 0.5, y + 0.5) / base);\n}\n\nbool isNan(float val) {\n  return (val < 0.0 || 0.0 < val || val == 0.0) ? false : true;\n}\n\nconst float BIG_NUMBER = 999999999999999999.0;\nbool isInf(float val) {\n  return val > BIG_NUMBER || val < -BIG_NUMBER;\n}\n\nvec2 getDelta(vec2 v1, vec2 v2) {\n  vec2 delta = v1 - v2;\n  float dist = length(delta);\n  if (dist < MIN_DISTANCE || isNan(dist)) {\n    return vec2(MIN_DISTANCE, MIN_DISTANCE);\n  }\n  if (dist > MAX_DISTANCE) {\n    vec2 normDelta = delta / dist;\n    return normDelta * MAX_DISTANCE;\n  }\n  return delta;\n}\n\nvec4 getOtherNodePosition(float i) {\n  return getTextureData(u_physData, i, 256.0);\n}\n\nfloat getCombinedNodeSize(float i, float nodeSize) {\n  float otherNodeSize = getTextureData(u_sizeTexture, i, 256.0).a;\n  return nodeSize + otherNodeSize;\n}\n\nvec2 getSpringForce(float curConnection,  float numConnections, float springFScale, vec4 myPosition, float i) {\n  float curSpring = getTextureData(u_connections, curConnection + i, 4096.0).a;\n\n  vec4 otherPosition = getTextureData(u_physData, curSpring, 256.0);\n  float otherDataPosition = getTextureData(u_connectionOffsets, curSpring, 256.0).a;\n  float avgDegree;\n#if INTEL_WORKAROUND\n    avgDegree = max(numConnections, 4.0);\n#else\n    float otherNumConnections = getTextureData(u_connections, otherDataPosition, 4096.0).a;\n    avgDegree = max((otherNumConnections + numConnections * 3.0) / 4.0, 4.0);\n#endif\n\n  vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n  float dist = length(delta);\n\n  float F = (dist * dist * springFScale) / (u_baseLength * avgDegree);\n  if (u_collisionMultiplier > 0.0) {\n    F *= u_collisionMultiplier;\n  }\n  return (-delta / dist) * F;\n}\n\nvec2 getCollisionForce(float combinedNodeSize, float dist, float fScale, vec2 delta) {\n  float collisionForce = ((combinedNodeSize - dist) / dist);\n  if (u_collisionMultiplier > 0.0) {\n    collisionForce *= u_collisionMultiplier;\n  }\n  return (delta * collisionForce * fScale * combinedNodeSize) / (combinedNodeSize + 1.0);\n}\n\nvec2 getRepulsionForce(float dist, float fScale, vec2 delta) {\n  float F = (u_baseLength * u_baseLength * (fScale / 1.5)) / dist;\n  return (delta / dist) * F * 0.05;\n}\n\nvoid main(void) {\n  float textureSide = 256.0; //#TEXTURE_SIDE#;\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5) * textureSide;\n\n  if (index >= u_numNodes) {\n    discard;\n  }\n\n  vec4 clusterData = getTextureData(u_clusterData, index, 256.0);\n\n  float clusterIndex = clusterData.x;\n  float clusterStartIndex = clusterData.y;\n  float clusterSize = clusterData.z;\n  float clusterWeight = clusterData.w;\n\n  vec4 myPosition = getTextureData(u_physData, index, 256.0);\n  vec4 previousForce = getTextureData(u_prevForce, clusterIndex, 256.0);\n\n  vec2 acceleration = previousForce.xy;\n\n  float isPinned = getTextureData(u_pinnedNodes, index, 256.0).a;\n  float nodeSize = getTextureData(u_sizeTexture, index, 256.0).a;\n\n  if (isPinned > 0.5) {\n    gl_FragColor = vec4(myPosition.xy, 0.0, 0.0);\n    return;\n  }\n\n  float curConnection = getTextureData(u_connectionOffsets, index, 256.0).a;\n  float numConnections = getTextureData(u_connections, curConnection, 4096.0).a;\n\n  float fScale = 1.0 + sqrt(u_iterationMultiplier);\n  float springFScale = fScale;\n\n  if (numConnections > denseNodeThreshold) {\n    springFScale = sqrt(fScale);\n  }\n\n  float numOfRels = 0.0;\n\n  // Springs\n  for (float i = 1.0; i <= 256.0 * 256.0; i++) {\n    if (numOfRels >= numConnections) {\n      break;\n    }\n    acceleration += getSpringForce(curConnection, numConnections, springFScale, myPosition, i);\n    numOfRels += 1.0;\n  }\n\n  // Repulsion && collision detection\n  if (u_collisionMultiplier > 0.0) {\n    float number_of_collisions = 0.0;\n    for (float i = 0.0; i < 256.0 * 256.0; i++) {\n      if (i >= u_numNodes) {\n        break;\n      }\n\n      if (i == index) {\n        continue;\n      }\n\n      vec4 otherPosition = getOtherNodePosition(i);\n      vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n      float dist = length(delta);\n      float combinedNodeSize = getCombinedNodeSize(i, nodeSize) * 2.0;\n\n      if (dist < combinedNodeSize && number_of_collisions < 40.0) {\n        number_of_collisions++;\n        acceleration += getCollisionForce(combinedNodeSize, dist, fScale, delta);\n      }\n\n      if (i >= clusterStartIndex && i < clusterStartIndex + clusterSize) {\n        acceleration += getRepulsionForce(dist, fScale, delta);\n      }\n    }\n  } else {\n    for (float i = 0.0; i < 256.0 * 256.0; i++) {\n      if (i >= clusterStartIndex + clusterSize || i >= u_numNodes) {\n        break;\n      }\n\n      if (i < clusterStartIndex || i == index) {\n        continue;\n      }\n\n      vec4 otherPosition = getOtherNodePosition(i);\n      vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n      float dist = length(delta);\n      float combinedNodeSize = getCombinedNodeSize(i, nodeSize);\n\n      if (dist < combinedNodeSize) {\n        acceleration += getCollisionForce(combinedNodeSize, dist, fScale, delta);\n      }\n\n      acceleration += getRepulsionForce(dist, fScale, delta);\n    }\n  }\n\n  // Gravity\n  vec2 delta = getDelta(u_gravityCenter, myPosition.xy);\n  float dist = length(delta);\n\n  vec2 grav = (delta / dist) * u_gravity * fScale;\n  acceleration += grav * smoothstep(0.0, 500.0, dist);\n\n  float accMagnitude = length(acceleration);\n  acceleration *= min(MAX_ACCELERATION, accMagnitude) / accMagnitude;\n\n  float iterationFrictionThreshold = 1000.0;\n\n  if (u_curIteration > iterationFrictionThreshold) {\n    float friction = 1.0 + pow((u_curIteration - iterationFrictionThreshold), 2.0) / 100.0;\n    acceleration *= 1.0 / friction;\n  }\n\n  if (u_curIteration == 0.0) {\n    gl_FragColor = vec4(myPosition.xy, acceleration * TIMESTEP * 0.5);\n  } else {\n    myPosition.zw = myPosition.zw * VELOCITYDECAY;\n    gl_FragColor = vec4(myPosition.xy + myPosition.zw * TIMESTEP, myPosition.zw + acceleration * TIMESTEP);\n  }\n}";
+declare const _default: "#version 300 es\nprecision mediump float;\n\nuniform sampler2D u_physData;\nuniform sampler2D u_connections;\nuniform sampler2D u_connectionOffsets;\nuniform sampler2D u_pinnedNodes;\nuniform sampler2D u_sizeTexture;\nuniform float u_baseLength;\nuniform float u_curIteration;\nuniform float u_iterationMultiplier;\nuniform vec2 u_gravityCenter;\nuniform float u_numNodes;\nuniform float u_gravity;\n\nuniform sampler2D u_clusterData;\nuniform sampler2D u_prevForce;\nuniform float u_collisionMultiplier;\n\nout vec4 fragColor;\n\nfloat DAMP = 0.6;\nfloat COOL = 0.99998;\nfloat TIMESTEP = 1.0 / 30.0;\nfloat VELOCITYDECAY = 0.6;\nfloat accLimitLow = 500000.0;\nfloat accLimitHigh = 750000.0;\nfloat accLimitPosHigh = 10000000.0;\n\nconst float denseNodeThreshold = 1000.0;\nconst float MIN_DISTANCE = 0.00000001;\nconst float MAX_DISTANCE = 1000000000.0;\nconst float MAX_ACCELERATION = 50000.0;\n\nvec4 getTextureData(sampler2D tex, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture(tex, vec2(x + 0.5, y + 0.5) / base);\n}\n\nbool isNan(float val) {\n  return (val < 0.0 || 0.0 < val || val == 0.0) ? false : true;\n}\n\nconst float BIG_NUMBER = 999999999999999999.0;\nbool isInf(float val) {\n  return val > BIG_NUMBER || val < -BIG_NUMBER;\n}\n\nvec2 getDelta(vec2 v1, vec2 v2) {\n  vec2 delta = v1 - v2;\n  float dist = length(delta);\n  if (dist < MIN_DISTANCE || isNan(dist)) {\n    return vec2(MIN_DISTANCE, MIN_DISTANCE);\n  }\n  if (dist > MAX_DISTANCE) {\n    vec2 normDelta = delta / dist;\n    return normDelta * MAX_DISTANCE;\n  }\n  return delta;\n}\n\nvec4 getOtherNodePosition(float i) {\n  return getTextureData(u_physData, i, 256.0);\n}\n\nfloat getCombinedNodeSize(float i, float nodeSize) {\n  float otherNodeSize = getTextureData(u_sizeTexture, i, 256.0).r;\n  return nodeSize + otherNodeSize;\n}\n\nvec2 getSpringForce(float curConnection, float numConnections, float springFScale, vec4 myPosition, float i) {\n  float curSpring = getTextureData(u_connections, curConnection + i, 4096.0).r;\n\n  vec4 otherPosition = getTextureData(u_physData, curSpring, 256.0);\n  float otherDataPosition = getTextureData(u_connectionOffsets, curSpring, 256.0).r;\n  float otherNumConnections = getTextureData(u_connections, otherDataPosition, 4096.0).r;\n  float avgDegree = max((otherNumConnections + numConnections * 3.0) / 4.0, 4.0);\n\n  vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n  float dist = length(delta);\n\n  float F = (dist * dist * springFScale) / (u_baseLength * avgDegree);\n  if (u_collisionMultiplier > 0.0) {\n    F *= u_collisionMultiplier;\n  }\n  return (-delta / dist) * F;\n}\n\nvec2 getCollisionForce(float combinedNodeSize, float dist, float fScale, vec2 delta) {\n  float collisionForce = (combinedNodeSize - dist) / (dist);\n  if (u_collisionMultiplier > 0.0) {\n    collisionForce *= u_collisionMultiplier;\n  }\n  return (delta * collisionForce * fScale * combinedNodeSize) / (combinedNodeSize + 1.0);\n}\n\nvec2 getRepulsionForce(float dist, float fScale, vec2 delta) {\n  float F = (u_baseLength * u_baseLength * fScale) / (dist);\n  return (delta / dist) * F * 0.05;\n}\n\nvoid main(void) {\n  float textureSide = 256.0; //#TEXTURE_SIDE#;\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5) * textureSide;\n\n  if (index >= u_numNodes) {\n    discard;\n  }\n\n  vec4 clusterData = getTextureData(u_clusterData, index, 256.0);\n\n  float clusterIndex = clusterData.x;\n  float clusterStartIndex = clusterData.y;\n  float clusterSize = clusterData.z;\n  float clusterWeight = clusterData.w;\n\n  vec4 myPosition = getTextureData(u_physData, index, 256.0);\n  vec4 previousForce = getTextureData(u_prevForce, clusterIndex, 256.0);\n\n  vec2 acceleration = previousForce.xy;\n\n  float isPinned = getTextureData(u_pinnedNodes, index, 256.0).r;\n  float nodeSize = getTextureData(u_sizeTexture, index, 256.0).r;\n\n  if (isPinned > 0.5) {\n    fragColor = vec4(myPosition.xy, 0.0, 0.0);\n    return;\n  }\n\n  float curConnection = getTextureData(u_connectionOffsets, index, 256.0).r;\n  float numConnections = getTextureData(u_connections, curConnection, 4096.0).r;\n\n  float fScale = 1.0 + sqrt(u_iterationMultiplier);\n  float springFScale = fScale;\n\n  if (numConnections > denseNodeThreshold) {\n    springFScale = sqrt(fScale);\n  }\n\n  float numOfRels = 0.0;\n\n  // Springs\n  for (float i = 1.0; i <= 256.0 * 256.0; i++) {\n    if (numOfRels >= numConnections) {\n      break;\n    }\n    acceleration += getSpringForce(curConnection, numConnections, springFScale, myPosition, i);\n    numOfRels += 1.0;\n  }\n\n  // Repulsion && collision detection\n  if (u_collisionMultiplier > 0.0) {\n    float number_of_collisions = 0.0;\n    for (float i = 0.0; i < 256.0 * 256.0; i++) {\n      if (i >= u_numNodes) {\n        break;\n      }\n\n      if (i == index) {\n        continue;\n      }\n\n      vec4 otherPosition = getOtherNodePosition(i);\n      vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n      float dist = length(delta);\n      float combinedNodeSize = getCombinedNodeSize(i, nodeSize) * 2.0;\n\n      if (dist < combinedNodeSize && number_of_collisions < 40.0) {\n        number_of_collisions++;\n        acceleration += getCollisionForce(combinedNodeSize, dist, fScale, delta);\n      }\n\n      if (i >= clusterStartIndex && i < clusterStartIndex + clusterSize) {\n        acceleration += getRepulsionForce(dist, fScale, delta);\n      }\n    }\n  } else {\n    for (float i = 0.0; i < 256.0 * 256.0; i++) {\n      if (i >= clusterStartIndex + clusterSize || i >= u_numNodes) {\n        break;\n      }\n\n      if (i < clusterStartIndex || i == index) {\n        continue;\n      }\n\n      vec4 otherPosition = getOtherNodePosition(i);\n      vec2 delta = getDelta(myPosition.xy, otherPosition.xy);\n      float dist = length(delta);\n      float combinedNodeSize = getCombinedNodeSize(i, nodeSize);\n\n      if (dist < combinedNodeSize) {\n        acceleration += getCollisionForce(combinedNodeSize, dist, fScale, delta);\n      }\n\n      acceleration += getRepulsionForce(dist, fScale, delta);\n    }\n  }\n\n  // Gravity\n  vec2 delta = getDelta(u_gravityCenter, myPosition.xy);\n  float dist = length(delta);\n\n  vec2 grav = (delta / dist) * u_gravity * fScale * (dist / 1000.0);\n  acceleration += grav;\n\n  float accMagnitude = length(acceleration);\n  acceleration *= min(MAX_ACCELERATION, accMagnitude) / accMagnitude;\n\n  float iterationFrictionThreshold = 1000.0;\n\n  if (u_curIteration > iterationFrictionThreshold) {\n    float friction = 1.0 + pow((u_curIteration - iterationFrictionThreshold), 2.0) / 100.0;\n    acceleration *= 1.0 / friction;\n  }\n\n  if (u_curIteration == 0.0) {\n    fragColor = vec4(myPosition.xy, myPosition.zw);\n  } else {\n    float TEMP = max(0.02, pow(COOL, u_curIteration));\n    vec2 prevVelocity = myPosition.zw;\n    vec2 currentPos = myPosition.xy;\n\n    vec2 newPos = currentPos + TEMP * ( DAMP * (prevVelocity) + acceleration * TIMESTEP * TIMESTEP);\n    vec2 newVelocity = newPos - currentPos;\n    fragColor = vec4(newPos, newVelocity);\n  }\n}";
 export default _default;

package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/multilevel-repulsive-fragment.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "precision mediump float;\nuniform sampler2D u_physData;\nuniform sampler2D u_clusterData;\nuniform sampler2D u_finestIndexes;\nuniform sampler2D u_prevForce;\n\nuniform float u_baseLength;\nuniform float u_numNodes;\nuniform float u_iterationMultiplier;\nuniform float u_isTopLevel;\n\nfloat TIMESTEP = 1.0 / 30.0;\nfloat VELOCITYDECAY = 0.6;\n\nvec4 getTextureData(sampler2D texture, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture2D(texture, vec2(x + 0.5, y + 0.5) / base);\n}\n\nfloat getLogClusterWeight(float value) {\n  return value / max(log(value), 1.0);\n}\n\nvoid main(void) {\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5) * 256.0;\n\n  if (index >= u_numNodes) {\n    discard;\n  }\n\n  vec4 clusterData = getTextureData(u_clusterData, index, 256.0);\n\n  float clusterIndex = clusterData.x;\n  float clusterStartIndex = clusterData.y;\n  float clusterSize = clusterData.z;\n\n  float finestIndex = getTextureData(u_finestIndexes, index, 256.0).a;\n  vec4 myPosition = getTextureData(u_physData, finestIndex, 256.0);\n  vec4 previousForce = getTextureData(u_prevForce, clusterIndex, 256.0);\n  float fScale = 1.0 + sqrt(u_iterationMultiplier);\n\n  vec2 acceleration = previousForce.xy;\n\n  // Repulsion & Collision Detection\n  for (float i = 0.0; i < 256.0 * 256.0; i++) {\n    if (i >= clusterStartIndex + clusterSize || i >= u_numNodes) {\n      break;\n    }\n    if (i < clusterStartIndex || i == index) {\n      continue;\n    }\n\n    vec4 otherClusterData = getTextureData(u_clusterData, i, 256.0);\n    float otherClusterWeight = getLogClusterWeight(otherClusterData.w);\n\n    float otherFinestIndex = getTextureData(u_finestIndexes, i, 256.0).a;\n    vec4 otherPosition = getTextureData(u_physData, otherFinestIndex, 256.0);\n\n    vec2 delta = myPosition.xy - otherPosition.xy;\n    float dist = max(length(delta), 0.0000001);\n    float maxDist = 25.0;\n    float repulsionForceScale = 0.1;\n\n    float F = ((u_baseLength * u_baseLength) * (fScale / 1.5)) / dist;\n\n    if (u_isTopLevel == 1.0) {\n      repulsionForceScale = 0.3;\n    }\n\n    acceleration += ((delta / dist) * F) * repulsionForceScale * otherClusterWeight;\n\n    if (dist < maxDist) {\n      float collide = (maxDist - dist) / dist;\n      acceleration += delta * collide * fScale * maxDist / (maxDist + 1.0);\n    }\n  }\n\n  gl_FragColor = vec4(acceleration, vec2(finestIndex, 0));\n}";
+declare const _default: "#version 300 es\nprecision mediump float;\nuniform sampler2D u_physData;\nuniform sampler2D u_clusterData;\nuniform sampler2D u_finestIndexes;\nuniform sampler2D u_prevForce;\n\nuniform float u_baseLength;\nuniform float u_numNodes;\nuniform float u_iterationMultiplier;\nuniform float u_isTopLevel;\n\nout vec4 fragColor;\n\nfloat PI = 3.1415926535897932384626433832795;\nfloat TIMESTEP = 1.0 / 30.0;\nfloat VELOCITYDECAY = 1.0;\n\nvec4 getTextureData(sampler2D tex, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture(tex, vec2(x + 0.5, y + 0.5) / base);\n}\n\nfloat getSquaredLogClusterWeight(float value) {\n  return pow(log(value), 2.0);\n}\n\nvoid main(void) {\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5) * 256.0;\n\n  if (index >= u_numNodes) {\n    discard;\n  }\n\n  vec4 clusterData = getTextureData(u_clusterData, index, 256.0);\n\n  float clusterIndex = clusterData.x;\n  float clusterStartIndex = clusterData.y;\n  float clusterSize = clusterData.z;\n  float clusterArea = pow(clusterSize + u_baseLength * 2.0, 2.0);\n\n  float finestIndex = getTextureData(u_finestIndexes, index, 256.0).r;\n  vec4 myPosition = getTextureData(u_physData, finestIndex, 256.0);\n  vec4 previousForce = getTextureData(u_prevForce, clusterIndex, 256.0);\n  float fScale = 1.0 + sqrt(u_iterationMultiplier);\n\n  vec2 acceleration = previousForce.xy;\n\n  // Repulsion & Collision Detection\n  for (float i = 0.0; i < 256.0 * 256.0; i++) {\n    if (i >= clusterStartIndex + clusterSize || i >= u_numNodes) {\n      break;\n    }\n    if (i < clusterStartIndex || i == index) {\n      continue;\n    }\n\n    vec4 otherClusterData = getTextureData(u_clusterData, i, 256.0);\n    float otherClusterWeight = getSquaredLogClusterWeight(otherClusterData.w);\n\n    float otherFinestIndex = getTextureData(u_finestIndexes, i, 256.0).r;\n    vec4 otherPosition = getTextureData(u_physData, otherFinestIndex, 256.0);\n\n    vec2 delta = myPosition.xy - otherPosition.xy;\n    float dist = max(length(delta), 0.0000001);\n    float maxDist = 25.0;\n    float repulsionForceScale = 0.1;\n\n    float F = (clusterArea * fScale) / (dist * dist);\n\n    if (u_isTopLevel == 1.0) {\n      repulsionForceScale = 0.2;\n    }\n\n    acceleration += ((delta / sqrt(dist)) * F) * repulsionForceScale * otherClusterWeight;\n\n    if (dist < maxDist) {\n      float collide = (maxDist - dist) / (dist * dist);\n      acceleration += delta * collide * fScale * maxDist / (maxDist + 1.0);\n    }\n  }\n\n  fragColor = vec4(acceleration, vec2(finestIndex, 0));\n}";
 export default _default;

package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/multilevel-update-fragment.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "precision mediump float;\n\nuniform sampler2D u_physData;\nuniform sampler2D u_updateData;\nuniform float u_numNodesNew;\n\nconst float INDEX_FLAG = 999999.0;\n\nvec4 getTextureData(sampler2D texture, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture2D(texture, vec2(x + 0.5, y + 0.5) / base);\n}\n\nvoid main(void) {\n  float textureSide = 256.0; //#TEXTURE_SIDE#;\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5)*textureSide;\n\n  if (index >= u_numNodesNew) {\n    discard;\n  }\n\n  float firstValue = getTextureData(u_updateData, index * 2.0, 256.0).a;\n  float secondValue = getTextureData(u_updateData, index * 2.0 + 1.0, 256.0).a;\n\n  if (secondValue == INDEX_FLAG) {\n    vec4 myPosition = getTextureData(u_physData, firstValue, 256.0);\n    gl_FragColor = myPosition;\n  } else {\n    gl_FragColor = vec4(firstValue, secondValue, 0.0, 0.0);\n  }\n}\n";
+declare const _default: "#version 300 es\nprecision mediump float;\n\nuniform sampler2D u_physData;\nuniform sampler2D u_updateData;\nuniform float u_numNodesNew;\n\nout vec4 fragColor;\n\nconst float INDEX_FLAG = 999999.0;\n\nvec4 getTextureData(sampler2D tex, float index, float base) {\n  float x = mod(index, base);\n  float y = (index - x) / base;\n  return texture(tex, vec2(x + 0.5, y + 0.5) / base);\n}\n\nvoid main(void) {\n  float textureSide = 256.0; //#TEXTURE_SIDE#;\n  float index = (gl_FragCoord.x - 0.5) + (gl_FragCoord.y - 0.5)*textureSide;\n\n  if (index >= u_numNodesNew) {\n    discard;\n  }\n\n  float firstValue = getTextureData(u_updateData, index * 2.0, 256.0).r;\n  float secondValue = getTextureData(u_updateData, index * 2.0 + 1.0, 256.0).r;\n\n  if (secondValue == INDEX_FLAG) {\n    vec4 myPosition = getTextureData(u_physData, firstValue, 256.0);\n    fragColor = myPosition;\n  } else {\n    fragColor = vec4(firstValue, secondValue, 0.0, 0.0);\n  }\n}\n";
 export default _default;

package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/sim-vertex.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "uniform mat4 u_projection;\n\nattribute vec2 a_position;\n//attribute float a_index;\n\n//varying highp float index;\n\nvoid main() {\n//  index = a_index;\n  gl_Position = u_projection * vec4(a_position, 0.0, 1.0);\n}";
+declare const _default: "#version 300 es\nuniform mat4 u_projection;\n\nin vec2 a_position;\n//in float a_index;\n\n//out highp float index;\n\nvoid main() {\n//  index = a_index;\n  gl_Position = u_projection * vec4(a_position, 0.0, 1.0);\n}";
 export default _default;

package/dist/types/layouts/forcedirectedlayout/physlayout/solarmerger/SolarMerger.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/layouts/gridLayout/GridLayout.d.ts

@@ -1,14 +1,30 @@
-export class GridLayout {
-    constructor(config: any);
-    state: any;
-    positions: {};
-    stateDisposers: any[];
+import type { NvlState } from '../../modules/state/types';
+import type { Node } from '../../types/graph-element';
+import type { Point } from '../../utils/geometry';
+export declare class GridLayout {
+    state: NvlState;
+    positions: Record<string, Node & Point>;
+    stateDisposers: (() => void)[];
     shouldUpdate: boolean;
-    setOptions(options: any): void;
-    updateNodes(positionList: any): void;
+    constructor(config: {
+        state: NvlState;
+    });
+    setOptions(): void;
+    updateNodes(positionList: {
+        id: string;
+        x: number;
+        y: number;
+    }[]): void;
     update(refreshPositions?: boolean): void;
-    layout(mobxNodes: any, nodeIds: any, idToPosition: any, rels: any): void;
-    getNodePositions(nodeList: any): any[];
+    layout(mobxNodes: any): void;
+    setNodePositions(idToPosition: Record<string, Node & Point>): void;
+    getNodePositions(nodeList: {
+        id: string;
+    }[]): {
+        id: string;
+        x: number;
+        y: number;
+    }[];
     getShouldUpdate(): boolean;
     getComputing(): boolean;
     terminateUpdate(): void;

package/dist/types/modules/NvlController.d.ts

@@ -1,4 +1,4 @@
-import type { Node, Relationship } from '../types/graph-element';
+import { type Node, type PartialNode, type PartialRelationship, type Relationship } from '../types/graph-element';
 import '../types/nvl-window-functions';
 import type { Point } from '../utils/geometry';
 import type { ExternalCallbacks } from './ExternalCallbackHandler';
@@ -37,7 +37,7 @@ export default class NvlController {
     private readonly c2dCanvas;
     private readonly svg;
     private isInRenderSwitchAnimation;
-    private justSwitchedRenderer;
+    private previousRenderer;
     private justSwitchedLayout;
     private layoutUpdating;
     private layoutComputing;
@@ -46,12 +46,16 @@ export default class NvlController {
     private readonly stateDisposers;
     private readonly zoomTransitionHandler;
     private currentLayout;
+    private lastTimestamp;
+    private accumulator;
     private readonly layoutTimeLimit;
+    private readonly smoothFrameBudgetMs;
     private pixelRatio;
     private readonly removeResizeListener;
     private readonly removeMinimapResizeListener;
-    private pendingZoomOperation;
-    private layoutRunner;
+    private pendingZoom;
+    private pendingPan;
+    private pendingViewportOverride;
     private animationRequestId;
     private layoutDoneCallback;
     private layoutComputingCallback;
@@ -59,8 +63,13 @@ export default class NvlController {
     private descriptionElement;
     constructor(state: NvlState, frame: HTMLElement, options: NvlOptions);
     private onWebGLContextLost;
+    private fpsToFrameBudgetMs;
+    private getLayoutNeedsToUpdate;
+    private isWithinBudget;
     private updateMinimapZoom;
     private startMainLoop;
+    private renderNodeHtmlOverlays;
+    private renderRelationshipHtmlOverlays;
     updateHtmlOverlay(): void;
     dumpNodes(): Node[];
     dumpRelationships(): Relationship[];
@@ -116,10 +125,22 @@ export default class NvlController {
     private initiateFileDownload;
     private updateLayoutAndPositions;
     saveToFile(options: SaveToFileOptions): void;
+    private createSvgString;
     saveToSvg(options?: SaveToFileOptions): Promise<void>;
     getImageDataURL(options: SaveToFileOptions): string;
+    getSvgDataUrl(options?: SaveToFileOptions): Promise<string>;
     private prepareLargeFileForDownload;
     private createCanvasAndRenderImage;
     saveFullGraphToLargeFile(options: SaveToFileOptions): Promise<void>;
+    addAndUpdateElementsInGraph(nodes?: Node[] | PartialNode[], relationships?: Relationship[] | PartialRelationship[]): void;
+    updateElementsInGraph(nodes: Node[] | PartialNode[], relationships: Relationship[] | PartialRelationship[]): void;
+    /**
+     * Adds nodes and relationships in the current scene.
+     * @param {Node[]} nodes The nodes to be added.
+     * @param {Relationship[]} relationships The relationships to be added.
+     */
+    addElementsToGraph(nodes: Node[], relationships: Relationship[]): void;
+    private validateNodes;
+    private validateRelationships;
 }
 export {};

package/dist/types/modules/NvlController.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/modules/Shader.d.ts

@@ -4,7 +4,7 @@ export default class Shader {
     private curTexture;
     private attributeInfo;
     private uniformInfo;
-    constructor(gl: WebGLRenderingContext, vsSource: string, fsSource: string, defines?: {});
+    constructor(gl: WebGL2RenderingContext, vsSource: string, fsSource: string, defines?: {});
     setUniform(name: string, value: any): void;
     setAttributePointer(name: string, size: number, start: number, stride: number): void;
     setAttributePointerFloat(name: string, size: number, start: number, stride: number): void;

package/dist/types/modules/state/types.d.ts

@@ -38,25 +38,31 @@ export type DisabledItemStyles = {
  */
 export interface ForceDirectedOptions {
     /**
-     * Enables a workaround for Intel GPU compatibility issues in WebGL shader compilation.
-     * When enabled, this flag modifies how physics simulation shaders are compiled to avoid
-     * rendering problems on Intel graphics hardware.
-     *
-     * @remarks Requires a restart of NVL as shaders need to be recompiled.
+     * @deprecated No longer has any effect. The physics layout now uses WebGL2 which does not
+     * require the Intel GPU shader workaround. This option will be removed in a future release.
      */
     intelWorkaround?: boolean;
     /**
+     * @deprecated This option will be removed in a future release. For small datasets, use the d3Force layout instead.
      * Whether to enable automatic switching to CoseBilkent layout for small graphs.
      * When enabled, small graphs will automatically use the CoseBilkent layout algorithm
      * which can provide better initial positioning for smaller datasets.
+     * @defaultValue true
      */
     enableCytoscape?: boolean;
     /**
-     * Wether to use the new physics engine instead of the legacy one.
-     * @defaultValue true
-     * @internal
+     * How initial node positions are seeded before the physics simulation runs.
+     * @defaultValue 'box'
      */
-    enableVerlet?: boolean;
+    seedingMethod?: 'box' | 'circle';
+    /**
+     * @experimental
+     * Milliseconds of synchronous physics simulation to run before the layout is first rendered.
+     * Precompute stops early if the simulation stabilizes before the time budget is reached.
+     * @defaultValue 0
+     * @note Blocks the main thread, so use sparingly. Will be capped at 1000.
+     */
+    precomputeMs?: number;
 }
 /**
  * The options for the hierarchical layout
@@ -231,11 +237,24 @@ export interface NvlOptions {
         minimapViewportBoxColor?: string;
     };
     /**
-     * @internal
-     * @hidden
-     * Defines a time limit for how long layout iterations may run
+     * Target minimum presentation rate (fps) while layout is active.
+     * Rendering will not drop below this rate at the cost of stabilization speed.
+     *
+     * @defaultValue 3
+     *
+     * @note Must be within range of 1 and 120.
+     */
+    minFps?: number;
+    /**
+     * Target maximum presentation rate (fps) while layout is active.
+     * Rendering will not go above with rate. Any additional
+     * computation available is used to speed up layout stabilization.
+     *
+     * @defaultValue 30
+     *
+     * @note Must be within range of 1 and 120.
      */
-    layoutTimeLimit?: number;
+    maxFps?: number;
     /**
      * Disables tracking of library usage
      * @defaultValue false

package/dist/types/renderers/domrenderer/BaseRenderer.d.ts

@@ -31,7 +31,7 @@ export default abstract class BaseRenderer {
      * @param clientHeight - Height of the rendering area
      * @returns Array of relationships to render, sorted (disabled, normal, selected)
      */
-    protected getRelationshipsToRender(showCaptions: boolean, zoom?: number, clientWidth?: number, clientHeight?: number): RelationshipToRender[];
+    protected getRelationshipsToRender(showCaptions?: boolean, zoom?: number, clientWidth?: number, clientHeight?: number): RelationshipToRender[];
     /**
      * Gets nodes to render, sorted by their rendering order
      * @param positionArray - Array of nodes with positions

package/dist/types/renderers/domrenderer/BaseRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/renderers/domrenderer/canvasrenderer/CanvasRenderer.d.ts

@@ -2,7 +2,8 @@ import type { NvlState } from '../../../modules/state/types';
 import type { Node } from '../../../types/graph-element';
 import type { Point } from '../../../utils/geometry';
 import type { HitTargetNode, HitTargetRelationship } from '../../../utils/hittest';
-import BaseRenderer, { RendererOptions } from '../BaseRenderer';
+import type { RendererOptions } from '../BaseRenderer';
+import BaseRenderer from '../BaseRenderer';
 export default class CanvasRenderer extends BaseRenderer {
     private canvas;
     private context;
@@ -30,13 +31,6 @@ export default class CanvasRenderer extends BaseRenderer {
      * Draws a single node on the canvas with all its visual elements (circle, icons, captions, etc.)
      * @param ctx - The canvas rendering context
      * @param node - The node to draw
-     * @param imageCache - The image cache for icons
-     * @param animationHandler - The animation handler for transitions
-     * @param nodeBorderStyles - The border styles for nodes
-     * @param disabledItemStyles - The styles for disabled items
-     * @param defaultNodeColor - The default node color
-     * @param ellipsisWidth - The width of the ellipsis character
-     * @param zoomLevel - The current zoom level
      */
     private drawNode;
     /**
@@ -47,18 +41,6 @@ export default class CanvasRenderer extends BaseRenderer {
      * Helper method to disable shadow on canvas context
      */
     private disableShadow;
-    /**
-     * Draws line segments on canvas (straight or curved)
-     */
-    private drawSegments;
-    /**
-     * Draws a self-referencing loop on canvas
-     */
-    private drawLoop;
-    /**
-     * Draws a label for a relationship
-     */
-    private drawLabel;
     /**
      * Renders a waypoint arrow (relationship between two different nodes)
      */
@@ -67,10 +49,6 @@ export default class CanvasRenderer extends BaseRenderer {
      * Renders a self-referencing arrow (relationship from node to itself)
      */
     private renderSelfArrow;
-    /**
-     * Main arrow rendering method that delegates to waypoint or self-arrow rendering
-     */
-    private renderArrow;
     /**
      * Draws the nodes and relationships to their positions on the canvas.
      * @param positionArray {Node[]} - The array of nodes to draw
@@ -99,18 +77,6 @@ export default class CanvasRenderer extends BaseRenderer {
      * @todo: sort relationships by distance descending
      */
     getRelsAt(pointer: Point): HitTargetRelationship[];
-    /**
-     * Returns an array of styles for the rings of a node.
-     * It takes the node as an argument, and an optional array of size animations.
-     * If the node is selected, it returns the selectedStyle.rings array.
-     * If the node is not selected, it returns an array containing only one object with
-     * a width of 0 and an empty color.
-     * @param node - The node to get the ring styles for.
-     * @param animationHandler - The animation handler.
-     * @param nodeBorderStyles - The node border styles.
-     * @returns An array of ring styles.
-     */
-    private getRingStyles;
     /**
      * Handles zoom and pan on the canvas.
      * @param context {CanvasRenderingContext2D} - The canvas context