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 f5a8f72  Refactor topology graph layout
f5a8f72 is described below

commit f5a8f72509513570b36d182b01f0e1f8b31f8ef0
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Mon Jan 22 11:27:09 2018 +0800

    Refactor topology graph layout
---
 src/main/frontend/src/components/Topology/Base.js       | 9 +++++----
 src/main/frontend/src/routes/Application/Application.js | 2 +-
 src/main/frontend/src/routes/Service/Service.js         | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/main/frontend/src/components/Topology/Base.js 
b/src/main/frontend/src/components/Topology/Base.js
index 9324f9a..d895616 100644
--- a/src/main/frontend/src/components/Topology/Base.js
+++ b/src/main/frontend/src/components/Topology/Base.js
@@ -24,13 +24,14 @@ export default class Base extends Component {
     if (nextProps.elements === this.elements) {
       return;
     }
-    this.cy.json({ elements: this.transform(nextProps.elements), style: 
this.getStyle() });
-    const layout = this.cy.layout({
+    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);
     });
@@ -59,7 +60,7 @@ export default class Base extends Component {
     };
   }
   render() {
-    const { height } = this.props;
+    const { height = this.state.height } = this.props;
     return (<div style={{ ...this.state, height }} ref={(el) => { 
conf.container = el; }} />);
   }
 }
diff --git a/src/main/frontend/src/routes/Application/Application.js 
b/src/main/frontend/src/routes/Application/Application.js
index 1b6f5aa..77843e9 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -71,7 +71,7 @@ export default class Application extends Component {
           bordered={false}
           bodyStyle={{ padding: 0, marginTop: 24 }}
         >
-          <AppTopology 
elements={this.props.application.getApplicationTopology} />
+          <AppTopology 
elements={this.props.application.getApplicationTopology} layout={{ name: 
'concentric', minNodeSpacing: 200 }} />
         </Card>
         <Row gutter={24}>
           <Col {...middleColResponsiveProps}>
diff --git a/src/main/frontend/src/routes/Service/Service.js 
b/src/main/frontend/src/routes/Service/Service.js
index 4cfac85..021f7e4 100644
--- a/src/main/frontend/src/routes/Service/Service.js
+++ b/src/main/frontend/src/routes/Service/Service.js
@@ -96,7 +96,7 @@ export default class Service extends Component {
               bordered={false}
               bodyStyle={{ padding: 0 }}
             >
-              <ServiceTopology 
elements={this.props.service.getServiceTopology} />
+              <ServiceTopology 
elements={this.props.service.getServiceTopology} layout={{ name: 'concentric', 
minNodeSpacing: 200 }} />
             </Card>
           </Col>
         </Row>

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

Reply via email to