[incubator-skywalking-ui] branch feature/5.0.0 updated: Add cytoscape.js

[ha...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git


The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
     new 28bde99  Add cytoscape.js
28bde99 is described below

commit 28bde99c81c32a350d66b1f5e49b7760bf317cdc
Author: hanahmily <ha...@gmail.com>
AuthorDate: Wed Jan 10 17:32:13 2018 +0800

    Add cytoscape.js
---
 src/main/frontend/package.json                     |  3 ++
 .../frontend/src/components/Topology/Topology.js   | 37 ++++++++++++++++++++++
 src/main/frontend/src/components/Topology/conf.js  |  6 ++++
 3 files changed, 46 insertions(+)

diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
index 2deb001..d9c80ef 100755
--- a/src/main/frontend/package.json
+++ b/src/main/frontend/package.json
@@ -23,6 +23,9 @@
     "babel-runtime": "^6.9.2",
     "classnames": "^2.2.5",
     "core-js": "^2.5.1",
+    "cytoscape": "^3.2.7",
+    "cytoscape-cose-bilkent": "^4.0.0",
+    "cytoscape-node-html-label": "^1.0.3",
     "dva": "^2.0.3",
     "lodash": "^4.17.4",
     "lodash-decorators": "^4.4.1",
diff --git a/src/main/frontend/src/components/Topology/Topology.js b/src/main/frontend/src/components/Topology/Topology.js
new file mode 100644
index 0000000..475603e
--- /dev/null
+++ b/src/main/frontend/src/components/Topology/Topology.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
+import nodeHtmlLabel from 'cytoscape-node-html-label';
+import conf from './conf';
+
+cytoscape.use(coseBilkent);
+cytoscape.use(nodeHtmlLabel);
+
+const cyStyle = {
+  height: '400px',
+  display: 'block',
+};
+
+class Topology extends Component {
+  componentDidMount() {
+    this.cy = cytoscape(conf);
+    this.cy.json({ elements: this.props.elements });
+  }
+  componentWillReceiveProps(nextProps) {
+    this.cy.json(nextProps);
+  }
+  shouldComponentUpdate() {
+    return false;
+  }
+  componentWillUnmount() {
+    this.cy.destroy();
+  }
+  getCy() {
+    return this.cy;
+  }
+  render() {
+    return <div style={cyStyle} ref={(rel) => { conf.container = rel; }} />;
+  }
+}
+
+export default Topology;
diff --git a/src/main/frontend/src/components/Topology/conf.js b/src/main/frontend/src/components/Topology/conf.js
new file mode 100644
index 0000000..70893f1
--- /dev/null
+++ b/src/main/frontend/src/components/Topology/conf.js
@@ -0,0 +1,6 @@
+const conf = {
+  boxSelectionEnabled: true,
+  autounselectify: true,
+};
+
+export default conf;

-- 
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].