Neovis.js

https://neo4j-contrib.github.io/neovis.js/
Admin
Neovis.js is a JavaScript library that creates interactive graph visualizations powered by vis.js...
Tokens:14,554
Snippets:67
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### NeovisConfig Example Configurations

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/NeovisConfig

Demonstrates two example configurations for NeovisConfig: a simple setup and an advanced setup with custom functions and detailed styling for nodes and relationships.

```javascript
//simple  
{
     containerId: "viz",
     neo4j: {
         serverUrl: "bolt://localhost:7687",
         serverUser: "neo4j",
         serverPassword: "sorts-swims-burglaries"
     },
     labels: {
         Character: {
             label: "name",
             value: "pagerank",
             group: "community"
         }
     },
     relationships: {
         INTERACTS: {
             value: "weight"
         }
     },
     initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m"
}
// advance  
{
     containerId: 'viz',
     neo4j: {
         serverUrl: 'bolt://localhost:7687',
         serverUser: 'neo4j',
         serverPassword: 'gland-presentation-worry'
     },
     visConfig: {
         nodes: {
             shape: 'square'
         },
         edges: {
             arrows: {
                 to: {enabled: true}
             }
         },
     },
     labels: {
         Character: {
             label: 'pagerank',
             group: 'community',
             [Neovis.NEOVIS_ADVANCED_CONFIG]: {
                 cypher: {
                     value: "MATCH (n) WHERE id(n) = $id RETURN n.size"
                 },
                 function: {
                     title: (node) => {
                         return viz.nodeToHtml(node, undefined);
                     }
                 },
             }
         }
     },
     relationships: {
         INTERACTS: {
             value: 'weight',
             [Neovis.NEOVIS_ADVANCED_CONFIG]: {
                 function: {
                     title: (edge) => {
                         return viz.nodeToHtml(edge, undefined);
                     }
                 },
             }
         }
     },
     initialCypher: 'MATCH (n)-[r]->(m) RETURN n,r,m'
}
```

--------------------------------

### Neovis.js CDN Installation and Basic Setup

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Demonstrates how to install Neovis.js via CDN and set up a basic graph visualization within an HTML document. It includes the necessary HTML structure, CSS for the container, and JavaScript to initialize and render the visualization upon page load.

```html
<!doctype html>
<html>
<head>
  <title>Neovis.js Example</title>
  <style>
    #viz {
      width: 900px;
      height: 700px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="https://unpkg.com/neovis.js@2.0.2"></script>
</head>
<body onload="draw()">
  <div id="viz"></div>
  <script>
    function draw() {
      const config = {
        containerId: "viz",
        neo4j: {
          serverUrl: "bolt://localhost:7687",
          serverUser: "neo4j",
          serverPassword: "password"
        },
        initialCypher: "MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100"
      };
      const viz = new NeoVis.default(config);
      viz.render();
    }
  </script>
</body>
</html>
```

--------------------------------

### NonFlatNeovisConfig Example (JavaScript)

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/NonFlatNeovisConfig

An example demonstrating the structure and usage of the NonFlatNeovisConfig object. This configuration is used to initialize Neovis with custom settings for Neo4j connection, visualization, labels, and relationships.

```javascript
{
     containerId: 'viz',
     nonFlat: true,
     neo4j: {
         serverUrl: 'bolt://localhost:7687',
         serverUser: 'neo4j',
         serverPassword: 'gland-presentation-worry'
     },
     visConfig: {
         nodes: {
             shape: 'square'
         },
         edges: {
             arrows: {
                 to: {enabled: true}
             }
         },
     },
     labels: {
         Character: {
             property: {
                 label: 'pagerank',
                 group: 'community'
             }
             cypher: {
                 value: "MATCH (n) WHERE id(n) = $id RETURN n.size"
             },
             function: {
                 title: (node) => {
                     return viz.nodeToHtml(node, undefined);
                 }
             }
         }
     },
     relationships: {
         INTERACTS: {
             property: {
                 value: 'weight'
             }
             function: {
                 title: (edge) => {
                     return viz.nodeToHtml(edge, undefined);
                 }
             }
         }
     },
     initialCypher: 'MATCH (n)-[r]->(m) RETURN n,r,m'
}
```

--------------------------------

### Neo4j Server URL Example

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/Neo4jConfig

An example of a Neo4j server URL, typically used with the 'serverUrl' property of Neo4jConfig to specify the connection endpoint.

```bash
bolt://localhost:7687
```

--------------------------------

### Build and Development Commands for Neovis.js

Source: https://neo4j-contrib.github.io/neovis.js/index

Provides the necessary npm commands to install dependencies, build the project, and generate documentation for Neovis.js. These commands are used after cloning the repository.

```bash
npm install
npm run build
npm run typedoc

```

--------------------------------

### Install neovis.js via npm

Source: https://neo4j-contrib.github.io/neovis.js/index

This snippet shows how to install the neovis.js library using npm. It is a common method for managing project dependencies in JavaScript development.

```bash
npm install --save neovis.js
```

--------------------------------

### Import Neovis.js as a Module

