ASIMOV GraphView Widget

The GraphView widget is a React component for rendering force-directed graphs (2D or 3D) using react-force-graph. You can pass a numDimensions prop (2 or 3) to switch between 2D and 3D. The component also supports node collapsibility, simple node labeling, and an optional callback for node clicks. Note: This component is not published on npm yet; you can install it from GitHub.

Note: This package isn’t published to npm. You can install it directly from GitHub.

Installation

To install via GitHub, run:

npm install git+https://github.com/asimov-protocol/asimov-graph-widget.git

Usage

Below is a minimal example showing how to import and use the GraphView component with only the required prop:

import React from 'react'
import { GraphView } from 'asimov-graph-widget'

const graphData = {
  nodes: [
    { id: 1, label: "Node 1" },
    { id: 2, label: "Node 2" },
    // ...more nodes
  ],
  links: [
    { source: 1, target: 2 },
    // ...more links
  ]
}

const App = () => {
  return (
    <GraphView
      data={graphData}
    />
  )
}

export default App

By default, this renders a 3D graph. To make it 2D, pass numDimensions={2}:

<GraphView
  data={graphData}
  numDimensions={2}
  onNodeClick={(node) => console.log('Clicked:', node)}
/>

Props Table

Prop	Type	Default	Description
data	GraphData	Required	Graph data containing nodes and links.
onNodeClick	(node: GraphData['nodes'][number]) => void	undefined	Callback when a node is clicked; receives the clicked node.
activeNode	GraphData['nodes'][number]	undefined	Node to visually highlight or focus in the graph.
rootId	string | number	undefined	ID of the node used as the root for collapsible/expandable tree logic.
className	string	''	Additional CSS classes to apply to the container.
styles	React.CSSProperties	undefined	Inline styles to apply to the container.
collapsible	boolean	true	Determines whether nodes can be collapsed or expanded.
numDimensions	2 | 3	3	Renders a 2D canvas graph (2) or a 3D WebGL graph (3).
graphProps	Graph2dProps | Graph3dProps	undefined	Additional props forwarded to the underlying react-force-graph-2d or react-force-graph-3d.
variant	'default' | 'curved' | 'animated' | 'animated-curved' | 'arrow'	'default'	Visual style variant affecting link shapes and node animations.

Local Development

If you’d like to work with this repository directly, simply clone it and install its dependencies. Then, you can spin up the development server with the following commands:

git clone https://github.com/asimov-protocol/asimov-graph-widget.git
cd asimov-graph-widget
nvm use # optional
npm install
npm run dev