maastrichtu-ids/perfect-graph

Create perfect graph visualisations easily

PerfectGraph

Motivation

We want to build a collaborative Knowledge Graph Editor. To achive that goal we need a Graph Visualizer on a web browser and it needs to have a declarative rendering. Because in imperative style we need to call appropriate api functions respect to the data changes like addNode, deleteNode etc. But we just want to change JSON data (node and edge information) and render elements respectively to the changes.

First, install Nodejs and Yarn to your working environment. Then

yarn global add expo-cli

Then,

expo init my-project
cd my-project
yarn add perfect-graph colay colay-ui immer

After you can write this command to the terminal in your project directory

yarn web

So let's start coding

import {Graph} from 'perfect-graph'

export default function MyGraph() {
  return (
    <Graph
      style={{width: 600, height: 400}}
      nodes={[
        {id: '1', position: {x: 10, y: 10}},
        {id: '2', position: {x: 300, y: 100}}
      ]}
      edges={[{id: '51', source: '1', target: '2'}]}
    />
  )
}

To use GraphEditor you need to install material-ui packages. We use the latest version:

yarn add @mui/icons-material @mui/material @mui/styles @emotion/react @emotion/styled react-beautiful-dnd @rjsf/core @rjsf/material-ui react-color

To support material-ui v5 with @rjsf/material-ui, we need to add some special configuration until they have fully support for v5. Also add some packages.

yarn add @expo/webpack-config babel-plugin-module-resolver -D

// webpack.config.js
const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ['@rjsf/material-ui']
      }
    },
    argv
  )
  return config
}

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          extensions: ['.js', '.jsx', '.es', '.es6', '.mjs', '.ts', '.tsx'],
          alias: {
            '@material-ui/core': '@mui/material',
            '@material-ui/icons': '@mui/icons-material',
            '@material-ui/styles': '@mui/styles'
          }
        }
      ]
    ]
  }
}

import {GraphEditor} from 'perfect-graph/components/GraphEditor'
import {useController} from 'perfect-graph/plugins/controller'

export default function MyGraphEditor() {
  const [controllerProps] = useController({
    nodes: [
      {id: '1', position: {x: 10, y: 10}},
      {id: '2', position: {x: 300, y: 100}}
    ],
    edges: [{id: '51', source: '1', target: '2'}]
  })

  return <GraphEditor style={{width: 600, height: 400}} {...controllerProps} />
}

Start development server again:

yarn web

To have json editor:

yarn add brace jsoneditor jsoneditor-react

import {GraphEditor} from 'perfect-graph/components/GraphEditor'
import {useController} from 'perfect-graph/plugins/controller'

export default function MyGraphEditor() {
  const [controllerProps] = useController({
    nodes: [
      {id: '1', position: {x: 10, y: 10}},
      {id: '2', position: {x: 300, y: 100}}
    ],
    edges: [{id: '51', source: '1', target: '2'}],
    dataBar: {
      editable: true
    }
  })

  return <GraphEditor style={{width: 600, height: 400}} {...controllerProps} />
}

To use rdf based operation please install the required dependencies:

yarn add jsonld jsonld-context-parser n3 rdf-literal rdflib

To use layouts, please install the required dependencies:

yarn add cytoscape-avsdf cytoscape-cise cytoscape-cola cytoscape-d3-force cytoscape-dagre cytoscape-euler cytoscape-fcose cytoscape-klay cytoscape-spread

If the PIXI.js renderer takes a lot time to render all elements and blocks the UI then consider on:

• Decreasing the view resolution and settings quality In example when a huge data chunk imported to perfect-graph, if the view quality is very high ; then PIXI.js will block (to render the elements with high view quality) the UI thread and cause strange issues. Set low view quality settings before importing the data chunk and let Adaptive Performance Optimizer do the rest of the optimization.

• If there is an error: Can not set readonly 'x' of '#Object' That could be related with position ; If you use cy.$(id).position() in somewhere and store it that can cause an issue. Use cy.$(id).position().x , cy.$(id).position().y

Furthermore please refer to the Components Section.

perfect-graph's Issues

Change nodes and canvas background color

How can we change nodes and canvas background color?

Does not seems to work through style or properties, see example use: https://github.com/MaastrichtU-IDS/ids-projects-website/blob/main/src/About.tsx#L73

Example with the GraphView component: https://perfectgraph-5c619.web.app/?path=/story/components-components--view

Add import to documentation

Include import in all documentation code snippets (e.g. Graph Editor or Profile template, at the moment we need to go back to the Getting started page to find the import line

import { Graph } from "perfect-graph";

Documentation navbar won't open new page

When I click on a category in the menu left sidebar it changes properly the URL, but does not reload the page
I need to reload the page to access the URL
e.g. https://perfectgraph-5c619.web.app/?path=/story/components-components--image
On Firefox on Ubuntu (did not noticed it before, I think it was a problem before)

Issue with pixi.js in Firefox

Issue when using perfect-graph with Firefox

The console outputs:

Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.

The same works on Chrome

With Firefox 83.0 (64-bit) on Ubuntu 18.04

Visualize HCLS descriptive metadata using perfect-graph

See "Entity and Relation": https://trek.semanticscience.org/

RDF data in graphdb.dumontierlab.com ncats-red-kg repository

Objective: Visualize a meta graph of a triplestore based on its HCLS descrition in RDF

See HCLS specs: https://www.w3.org/TR/hcls-dataset/

N.B.: documentation to generate HCLS stats : https://github.com/MaastrichtU-IDS/d2s-scripts-repository/tree/master/sparql/compute-hcls-stats