Source: https://neo4j-contrib.github.io/neovis.js/index

Demonstrates how to import the Neovis.js library when using a module bundler. This method requires a setup for importing CSS files separately.

```javascript
import NeoVis from 'neovis.js';

```

--------------------------------

### Basic Neovis.js Visualization Setup

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Initializes and renders a graph visualization using Neovis.js by connecting to a Neo4j database and defining configurations for labels, relationships, and the initial Cypher query. Requires the neovis.js library.

```javascript
import NeoVis from 'neovis.js';

const config = {
  containerId: "viz",
  neo4j: {
    serverUrl: "bolt://localhost:7687",
    serverUser: "neo4j",
    serverPassword: "password123"
  },
  labels: {
    Character: {
      label: "name",
      value: "pagerank",
      group: "community"
    }
  },
  relationships: {
    INTERACTS: {
      value: "weight"
    }
  },
  initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m"
};

const viz = new NeoVis.default(config);
viz.render();
```

--------------------------------

### NEOVIS_ADVANCED_CONFIG Example

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/LabelConfig

Demonstrates the use of NEOVIS_ADVANCED_CONFIG for advanced node configuration in neovis.js. This allows mapping static options, running Cypher queries, or using functions to determine vis-network node options.

```typescript
type NeoVisAdvanceConfig<TNode, TProperties> = {
  options?: (node: TNode) => Partial<VisNetwork.Node>;
  cypher?: (node: TNode) => string;
  mapProperties?: RecursiveMapTo<TProperties, string>;
};

// Example usage within LabelConfig:
// advance options which allow for:
// mapping static options to each node
// mapping cypher to run for each node to determine vis-network node option
// mapping function that gets the neo4j node and returns vis-network node option
const advancedConfig: NEOVIS_ADVANCED_CONFIG = {
  // ... implementation details ...
};

const nodeConfig: LabelConfig = {
  // ... other configurations ...
  NEOVIS_ADVANCED_CONFIG: advancedConfig
};
```

--------------------------------

### BaseNeovisConfig Interface Example (TypeScript)

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/BaseNeovisConfig

Defines the structure for Neovis configuration, including Neo4j connection details, data fetching functions, and visualization options. It is a base interface that can be extended for more specific configurations.

```typescript
interface BaseNeovisConfig {
  consoleDebug?: boolean;
  containerId: string;
  dataFunction?: DataFunctionType;
  groupAsLabel?: boolean;
  initialCypher?: string;
  neo4j?: Driver | Neo4jConfig;
  nonFlat?: boolean;
  serverDatabase?: string;
  visConfig?: Options;
}
```

--------------------------------

### NeovisConfig Relationships Configuration Example

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/NeovisConfig

Shows how to configure the 'relationships' property in NeovisConfig to define how different relationship types are displayed, including setting values and advanced options for custom title functions.

```javascript
{
     INTERACTS: {
         value: 'weight',
         [Neovis.NEOVIS_ADVANCED_CONFIG]: {
         	function: {
         		title: (edge) => {
         			return viz.nodeToHtml(edge, undefined);
         		}
         	},
         }
     }
}
```

--------------------------------

### NeovisConfig Labels Configuration Example

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/NeovisConfig

Illustrates how to configure the 'labels' property within NeovisConfig to customize the display of different node types, including advanced options for cypher queries and custom title functions.

```javascript
{
    Character: {
    label: 'pagerank',
        group: 'community',
        [Neovis.NEOVIS_ADVANCED_CONFIG]: {
            cypher: {
                value: "MATCH (n) WHERE id(n) = $id RETURN n.size"
            },
            function: {
                title: (node) => {
                    return viz.nodeToHtml(node, undefined);
                }
            },
        }
    }
}
```

--------------------------------

### NeoVis Constructor

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Initializes a new NeoVis instance with a configuration object. The config parameter is used to set up the visualization and the Neo4j server connection.

```javascript
new NeoVis(config: NeovisConfig | NonFlatNeovisConfig)
```

--------------------------------

### NeoVis Class Documentation

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Documentation for the NeoVis class, including its constructor, properties, accessors, and methods.

