Feature: 'Update the span display' (#210)

1. Why i update the d3 version 4.12.2 => 5.7.0.
The d3 version 4.12.2 has a d3.event bug. So it cause the event cannot be injected and then the zoom drag event cannot be used.

2. The tree display deficiencies: it cannot show the break traces, because the break trace cannot turn into a right tree struction,so i also hold back the list span display.

package.json

@@ -42,7 +42,7 @@
     "cytoscape-canvas": "^3.0.1",
     "cytoscape-cose-bilkent": "^4.0.0",
     "cytoscape-dagre": "^2.2.1",
-    "d3": "^4.12.2",
+    "d3": "^5.7.0",
     "dva": "^2.2.3",
     "dva-loading": "^2.0.3",
     "enquire-js": "^0.2.1",

src/components/TraceStack/index.js

@@ -23,9 +23,11 @@ import moment from 'moment';
 import { formatDuration } from '../../utils/time';
 import DescriptionList from "../DescriptionList";
 import styles from './index.less';
+import TraceTree from '../TraceTree';
 
-const { Description } = DescriptionList;
+const ButtonGroup = Button.Group;
 
+const { Description } = DescriptionList;
 const height = 36;
 const margin = 10;
 const offX = 15;
@@ -39,6 +41,7 @@ class TraceStack extends PureComponent {
     bap: [],
     span: {},
     key: 'tags',
+    treeMode: true,
   }
 
   componentWillMount() {
@@ -329,12 +332,14 @@ class TraceStack extends PureComponent {
   }
 
   render() {
+    const { spans } = this.props;
     const { colorMap, span = {}, position = { width: 100, top: 0 } } = this.state;
     const legendButtons = Object.keys(colorMap).map(key =>
       (<Tag color={colorMap[key]} key={key}>{key}</Tag>));
     const tabList = [];
     const contentList = {};
     if (span.content) {
+
       tabList.push({
         key: 'tags',
         tab: 'Tags',
@@ -421,11 +426,21 @@ class TraceStack extends PureComponent {
     }
     return (
       <div className={styles.stack}>
+        <div style={{ paddingBottom: 10 }}>
+          <ButtonGroup>
+            <Button type={stateData.treeMode ? "primary": ""} onClick={() => this.setState({treeMode:true})}>TreeMode</Button>
+            <Button type={stateData.treeMode ? "": "primary"} onClick={() => this.setState({treeMode: false})}>ListMode</Button>
+          </ButtonGroup>
+        </div>
+
         <div style={{ paddingBottom: 10 }}>
           { legendButtons }
         </div>
-        <div className={styles.duration} ref={(el) => { this.duration = el; }} />
-        <div ref={(el) => { this.axis = el; }} />
+        <div style={{display: stateData.treeMode?'none':'block'}} className={styles.duration} ref={(el) => { this.duration = el; }} />
+        <div style={{display: stateData.treeMode?'none':'block'}} ref={(el) => { this.axis = el; }} />
+        <div style={{display: stateData.treeMode?'block':'none'}}>
+          <TraceTree showSpanModal={this.showSpanModal} data={spans} id="" />
+        </div>
         {tabList.length > 0 ? (
           <Card
             type="inner"