@quantumblack/asset-graph-utils v1.0.4

asset-graph-utils

Util functions for assets using graph visualisations

Build Setup (for Development)

Checkout this repo, then use the following:

# install dependencies
npm install

# build for production with minification
npm run build

# run unit tests
npm run test

Installing this package

npm i @quantumblack/asset-graph-utils --save

Importing in your JS:

import GraphUtils from '@quantumblack/asset-graph-utils';

Generating a layout from a structure of nodes and links

runLayout(graphData)

Runs a force directed layout (via a web worker, async)

Arguments

(object) An object contaning nodes and links, as per the example below.

Returns

(Promise) Resolves with a layout object, which contains positions and bounds properties, as per the example response below.

Example usage

const graphData = {
  nodes: [
    { id: 'A', x: 100, y: 0, pin: true },
    { id: 'B' },
    { id: 'C' }
  ],
  links: [
    { fromId: 'A', toId: 'B' },
    { fromId: 'B', toId: 'C' },
    { fromId: 'C', toId: 'A' }
  ]
};

GraphUtils.runLayout(graphData).then(layout => {
  console.log('positions array', layout.positions);
  console.log('bounds', layout.bounds);
});

Example Response

When the promise resolves, the node positions are returned as an array, containing the id and the newly created position data.

Also returned are the bounds, describing the total space the layout occupies, as an object describing a rectangle:

• x1, y1 - top left coordinates of bounding box
• x2, y2 - bottom right coordinates of bounding box

{
  "positions": [
    {
      "id": "A",
      "x": 100,
      "y": 0
    },
    {
      "id": "B",
      "x": -89.25850510040019,
      "y": 65.4295921149923
    },
    {
      "id": "C",
      "x": -51.29294148103743,
      "y": -131.18787724171713
    }
  ],
  "bounds": {
    "x1": -89.25850510040019,
    "y1": -131.18787724171713,
    "x2": 100,
    "y2": 65.4295921149923
  }
}