@neo4j-nvl/base 1.0.0 → 1.1.0

package/dist/types/index.d.ts

@@ -1,8 +1,8 @@
 import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
-import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state/types';
-import { CanvasRendererType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, WebGLRendererType, d3ForceLayoutType } from './modules/state/types';
-import type { StyledCaption } from './renderers/canvasrenderer/types';
-import { drawCircleBand } from './renderers/canvasrenderer/util';
+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 type { StyledCaption } from './renderers/domrenderer/shared/types';
 import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
 import { CompatibilityError } from './utils/errors';
 import type { Point } from './utils/geometry';
@@ -38,11 +38,6 @@ interface NvlMouseEvent extends MouseEvent {
  */
 declare class NVL {
     #private;
-    /**
-     * @internal
-     * @hidden
-     */
-    readonly performance: any;
     /**
      * Creates a new NVL instance.
      * @param frame - The DOM element to display the graph in.
@@ -274,6 +269,17 @@ declare class NVL {
         filename?: string;
         backgroundColor?: string;
     }): void;
+    /**
+     * Saves the entire graph visualization as an SVG file to the client.
+     * @param options - Options for the SVG export
+     * @param options.filename - The filename of the SVG file.
+     * @param options.backgroundColor - The background color of the SVG file.
+     * @experimental
+     */
+    saveToSvg(options?: {
+        filename?: string;
+        backgroundColor?: string;
+    }): void;
     /**
      * Returns the current view of the graph visualization canvas as a data URL.
      * @param options - The options for the image.
@@ -295,6 +301,10 @@ declare class NVL {
         filename?: string;
         backgroundColor?: string;
     }): void;
+    getZoomLimits(): {
+        minZoom: number;
+        maxZoom: number;
+    };
     /**
      * Sets the zoom of the viewport to a specific value.
      * @param zoomValue - The desired zoom level.
@@ -381,6 +391,10 @@ declare class NVL {
 declare const colorMapperFunctions: {
     textColorForBackground: (color: string) => string;
 };
+/**
+ * The different types of renderers available
+ */
+type Renderer = Exclude<InternalRenderer, typeof SvgRendererType>;
 export default NVL;
-export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption, WebGLRendererType, CanvasRendererType };
-export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, drawCircleBand, nvlResultTransformer, getZoomTargetForNodePositions };
+export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, CircularOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption, WebGLRendererType, CanvasRendererType };
+export { NVL, colorMapperFunctions, CompatibilityError, ForceDirectedLayoutType, HierarchicalLayoutType, GridLayoutType, FreeLayoutType, d3ForceLayoutType, CircularLayoutType, drawCircleBand, nvlResultTransformer, getZoomTargetForNodePositions };

package/dist/types/layouts/circularLayout/CircularLayout.d.ts

@@ -0,0 +1,18 @@
+import type { CircularOptions, LayoutOptions, NvlState } from '../../modules/state/types';
+import AnimatedLayout from '../animatedlayout/AnimatedLayout';
+type CircularLayoutConfig = {
+    state: NvlState;
+} & CircularOptions;
+export declare class CircularLayout extends AnimatedLayout {
+    private stateDisposers;
+    private sortFunction;
+    constructor(config: CircularLayoutConfig);
+    setOptions(options?: LayoutOptions): void;
+    update(refreshPositions?: boolean): void;
+    getShouldUpdate(): boolean;
+    getComputing(): boolean;
+    private layout;
+    terminateUpdate(): void;
+    destroy(): void;
+}
+export {};

package/dist/types/layouts/forcedirectedlayout/ForceCytoLayout.d.ts

@@ -16,7 +16,7 @@ export declare class ForceCytoLayout {
     getShouldUpdate(): boolean;
     getComputing(): boolean;
     updateNodes(positionList: any): void;
-    getNodePositions(data: any): import("../../types/graph-element").Node[];
+    getNodePositions(data: any): import("../..").Node[];
     terminateUpdate(): void;
     destroy(): void;
 }

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

