Neo4J Arc

Installing Library

Neo4j Arc has a peer dependency of neo4j-driver-core 5.9.2, so we will also install it along the way:

yarn add neo4j-devtools-arc neo4j-driver-core@5.9.2

Basic Usage

import { BasicNode, BasicRelationship, GraphVisualizer } from "neo4j-devtools-arc";

export default function MyGraphComponent(): JSX.Element {

  const nodes: BasicNode[] = [
    {
      id: "1",
      labels: ["Person"],
      properties: {
        name: "Jack",
        age: "20"
      },
      propertyTypes: {
        name: "string",
        age: "number"
      }
    },
    {
      id: "2",
      labels: ["React"],
      properties: {
        name: "ReactJS"
      },
      propertyTypes: {
        name: "string",
      }
    }
  ]

  const links: BasicRelationship[] = [
    {
      id: "3",
      startNodeId: "1",
      endNodeId: "2",
      type: "likes",
      properties: {},
      propertyTypes: {}
    }
  ]

  const isFullscreen = true;

  return (
    <GraphVisualizer
      maxNeighbours={100}
      hasTruncatedFields={false}
      nodes={nodes}
      autocompleteRelationships={false}
      relationships={links}
      isFullscreen={isFullscreen}
      nodeLimitHit={false}
      getAutoCompleteCallback={undefined}
      wheelZoomRequiresModKey={!isFullscreen}
      wheelZoomInfoMessageEnabled={false}
      useGeneratedDefaultColors={false}
      initialZoomToFit={true}
    />
  );
}

basic example

Options

Turnning Off Node Inspector Panel

neo4j-arc shows graph with an accompanying inspection panel on the right side. This panel might be not needed in at least 2 business scenarios:

  1. a simple static page that just needs to show some static and simple graph

  2. a MVP product has planned but would not want to add panel feature at the moment

The inspector panel will show by default. To turn it-off:

export default function MyGraphComponent(): JSX.Element {

  return (
    <GraphVisualizer
      ...
      showNodeInspectorPanel={false}
    />
  );
}

Turnning Off Properties Table

export default function MyGraphComponent(): JSX.Element {

  return (
    <GraphVisualizer
      ...
      showPropertiesTable={false}
    />
  );
}

Node Inspector Panel

neo4j-arc comes with the default overview pane (DefaultOverviewPane.tsx) and details pane (DefaultDetaislPane.tsx). If initializing GraphVisualizer does not specify OverviewPaneOverride or DetailsPaneOverride, their corresponding default implementation will be used.