```APIDOC
## Class NeoVis

### Hierarchy
* NeoVis

### Constructors
#### constructor
* `new NeoVis(config: NeovisConfig | NonFlatNeovisConfig): NeoVis`
* **Description**: Configures the visualization and Neo4j server connection.
* **Parameters**:
  * `config` (NeovisConfig | NonFlatNeovisConfig) - Configures the visualization and Neo4j server connection.
* **Returns**: NeoVis

### Properties
#### Static `NEOVIS_ADVANCED_CONFIG`
* **Type**: `symbol`
* **Value**: `NEOVIS_ADVANCED_CONFIG`
* **Description**: Advanced configuration symbol.

#### Static `NEOVIS_DEFAULT_CONFIG`
* **Type**: `symbol`
* **Value**: `NEOVIS_DEFAULT_CONFIG`
* **Description**: Default configuration symbol.

#### Static `objectToTitleHtml`
* **Type**: `(neo4jObject: Node<NumberOrInteger, Properties> | Relationship<NumberOrInteger, Properties>, titleProperties: string[]) => HTMLDivElement`
* **Description**: Creates an HTML display of the node or relationship.
* **Parameters**:
  * `neo4jObject` (Node | Relationship) - The node or relationship to create HTML from.
  * `titleProperties` (string[]) - Which properties to map.
* **Returns**: `HTMLDivElement`

#### Static `objectToTitleString`
* **Type**: `(neo4jObject: Node<NumberOrInteger, Properties> | Relationship<NumberOrInteger, Properties>, titleProperties: string[]) => string`
* **Description**: Creates a string display of the node or relationship.
* **Parameters**:
  * `neo4jObject` (Node | Relationship) - The node or relationship to create a title string from.
  * `titleProperties` (string[]) - Which properties to map.
* **Returns**: `string`

### Accessors
#### `edges`
* **Type**: `DataSet<Edge, "id">`
* **Description**: All view edges as DataSet.
* **Link**: https://visjs.github.io/vis-data/data/dataset.html
* **Returns**: `DataSet<Edge, "id">`

#### `network`
* **Type**: `Network`
* **Description**: The vis network object.
* **Link**: https://visjs.github.io/vis-network/docs/network/#methods
* **Returns**: `Network`

#### `nodes`
* **Type**: `DataSet<Node, "id">`
* **Description**: All view nodes as DataSet.
* **Link**: https://visjs.github.io/vis-data/data/dataset.html
* **Returns**: `DataSet<Node, "id">`

### Methods
#### `clearNetwork(): void`
* **Description**: Clears the data for the visualization.
* **Returns**: `void`

#### `registerOnEvent<T>(eventType: T, handler: EventFunctionTypes[T]): void`
* **Type Parameters**:
  * `T` - Extends `NeoVisEvents`
* **Description**: Registers an event handler for a specific event type.
* **Parameters**:
  * `eventType` (T) - The event type to be handled.
  * `handler` (EventFunctionTypes[T]) - The handler to manage the event.
* **Returns**: `void`

#### `reinit(config: NeovisConfig | NonFlatNeovisConfig, parameter?: unknown): void`
* **Description**: Resets the config object and reloads data.
* **Parameters**:
  * `config` (NeovisConfig | NonFlatNeovisConfig) - The new configuration.
  * `parameter` (unknown, Optional) - An optional parameter.
* **Returns**: `void`

#### `reload(parameter?: unknown): void`
* **Description**: Clears the network, fetches live data from the server, and reloads the visualization.
* **Parameters**:
  * `parameter` (unknown, Optional) - An optional parameter.
* **Returns**: `void`

#### `render(query_or_function?: string | DataFunctionType, parameters?: unknown): void`
* **Description**: Renders the network.
* **Parameters**:
  * `query_or_function` (string | DataFunctionType, Optional) - The Cypher query or function to render.
  * `parameters` (unknown, Optional) - Optional parameters for the query or function.
* **Returns**: `void`

#### `renderWithCypher(query: string, parameters?: unknown): void`
* **Description**: Executes an arbitrary Cypher query and re-renders the visualization.
* **Parameters**:
  * `query` (string) - The Cypher query to execute.
  * `parameters` (unknown, Optional) - Optional parameters for the Cypher query.
* **Returns**: `void`

#### `renderWithFunction(func: DataFunctionType, parameters?: unknown): void`
* **Description**: Executes an arbitrary function and re-renders the visualization.
* **Parameters**:
  * `func` (DataFunctionType) - The function to execute.
  * `parameters` (unknown, Optional) - Optional parameters for the function.
* **Returns**: `void`

#### `stabilize(): void`
* **Description**: Stabilizes the visualization.
* **Returns**: `void`

#### `updateWithCypher(query: string, parameters?: unknown): void`
* **Description**: Executes an arbitrary Cypher query and updates the current visualization, retaining current nodes. This function will not change the original query given by `renderWithCypher` or the initial cypher.
* **Parameters**:
  * `query` (string) - The Cypher query to execute.
  * `parameters` (unknown, Optional) - Optional parameters for the Cypher query.
* **Returns**: `void`

#### `updateWithFunction(func: DataFunctionType, parameters?: unknown): void`
* **Description**: Executes an arbitrary function and updates the visualization.
* **Parameters**:
  * `func` (DataFunctionType) - The function to execute.
  * `parameters` (unknown, Optional) - Optional parameters for the function.
* **Returns**: `void`
```

--------------------------------

### Import Neovis.js with Bundled Dependencies

Source: https://neo4j-contrib.github.io/neovis.js/index

Shows how to import a version of Neovis.js that includes its bundled dependencies. This can simplify module imports if you don't need to manage dependencies separately.

```javascript
import NeoVis from 'neovis.js/dist/neovis.js';

```

--------------------------------

### Include neovis.js via CDN

Source: https://neo4j-contrib.github.io/neovis.js/index

This snippet demonstrates how to include the neovis.js library in an HTML document using a Content Delivery Network (CDN). This is useful for quick integration without a build process. The first option includes the Neo4j driver dependency, while the second is a lighter version.

