# mindville-graph-module > A graph module based on react-force-graph used internally at mindville Latest version **0.1.0-BETA7** (published 2019-12-11) · ISC license · 0 weekly downloads ## Install ```sh npm install mindville-graph-module pnpm add mindville-graph-module yarn add mindville-graph-module bun add mindville-graph-module ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0-BETA7 | | Published | 2019-12-11 | | First published | 2019-11-26 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 25 | | Unpacked size | 304.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Mindville | | Maintainers | mindville | ## Links - npm: https://www.npmjs.com/package/mindville-graph-module - Homepage: https://riada.se - npm.io page: https://npm.io/package/mindville-graph-module ## Dependencies (25) - [react](https://npm.io/package/react.md) ^16.9.0 - [moment](https://npm.io/package/moment.md) ^2.24.0 - [graphql](https://npm.io/package/graphql.md) ^14.5.0 - [i18next](https://npm.io/package/i18next.md) ^17.1.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.9.0 - [algorithms](https://npm.io/package/algorithms.md) ^0.10.0 - [final-form](https://npm.io/package/final-form.md) ^4.18.2 - [d3-force-3d](https://npm.io/package/d3-force-3d.md) ^2.0.3 - [graphql-tag](https://npm.io/package/graphql-tag.md) ^2.10.1 - [apollo-client](https://npm.io/package/apollo-client.md) ^2.6.4 - [framer-motion](https://npm.io/package/framer-motion.md) ^1.6.7 - [react-i18next](https://npm.io/package/react-i18next.md) ^10.13.1 - [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0 - [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.26 - [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0 - [react-final-form](https://npm.io/package/react-final-form.md) ^6.3.0 - [react-focus-lock](https://npm.io/package/react-focus-lock.md) ^2.0.4 - [styled-components](https://npm.io/package/styled-components.md) ^4.3.2 - [react-scroll-locky](https://npm.io/package/react-scroll-locky.md) ^1.5.0 - [@apollo/react-hooks](https://npm.io/package/@apollo/react-hooks.md) ^3.1.3 - [apollo-upload-client](https://npm.io/package/apollo-upload-client.md) 11.0.0 - [react-force-graph-2d](https://npm.io/package/react-force-graph-2d.md) ^1.11.0 - [apollo-cache-inmemory](https://npm.io/package/apollo-cache-inmemory.md) ^1.6.2 - [riada-react-ui-components](https://npm.io/package/riada-react-ui-components.md) ^0.2.2-alpha.8 - [stop-runaway-react-effects](https://npm.io/package/stop-runaway-react-effects.md) ^1.2.0 ## Recent versions - 0.1.0-BETA7 (latest) — 2019-12-11 - 0.1.0-BETA6 — 2019-12-11 - 0.1.0-BETA5 — 2019-12-11 - 0.1.0-BETA4 — 2019-12-11 - 0.1.0-BETA3 — 2019-11-29 - 0.1.0-BETA2 — 2019-11-28 - 0.1.0-BETA — 2019-11-26 ## README ## 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](https://www.npmjs.com/package/riada-react-ui-components). ### Usage: Usage of the graph is extremely straight-forward, the following views and props are available: **Object type schema graph** `` 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** `` 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** `` 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** - ``- Reset's css elements to their spec standards. In most cases your app should provide it's own css reset. - `` - 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: 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 = <> ; 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. --- _Source: https://npm.io/package/mindville-graph-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._