@@ -52,9 +52,14 @@ export declare class PhysLayout {
     private pinTexture;
     private addedNodes;
     private updateTexture;
+    private vaoExt;
+    private physVao;
+    private physSmallVao;
+    private updateVao;
+    private workaroundVao;
     enableVerlet: boolean;
     constructor(config: ForceDirectedOptions & {
-        webGLContext: WebGL2RenderingContext;
+        webGLContext: WebGLRenderingContext;
         state: NvlState;
     });
     /**
@@ -71,7 +76,7 @@ export declare class PhysLayout {
     setData(data: {
         nodes: Node[];
         rels: Relationship[];
-    }): any;
+    }): import("./solarmerger/types").CoarsenedGraph;
     /**
      * 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
@@ -130,7 +135,7 @@ export declare class PhysLayout {
     }, relationshipChanges: {
         adds: Record<string, Relationship>;
         removes: Record<string, Relationship>;
-    }): any;
+    }): import("./solarmerger/types").CoarsenedGraph;
     /**
      * Destroys the class and all buffers and textures.
      */

package/dist/types/layouts/forcedirectedlayout/physlayout/shaders/multilevel-fragment-verlet.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\n\nfloat DAMP = 0.6;\nfloat COOL = 0.99998;\nfloat TEMP = max(0.02, pow(COOL, u_curIteration));\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 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) / (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, myPosition.zw);\n  } else {\n    vec2 prevVelocity = myPosition.zw;\n    vec2 currentPos = myPosition.xy;\n    vec2 prevPos = currentPos - prevVelocity;\n\n    vec2 newPos = currentPos + TEMP * ( DAMP * (prevVelocity) + acceleration * TIMESTEP * TIMESTEP);\n    vec2 newVelocity = newPos - currentPos;\n    gl_FragColor = vec4(newPos, newVelocity);\n  }\n}";
+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\n\nfloat DAMP = 0.6;\nfloat COOL = 0.99998;\nfloat TEMP = max(0.02, pow(COOL, u_curIteration));\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 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) / (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 * (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    gl_FragColor = vec4(myPosition.xy, myPosition.zw);\n  } else {\n    vec2 prevVelocity = myPosition.zw;\n    vec2 currentPos = myPosition.xy;\n    vec2 prevPos = currentPos - prevVelocity;\n\n    vec2 newPos = currentPos + TEMP * ( DAMP * (prevVelocity) + acceleration * TIMESTEP * TIMESTEP);\n    vec2 newVelocity = newPos - currentPos;\n    gl_FragColor = vec4(newPos, newVelocity);\n  }\n}";
 export default _default;

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

@@ -1,43 +1,21 @@
+import type { Node, Relationship } from '../../../../types/graph-element';
+import type { CoarsenedGraph, SolarRelationship } from './types';
 export default class SolarMerger {
-    constructor(graph: any, nodeIdToIndex: any);
     graph: {
-        nodes: any[];
-        relationships: any[];
-        idToRel: {};
-    };
-    subGraphs: any[];
-    sunMap: {};
-    constructGraphObjects(graph: any, nodeIdToIndex: any): {
-        nodes: any[];
-        relationships: any[];
-        idToRel: {};
-    };
-    relIdMap: any[];
-    coarsenTo(targetSize: any): {
-        nodes: any[];
-        relationships: any[];
-        idToRel: {};
-    };
-    nodeSortMap: {};
-    coarsenBy(levelToCoarsenBy: any): {
-        nodes: any[];
-        relationships: any[];
-        idToRel: {};
-    };
-    coarsen({ nodes, relationships }: {
-        nodes: any;
-        relationships: any;
-    }, firstIteration: any): {
-        output: {
-            nodes: {
-                id: any;
-            }[];
-            relationships: any[];
-        };
-        sortedInput: {
-            nodes: any[];
-            relationships: any[];
-        };
-        nodeSortMap: {};
+        nodes: Node[];
+        relationships: number[][];
+        idToRel: Record<string, SolarRelationship>;
     };
+    subGraphs: CoarsenedGraph[];
+    sunMap: Record<string, string>;
+    relIdMap: string[][];
+    nodeSortMap?: Record<number, number>;
+    constructor(inputGraph: {
+        nodes: Node[];
+        rels: Relationship[];
+    }, nodeIdToIndex: Record<string, number>);
+    private constructGraphObjects;
+    coarsenTo(targetSize: number): CoarsenedGraph;
+    coarsenBy(levelToCoarsenBy: number): CoarsenedGraph;
+    private coarsen;
 }

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

