Awesome

@cylynx/motif

The no-code graph visualization platform

Features

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!)

Motivation

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

Demo

Try out a full-featured demo with walkthrough at https://demo.cylynx.io

Roadmap

Better performance
Smaller bundle size
Improve legend support
Export more components
More import and export integrations
Documentation page

Packages

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

Getting Started

$ npm install --save @cylynx/motif

Prerequisites

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

Usage

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.

Development

Motif utilise Lerna to manage multi-package repositories with npm workspaces to ease collaboration and testing.

The library is bundled with Vite.

Environment Installation

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-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

Develop with Hot-Reloading

We use vite with tsc for development.

Start development server with preview

$ npm run motif

Develop with strict type-checking

$ npm run motif:tsc

Production build

Build and bundling into typescript library

$ npm run motif:build

Preview the production bundle

$ npm run demo

Testing

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.

Perform bundling on the @cylynx/motif packages 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:3000 to 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

Built with

Antv G6 and Graphin for the graph library
Base Web and Styletron for the UI
Redux for state management
Typescript

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Commercial Support

We provide commercial support for enterprises using Motif with customised backend integrations and features where necessary.