```html
<script src="https://unpkg.com/neovis.js@2.0.2"></script>
```

```html
<script src="https://unpkg.com/neovis.js@2.0.2/dist/neovis-without-dependencies.js"></script>
```

--------------------------------

### Neo4jConfig Interface Properties

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/Neo4jConfig

The Neo4jConfig interface defines optional properties for connecting to a Neo4j instance. These include server URL, username, password, and driver-specific configurations.

```typescript
interface Neo4jConfig {
  driverConfig?: Config;
  serverPassword?: string;
  serverUrl?: string;
  serverUser?: string;
}
```

--------------------------------

### Include Neovis.js Library via CDN

Source: https://neo4j-contrib.github.io/neovis.js/index

Includes the Neovis.js library in an HTML document using a Content Delivery Network (CDN). This makes the Neovis.js library available for use in the script tags.

```html
<script src="https://unpkg.com/neovis.js@2.0.2"></script>

```

--------------------------------

### JavaScript Configuration and Rendering with Neovis.js

Source: https://neo4j-contrib.github.io/neovis.js/index

Defines the draw() function to initialize and render a Neo4j graph visualization using Neovis.js. It configures the connection to Neo4j, specifies data fetching, and defines how nodes and relationships are displayed.

```javascript
  
<script type="text/javascript">
  
    let neoViz;
  
    function draw() {
        const config = {
            containerId: "viz",
            neo4j: {
                serverUrl: "bolt://localhost:7687",
                serverUser: "neo4j",
                serverPassword: "sorts-swims-burglaries",
            },
            labels: {
                Character: {
                    label: "name",
                    value: "pagerank",
                    group: "community",
                    [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                        function: {
                            title: (node) => viz.nodeToHtml(node, [
                                "name",
                                "pagerank"
                            ])
                        }
                    }
                }
            },
            relationships: {
                INTERACTS: {
                    value: "weight"
                }
            },
            initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN *"
        };
  
        neoViz = new NeoVis.default(config);
        neoViz.render();
    }
</script>

```

--------------------------------

### Network Manipulation with vis.js in JavaScript

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Provides access to the underlying vis.js network instance for advanced manipulation. Developers can listen to vis.js events, update nodes and edges directly using vis.js DataSet methods, and control the network's layout. Requires an initialized NeoVis instance.

```javascript
const viz = new NeoVis.default(config);
viz.render();

// Access vis.js network instance
const network = viz.network;
network.on('stabilizationIterationsDone', () => {
  console.log('Network stabilized');
});

// Access nodes DataSet
const nodes = viz.nodes;
console.log('Total nodes:', nodes.length);
nodes.update({ id: 'node-1', color: 'red' });

// Access edges DataSet
const edges = viz.edges;
console.log('Total edges:', edges.length);

// Stabilize layout
viz.stabilize();

// Clear network
viz.clearNetwork();

// Reload from Neo4j
viz.reload();
```

--------------------------------

### EventController Constructor - JavaScript

Source: https://neo4j-contrib.github.io/neovis.js/classes/EventController

Initializes a new instance of the EventController class. This is the primary way to create an event controller object in neovis.js. No specific parameters are required for instantiation.

```javascript
const eventController = new EventController();
```

--------------------------------

### Configuration Reinitialization in JavaScript

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Enables completely reconfiguring and reloading the visualization after it has been initially rendered. The `reinit` method can be called with a new configuration object to update settings, data sources, and display properties. This is useful for dynamic updates or changing visualization parameters on the fly.

```javascript
const viz = new NeoVis.default(initialConfig);
viz.render();

// Later, reinitialize with new configuration
const newConfig = {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://localhost:7687',
    serverUser: 'neo4j',
    serverPassword: 'newpassword'
  },
  labels: {
    NewLabel: {
      label: 'name'
    }
  },
  initialCypher: 'MATCH (n:NewLabel) RETURN n'
};

viz.reinit(newConfig);
```

--------------------------------

### OldNeoVisConfig Interface

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/OldNeoVisConfig

Configuration interface for neovis.js, specifying connection details and display options. This interface is deprecated and intended for migration purposes.

