mindville-graph-module

Mindville Graph Module

This package contains a collection of graph's used by Mindville internally.
The package contains it's own i18n translations as well as an Apollo GraphQL client and various Riada react ui components.

Usage:

Usage of the graph is extremely straight-forward, the following views and props are available:

Object type schema graph
<ObjectTypeSchemaGraphView objectSchemaId='1'> Props:

objectSchemaId*: string - The schema you want a graph of
[selectedObjectTypeId]: string - A pre-selected objectTypeId in the graph. The graph will center on this node.
[width]: number - A static width of the graph. If not provided, fills the available container
[height]: number A static height of the graph. If not provided, fills the available container

Object type graph
<ObjectTypeGraphView objectTypeId='1'> Props:

objectTypeId*: string - The object type you want a schema of. The graph will center on this node, and traverse incoming and outgoing nodes from it.
[width]: number - A static width of the graph. If not provided, fills the available container
[height]: number A static height of the graph. If not provided, fills the available container

Object graph
<ObjectGraphView objectId='1'> Props:

objectTypeId*: string - The object type you want a schema of. The graph will center on this node, and traverse incoming and outgoing nodes from it.
[width]: number - A static width of the graph. If not provided, fills the available container
[height]: number A static height of the graph. If not provided, fills the available container

Help views

<ResetCss/>- Reset's css elements to their spec standards. In most cases your app should provide it's own css reset.
<FlexRoot></FlexRoot> - The graph is designed to live in a flexbox, this component can be mounted on top if your're having problems.

Minimal example:

import React from 'react';
import ReactDOM from 'react-dom';
//Add it to the build, needs to be manually loaded with a script tag
//Like this: <script src="%PUBLIC_URL%/ruik.bundle.js"></script>
import 'riada-react-ui-components/dist/load-styles.js';

import { ObjectTypeSchemaGraphView } from 'mindville-graph-module';
import ResetCss from "./reset.css";

const rootElement = document.getElementById('root');
const el = <>
  <ObjectTypeSchemaGraphView objectSchemaId={'2'}/>
  <ResetCss />
</>;

ReactDOM.render(el, rootElement);

The available functionality differs depending on the graph, but options can easily be ported between then. Here are some of the features:

Zooming/panning
Tooltips (incoming/outgoing links etc)
Variable links width and multi-colored links based on the number of links
Double-click inbound/outbound traversal
Creating links between nodes
Object->Object-type group filtering
Reference type filtering
Support for freezing/un-freezing, different distance/spread options and other visual-aids.

Building

If this is your first time using the package, i recommend running npm run prepublishOnly
Subsequent build cam run npm run build
The package should build on any platform without problems.

mindville-graph-module