Open source, no-code, network visualization tool for graph analysis and investigation
MIT License
The no-code graph visualization platform
Motif is an open-sourced graph explorer born from our numerous graph visualisation projects at Cylynx. We hope to make graph exploration, visualisation and discovery quicker and easier.
Inspired by Kepler.gl and Neo4j Bloom
Try out a full-featured demo with walkthrough at https://demo.cylynx.io
We use a monorepo approach to maintain our packages
$ npm install --save @cylynx/motif
Peer Dependencies | Version |
---|---|
baseui |
>= 9.112.0 |
react and react-dom
|
>= 16.8.0 |
styletron-engine-atomic |
>= 1.4.7 |
styletron-react |
>= 5.2.7 |
Development Environment | Version |
---|---|
node |
^14.0 or ^16.0 |
npm |
>=6 |
import React from 'react';
import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import { BaseProvider } from 'baseui';
import Motif, { MotifLightTheme, MotifDarkTheme } from '@cylynx/motif';
import { Provider } from 'react-redux';
import store from './redux-store';
import '@cylynx/motif/dist/motif.css';
const engine = new Styletron();
const App = () => {
return (
<StyletronProvider value={engine}>
<BaseProvider theme={MotifLightTheme}>
<Provider store={store}>
<Motif
name='Motif'
primaryTheme={MotifLightTheme}
secondaryTheme={MotifDarkTheme}
accessors={{
nodeID: 'id',
edgeID: 'id',
edgeSource: 'source',
edgeTarget: 'target',
}}
/>
</Provider>
</BaseProvider>
</StyletronProvider>
);
};
export default App;
For more information on the supported graph formats, check out README.md in packages/motif.
Motif utilise Lerna to manage multi-package repositories with npm workspaces to ease collaboration and testing.
The library is bundled with Vite.
nvm use 16
.$ node -v
v16.1.0
$ npm -v
v7.7.6
$ npm install --legacy-peer-deps
Note: If you are facing problems installing it might be worth to clear the cache and re-install the dependencies:
$ npm cache clean --force
$ npm install --legacy-peer-deps
We use vite with tsc for development.
Start development server with preview
$ npm run motif
Develop with strict type-checking
$ npm run motif:tsc
Build and bundling into typescript library
$ npm run motif:build
Preview the production bundle
$ npm run demo
Unit test
The test runner of @cylynx/motif is configure with Jest testing framework. The following commands are use to verify whether the test cases are executed correctly.
$ cd ./packages/motif
$ npm run test
E2E test
We use Cypress testing framework to run e2e tests. This verifies the consistency and accuracy of the library in the client's browser environment. Therefore, several commands and procedure are requires as prequisite to setup the test environment.
@cylynx/motif
packages to produce production bundles,$ npm run motif:build
$ npm run demo:build
http://localhost:3000
to verify that the application is running.$ npm run demo:serve
$ cd ./packages/motif && npm run cypress:open
Contributions are always welcome!
See contributing.md
for ways to get started.
Please adhere to this project's code of conduct
.
We provide commercial support for enterprises using Motif with customised backend integrations and features where necessary.
Contact us at [email protected] for further information.
MIT © cylynx