react-graph-vis - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/index.js

@@ -25,5 +25,5 @@ "use strict";
 
-var _vis = require("vis");
+var _visNetwork = require("vis-network");
 
-var _vis2 = _interopRequireDefault(_vis);
+var _visNetwork2 = _interopRequireDefault(_visNetwork);
 
@@ -66,5 +66,5 @@ var _uuid = require("uuid");
     value: function componentDidMount() {
-      this.edges = new _vis2.default.DataSet();
+      this.edges = new _visNetwork2.default.DataSet();
       this.edges.add(this.props.graph.edges);
-      this.nodes = new _vis2.default.DataSet();
+      this.nodes = new _visNetwork2.default.DataSet();
       this.nodes.add(this.props.graph.nodes);
@@ -94,3 +94,4 @@ this.updateGraph();
         var edgesAdded = (0, _differenceWith2.default)(nextProps.graph.edges, this.props.graph.edges, _isEqual2.default);
-        this.patchEdges({ edgesRemoved: edgesRemoved, edgesAdded: edgesAdded });
+        var edgesChanged = (0, _differenceWith2.default)((0, _differenceWith2.default)(nextProps.graph.edges, this.props.graph.edges, _isEqual2.default), edgesAdded);
+        this.patchEdges({ edgesRemoved: edgesRemoved, edgesAdded: edgesAdded, edgesChanged: edgesChanged });
       }
@@ -165,6 +166,8 @@
       var edgesRemoved = _ref.edgesRemoved,
-          edgesAdded = _ref.edgesAdded;
+          edgesAdded = _ref.edgesAdded,
+          edgesChanged = _ref.edgesChanged;
 
       this.edges.remove(edgesRemoved);
       this.edges.add(edgesAdded);
+      this.edges.update(edgesChanged);
     }
@@ -207,3 +210,3 @@ }, {
 
-      this.Network = new _vis2.default.Network(container, Object.assign({}, this.props.graph, {
+      this.Network = new _visNetwork2.default.Network(container, Object.assign({}, this.props.graph, {
         edges: this.edges,
@@ -221,2 +224,6 @@ nodes: this.nodes
 
+      if (this.props.getEdges) {
+        this.props.getEdges(this.edges);
+      }
+
       // Add user provied events to network
@@ -273,5 +280,6 @@ var events = this.props.events || {};
   getNetwork: _propTypes2.default.func,
-  getNodes: _propTypes2.default.func
+  getNodes: _propTypes2.default.func,
+  getEdges: _propTypes2.default.func
 };
 
 exports.default = Graph;

package.json

 {
   "name": "react-graph-vis",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A react component to render nice graphs using vis.js",
@@ -8,3 +8,3 @@ "main": "lib/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "./node_modules/.bin/babel -d lib/ src/",
+    "build": "babel -d lib/ src/",
     "watch": "babel --watch -d lib/ src/",
@@ -30,6 +30,6 @@ "prepublish": "npm run build"
   "dependencies": {
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.15",
     "prop-types": "^15.5.10",
     "uuid": "^2.0.1",
-    "vis": "^4.18.1"
+    "vis-network": "^5.1.1"
   },
@@ -36,0 +36,0 @@ "devDependencies": {

README.md

@@ -24,38 +24,69 @@ # React graph vis
 ```javascript
-var Graph = require('react-graph-vis');
+import React from "react";
+import ReactDOM from "react-dom";
+import Graph from "react-graph-vis";
 
-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'}
+import "./styles.css";
+// need to import the vis network css in order to show tooltip
+import "./network.css";
+
+function App() {
+  const graph = {
+    nodes: [
+      { id: 1, label: "Node 1", title: "node 1 tootip text" },
+      { id: 2, label: "Node 2", title: "node 2 tootip text" },
+      { id: 3, label: "Node 3", title: "node 3 tootip text" },
+      { id: 4, label: "Node 4", title: "node 4 tootip text" },
+      { id: 5, label: "Node 5", title: "node 5 tootip text" }
     ],
-  edges: [
-      {from: 1, to: 2},
-      {from: 1, to: 3},
-      {from: 2, to: 4},
-      {from: 2, to: 5}
+    edges: [
+      { from: 1, to: 2 },
+      { from: 1, to: 3 },
+      { from: 2, to: 4 },
+      { from: 2, to: 5 }
     ]
-};
+  };
 
-var options = {
+  const options = {
     layout: {
-        hierarchical: true
+      hierarchical: true
     },
     edges: {
-        color: "#000000"
-    }
-};
+      color: "#000000"
+    },
+    height: "500px"
+  };
 
-var events = {
+  const events = {
     select: function(event) {
-        var { nodes, edges } = event;
+      var { nodes, edges } = event;
     }
+  };
+  return (
+    <Graph
+      graph={graph}
+      options={options}
+      events={events}
+      getNetwork={network => {
+        //  if you want access to vis.js network api you can set the state in a parent component using this property
+      }}
+    />
+  );
 }
 
-React.render(<Graph graph={graph} options={options} events={events} />, document.body);
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+
 ```
 
+
+
+
+
+
+
+
+
+
+
 You can also check out the demo in the [`example`](https://github.com/crubier/react-graph-vis/tree/master/example) folder.

No alert changes

Improved metrics

Total package byte prevSize

790579

increased by0.27%

Number of package files

7

increased by16.67%

Lines of code

231

increased by3.13%

Number of lines in readme file

92

increased by50.82%

Dependency changes

• + Addedvis-network@^5.1.1

• + Added@egjs/hammerjs@2.0.17(transitive)

• + Added@types/hammerjs@2.0.46(transitive)

• + Addedcomponent-emitter@1.3.1(transitive)

• + Addedmoment@2.24.0(transitive)

• + Addedtimsort@0.3.0(transitive)

• + Addeduuid@8.3.2(transitive)

• + Addedvis-data@6.6.1(transitive)

• + Addedvis-network@5.4.1(transitive)

• + Addedvis-util@1.1.104.3.4(transitive)

• + Addedvis-uuid@1.1.3(transitive)

• - Removedvis@^4.18.1

• - Removedemitter-component@1.1.2(transitive)

• - Removedhammerjs@2.0.8(transitive)

• - Removedpropagating-hammerjs@1.5.0(transitive)

• - Removedvis@4.21.0(transitive)

• Updatedlodash@^4.17.15