```APIDOC
## Interface OldNeoVisConfig

### Deprecated
for migration only

### Properties
- **arrows** (boolean) - Optional - Controls the display of arrows for relationships.
- **console_debug** (boolean) - Optional - Enables console debugging output.
- **container_id** (string) - Required - The ID of the HTML element to contain the visualization.
- **encrypted** (string) - Optional - Specifies the encryption type for the server connection. Allowed values: "ENCRYPTION_OFF", "ENCRYPTION_ON".
- **hierarchical** (boolean) - Optional - Enables hierarchical layout for the graph.
- **hierarchical_sort_method** (string) - Optional - Specifies the sorting method for the hierarchical layout. Allowed values: "hubsize", "directed".
- **initial_cypher** (string) - Optional - The initial Cypher query to execute when the visualization loads.
- **labels** (object) - Optional - Configuration object for displaying node labels. It can include a default configuration `[NEOVIS_DEFAULT_CONFIG]` and specific configurations for each label `[label: string]`.
  - **Type declaration**:
    - `[label: string]: OldLabelConfig` - Configuration for a specific node label.
    - `[NEOVIS_DEFAULT_CONFIG]?: OldLabelConfig` - Optional default configuration for all labels.
- **relationships** (object) - Optional - Configuration object for displaying relationships. It can include a default configuration `[NEOVIS_DEFAULT_CONFIG]` and specific configurations for each relationship type `[relationship: string]`.
  - **Type declaration**:
    - `[relationship: string]: OldRelationshipConfig` - Configuration for a specific relationship type.
    - `[NEOVIS_DEFAULT_CONFIG]?: OldRelationshipConfig` - Optional default configuration for all relationship types.
- **server_database** (string) - Required - The name of the Neo4j database to connect to.
- **server_password** (string) - Required - The password for authenticating with the Neo4j server.
- **server_url** (string) - Required - The URL of the Neo4j server.
- **server_user** (string) - Required - The username for authenticating with the Neo4j server.
- **trust** (string) - Optional - Specifies the certificate trust method for the server connection. Allowed values: "TRUST_ALL_CERTIFICATES", "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES".
```

--------------------------------

### LabelConfig Interface Documentation

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/LabelConfig

Detailed documentation for the LabelConfig interface, including its properties, types, and descriptions. This interface serves as a mapper between Neo4j node property names and vis-network node configuration properties.

```APIDOC
## Interface LabelConfig

A mapper between neo4j node properties names to vis-network node config.

### Link
https://visjs.github.io/vis-network/docs/network/nodes.html

### Hierarchy
  * RecursiveMapTo<VisNetwork.Node, string>
    * LabelConfig

### Properties

*   **`NEOVIS_ADVANCED_CONFIG`?** (`NeoVisAdvanceConfig<Node, Node<number, Properties>>`): Optional - Advance options which allow for mapping static options to each node, mapping cypher to run for each node to determine vis-network node option, or mapping a function that gets the neo4j node and returns a vis-network node option.
*   **`borderWidth`?** (`string`): Optional - The border width of the node.
*   **`borderWidthSelected`?** (`string`): Optional - The border width of the node when selected.
*   **`brokenImage`?** (`string`): Optional - URL for an image to display if the main image fails to load.
*   **`chosen`?** (`string | RecursiveMapTo<NodeChosen, string>`): Optional - Configuration for how the node appears when chosen.
*   **`color`?** (`string | RecursiveMapTo<Color, string>`): Optional - The color of the node.
*   **`fixed`?** (`string | RecursiveMapTo<{ x?: boolean; y?: boolean; }, string>`): Optional - If true, the node's position is fixed.
*   **`font`?** (`string | RecursiveMapTo<Font, string>`): Optional - Font configuration for the node label.
*   **`group`?** (`string`): Optional - The group the node belongs to.
*   **`hidden`?** (`string`): Optional - If true, the node is hidden.
*   **`icon`?** (`RecursiveMapTo<{ code?: string; color?: string; face?: string; size?: number; weight?: string | number; }, string>`): Optional - Configuration for an icon to display on the node.
*   **`id`?** (`string`): Optional - The unique identifier for the node.
*   **`image`?** (`string | RecursiveMapTo<Image, string>`): Optional - URL for an image to display on the node.
*   **`imagePadding`?** (`string | RecursiveMapTo<ImagePadding, string>`): Optional - Padding around the image on the node.
*   **`label`?** (`string`): Optional - The label text for the node.
*   **`labelHighlightBold`?** (`string`): Optional - If true, the label text is bold when the node is highlighted.
*   **`level`?** (`string`): Optional - The level of the node in a hierarchical layout.
*   **`margin`?** (`RecursiveMapTo<{ bottom?: number; left?: number; right?: number; top?: number; }, string>`): Optional - Margin around the node's content.
*   **`mass`?** (`string`): Optional - The mass of the node, used in physics simulations.
*   **`opacity`?** (`string`): Optional - The opacity of the node.
*   **`physics`?** (`string`): Optional - If true, physics are enabled for the node.
*   **`scaling`?** (`RecursiveMapTo<OptionsScaling, string>`): Optional - Scaling options for the node.
*   **`shadow`?** (`string | RecursiveMapTo<OptionsShadow, string>`): Optional - Shadow configuration for the node.
*   **`shape`?** (`string`): Optional - The shape of the node (e.g., 'dot', 'square', 'circle').
*   **`shapeProperties`?** (`RecursiveMapTo<{ borderDashes?: boolean | number[]; borderRadius?: number; coordinateOrigin?: string; interpolation?: boolean; useBorderWithImage?: boolean; useImageSize?: boolean; }, string>`): Optional - Properties specific to the node's shape.
*   **`size`?** (`string`): Optional - The size of the node.
*   **`title`?** (`string | RecursiveMapTo<HTMLElement, string>`): Optional - Tooltip text to display when hovering over the node.
*   **`value`?** (`string`): Optional - A value associated with the node, potentially used for scaling or physics.
*   **`widthConstraint`?** (`string | RecursiveMapTo<{ maximum?: number; minimum?: number; }, string>`): Optional - Constraints on the width of the node. If false, no width constraint is applied. If a number is specified, the minimum and maximum widths of the node are set to the value. The node's label's lines will be broken on spaces to stay below the maximum and the node's width will be set to the minimum if less than the value.
*   **`x`?** (`string`): Optional - The x-coordinate of the node.
*   **`y`?** (`string`): Optional - The y-coordinate of the node.

### Settings

*   **Member Visibility**:
    *   Protected
    *   Inherited
    *   External

*   **Theme**: OSLightDark

### On This Page

*   [NEOVIS_ADVANCED_CONFIG]
*   borderWidth
*   borderWidthSelected
*   brokenImage
*   chosen
*   color
*   fixed
*   font
*   group
*   hidden
*   icon
*   id
*   image
*   imagePadding
*   label
*   labelHighlightBold
*   level
*   margin
*   mass
*   opacity
*   physics
*   scaling
*   shadow
*   shape
*   shapeProperties
*   size
*   title
*   value
*   widthConstraint
*   x
*   y

Generated using TypeDoc
```

