anishmprasad / vis-react Goto Github PK

View Code? Open in Web Editor NEW

28.0 3.0 7.0 728 KB

Data visualization library based on vis.js

License: MIT License

visjs reactjs graph react network-graph knowledge-graph hammerjs

vis-react's Introduction

vis-react

A React component to display beautiful network graphs using vis.js

Make sure to visit visjs.org for more info.

Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.

Due to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!

This component takes three vis.js configuration objects as properties:

graph: contains two arrays { edges, nodes }
options: normal vis.js options as described here
events: an object that has event name as keys and their callback as values

Installation

// with npm
$ npm install vis-react --save

// with yarn
$ yarn add vis-react

Load

To use a component, include the javascript and css files of vis in your root html:

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<script type="text/javascript">
			// ... load a visualization
		</script>
	</body>
</html>

or load vis.js using require.js. Note that vis.css must be loaded too.

Usage

import Graph from 'vis-react';

var graph = {
	nodes: [
		{ id: 1, label: 'Node 1' },
		{ id: 2, label: 'Node 2' },
		{ id: 3, label: 'Node 3' },
		{ id: 4, label: 'Node 4' },
		{ id: 5, label: 'Node 5' }
	],
	edges: [
		{ from: 1, to: 2 },
		{ from: 1, to: 3 },
		{ from: 2, to: 4 },
		{ from: 2, to: 5 }
	]
};

var options = {
	layout: {
		hierarchical: true
	},
	edges: {
		color: '#000000'
	},
	interaction: { hoverEdges: true }
};

var events = {
	select: function(event) {
		var { nodes, edges } = event;
	}
};

React.render(
	<Graph
		graph={graph}
		options={options}
		events={events}
		style={style}
		getNetwork={this.getNetwork}
		getEdges={this.getEdges}
		getNodes={this.getNodes}
		vis={vis => (this.vis = vis)}
	/>,
	document.body
);

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Props

Name	Type	Required	Description
graph	`object`	`true`	Nodes and Edges
options	`object`	`true`	Options
events	`object`	`true`	Events callback
style	`object`	`false`	Custom styles
getNetwork	`func`	`false`	Network nodes
getNodes	`func`	`false`	All nodes
vis	`object`	`false`	vis instance

Demo

License

MIT

vis-react's People

Contributors

Stargazers

Watchers

Forkers

dmitrybatalov oguzozgen veredwpsemantix inowas troygibb alrasheeda abdulrahmanalotaibi

vis-react's Issues

Changing `vis` dependency to exact commit rather than master

vis-react has a dependency to vis in package.json as seen here: https://github.com/anishmprasad/vis-react/blob/master/package.json#L13
When vis has a new commit on the master, the hash value of that dependency changes for that package and cause the failure of the dependency check. The idea is keeping the dependency package always the same for a given particular version of vis package. It would solve the problem if vis could point an exact version or commit hash as it was done for lodash and uuid as an example.

add getEdges

add getEdges props for get edges methods
if (this.props.getEdges) { this.props.getEdges(this.edges); }

or create branch for pull requests

Use visjs-network

Have you considered using https://github.com/visjs-community/visjs-network rather than the (now unmaintained) vis.js project as the source for your vis.js dependency?

Unknown circles appear upon using <Graph> from `vis-react`

After updating to "vis-react": "^0.5.1", I can see 4 tiny blue circles surrounding all 4 corners of the Graph component. like below. Its new and unwarranted. Can I get a resolve? Thanks!

Fix ES Lint Unable to resolve path to module error

For this line,import Graph from 'vis-react';
ES Lint throws an error=>"Unable to resolve path to module vis-react."
The error goes away when changing the main key in package.json from "main": "/dist/index.js" to "main": "./dist/index.js" Requesting to change this so I dont have to fix it whenever I install the package

setOptions

Is there a way of using visjs methods, like setOptions, what using vis-react?
What I would like to do, is change options after some visjs event is trigged, or change options after stabilization is finished.

Fork/Relationship with react-graph-vis

Hi,