@@ -0,0 +1,49 @@
+import type { Node } from '../../../../types/graph-element';
+export interface SolarNode extends Omit<Node, 'id' | 'size'> {
+    id: number;
+    weight?: number;
+    finestIndex?: number;
+    originalId: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    placement?: {
+        x: number;
+        y: number;
+    };
+    size?: number | (() => number);
+}
+export interface SolarRelationship {
+    id: string;
+    from: string;
+    to: string;
+}
+export interface CoarsenedGraph {
+    nodes: SolarNode[];
+    relationships: number[][];
+    idToRel: Record<string, SolarRelationship>;
+}
+export interface Sun extends SolarNode {
+    planets: Planet[];
+    size: () => number;
+    children: () => Planet[];
+    previousIndex: number;
+}
+export interface Planet extends SolarNode {
+    parent: Sun;
+    sunId: number;
+    moons: Moon[];
+    size: () => number;
+    children: () => Moon[];
+}
+export interface Moon extends SolarNode {
+    parent: Planet;
+    sunId: number;
+    size: () => number;
+}
+export type Celestial = Sun | Planet | Moon;
+export declare const isSolarNode: (node: SolarNode | Node) => node is SolarNode;
+export declare const isSun: (node: SolarNode | Celestial) => node is Sun;
+export declare const isPlanet: (node: SolarNode | Celestial) => node is Planet;
+export declare const isMoon: (node: SolarNode | Celestial) => node is Moon;

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