--------------------------------

### Neovis.js Event Handling for User Interactions

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Shows how to register event handlers in Neovis.js to respond to user interactions with the graph visualization, such as clicking on nodes or edges, and to handle completion or error events during rendering. Imports NeoVisEvents for event constants.

```javascript
import NeoVis, { NeoVisEvents } from 'neovis.js';

const viz = new NeoVis.default(config);

// Handle node clicks
viz.registerOnEvent(NeoVisEvents.ClickNodeEvent, (event) => {
  console.log('Node clicked:', event.node);
  console.log('Node properties:', event.node.properties);
});

// Handle edge clicks
viz.registerOnEvent(NeoVisEvents.ClickEdgeEvent, (event) => {
  console.log('Edge clicked:', event.edge);
  console.log('Edge type:', event.edge.type);
});

// Handle completion
viz.registerOnEvent(NeoVisEvents.CompletionEvent, (event) => {
  console.log('Visualization completed');
  console.log('Record count:', event.recordCount);
});

// Handle errors
viz.registerOnEvent(NeoVisEvents.ErrorEvent, (error) => {
  console.error('Visualization error:', error);
});

viz.render();
```

--------------------------------

### HTML Structure for Neovis.js Visualization

Source: https://neo4j-contrib.github.io/neovis.js/index

Defines the basic HTML structure for a Neovis.js visualization. It includes a div element to host the graph and basic CSS for styling. The body's onload event triggers the draw function.

```html
<!doctype html>
<html>
<head>
    <title>Neovis.js Simple Example</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }

        #viz {
            width: 900px;
            height: 700px;
            border: 1px solid lightgray;
            font: 22pt arial;
        }
    </style>
</head>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>

```

--------------------------------

### Multiple Database Support in JavaScript

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Allows connecting to a specific Neo4j database by specifying the `serverDatabase` property in the configuration. This is useful when working with multiple databases within the same Neo4j instance. Requires Neo4j connection details and the desired database name.

```javascript
const config = {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://localhost:7687',
    serverUser: 'neo4j',
    serverPassword: 'password',
    driverConfig: {
      encrypted: 'ENCRYPTION_ON',
      trust: 'TRUST_ALL_CERTIFICATES'
    }
  },
  serverDatabase: 'movies', // Specify database name
  labels: {
    Movie: {
      label: 'title',
      value: 'rating'
    }
  },
  initialCypher: 'MATCH (n:Movie) RETURN n LIMIT 25'
};

const viz = new NeoVis.default(config);
viz.render();
```

--------------------------------

### NeoVis Method: renderWithCypher

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Executes a given Cypher query against the Neo4j server and re-renders the entire visualization with the results.

```javascript
renderWithCypher(query, parameters?): void
```

--------------------------------

### Advanced Neovis.js Configuration with Custom Functions

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Illustrates advanced configuration for Neovis.js, enabling dynamic node and edge properties using custom Cypher queries and JavaScript functions via the NEOVIS_ADVANCED_CONFIG option. This allows for fine-grained control over visual attributes and tooltips.

```javascript
const config = {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://localhost:7687',
    serverUser: 'neo4j',
    serverPassword: 'password'
  },
  visConfig: {
    nodes: {
      shape: 'square'
    },
    edges: {
      arrows: {
        to: { enabled: true }
      }
    }
  },
  labels: {
    Character: {
      label: 'name',
      group: 'community',
      [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
        cypher: {
          value: "MATCH (n) WHERE id(n) = $id RETURN n.pagerank"
        },
        function: {
          title: (node) => {
            return NeoVis.objectToTitleHtml(node, ["name", "pagerank"]);
          }
        },
        static: {
          shape: 'dot',
          size: 20
        }
      }
    }
  },
  relationships: {
    INTERACTS: {
      value: 'weight',
      [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
        function: {
          title: (edge) => {
            return `${edge.type}: ${edge.properties.weight}`;
          }
        }
      }
    }
  },
  initialCypher: 'MATCH (n)-[r]->(m) RETURN n,r,m'
};

const viz = new NeoVis.default(config);
viz.render();
```