I was wondering if this project is intended to intended to add features on top of https://github.com/crubier/react-graph-vis or to freeze a particular featureset from the past, since the two index.js and README.md files look very similar.

Updating state causes id already exists error

Am I updating the state right?

this.state = {
    exampleGraph:{
        nodes: [],
        edges: []
    }
fetchState(){
    //api call with list of values
    this.setState({exampleGraph:{nodes: api_res.nodes, edges: api_res.edges})
}

Not the exact code but I'm doing something like this.

which gives me the following error

Error: Cannot add item: item with id 1 already exists

Stacktrace shows:

this.setState(
{ 
 exampleGraph: {nodes:node_list, edges: api_res_edges},
}

Navigation buttons

Hi Anish,

Thanks for you library. We are using it in our product.

We'd like to see navigation buttons using the interaction: { navigationButtons: true } option. More info at https://almende.github.io/vis/docs/network/interaction.html#

I have tried passing this, but it doesn't seem to have an effect. Here's the code-sandbox: https://codesandbox.io/s/vis-react-s957o (change is in line 165 of visreact.js).

Thanks in advance.

Regards,

Sridhar.

Impossible to add legend

I am trying to add legend but there is no doc for doing it.

Nodes with images fail to load after unmount and remount of Graph React component

When nodes are defined as shape='image' or 'circularImage' and the image is a local PNG file, it loads fine in the initial render. But once the Graph components unmounts and gets mounted again, that node fails to reappear. The branch to the node appears and the node data seems to be identical when inspecting it in the REACT TOOLS of the browser console.
No error is thrown either... Has anyone else faced this issue and possibly found a workaround for this?

The graph's nodes array data looks as follows:
[...,
{"id":2,"label":"","shape":"circularImage","title":"Add Node","level":1,"fixed":{"x":true,"y":true},"size":50,"borderWidthSelected":16,"image":"/images/plus-circle-solid.png","shapeProperties":{"interpolation":true,"useImageSize":false,"borderDashes":false,"useBorderWithImage":true}}]

The image is attached below in case you want to replicate the issue locally.

Upgrade to support React 16

I haven't managed to find any issues so far using React 16. It's quite possible that the transition could go smoothly (I haven't tested everything nor tried). The important changes can be found here

Getting errors in <Graph> component after updating to 0.5.1

Started receiving errors like vis.min.js of vis-react core package-
Invalid type received for "bold". Expected: object, string. Received [boolean] "true" Problem value found at: options = { edges: { font: { bold } }}

vis.min.js?71f8:14 Uncaught TypeError: Cannot create property 'face' on boolean 'true'
    at a.value (vis.min.js?71f8:14)
    at a.value (vis.min.js?71f8:16)
    at new a (vis.min.js?71f8:15)
    at a.value (vis.min.js?71f8:15)
    at a.value (vis.min.js?71f8:15)
    at a.value (vis.min.js?71f8:15)
    at e.setData (vis.min.js?71f8:13)
    at new e (vis.min.js?71f8:13)
    at r.value (index.js?ca8d:1)
    at r.value (index.js?ca8d:1)```

hoverEdge function not working

the hoverEdge function doesn't work on the canvas. I am not getting any console output when I tried to log the event. Looks like the function doesn't get triggered at all. Can we fix this?

Add Item is being called twice for when reading nodes/ edges from redux and local storage

<Graph graph={{ nodes: this.props.lineageReducer.nodesDisplayed, edges: this.props.lineageReducer.edges, }} options={this.options} events={{ select: (e) => this.expandNode(e), }} />

We read our nodes and edges from redux reducer like so. I have implemented a function that reads data from local storage and sets nodes and edges correctly, I've went into redux and verified it is valid. However, when running my code, an error appears saying that we are adding nodes edges with duplicate id. I debugged through the code and came to the conclusion the in the vis index.js, addNode and addEdge functions are being called twice. I attemted to modify the library code to make a check to prevent it calling again but now icons don't render their image defined by their group correctly. Is someone able to help with this?

Thanks