[incubator-skywalking-ui] 01/01: Fix #133 progressive rendering topology map

[ha...@apache.org]

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

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

commit 6edb0b7256173066ecf266e2916e01e400f6a7c4
Author: hanahmily <ha...@gmail.com>
AuthorDate: Thu Mar 8 18:00:56 2018 +0800

    Fix #133 progressive rendering topology map
---
 src/components/Topology/AppTopology.js |  6 +++---
 src/components/Topology/Base.js        | 14 +++++++++++++-
 src/components/Topology/conf.js        |  6 ++++--
 src/utils/models.js                    |  2 +-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Topology/AppTopology.js b/src/components/Topology/AppTopology.js
index 1779a30..7ba8139 100644
--- a/src/components/Topology/AppTopology.js
+++ b/src/components/Topology/AppTopology.js
@@ -60,9 +60,10 @@ export default class AppTopology extends Base {
           'curve-style': 'bezier',
           'control-point-step-size': 100,
           'target-arrow-shape': 'triangle',
+          'arrow-scale': 1.7,
           'target-arrow-color': ele => (ele.data('isAlert') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'),
           'line-color': ele => (ele.data('isAlert') ? 'rgb(204, 0, 51)' : 'rgb(147, 198, 174)'),
-          width: 2,
+          width: 3,
           label: ele => `${ele.data('callType')} \n ${ele.data('callsPerSec')} tps / ${ele.data('avgResponseTime')} ms`,
           'text-wrap': 'wrap',
           color: 'rgb(110, 112, 116)',
@@ -84,13 +85,12 @@ export default class AppTopology extends Base {
           return `
           <div class="${styles.circle}">
             <div class="node-percentage">${data.sla}%</div>
-            <div>${data.callsPerSec} calls/s</div>
             <div>
               <img src="img/icon/data.png" class="${styles.logo}"/>${data.numOfServer}
               <img src="img/icon/alert.png" class="${styles.logo}"/>
               <span class="${styles.alert}">${data.numOfServerAlarm}</span>
             </div>
-            <div>${data.apdex} Apdex</div>
+            <div>${data.callsPerSec} calls/s</div>
           </div>`;
         },
       },
diff --git a/src/components/Topology/Base.js b/src/components/Topology/Base.js
index ae4560e..a5c96a7 100644
--- a/src/components/Topology/Base.js
+++ b/src/components/Topology/Base.js
@@ -42,13 +42,18 @@ export default class Base extends Component {
     if (nextProps.elements === this.elements) {
       return;
     }
+    const nodes = this.cy.nodes();
+    const nextElements = this.transform(nextProps.elements);
+    this.cy.json({ elements: nextElements, style: this.getStyle() });
+    if (this.isSame(nodes, this.cy.nodes())) {
+      return;
+    }
     const { layout: layoutConfig = {
       name: 'cose-bilkent',
       animate: false,
       idealEdgeLength: 200,
       edgeElasticity: 0.1,
     } } = this.props;
-    this.cy.json({ elements: this.transform(nextProps.elements), style: this.getStyle() });
     const layout = this.cy.layout(layoutConfig);
     layout.pon('layoutstop').then(() => {
       this.cy.minZoom(this.cy.zoom() - 0.3);
@@ -64,6 +69,13 @@ export default class Base extends Component {
   getCy() {
     return this.cy;
   }
+  isSame = (nodes, nextNodes) => {
+    if (nodes.length !== nextNodes.length) {
+      return false;
+    }
+    const diff = nextNodes.diff(nodes);
+    return diff.left.length < 1 && diff.right.length < 1;
+  }
   transform(elements) {
     if (!elements) {
       return [];
diff --git a/src/components/Topology/conf.js b/src/components/Topology/conf.js
index cd1c707..d50d020 100644
--- a/src/components/Topology/conf.js
+++ b/src/components/Topology/conf.js
@@ -21,10 +21,12 @@ const conf = {
   maxZoom: 1,
   boxSelectionEnabled: true,
   autounselectify: true,
+  wheelSensitivity: 0.2,
   layout: {
     name: 'cose-bilkent',
-    animate: true,
-    idealEdgeLength: 100,
+    animate: false,
+    idealEdgeLength: 200,
+    edgeElasticity: 0.1,
   },
 };
 
diff --git a/src/utils/models.js b/src/utils/models.js
index 82a67bd..66c64cd 100644
--- a/src/utils/models.js
+++ b/src/utils/models.js
@@ -76,7 +76,7 @@ export function generateModal({ namespace, dataQuery, optionsQuery, defaultOptio
         Object.keys(allOptions).forEach((_) => {
           const thisOptions = allOptions[_];
           if (!values[_]) {
-            if (defaultOption[_]) {
+            if (defaultOption && defaultOption[_]) {
               defaultValues[_] = defaultOption[_].key;
               defaultLabels[_] = defaultOption[_].label;
               amendOptions[_] = [defaultOption[_], ...thisOptions];

-- 
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.