--------------------------------

### NeoVis Method: render

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Renders the network visualization. It can accept an optional Cypher query or a function to define the data to be rendered.

```javascript
render(query_or_function?, parameters?): void
```

--------------------------------

### NeoVis Method: reload

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Clears the current network visualization and fetches live data from the Neo4j server to reload the visualization.

```javascript
reload(parameter?): void
```

--------------------------------

### BaseNeovisConfig Interface

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/BaseNeovisConfig

Defines the configuration object for neovis.js, allowing customization of data sources, Neo4j connection parameters, and visualization options.

```APIDOC
## Interface BaseNeovisConfig

This interface defines the configuration options for neovis.js.

### Properties

- **consoleDebug** (boolean) - Optional - Should output debug messages to console. Default: `false`
- **containerId** (string) - Required - Html id of the element you want Neovis to render on.
- **dataFunction** (DataFunctionType) - Optional - A function to fetch data instead of using the Neo4j driver. It must return a list of records.
- **groupAsLabel** (boolean) - Optional - Should group be the label. Default: `true`
- **initialCypher** (string) - Optional - The Cypher query that will get the data.
- **neo4j** (Driver | Neo4jConfig) - Optional - Neo4j Driver instance or configuration to make one.
- **nonFlat** (boolean) - Optional - Tells Neovis if the config is flat or not. Default: `false`
- **serverDatabase** (string) - Optional - The database name you want to connect to. Default: `neo4j`
- **visConfig** (Options) - Optional - Vis network config to override neovis defaults. See: https://visjs.github.io/vis-network/docs/network/#options
```

--------------------------------

### Custom Node Tooltips in JavaScript

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Enables the creation of custom HTML tooltips for nodes and edges. This can be achieved using NeoVis.js's built-in `objectToTitleHtml` formatter or by providing a custom function that generates HTML content. Requires defining label configurations with a `title` function within `NEOVIS_ADVANCED_CONFIG`.

```javascript
const config = {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://localhost:7687',
    serverUser: 'neo4j',
    serverPassword: 'password'
  },
  labels: {
    Person: {
      label: 'name',
      [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
        function: {
          title: (node) => {
            // Built-in HTML formatter
            return NeoVis.objectToTitleHtml(node, ['name', 'age', 'email']);
          }
        }
      }
    },
    Company: {
      label: 'name',
      [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
        function: {
          title: (node) => {
            // Custom HTML
            const div = document.createElement('div');
            div.innerHTML = `
              <strong>${node.properties.name}</strong><br>
              Founded: ${node.properties.founded}<br>
              Employees: ${node.properties.size}
            `;
            return div;
          }
        }
      }
    }
  },
  initialCypher: "MATCH (n) RETURN n LIMIT 50"
};

const viz = new NeoVis.default(config);
viz.render();
```

--------------------------------

### Default Server Database (JavaScript)

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/BaseNeovisConfig

Indicates the default database name Neovis connects to on the Neo4j server. If not specified, it defaults to the 'neo4j' database.

```javascript
const defaultConfig = {
  serverDatabase: 'neo4j'
};
```

--------------------------------

### Neovis.js Dynamic Query Updates

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Demonstrates how to dynamically update a Neovis.js visualization with new Cypher queries without requiring a full page reload. Supports replacing the current visualization, updating with parameterized queries, and adding data incrementally.

```javascript
const viz = new NeoVis.default(config);
viz.render();

// Update with new query, replacing current visualization
viz.renderWithCypher("MATCH (n:Person)-[r:KNOWS]->(m:Person) RETURN n,r,m");

// Update with parameterized query
viz.renderWithCypher(
  "MATCH (n)-[r]->(m) WHERE n.community = $community RETURN n,r,m",
  { community: 5 }
);

// Add data to existing visualization (doesn't clear current nodes)
viz.updateWithCypher(
  "MATCH (n:Location)-[r:LOCATED_IN]->(m:City) RETURN n,r,m"
);
```

--------------------------------

### Default Label Configuration in JavaScript

Source: https://context7.com/context7/neo4j-contrib_github_io_neovis_js/llms.txt

Applies default configuration settings to all unlabeled nodes or relationships, or overrides specific labels. This simplifies configuration by providing a fallback for elements that are not explicitly defined. Uses `NEOVIS_DEFAULT_CONFIG` for defaults and specific label names for overrides.

```javascript
const config = {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://localhost:7687',
    serverUser: 'neo4j',
    serverPassword: 'password'
  },
  labels: {
    // Default config for all node labels not explicitly configured
    [NeoVis.NEOVIS_DEFAULT_CONFIG]: {
      label: 'name',
      size: 10,
      color: '#999999'
    },
    // Override for specific label
    Important: {
      label: 'name',
      size: 30,
      color: '#ff0000'
    }
  },
  relationships: {
    // Default config for all relationship types
    [NeoVis.NEOVIS_DEFAULT_CONFIG]: {
      value: 'weight',
      color: '#cccccc'
    }
  },
  initialCypher: 'MATCH (n)-[r]->(m) RETURN n,r,m'
};

const viz = new NeoVis.default(config);
viz.render();
```

