@neo4j-nvl/base 0.3.3-9ea79f41 → 0.3.3-e5d595c3

package/README.md

@@ -1,6 +1,6 @@
 # Neo4j Visualization Library
 
-Welcome to NVL (Neo4j Visualization Library). NVL is a collection of libraries that can be used to build custom graph visualizations like [Neo4j Bloom](https://neo4j.com/product/bloom/). The NVL library is also available as a React component that can be used in React applications.
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. It is also available as a React component that can be used in React applications.
 
 ## Consuming the library
 
@@ -12,18 +12,14 @@ You can install the library with your preferred package manager, for example
 npm install @neo4j-nvl/base
 ```
 
-If you want to add common interactivity to the graph, install the NVL interaction handlers. If you are planning to use NVL in a React app, be sure to check out the NVL React wrappers.
+If you want to add common interactivity to the graph, you can install the [NVL interaction handlers](https://www.npmjs.com/package/@neo4j-nvl/interaction-handlers). If you are planning to use NVL in a React app, be sure to check out the [NVL React wrappers](https://www.npmjs.com/package/@neo4j-nvl/react).
 
 ### Using the library
 
 This is a basic setup for a NVL instance.
 
 ```js
-const nodes = [
-  { id: '1', label: 'Node 1', color: '#e04141' },
-  { id: '2', label: 'Node 2', color: '#e09c41' }
-]
-
+const nodes = [{ id: '1' }, { id: '2' }]
 const relationships = [{ id: '12', from: '1', to: '2' }]
 
 const options = {
@@ -43,3 +39,8 @@ You can find more instructions and examples on how to use NVL in the [docs](http
 ### Product analytics
 
 In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior set the parameter `disableTelemetry=true` as a parameter in `nvlOptions`.
+
+## Further Resources
+
+- NVL documentation: https://neo4j.com/docs/nvl/current/
+- NVL API docs: https://neo4j.com/docs/api/nvl/current/

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { ExternalCallbacks } from './modules/ExternalCallbackHandler';
 import type { ForceDirectedOptions, HierarchicalOptions, Layout, LayoutOptions, NvlOptions, NvlState, Renderer, ZoomOptions } from './modules/state';
-import { ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, d3ForceLayoutType } from './modules/state';
+import { CanvasRendererType, ForceDirectedLayoutType, FreeLayoutType, GridLayoutType, HierarchicalLayoutType, WebGLRendererType, d3ForceLayoutType } from './modules/state';
 import type { StyledCaption } from './renderers/canvasrenderer/types';
 import { drawCircleBand } from './renderers/canvasrenderer/util';
 import type { Node, PartialNode, PartialRelationship, Relationship } from './types/graph-element';
@@ -21,27 +21,27 @@ interface NvlMouseEvent extends MouseEvent {
  * ```ts
  * import { NVL } from '@neo4j-nvl/base'
  *
- * const nodes = [
- *   { id: '1', label: 'Node 1', color: '#e04141' },
- *   { id: '2', label: 'Node 2', color: '#e09c41' }
- * ]
- * const relationships = [
- *   { id: '12', from: '1', to: '2' }
- * ]
+ * const nodes = [{ id: '1' }, { id: '2' }]
+ * const relationships = [{ id: '12', from: '1', to: '2' }]
+ *
  * const options = {
+ *   layout: 'forceDirected',
  *   initialZoom: 0.5
  * }
+ *
  * const callbacks = {
  *   onLayoutDone: () => console.log('Layout done')
  * }
+ *
  * const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
  * ```
+ *
+ * For more examples, head to the {@link https://neo4j.com/docs/nvl/current/core-library/ NVL Base documentation page}.
  */
 declare class NVL {
     #private;
     /**
      * Creates a new NVL instance.
-     * @constructor
      * @param {HTMLElement} frame - The DOM element to display the graph in
      * @param {Node[]} nvlNodes - An Array of nodes
      * @param {Relationship[]} nvlRels - An Array of relationships
@@ -53,16 +53,16 @@ declare class NVL {
      * Restarts the NVL instance.
      * @param {NvlOptions} options - new options for the NVL instance
      * @param {boolean} retainPositions - whether or not to retain the current node positions
-     * @note new options will be merged with current options
+     * New options will be merged with current options
      */
     restart(options?: NvlOptions, retainPositions?: boolean): void;
     /**
      * Adds nodes and relationships to NVL and updates existing nodes and relationships.
      * @param {Node[] | PartialNode[]} nodes - An Array of nodes to be added or updated
      * @param {Relationship[] | PartialRelationship[]} relationships - An Array of relationships to be added or updated
-     * @note To update nodes or relationships, they must have an id that matches the id of the
+     * To update nodes or relationships, they must have an id that matches the id of the
      * node or relationship to be updated.
-     * @note Only the properties that are provided will be updated.
+     * Only the properties that are provided will be updated.
      * If an existing property is not provided, it will not be changed.
      * @example
      * Adding and updating nodes and relationships
@@ -99,10 +99,10 @@ declare class NVL {
      * Updates relationships in the current scene with the provided array of nodes and relationships.
      * @param {Node[] | PartialNode[]} nodes The updated nodes.
      * @param {Relationship[] | PartialRelationship[]} relationships The updated relationships.
-     * @note ignores any nodes or relationships that do not exist in the current scene.
-     * @note To update nodes or relationships, they must have an id that matches the id of the
+     * Ignores any nodes or relationships that do not exist in the current scene.
+     * To update nodes or relationships, they must have an id that matches the id of the
      * node or relationship to be updated.
-     * @note Only the properties that are provided will be updated.
+     * Only the properties that are provided will be updated.
      * If an existing property is not provided, it will not be changed.
      * @example
      * Updating nodes and relationships
@@ -131,7 +131,7 @@ declare class NVL {
     /**
      * Removes the specified nodes from the current scene.
      * @param {string[]} nodeIds The node ids to be removed.
-     * @note adjacent relationships will also be removed.
+     * Adjacent relationships will also be removed.
      */
     removeNodesWithIds(nodeIds: string[]): void;
     /**
@@ -140,9 +140,8 @@ declare class NVL {
      */
     removeRelationshipsWithIds(relationshipIds: string[]): void;
     /**
-     * Returns the node data that is currently stored in the visualisation for a given id.
-     * @param {string} id The id of the node that should be returned.
-     * @returns {Node} The node or undefined if there is no node with the given id.
+     * Returns all nodes that is currently stored in the visualisation.
+     * @returns {Node[]} The array of nodes.
      */
     getNodes(): Node[];
     /**
@@ -185,7 +184,7 @@ declare class NVL {
      * Updates pan and zoom fit the specified nodes in the viewport.
      * @param {string[]} nodeIds The ids of the nodes to fit on the screen,
      * @param {NvlState['zoomOptions']} zoomOptions specific options on how to transition the zoom
-     * @note If the zoom level required to fit the provided nodes is outside of the range provided by the
+     * If the zoom level required to fit the provided nodes is outside of the range provided by the
      * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
      * and {@link NvlOptions.allowDynamicMinZoom} is set to `false`,
      * the zoom level will be set to the closest valid zoom level,
@@ -211,9 +210,8 @@ declare class NVL {
     /**
      * Restarts NVL with or without WebGL support.
      * @param {boolean} disabled Whether or not WebGL should be disabled.
-     * @note not to be confused with {@link setUseWebGLRenderer}, which only affects the rendering method
+     * Not to be confused with {@link setUseWebGLRenderer}, which only affects the rendering method
      * @experimental
-     * @internal
      */
     setDisableWebGL(disabled?: boolean): void;
     /**
@@ -238,7 +236,7 @@ declare class NVL {
     setLayoutOptions(options: LayoutOptions): void;
     /**
      * Returns the nodes that are currently in the visualization.
-     * @note The `rels` property of the returned object is always empty.
+     * The `rels` property of the returned object is always empty.
      * @returns {{ nodes: Node[], rels: Relationship [] }} An array of the nodes in the visualization.
      */
     getNodesOnScreen(): {
@@ -268,7 +266,7 @@ declare class NVL {
      * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
      * @param {string} options.filename The filename of the png file.
      * @param {string} options.backgroundColor - The background color of the png file.
-     * @note The size of the png file will be the size of the canvas in the DOM.
+     * The size of the png file will be the size of the canvas in the DOM.
      */
     saveToFile(options: {
         filename?: string;
@@ -279,7 +277,7 @@ declare class NVL {
      * @param {{ filename: string, backgroundColor: string }} options The filename and background color of the png.
      * @param {string} options.filename The filename of the png file.
      * @param {string} options.backgroundColor - The background color of the png file.
-     * @note The size of the png file will be as large as the entire graph at the default zoom level.
+     * The size of the png file will be as large as the entire graph at the default zoom level.
      * Can result in a very large file.
      */
     saveFullGraphToLargeFile(options: {
@@ -289,13 +287,13 @@ declare class NVL {
     /**
      * Sets the zoom of the viewport to a specific value.
      * @param {number} absolute The desired zoom level.
-     * @note When updating both the zoom level and pan coordinates,
+     * When updating both the zoom level and pan coordinates,
      * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
      * separately to avoid jittering.
-     * @note If the zoom level is outside of the range provided by the
+     * If the zoom level is outside of the range provided by the
      * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
      * the zoom level will be set to the closest valid zoom level.
-     * @note If {@link NvlOptions.allowDynamicMinZoom} is set to true,
+     * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
      * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
      */
     setZoom(absolute: number): void;
@@ -303,7 +301,7 @@ declare class NVL {
      * Sets the zoom of the viewport to a specific value.
      * @param {number} panX The desired panX value.
      * @param {number} panY The desired panY value.
-     * @note When updating both the zoom level and pan coordinates,
+     * When updating both the zoom level and pan coordinates,
      * use {@link setZoomAndPan} instead of calling {@link setZoom} and {@link setPan}
      * separately to avoid jittering.
      */
@@ -313,11 +311,11 @@ declare class NVL {
      * @param {number} zoom The desired zoom level.
      * @param {number} panX The desired panX value.
      * @param {number} panY The desired panY value.
-     * @note When only updating the zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
-     * @note If the zoom level is outside of the range provided by the
+     * When only updating the zoom level or pan coordinates, use {@link setZoom} or {@link setPan} instead.
+     * If the zoom level is outside of the range provided by the
      * {@link NvlOptions.minZoom} and {@link NvlOptions.maxZoom} options,
      * the zoom level will be set to the closest valid zoom level.
-     * @note If {@link NvlOptions.allowDynamicMinZoom} is set to true,
+     * If {@link NvlOptions.allowDynamicMinZoom} is set to true,
      * the {@link NvlOptions.minZoom} option will be ignored of the current graph does not fit the viewport.
      */
     setZoomAndPan(zoom: number, panX: number, panY: number): void;
@@ -369,5 +367,5 @@ declare const colorMapperFunctions: {
     textColorForBackground: (color: string) => string;
 };
 export default NVL;
-export type { NvlOptions, Renderer, Node, Relationship, PartialNode, PartialRelationship, Layout, LayoutOptions, ForceDirectedOptions, HierarchicalOptions, ExternalCallbacks, HitTargets, HitTargetNode, HitTargetRelationship, Point, NvlMouseEvent, ZoomOptions, StyledCaption };
+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 };

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

@@ -19,7 +19,7 @@ export declare class CallbackHelper {
      * Register a callback function to be called when an event of that name happens
      * @param {string} name The name of the callback to register
      * @param {function} callback A function that will be called when an event of that name happens
-     * @note If other callbacks are already registered for that name it is added to the list
+     * If other callbacks are already registered for that name it is added to the list
      */
     register(name: keyof ExternalCallbacks, callback: CallbackFunction): void;
     /**

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

@@ -117,11 +117,11 @@ export interface NvlOptions {
     /**
      * Whether or not to dynamically allow decreasing minimum zoom value
      * if current graph does not fit on screen at minimum zoom.
-     * @note When set to true, zoom and fit operations will allow zooming out
+     * When set to true, zoom and fit operations will allow zooming out
      * further than the minimum zoom value if the graph does not fit on screen.
      * When set to false, zoom and fit operations will stop at the minimum zoom value,
      * even if the full graph does not fit on screen at that zoom level.
-     * @default true
+     * @defaultValue true
      */
     allowDynamicMinZoom?: boolean;
     /**
@@ -143,14 +143,14 @@ export interface NvlOptions {
     /**
      * @deprecated use {@link renderer} instead
      * Whether to user the Canvas or WebGL renderer
-     * @note will be ignored when {@link renderer} is set
+     * Will be ignored when {@link renderer} is set
      */
     useWebGL?: boolean;
     /**
      * What renderer to use
      * Possible values are 'webgl' or 'canvas'
      * @defaultValue 'webgl'
-     * @note WebGL renderer uses GPU and has better performance.
+     * WebGL renderer uses GPU and has better performance.
      * Captions and arrowheads are only displayed when using the canvas renderer.
      */
     renderer?: Renderer;
@@ -177,7 +177,6 @@ export interface NvlOptions {
     selectedBorderColor?: string;
     /**
      * @internal
-     * @experimental
      * Defines a time limit for how long layout iterations may run
      */
     layoutTimeLimit?: number;

package/dist/types/types/graph-element.d.ts

@@ -7,8 +7,8 @@ import type { StyledCaption } from '../renderers/canvasrenderer/types';
 interface GraphElement {
     /**
      * The id of the current node or relationship.
-     * @note ids need to be unique across all nodes and relationships.
-     * @note ids need to be strings and cannot be empty.
+     * Ids need to be unique across all nodes and relationships.
+     * Ids need to be strings and cannot be empty.
      */
     readonly id: string;
     color?: string;
@@ -26,23 +26,23 @@ interface GraphElement {
     captionSize?: number;
     /**
      * The caption align.
-     * @note Has no affect on self-referring relationships.
+     * Has no affect on self-referring relationships.
      */
     captionAlign?: 'top' | 'bottom' | 'center';
     /**
      * The caption text and font style.
-     * @note Captions are only visible when using the 'canvas' renderer.
+     * Captions are only visible when using the 'canvas' renderer.
      */
     captions?: StyledCaption[];
     /**
      * An icon to be displayed anywhere on top of the graph element.
-     * @note Icons are expected to be square.
+     * Icons are expected to be square.
      */
     overlayIcon?: {
         url: string;
         /**
          * The position of the icon relative to the node or relationship.
-         * @note The position is a percentage of the node or relationship size.
+         * The position is a percentage of the node or relationship size.
          * `[1, 1]` is the bottom right corner of the node or relationship.
          * `[-1, -1]` is the top left corner of the node or relationship.
          * @defaultValue `[0, 0]`, the center of the node or relationship.
@@ -50,7 +50,7 @@ interface GraphElement {
         position?: number[];
         /**
          * The size of the icon relative to the node size or relationship caption size.
-         * @note The size is a percentage of the node size or relationship caption size.
+         * The size is a percentage of the node size or relationship caption size.
          * @defaultValue `1`, the same size as the node size or relationship caption size.
          */
         size?: number;
@@ -73,9 +73,9 @@ interface Node extends GraphElement {
     activated?: boolean;
     /**
      * The url to an icon to display inside the node.
-     * @note Icons are expected to be black. If the node's background color is dark,
+     * Icons are expected to be black. If the node's background color is dark,
      * the icon will be inverted to white.
-     * @note Icons are expected to be square.
+     * Icons are expected to be square.
      */
     icon?: string;
     /**
@@ -106,7 +106,7 @@ interface Relationship extends GraphElement {
     /**
      * The DOM element to display on top of a relationship caption.
      * @experimental
-     * @note The {@link captionSize} and {@link captionAlign} properties
+     * The {@link captionSize} and {@link captionAlign} properties
      * will affect the position and height of the html container element.
      */
     captionHtml?: HTMLElement;

package/dist/types/utils/canvasManagement.d.ts

@@ -2,7 +2,7 @@
  * Fixes the canvas size to match the parent element's size.
  * @param canvas The canvas to fix the size of.
  *
- * @note Make sure canvas pixel buffer is 1 to 1 vs screen pixels
+ * Make sure canvas pixel buffer is 1 to 1 vs screen pixels
  */
 export declare const fitCanvasSizeToParent: (canvas: HTMLCanvasElement) => void;
 export declare const addWebGLContextLostListener: (canvas: HTMLCanvasElement, contextLostCallback?: (e: WebGLContextEvent) => void) => void;

package/dist/types/utils/geometry.d.ts

@@ -78,9 +78,9 @@ export declare class Segment {
  * @param {Point} lineStartToPointVector - The vector from the start of the line to the point.
  * @param {Point} lineVector - The vector of the line.
  * @returns {number} The projection of the point onto the line.
- * @note The projection ratio is a value between 0 and 1.
- * @note The projection ratio is 0 if the point is closest to the start of the line.
- * @note The projection ratio is 1 if the point is closest to the end of the line.
+ * The projection ratio is a value between 0 and 1.
+ * The projection ratio is 0 if the point is closest to the start of the line.
+ * The projection ratio is 1 if the point is closest to the end of the line.
  * @see {@link https://en.wikipedia.org/wiki/Vector_projection}
  */
 export declare const getProjectionRatio: (lineStartToPointVector: Point, lineVector: Point) => number;
@@ -90,7 +90,7 @@ export declare const getProjectionRatio: (lineStartToPointVector: Point, lineVec
  * @param {Point} lineEnd - The second point of the line.
  * @param {Point} point - The point to calculate the distance to.
  * @returns {number} The distance between the point and the line.
- * @note If the actual distance does not matter,
+ * If the actual distance does not matter,
  * if you only want to compare what this function
  * returns to other results of this function, you
  * can just return the squared distance instead
@@ -105,7 +105,7 @@ export declare const getDistanceToLine: (lineStart: Point, lineEnd: Point, point
  * @param {Point} p3 - Second point of second line
  * @returns {Point | null} Intersection point
  * @see https://github.com/bit101/CodingMath/blob/master/episode33/parallel.js
- * @note Returns null if lines are parallel
+ * Returns null if lines are parallel
  */
 export declare const getIntersection: (p0: Point, p1: Point, p2: Point, p3: Point) => Point | null;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/base",
-  "version": "0.3.3-9ea79f41",
+  "version": "0.3.3-e5d595c3",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Base library for the Neo4j Visualization Library",
@@ -27,14 +27,8 @@
     "prepack": "cp ../../LICENSE.txt ./",
     "postpack": "rm LICENSE.txt"
   },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "Base",
-    "tsconfig": "./tsconfig.json"
-  },
   "dependencies": {
-    "@neo4j-nvl/layout-workers": "0.3.3-9ea79f41",
+    "@neo4j-nvl/layout-workers": "0.3.3-e5d595c3",
     "@segment/analytics-next": "^1.70.0",
     "color-string": "^1.9.1",
     "d3-force": "^3.0.0",