Merge pull request #108 from reaviz/graphology

#61 - Migrate to Graphology

README.md

@@ -66,6 +66,8 @@ with the following built in layouts:
 - Radial Out 3D
 - Hierarchical Top Down 2D
 - Hierarchical Left Right 2D
+- No Overlap 2D
+- Force Atlas 2 2D
 
 ## 📦 Usage
 

docs/Layouts.mdx

@@ -16,6 +16,8 @@ reagraph has the following layout types:
 - Radial Out 3D
 - Hierarchical Top Down 2D
 - Hierarchical Left Right 2D
+- No Overlap 2D
+- Force Atlas 2 2D
 
 ## Layout Overrides
 You can override the default layout options for each respective layout using
@@ -64,7 +66,7 @@ The 3D version is useful for very large graphs where many nodes would overlap ea
 </div>
 
 The circular layout arranges nodes in a circular fashion drawing relationships between the nodes
-on the outside of the circle. This layout uses [ngraph.circular.fixed](https://www.npmjs.com/package/ngraph.circular.fixed).
+on the outside of the circle.
 
 ### Tree 2D
 <div style={{ height: 300, width: 500, position: 'relative', background: 'white', borderRadius: 4, border: '1px solid rgba(0,0,0,.1)', boxShadow: 'rgb(0 0 0 / 10%) 0 1px 3px 0', overflow: 'hidden' }}>
@@ -104,3 +106,17 @@ Similar to the Radial 2D but adds another dimension. This layout uses [d3-force-
 </div>
 
 This layout uses [d3-hierarchy](https://www.npmjs.com/package/d3-hierarchy).
+
+### No Overlap
+<div style={{ height: 300, width: 500, position: 'relative', background: 'white', borderRadius: 4, border: '1px solid rgba(0,0,0,.1)', boxShadow: 'rgb(0 0 0 / 10%) 0 1px 3px 0', overflow: 'hidden' }}>
+ <Story id="demos-layouts-2d--no-overlap" />
+</div>
+
+This layout uses [graphology-layout-nooverlap](https://graphology.github.io/standard-library/layout-noverlap.html).
+
+### Force Atlas 2
+<div style={{ height: 300, width: 500, position: 'relative', background: 'white', borderRadius: 4, border: '1px solid rgba(0,0,0,.1)', boxShadow: 'rgb(0 0 0 / 10%) 0 1px 3px 0', overflow: 'hidden' }}>
+ <Story id="demos-layouts-2d--force-atlas-2" />
+</div>
+
+This layout uses [graphology-layout-forceatlas2](https://graphology.github.io/standard-library/layout-forceatlas2.html).

docs/Selection.mdx

@@ -103,7 +103,7 @@ export interface SelectionResult {
  /**
  * Get the paths between two nodes.
  */
- selectNodePaths: (fromId: string, toId: string) => void;
+ selectNodePaths: (source: string, target: string) => void;
 
  /**
  * Remove selection method.

docs/assets/demo.ts

@@ -1,9 +1,9 @@
 import { range } from 'd3-array';
 import { GraphEdge, GraphNode } from '../../src';
-import random from 'lodash/random';
 import demonSvg from './demon.svg';
 import computerSvg from './computer.svg';
-import generators from 'ngraph.generators';
+
+export const random = (floor, ceil) => Math.floor(Math.random() * ceil) + floor;
 
 export const simpleNodes: GraphNode[] =
  range(5).map(i => ({
@@ -78,13 +78,14 @@ const colors = ['blue', 'green', 'red', 'orange'];
 export const clusterNodes: GraphNode[] =
  range(25).map(i => {
  const idx = random(0, types.length - 1);
+ const type = types[idx];
 
  return {
  id: `n-${i}`,
- label: `Node ${i}`,
+ label: `Node ${type} ${i}`,
  fill: colors[idx],
  data: {
- type: types[idx]
+ type
  }
  }
 });
@@ -211,27 +212,52 @@ export const treeEdges: GraphEdge[] = [
  }
 ];
 
-export const [complexNodes, complexEdges] = transformGenerator(generators.balancedBinTree(3));
-
-export function transformGenerator(g) {
- const nodes: any[] = [];
- const edges: any[] = [];
-
- g.forEachNode(node => {
- nodes.push({
- id: `${node.id}`,
- label: `Node ${node.id}`
- });
-
- node.links.forEach(link => {
- edges.push({
- id: `${node.id}->${link.toId}`,
- source: `${link.fromId}`,
- target: `${link.toId}`,
- label: `${link.fromId} -> ${link.toId}`
- });
- });
- });
-
- return [nodes, edges];
-}
+export const complexNodes: GraphNode[] =
+ range(25).map(i => ({
+ id: `${i}`,
+ label: `Node ${i}`
+ }));
+
+export const complexEdges = [
+ { id: '0->2', source: '0', target: '2', label: 'Edge 0-2' },
+ { id: '1->3', source: '1', target: '3', label: 'Edge 1-3' },
+ { id: '2->4', source: '2', target: '4', label: 'Edge 2-4' },
+ { id: '3->5', source: '3', target: '5', label: 'Edge 3-5' },
+ { id: '5->15', source: '5', target: '15', label: 'Edge 5-15' },
+ { id: '5->7', source: '5', target: '7', label: 'Edge 5-7' },
+ { id: '6->8', source: '6', target: '8', label: 'Edge 6-8' },
+ { id: '7->9', source: '7', target: '9', label: 'Edge 7-9' },
+ { id: '8->10', source: '8', target: '10', label: 'Edge 8-10' },
+ { id: '9->11', source: '9', target: '11', label: 'Edge 9-11' },
+ { id: '10->12', source: '10', target: '12', label: 'Edge 10-12' },
+ { id: '11->13', source: '11', target: '13', label: 'Edge 11-13' },
+ { id: '22->9', source: '22', target: '9', label: 'Edge 22-9' },
+ { id: '13->15', source: '13', target: '15', label: 'Edge 13-15' },
+ { id: '14->16', source: '14', target: '16', label: 'Edge 14-16' },
+ { id: '15->17', source: '15', target: '17', label: 'Edge 15-17' },
+ { id: '16->18', source: '16', target: '18', label: 'Edge 16-18' },
+ { id: '17->19', source: '17', target: '19', label: 'Edge 17-19' },
+ { id: '18->20', source: '18', target: '20', label: 'Edge 18-20' },
+ { id: '19->21', source: '19', target: '21', label: 'Edge 19-21' },
+ { id: '20->22', source: '20', target: '22', label: 'Edge 20-22' },
+ { id: '21->23', source: '21', target: '23', label: 'Edge 21-23' },
+ { id: '22->24', source: '22', target: '24', label: 'Edge 22-24' },
+ { id: '23->0', source: '23', target: '0', label: 'Edge 23-0' },
+ { id: '24->1', source: '24', target: '1', label: 'Edge 24-1' },
+ { id: '0->3', source: '0', target: '3', label: 'Edge 0-3' },
+ { id: '1->4', source: '1', target: '4', label: 'Edge 1-4' },
+ { id: '2->5', source: '2', target: '5', label: 'Edge 2-5' },
+ { id: '3->6', source: '3', target: '6', label: 'Edge 3-6' },
+ { id: '4->7', source: '4', target: '7', label: 'Edge 4-7' },
+ { id: '5->8', source: '5', target: '8', label: 'Edge 5-8' },
+ { id: '6->9', source: '6', target: '9', label: 'Edge 6-9' },
+ { id: '7->10', source: '7', target: '10', label: 'Edge 7-10' },
+ { id: '8->11', source: '8', target: '11', label: 'Edge 8-11' },
+ { id: '9->12', source: '9', target: '12', label: 'Edge 9-12' },
+ { id: '10->13', source: '10', target: '13', label: 'Edge 10-13' },
+ { id: '11->14', source: '11', target: '14', label: 'Edge 11-14' },
+ { id: '12->15', source: '12', target: '15', label: 'Edge 12-15' },
+ { id: '13->16', source: '13', target: '16', label: 'Edge 13-16' },
+ { id: '14->17', source: '14', target: '17', label: 'Edge 14-17' },
+ { id: '15->18', source: '15', target: '18', label: 'Edge 15-18' },
+];

docs/demos/Basic.story.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { GraphCanvas, lightTheme } from '../../src';
-import { parentEdges, parentNodes, simpleEdges, simpleNodes } from '../assets/demo';
-import random from 'lodash/random';
+import { parentEdges, parentNodes, simpleEdges, simpleNodes, random } from '../assets/demo';
 import { range } from 'd3-array';
 
 export default {

docs/demos/Cluster.story.tsx

@@ -1,7 +1,6 @@
-import random from 'lodash/random';
 import React from 'react';
 import { GraphCanvas } from '../../src';
-import { clusterNodes, clusterEdges } from '../assets/demo';
+import { clusterNodes, clusterEdges, random } from '../assets/demo';
 
 export default {
  title: 'Demos/Cluster',

docs/demos/Sizing.story.tsx

@@ -21,8 +21,8 @@ const MinMaxSizesStory = (props) => (
 
 export const MinMaxSizes = MinMaxSizesStory.bind({});
 MinMaxSizes.args = {
- minNodeSize: 25,
- maxNodeSize: 100
+ minNodeSize: 10,
+ maxNodeSize: 25
 };
 
 export const PageRank = () => (

docs/demos/Themes.story.tsx

@@ -42,7 +42,7 @@ CustomTheme.args = {
  fog: '#1E2026'
  },
  node: {
- fill: '#7A8C9E',
+ fill: 'blue',
  activeFill: '#1DE9AC',
  label: {
  stroke: '#1E2026',

docs/demos/TwoLayouts.story.tsx

@@ -23,6 +23,14 @@ export const Circular = () => (
  <GraphCanvas layoutType="circular2d" nodes={complexNodes} edges={complexEdges} />
 );
 
+export const NoOverlap = () => (
+ <GraphCanvas layoutType="nooverlap" nodes={simpleNodes} edges={simpleEdges} />
+);
+
+export const ForceAtlas2 = () => (
+ <GraphCanvas layoutType="forceatlas2" nodes={complexNodes} edges={complexEdges} />
+);
+
 export const RadialOut = () => (
  <GraphCanvas layoutType="radialOut2d" nodes={simpleNodes} edges={simpleEdges} />
 );

package.json

@@ -63,12 +63,13 @@
  "d3-hierarchy": "^3.1.2",
  "d3-scale": "^4.0.2",
  "ellipsize": "^0.5.1",
+ "graphology": "^0.25.1",
+ "graphology-layout": "^0.6.1",
+ "graphology-layout-forceatlas2": "^0.10.1",
+ "graphology-layout-noverlap": "^0.4.2",
+ "graphology-metrics": "^2.1.0",
+ "graphology-shortest-path": "^2.0.2",
  "hold-event": "^0.2.0",
- "ngraph.centrality": "^2.1.0",
- "ngraph.circular.fixed": "^1.0.1",
- "ngraph.graph": "^20.0.0",
- "ngraph.pagerank": "^2.1.0",
- "ngraph.path": "^1.4.0",
  "react-use-gesture": "^9.1.3",
  "reakeys": "^1.3.1",
  "three": "^0.143.0",
@@ -106,11 +107,10 @@
  "eslint-plugin-react": "^7.30.1",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-storybook": "^0.6.12",
+ "graphology-types": "^0.24.7",
  "husky": "^8.0.3",
  "jsdom": "^22.1.0",
  "lint-staged": "^13.2.3",
- "lodash": "^4.17.21",
- "ngraph.generators": "^20.1.0",
  "postcss-nested": "^6.0.1",
  "postcss-preset-env": "^9.0.0",
  "prettier": "^3.0.0",

src/GraphCanvas.tsx

@@ -15,7 +15,7 @@ import {
 } from './CameraControls';
 import { Theme, lightTheme } from './themes';
 import { createStore, Provider } from './store';
-import { Graph } from 'ngraph.graph';
+import Graph from 'graphology';
 import { Lasso, LassoType } from './selection';
 import css from './GraphCanvas.module.css';
 
@@ -54,7 +54,7 @@ export interface GraphCanvasProps extends Omit<GraphSceneProps, 'theme'> {
 export type GraphCanvasRef = Omit<GraphSceneRef, 'graph'> &
  Omit<CameraControlsRef, 'controls'> & {
  /**
- * Get the ngraph object.
+ * Get the graph object.
  */
  getGraph: () => Graph;
 

src/GraphScene.tsx

@@ -31,7 +31,7 @@ import { useCenterGraph } from './CameraControls';
 import { LabelVisibilityType } from './utils';
 import { Theme } from './themes';
 import { useStore } from './store';
-import { Graph } from 'ngraph.graph';
+import Graph from 'graphology';
 
 export interface GraphSceneProps {
  /**
@@ -202,7 +202,7 @@ export interface GraphSceneProps {
 
 export interface GraphSceneRef {
  /**
- * Reference to the ngraph object.
+ * Reference to the graph object.
  */
  graph: Graph;