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.