--------------------------------

### NeoVis Method: renderWithFunction

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Executes a given JavaScript function to fetch or process data and then re-renders the visualization with the results.

```javascript
renderWithFunction(func, parameters?): void
```

--------------------------------

### Load Game of Thrones dataset centralities in Neo4j

Source: https://neo4j-contrib.github.io/neovis.js/index

This Cypher query loads pre-calculated PageRank and community detection data for the Game of Thrones dataset from a CSV file. It matches 'Character' nodes and sets their 'community' and 'pagerank' properties. This data is used to influence node visualization properties.

```cypher
LOAD CSV WITH HEADERS FROM 'https://raw.githubusercontent.com/johnymontana/neovis.js/master/examples/data/got-centralities.csv'
AS row
MATCH (c:Character {name: row.name})
SET c.community = toInteger(row.community),
c.pagerank = toFloat(row.pagerank)
```

--------------------------------

### NeoVis Method: reinit

Source: https://neo4j-contrib.github.io/neovis.js/classes/NeoVis

Resets the NeoVis configuration and reloads the data. It can take a new config object and an optional parameter.

```javascript
reinit(config, parameter?): void
```

--------------------------------

### NonFlatNeovisConfig Interface

Source: https://neo4j-contrib.github.io/neovis.js/interfaces/NonFlatNeovisConfig

The NonFlatNeovisConfig interface provides a detailed structure for configuring neovis.js, allowing for customization of the Neo4j connection, visualization options, and data handling.

```APIDOC
## Interface NonFlatNeovisConfig

non flat version of the configuration (without Symbols) look at the normal config for more information

### Example
```json
{
     "containerId": "viz",
     "nonFlat": true,
     "neo4j": {
         "serverUrl": "bolt://localhost:7687",
         "serverUser": "neo4j",
         "serverPassword": "gland-presentation-worry"
     },
     "visConfig": {
         "nodes": {
             "shape": "square"
         },
         "edges": {
             "arrows": {
                 "to": {"enabled": true}
             }
         }
     },
     "labels": {
         "Character": {
             "property": {
                 "label": "pagerank",
                 "group": "community"
             },
             "cypher": {
                 "value": "MATCH (n) WHERE id(n) = $id RETURN n.size"
             },
             "function": {
                 "title": "(node) => {\n                     return viz.nodeToHtml(node, undefined);\n                 }"
             }
         }
     },
     "relationships": {
         "INTERACTS": {
             "property": {
                 "value": "weight"
             },
             "function": {
                 "title": "(edge) => {\n                     return viz.nodeToHtml(edge, undefined);\n                 }"
             }
         }
     },
     "initialCypher": "MATCH (n)-[r]->(m) RETURN n,r,m"
}
```

#### Hierarchy
  * BaseNeovisConfig
    * NonFlatNeovisConfig

##### Index
### Properties
consoleDebug? containerId dataFunction? defaultLabelConfig? defaultRelationshipsConfig? groupAsLabel? initialCypher? labels? neo4j? nonFlat relationships? serverDatabase? visConfig?

### Properties

#### `Optional` consoleDebug
consoleDebug?: boolean
Should output debug messages to console
### Default
```
false
```

#### containerId
containerId: string
Html id of the element you want Neovis to render on

#### `Optional` dataFunction
dataFunction?: DataFunctionType
function to get fetch data instead of neo4j driver
it needs to return a list of records
example in examples/simple-dataFunction-example.html

#### `Optional` defaultLabelConfig
defaultLabelConfig?: NonFlatLabelConfig

#### `Optional` defaultRelationshipsConfig
defaultRelationshipsConfig?: NonFlatRelationsipConfig

#### `Optional` groupAsLabel
groupAsLabel?: boolean
Should group be the label
### Default
```
true
```

#### `Optional` initialCypher
initialCypher?: string
The Cypher query that will get the data

#### `Optional` labels
labels?: Record<string, NonFlatLabelConfig>

#### `Optional` neo4j
neo4j?: Driver | Neo4jConfig
Neo4j Driver instance or configuration to make one

#### nonFlat
nonFlat: true
Tells Neovis is the config is flat or not
### Default
```
false
```

#### `Optional` relationships
relationships?: Record<string, NonFlatRelationsipConfig>

#### `Optional` serverDatabase
serverDatabase?: string
database name you want to connect to
### Default
```
neo4j
```

#### `Optional` visConfig
visConfig?: Options
Vis network config to override neovis defaults
### Link
https://visjs.github.io/vis-network/docs/network/#options

### Settings
#### Member Visibility
  * Protected
  * Inherited
  * External

#### Theme
OSLightDark

### On This Page
  * consoleDebug
  * containerId
  * dataFunction
  * defaultLabelConfig
  * defaultRelationshipsConfig
  * groupAsLabel
  * initialCypher
  * labels
  * neo4j
  * nonFlat
  * relationships
  * serverDatabase
  * visConfig

Generated using TypeDoc
```
Tokens:
Raw