@@ -27,12 +27,15 @@ export default class NvlController {
     private readonly gridLayout;
     private readonly freeLayout;
     private readonly d3ForceLayout;
+    private readonly circularLayout;
     private readonly forceLayout;
     private readonly canvasRenderer;
+    private readonly svgRenderer;
     private readonly glCanvas;
     private canvasRect;
     private readonly glMinimapCanvas;
     private readonly c2dCanvas;
+    private readonly svg;
     private isInRenderSwitchAnimation;
     private justSwitchedRenderer;
     private justSwitchedLayout;
@@ -104,8 +107,8 @@ export default class NvlController {
     isDestroyed(): boolean;
     destroy(): void;
     callIfRegistered(...args: any[]): void;
-    getCanvasRelsAt(point: Point): import("../utils/hittest").HitTargetRelationship[];
-    getCanvasNodesAt(point: Point, hitNodeMarginWidth?: number): import("../utils/hittest").HitTargetNode[];
+    getCanvasRelsAt(point: Point): import("..").HitTargetRelationship[];
+    getCanvasNodesAt(point: Point, hitNodeMarginWidth?: number): import("..").HitTargetNode[];
     private getLayout;
     setLayout(layoutType: Layout): void;
     setLayoutOptions(options: LayoutOptions): void;
@@ -113,6 +116,7 @@ export default class NvlController {
     private initiateFileDownload;
     private updateLayoutAndPositions;
     saveToFile(options: SaveToFileOptions): void;
+    saveToSvg(options?: SaveToFileOptions): Promise<void>;
     getImageDataURL(options: SaveToFileOptions): string;
     private prepareLargeFileForDownload;
     private createCanvasAndRenderImage;

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

@@ -1,5 +1,6 @@
 import type { LogLevelDesc } from 'loglevel';
-import type { WaypointPath } from '../../renderers/canvasrenderer/types';
+import type { WaypointPath } from '../../renderers/domrenderer/shared/types';
+import type { Node } from '../../types/graph-element';
 import type { ExternalCallbacks } from '../ExternalCallbackHandler';
 import type { NodeDataSet, RelationshipDataSet } from '../dataset';
 type RingStyle = {
@@ -67,6 +68,15 @@ export interface HierarchicalOptions {
     packing?: 'bin' | 'stack';
 }
 export declare const isHierarchicalLayoutOptions: (options: LayoutOptions) => options is HierarchicalOptions;
+/**
+ * The options for the circular layout.
+ */
+export interface CircularOptions {
+    /**
+     * Function which should return the sorted nodes.
+     */
+    sortFunction?: (nodes: Node[]) => Node[];
+}
 /**
  * NVL's main force directed layout.
  */
@@ -87,6 +97,11 @@ export declare const FreeLayoutType = "free";
  * The commonly used d3-force layout.
  */
 export declare const d3ForceLayoutType = "d3Force";
+/**
+ * A basic circular layout.
+ * @experimental
+ */
+export declare const CircularLayoutType = "circular";
 /**
  * A WebGL renderer that uses the GPU for rendering.
  *
@@ -103,18 +118,26 @@ export declare const WebGLRendererType = "webgl";
  * but supports captions and arrowheads.
  */
 export declare const CanvasRendererType = "canvas";
+/**
+ * A renderer using SVG.
+ *
+ * @experimental
+ * @remarks
+ * This renderer is experimental.
+ */
+export declare const SvgRendererType = "svg";
 /**
  * The different types of layouts available
  */
-export type Layout = typeof ForceDirectedLayoutType | typeof HierarchicalLayoutType | typeof GridLayoutType | typeof FreeLayoutType | typeof d3ForceLayoutType;
+export type Layout = typeof ForceDirectedLayoutType | typeof HierarchicalLayoutType | typeof GridLayoutType | typeof FreeLayoutType | typeof d3ForceLayoutType | typeof CircularLayoutType;
 /**
  * The options for the layout.
  */
-export type LayoutOptions = ForceDirectedOptions | HierarchicalOptions;
+export type LayoutOptions = ForceDirectedOptions | HierarchicalOptions | CircularOptions;
 /**
  * The different types of renderers available
  */
-export type Renderer = typeof WebGLRendererType | typeof CanvasRendererType;
+export type Renderer = typeof WebGLRendererType | typeof CanvasRendererType | typeof SvgRendererType;
 /** Configurations for a NVL instance */
 export interface NvlOptions {
     /**
@@ -149,7 +172,7 @@ export interface NvlOptions {
      * @remarks When using a React ref, make sure the attached element is rendered before the NVL instance is created.
      * Otherwise, the minimap will not be displayed.
      */
-    minimapContainer?: HTMLElement;
+    minimapContainer?: HTMLElement | null;
     /** Configuration for the current layout */
     layoutOptions?: LayoutOptions;
     /** X-coordinate for panning of the current viewport */
@@ -160,10 +183,9 @@ export interface NvlOptions {
     initialZoom?: number;
     /**
      * What renderer to use
-     * Possible values are 'webgl' or 'canvas'
-     * @defaultValue 'webgl'
+     * @defaultValue 'canvas'
      * WebGL renderer uses GPU and has better performance.
-     * Captions and arrowheads are only displayed when using the canvas renderer.
+     * Captions and arrowheads are only displayed when using the canvas or svg renderer.
      */
     renderer?: Renderer;
     /**
@@ -258,7 +280,6 @@ export interface NvlState {
     fitNodeIds: string[];
     resetZoom: boolean;
     forceWebGL: boolean;
-    webGLVisible: boolean;
     renderer: Renderer;
     disableWebGL: boolean;
     disableWebWorkers: boolean;

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

@@ -1,4 +1,4 @@
-import type { StyledCaption } from '../../renderers/canvasrenderer/types';
+import type { StyledCaption } from '../../renderers/domrenderer/shared/types';
 import type { Node, Relationship } from '../../types/graph-element';
 import type { NvlOptions } from './types';
 /**
@@ -6,7 +6,7 @@ import type { NvlOptions } from './types';
  * If both caption and captions are provided, captions takes precedence.
  */
 export declare const processCaptions: (item: Partial<Node | Relationship>) => StyledCaption[];
-export declare const processColorStyles: (styling: NvlOptions['styling']) => {
+export declare const processColorStyles: (styling: NvlOptions["styling"]) => {
     nodeBorderStyles: {
         default: {
             rings?: {

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

@@ -0,0 +1,75 @@
+import type { Channel, DataSet } from '../../modules/dataset';
+import type { NvlState } from '../../modules/state/types';
+import type { Node } from '../../types/graph-element';
+import ImageCache from './shared/ImageCache';
+import ArrowBundler from './shared/arrows/ArrowBundler';
+import type { RelationshipToRender } from './shared/types';
+export type RendererOptions = {
+    relationshipThreshold?: number;
+};
+/**
+ * Base class for renderers (Canvas and SVG) that provides common functionality
+ */
+export default abstract class BaseRenderer {
+    arrowBundler: ArrowBundler;
+    protected state: NvlState;
+    protected relationshipThreshold: number;
+    protected stateDisposers: NvlState['reaction'][];
+    protected needsRun: boolean;
+    protected imageCache: ImageCache;
+    protected nodeVersion: number;
+    protected relVersion: number;
+    protected waypointVersion: number;
+    protected channelId: string;
+    protected activeNodes: Set<string>;
+    constructor(state: NvlState, channelId: string, options?: RendererOptions);
+    /**
+     * Gets relationships to render, sorted by their rendering order
+     * @param showCaptions - Whether to show relationship captions
+     * @param zoom - Current zoom level (optional, used for threshold checking)
+     * @param clientWidth - Width of the rendering area
+     * @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[];
+    /**
+     * Gets nodes to render, sorted by their rendering order
+     * @param positionArray - Array of nodes with positions
+     * @param clientWidth - Width of the rendering area
+     * @param clientHeight - Height of the rendering area
+     * @returns Array of nodes to render, sorted (disabled, normal, selected)
+     */
+    protected getNodesToRender(positionArray: Node[], clientWidth?: number, clientHeight?: number): Node[];
+    /**
+     * Processes updates in nodes and relationships.
+     */
+    processUpdates(): void;
+    /**
+     * Processes node channel updates to track activated nodes.
+     * Adds or removes node IDs from the activeNodes set based on their activated state.
+     * @param channel - The node channel with adds, removes, and updates
+     * @param fullData - The full node dataset
+     */
+    protected processNodeChannelUpdates(channel: Channel<Node>, fullData: DataSet<Node>): void;
+    /**
+     * Checks if a bounding box is off screen
+     * @param boundingBox - The bounding box to check
+     * @param clientWidth - Width of the rendering area
+     * @param clientHeight - Height of the rendering area
+     * @returns Whether the bounding box is off screen
+     */
+    protected isBoundingBoxOffScreen(boundingBox: DOMRect, clientWidth: number, clientHeight: number): boolean;
+    /**
+     * Checks if the renderer needs to run.
+     * @returns Whether the renderer needs to run.
+     */
+    needsToRun(): boolean;
+    /**
+     * Returns a promise that resolves when all images in the cache have finished loading.
+     */
+    waitForImages(): Promise<void>;
+    /**
+     * Cleans up the renderer by disposing state reactions and removing channels.
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,120 @@
+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';
+export default class CanvasRenderer extends BaseRenderer {
+    private canvas;
+    private context;
+    private animationHandler;
+    private ellipsisWidth;
+    private disableArrowShadow;
+    /**
+     * Creates a new CanvasRenderer.
+     * @param canvas {HTMLCanvasElement} - The canvas to render on.
+     * @param context {CanvasRenderingContext2D} - The canvas context.
+     * @param state {NvlState} - The state.
+     * @param options {RendererOptions} - The visualization options.
+     */
+    constructor(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D | null, state: NvlState, options?: RendererOptions);
+    /**
+     * Checks if the renderer needs to run.
+     * @returns Whether the renderer needs to run.
+     */
+    needsToRun(): boolean;
+    /**
+     * Override processUpdates to add Canvas-specific shadow handling
+     */
+    processUpdates(): void;
+    /**
+     * 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;
+    /**
+     * Helper method to enable shadow on canvas context
+     */
+    private enableShadow;
+    /**
+     * 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)
+     */
+    private renderWaypointArrow;
+    /**
+     * 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
+     * @param options {any} - The options for the render
+     */
+    render(positionArray: Node[], options?: {
+        canvas?: HTMLCanvasElement;
+        context?: CanvasRenderingContext2D;
+        backgroundColor?: string;
+        ignoreAnimations?: boolean;
+        showCaptions?: boolean;
+    }): void;
+    private renderNodes;
+    private renderRelationships;
+    /**
+     * Returns the nodes at the pointer position
+     * @param pointer - The position of the pointer.
+     * @returns The nodes at the pointer position.
+     * @todo Sort nodes by distance descending
+     */
+    getNodesAt(pointer: Point, hitNodeMarginWidth?: number): HitTargetNode[];
+    /**
+     * Returns the relationships at the pointer position
+     * @param pointer - The position of the pointer.
+     * @returns The relationships at the pointer position.
+     * @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
+     * @param canvas {HTMLCanvasElement} - The canvas
+     */
+    private zoomAndPan;
+}

package/dist/types/renderers/{canvasrenderer/util.d.ts → domrenderer/canvasrenderer/canvasUtils.d.ts}

@@ -1,11 +1,5 @@
-import type { Point } from '../../utils/geometry';
-import type { TextSegment } from './types';
-export declare const fontThresholds: [number, number][];
-/**
- * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
- * @param color - * @param opacity - * @returns rgba() string with the given opacity.
- */
-export declare const overrideOpacity: (color: string, opacity: number) => string;
+import type { Point } from '../../../utils/geometry';
+import type { TextSegment } from '../shared/types';
 /**
  * The parameters for drawing an arrowhead.
  */
@@ -40,7 +34,6 @@ export declare const drawCircleBand: (ctx: CanvasRenderingContext2D, x: number,
     width: number;
     color: string;
 }[]) => void;
-export declare const drawCircle: (ctx: CanvasRenderingContext2D, x: number, y: number, r: number) => void;
 /**
  * Fill a circle band with a gradient from a certain color to transparent
  * @param ctx - The canvas context.
@@ -56,11 +49,6 @@ export declare const drawGradientCircleBand: (ctx: CanvasRenderingContext2D, x:
  * Draw a circle shape with a solid color
  */
 export declare const drawSolidCircle: (ctx: CanvasRenderingContext2D, x: number, y: number, color: string, size: number) => void;
-export declare function getIndividualInfoLevels(r: number, zoomLevel: number): {
-    nodeInfoLevel: number;
-    fontInfoLevel: number;
-    iconInfoLevel: number;
-};
 /**
  * Prints the caption for a node
  */