The no-code graph visualization platform
- No server required, just a web browser
- No code, visual UI
- Supports multiple graph imports
- Support for rich graph structures, including time series analysis
- Extensible with a widget based component system
- Multiple layout algorithms (force-directed, concentric, grid etc.)
- Multiple node and edge style options
- Multiple import formats (json, csv, neo4j with more to come!)
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
- Better performance
- Smaller bundle size
- Improve legend support
- Export more components
- More import and export integrations
- Documentation page
We use a monorepo approach to maintain our packages
- @cylynx/motif, Core Library of Motif
- motif-demo, Deployed demo of @cylynx/motif
- @cylynx/pymotif, Jupyter widget bindings for Motif (beta)
- ui, playground for ui components
$ 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.
- Verify Node and NPM version. We use nvm to manage node and npm version -
nvm use 16.
$ node -v
v16.1.0
$ npm -v
v7.7.6- Install the dependencies and link any cross-dependencies in the monorepo.
$ npm install --legacy-peer-depsNote: 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 motifDevelop with strict type-checking
$ npm run motif:tscBuild and bundling into typescript library
$ npm run motif:buildPreview the production bundle
$ npm run demoUnit 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 testE2E 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.
- Perform bundling on the
@cylynx/motifpackages to produce production bundles,
$ npm run motif:build- The production bundle produced in step 1 will be imported by motif-demo, and helps to verify the behaviour of the library in the client's browser environment. We will first generate a production build in motif-demo.
$ npm run demo:build- Serve the demo with port 3000, access
http://localhost:3000to verify that the application is running.
$ npm run demo:serve- Once step 3 runs successfully, we can launch Cypress to verify whether our test case are running accurately.
$ cd ./packages/motif && npm run cypress:open- Antv G6 and Graphin for the graph library
- Base Web and Styletron for the UI
- Redux for state management
- Typescript
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