diff --git a/package.json b/package.json
index 53e7cd41920bfe8c4431fdadc5cfe396e9482bcf..56333351ba787fe59d47f979eb0f9acb761a0e77 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/g6": "^3.4.8",
     "@fortawesome/fontawesome-free": "^5.8.0",
     "ace-builds": "^1.4.11",
     "babel-polyfill": "^6.26.0",
diff --git a/src/assets/imgs/test_icon_error.png b/src/assets/imgs/test_icon_error.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f90fc0eaa9b557c45171a61d3c009b92eb8966a
Binary files /dev/null and b/src/assets/imgs/test_icon_error.png differ
diff --git a/src/assets/imgs/test_icon_success.png b/src/assets/imgs/test_icon_success.png
new file mode 100644
index 0000000000000000000000000000000000000000..19f28dc9baf3b113ff4eff3ab9a24175f663fc8f
Binary files /dev/null and b/src/assets/imgs/test_icon_success.png differ
diff --git a/src/components/codes.vue b/src/components/codes.vue
index a293cd0b7a7e4fb4d6820f7afeffff105291e0c5..c62926efaae33cbc8370fef695f2679cbfe252a3 100644
--- a/src/components/codes.vue
+++ b/src/components/codes.vue
@@ -9,12 +9,9 @@
 <script>
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
-import "ace-builds/src-noconflict/mode-yaml"; // 默认设置的语言模式
 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
-import yaml from "json2yaml"; //json转yaml
-import json from "js-yaml"; //yaml转json
 export default {
-  props: ["items", "acemodePath"],
+  props: ["url"],
   data() {
     return {
       aceEditor: null,
@@ -33,27 +30,22 @@ export default {
       tabSize: 4,
       highlightActiveLine: false
     });
-
-    if (this.acemodePath == "ace/mode/yaml") {
-      var obj = yaml.stringify(this.items);
-      this.aceEditor.getSession().setValue(obj);
-    } else if (this.acemodePath == "ace/mode/json") {
-      this.aceEditor
-        .getSession()
-        .setValue(JSON.stringify(this.items, null, "\t"));
-    }
+    this.getValue();
   },
   watch: {},
   methods: {
-    // updatechild: function() {
-    //   json.load(this.aceEditor.getSession().getValue());
-    //   console.log(json.load(this.aceEditor.getSession().getValue()));
-    // },
-    parentHandleclick: function() {
-      this.$emit(
-        "jsonyamlvalue",
-        json.load(this.aceEditor.getSession().getValue())
-      );
+    getValue() {
+      this.$http
+        .get(this.url)
+        .then(response => {
+          this.aceEditor.setValue(JSON.stringify(response.data, null, "\t"));
+        })
+        .catch(function(response) {
+          console.log(response);
+        });
+    },
+    parentHandleclick() {
+      this.$emit("getEditValue", this.aceEditor.getValue());
     }
   }
 };
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 80dd4b83b7a605e31eb92945516f57f401111b74..172c7132b7965af0b748f0157a1a6d6b7dce636c 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -3,6 +3,20 @@
     <!-- 数据表格 -->
     <section class="ces-table">
       <div class="ces_toolbar">
+        <el-button
+          v-if="filterList && filterList.length"
+          size="small"
+          style="float: left;"
+          @click="filterAction"
+        >
+          {{ showFliterList ? "收起" : "筛选" }}
+          <i
+            class="el-icon--right"
+            :class="
+              showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+            "
+          ></i>
+        </el-button>
         <el-button
           v-if="addRowBtn"
           icon="el-icon-plus"
@@ -10,7 +24,8 @@
           type="primary"
           @click="addRow()"
           class="ces_toolbar_btn"
-        >新增</el-button>
+          >新增</el-button
+        >
         <el-input
           prefix-icon="el-icon-search"
           v-if="searchShow"
@@ -22,6 +37,27 @@
           class="ces_toolbar_inp"
         ></el-input>
       </div>
+      <ul
+        class="ces_filter_container"
+        ref="filterContainer"
+        v-if="filterList && filterList.length"
+        v-show="showFliterList"
+      >
+        <li v-for="(item, index) in filterList" :key="'f_l_' + index">
+          <div class="ces_filter_name">
+            <span v-text="item.name + '：'"></span>
+          </div>
+          <ul class="ces_filter_data">
+            <li v-for="(v, i) in item.data" :key="'f_l_d_' + index + '_' + i">
+              <a
+                :class="{ current: isCurrentFilter(item.prop, v) }"
+                @click.prevent="selectFilter(item.prop, v)"
+                v-text="v"
+              ></a>
+            </li>
+          </ul>
+        </li>
+      </ul>
       <el-table
         :data="selectedTabsPage"
         :size="size"
@@ -33,50 +69,69 @@
         :empty-text="emptyText"
         :stripe="stripe"
         row-key="id"
+        :show-header="showHeader"
         default-expand-all
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         ref="cesTable"
-        :class="radius?'table_radius':''"
+        :class="radius ? 'table_radius' : ''"
         :header-cell-class-name="headerCellClassName"
         v-cloak
       >
-        <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
+        <el-table-column
+          v-if="isSelection"
+          type="selection"
+          align="center"
+        ></el-table-column>
         <!-- 序号 -->
-        <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="80" align="center"></el-table-column>
+        <el-table-column
+          v-if="isIndex"
+          type="index"
+          :label="indexLabel"
+          width="80"
+          align="center"
+        ></el-table-column>
 
         <!-- 数据栏 -->
         <el-table-column
-          v-for="(item,index) in headers"
+          v-for="(item, index) in headers"
           :key="index"
           :prop="item.prop"
           :label="item.label"
           :width="item.width"
           :align="item.align"
-          :render-header="item.require?renderHeader:null"
+          :render-header="item.require ? renderHeader : null"
         >
           <template slot-scope="scope">
             <!-- 操作按钮 -->
-            <span v-if="item.type==='Button'">
-              <b v-for="(btn,key) in item.btnList" :key="key">
+            <span v-if="item.type === 'Button'">
+              <b v-for="(btn, key) in item.btnList" :key="key">
                 <em
                   v-if="btn.label == '删除' || btn.label == '移除'"
                   :class="btn.type"
-                  @click="handleRemove(scope.row,btn.label)"
-                >{{btn.label}}</em>
-                <em v-else :class="btn.type" @click="handleClick(btn.type, scope.row)">{{btn.label}}</em>
-                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{btn.line}}</em>
+                  @click="handleRemove(scope.row, btn.label)"
+                  >{{ btn.label }}</em
+                >
+                <em
+                  v-else
+                  :class="btn.type"
+                  @click="handleClick(btn.type, scope.row)"
+                  >{{ btn.label }}</em
+                >
+                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{
+                  btn.line
+                }}</em>
               </b>
             </span>
             <!--href 链接-->
             <v-apaas-table-umhref
-              v-else-if="item.type =='href'"
+              v-else-if="item.type == 'href'"
               :header="item"
               :row="scope.row"
               :detailsUrl="detailsUrl"
             ></v-apaas-table-umhref>
             <!-- could edit -->
             <v-apaas-table-input
-              v-else-if="item.type==='input'"
+              v-else-if="item.type === 'input'"
               :item="helper.GetProperty(scope.row, item.prop)"
               :header="item.prop"
               :rowId="scope.$index"
@@ -85,7 +140,7 @@
             ></v-apaas-table-input>
             <!-- could select -->
             <v-apaas-table-select
-              v-else-if="item.type==='select'"
+              v-else-if="item.type === 'select'"
               :item="helper.GetProperty(scope.row, item.prop)"
               :header="item.prop"
               :rowId="scope.$index"
@@ -94,15 +149,15 @@
             ></v-apaas-table-select>
             <!-- popover -->
             <el-popover
-              v-else-if="item.type==='popover'"
+              v-else-if="item.type === 'popover'"
               placement="top-start"
               trigger="hover"
               :content="scope.row[item.prop]"
             >
-              <span slot="reference" class="overlit">{{scope.row[item.prop]}}</span>
+              <div slot="reference" class="overlit">{{scope.row[item.prop]}}</div>
             </el-popover>
             <!-- others -->
-            <span v-else>{{scope.row[item.prop]}}</span>
+            <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -134,15 +189,20 @@
           circle
           size="mini"
           @click="handleCurrentChange(-1)"
-          :disabled="pagination.page==1"
+          :disabled="pagination.page == 1"
         ></el-button>
-        第{{ pagination.page }}页 / 共{{ Math.ceil(pagination.total / pagination.rowsPerPage) }}页
+        第{{ pagination.page }}页 / 共{{
+          Math.ceil(pagination.total / pagination.rowsPerPage)
+        }}页
         <el-button
           icon="el-icon-arrow-right"
           circle
           size="mini"
           @click="handleCurrentChange(1)"
-          :disabled="pagination.page==Math.ceil(pagination.total / pagination.rowsPerPage)"
+          :disabled="
+            pagination.page ==
+              Math.ceil(pagination.total / pagination.rowsPerPage)
+          "
         ></el-button>
       </div>
     </section>
@@ -169,7 +229,7 @@ export default {
     "v-apaas-table-input": tableInput,
     "v-apaas-table-select": tableSelect,
     "v-apaas-table-umhref": tableUmhref,
-    "d-confirm": DConfirm
+    "d-confirm": DConfirm,
   },
   props: {
     // 表格型号：mini,medium,small
@@ -194,31 +254,31 @@ export default {
     // },
     searchShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     url: {
       type: String,
-      default: ""
+      default: "",
     },
     detailsUrl: {
       type: String,
-      default: ""
+      default: "",
     },
     rowprop: {
       type: String,
-      default: ""
+      default: "",
     },
     ready: {
       type: Boolean,
-      default: false
+      default: false,
     },
     addRowBtn: {
       type: Boolean,
-      default: false
+      default: false,
     },
     couldNotEdit: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否显示删除弹窗
     isDialog: { type: Boolean, default: false },
@@ -229,47 +289,55 @@ export default {
           title: "提示", //提示
           message: "", //""
           btnCancelText: "取消", //取消
-          btnSubmitText: "确定"
+          btnSubmitText: "确定",
         };
-      }
+      },
     },
     refreshInit: { type: Boolean },
     sortBy: {
       type: String,
-      default: ""
+      default: "",
     },
     searchNoName: { type: Boolean, default: false },
     emptyText: {
       type: String,
-      default: "暂无数据"
+      default: "暂无数据",
     },
     autoAdd: {
       type: Boolean,
-      default: false
+      default: false,
     },
     border: {
       type: Boolean,
-      default: false
+      default: false,
     },
     stripe: {
       type: Boolean,
-      default: false
+      default: false,
     },
     radius: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pageSizeShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     paginationShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     headerCellClassName: {
       type: String,
-      default: ""
+      default: "",
+    },
+    filterList: {
+      type: Array,
+      default: null,
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -278,7 +346,7 @@ export default {
       pagination: {
         rowsPerPage: 10,
         page: 1,
-        total: 0
+        total: 0,
       },
       delSelect: null,
       helper: helper,
@@ -287,23 +355,26 @@ export default {
       pageOptions: [
         {
           value: "10",
-          label: "10"
+          label: "10",
         },
         {
           value: "20",
-          label: "20"
+          label: "20",
         },
         {
           value: "50",
-          label: "50"
-        }
+          label: "50",
+        },
       ],
       search: "",
-      times: null
+      times: null,
+      showFliterList: false,
+      filterData: null,
     };
   },
   mounted() {
     this.getDataFromApiSync();
+    this.initFilterData();
   },
   watch: {
     refreshInit: {
@@ -311,14 +382,20 @@ export default {
         if (val) {
           this.getDataFromApiSync();
         }
-      }
+      },
     },
     url: {
       handler(val) {
         this.getDataFromApiSync();
       },
-      deep: true
-    }
+      deep: true,
+    },
+    filterList: {
+      handler(val) {
+        this.initFilterData();
+      },
+      deep: true,
+    },
   },
   methods: {
     // get data
@@ -334,14 +411,14 @@ export default {
         }
       } else {
         this.getDataFromApi().then(
-          data => {
+          (data) => {
             this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
             this.pagination.total = data.total;
             if (this.autoAdd) {
               this.addRow();
             }
           },
-          err => {
+          (err) => {
             console.log("失败" + err);
           }
         );
@@ -354,7 +431,7 @@ export default {
         this.all_url = `/static/data.json`;
         this.$http
           .get(this.all_url)
-          .then(response => {
+          .then((response) => {
             let newArr = response.data.data[this.url];
             // if it is true url, total is response's total
             let total = newArr.length;
@@ -403,7 +480,7 @@ export default {
       this.$message({
         showClose: true,
         message: this.label + "成功",
-        type: "success"
+        type: "success",
       });
     },
     switchChange(val) {
@@ -438,12 +515,51 @@ export default {
       }
       this.selectedTabsPage.push(newRow);
     },
+    // get now table data
     getTableData() {
       return this.selectedTabsPage;
-    }
-  }
+    },
+    isCurrentFilter(prop, filter) {
+      return (
+        this.filterData &&
+        this.filterData[prop] &&
+        this.filterData[prop].indexOf(filter) > -1
+      );
+    },
+    filterAction() {
+      this.showFliterList = !this.showFliterList;
+
+      if (this.showFliterList) {
+        this.$nextTick(() => {
+          let width =
+            this.$refs.filterContainer.getBoundingClientRect().width -
+            20 * 2 - // 两侧padding
+            100 - // 左侧标题
+            20; // 距左侧标题的边距
+          console.log("每行最多可容纳" + Math.floor(width / 110) + "个filter");
+        });
+      }
+    },
+    initFilterData() {
+      if (this.filterList && this.filterList.length) {
+        this.filterData = {};
+        this.filterList.forEach((item) => {
+          this.$set(this.filterData, item.prop, []);
+        });
+      }
+    },
+    selectFilter(prop, filter) {
+      if (this.isCurrentFilter(prop, filter)) {
+        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
+      } else {
+        this.filterData[prop].push(filter);
+      }
+      console.log(this.filterData);
+    },
+  },
 };
 </script>
+
 <style>
 .ces-table .el-table::before {
   height: 0 !important;
@@ -575,7 +691,9 @@ em {
 .ces_toolbar {
   position: absolute;
   top: -40px;
-  right: 20px;
+  right: 0;
+  left: 0;
+  text-align: right;
 }
 .ces_toolbar .ces_toolbar_btn {
   margin-right: 10px;
@@ -592,8 +710,8 @@ em {
   justify-content: space-between;
   align-items: center;
 }
-.ces_page_total {
-}
+/* .ces_page_total {
+} */
 .ces_page_num {
   width: 120px;
   display: flex;
@@ -611,4 +729,60 @@ em {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-</style>
\ No newline at end of file
+.ces_filter_container {
+  background-color: #f7f8f9;
+  padding: 14px 19px;
+  border: 1px solid #e3e5ef;
+  border-radius: 6px;
+  margin: 0 0 10px;
+}
+.ces_filter_container > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 12px;
+}
+.ces_filter_name {
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 14px;
+  line-height: 30px;
+  font-weight: bold;
+  color: #1a2236;
+}
+.ces_filter_data {
+  width: calc(100% - 120px);
+  margin-left: 20px;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-bottom: 11px;
+}
+.ces_filter_container > li:not(:last-child) > .ces_filter_data {
+  border-bottom: 1px solid #e9ecf3;
+}
+.ces_filter_data > li {
+  flex-shrink: 0;
+  padding-right: 20px;
+}
+.ces_filter_data > li > a {
+  display: block;
+  height: 30px;
+  width: 90px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 30px;
+  color: #58617a;
+}
+.ces_filter_data > li > a.current {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+</style>
diff --git a/src/components/topology.vue b/src/components/topology.vue
new file mode 100644
index 0000000000000000000000000000000000000000..edc6a790ce1721731c4f1f985bda3014058bcb5c
--- /dev/null
+++ b/src/components/topology.vue
@@ -0,0 +1,421 @@
+<template>
+  <div class="topo_inner">
+    <div id="container" ref="conCav" class="canvas"></div>
+    <div class="legend">
+      <div class="legend_title">拓扑图图例</div>
+      <div class="legend_inner">
+        <div class="legend_in_tit">服务类型</div>
+        <div id="nodes" ref="lengedNodes" class="legend_nodes"></div>
+        <div class="legend_in_tit">调用状态</div>
+        <div id="edges" ref="lengedEdges" class="legend_edges"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import G6 from "@antv/g6";
+export default {
+  props: {
+    datas: Object,
+    namespace: String
+  },
+  mounted() {},
+  watch: {
+    datas(val) {
+      console.log(val);
+      this.getCavData();
+    }
+  },
+  methods: {
+    //   shu ju chu li
+    getCavData() {
+      let self = this;
+      self.datas.nodes.map(node => {
+        node.id = node.data.id;
+        switch (node.data.nodeType) {
+          case "workload":
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+          case "app":
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+          case "unknow source":
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+          case "service":
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+          case "service entry":
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+          default:
+            node.type = "image";
+            node.img = "/static/topology_ic_shujufw.svg";
+            node.size = [15, 15];
+            break;
+        }
+        if (node.data.namespace != self.namespace) {
+          node.label =
+            node.data[node.data.nodeType] + "\n(" + node.data.namespace + ")";
+        } else {
+          node.label = node.data[node.data.nodeType];
+        }
+        node.labelCfg = {
+          style: {
+            fill: "#333",
+            fontSize: 12,
+            stroke: "#fffef9",
+            lineWidth: 4,
+            cursor: "pointer"
+          },
+          position: "bottom"
+        };
+      });
+      self.datas.edges.map(edge => {
+        edge.id = edge.data.id;
+        edge.source = edge.data.source;
+        edge.target = edge.data.target;
+        edge.style = {
+          stroke: "#494e8f",
+          lineWidth: 1,
+          lineAppendWidth: 5,
+          endArrow: {
+            path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
+            d: -2 // 偏移量
+          },
+          strokeOpacity: 1,
+          cursor: "pointer"
+        };
+        if (edge.data.xxx == "success") {
+          // sueecss
+          edge.style.stroke = "#25bdb1";
+        } else {
+            // warning
+          edge.style.stroke = "#e15260";
+        }
+      });
+      self.getCav();
+      self.getLegendNodes();
+      self.getLegendEdges();
+    },
+    getCav() {
+      const width = this.$refs.conCav.scrollWidth;
+      const height = this.$refs.conCav.scrollHeight || 500;
+      let self = this;
+      // console.log(self.datas);
+      const graph = new G6.Graph({
+        container: "container",
+        width,
+        height,
+        fitView: true,
+        layout: {
+          // 流程图布局
+          type: "dagre",
+          rankdir: "LR",
+          nodesep: 12
+        },
+        modes: {
+          default: ["zoom-canvas", "drag-canvas", "drag-node"]
+        },
+        defaultNode: {
+          color: "#5B8FF9",
+          style: {
+            lineWidth: 2,
+            fill: "#C6E5FF",
+            cursor: "pointer"
+          },
+          labelCfg: {
+            style: {
+              fill: "#f36c21",
+              fontSize: 10
+            },
+            position: "bottom"
+          }
+        },
+        defaultEdge: {
+          style: {
+            stroke: "#e2e2e2",
+            lineWidth: 1,
+            lineAppendWidth: 6,
+            opacity: 1
+          },
+          labelCfg: {
+            style: {
+              fontSize: 10,
+              stroke: "#fffef9",
+              fill: "#595959",
+              lineWidth: 4
+            }
+          }
+        },
+        nodeStateStyles: {
+          highlight: {
+            opacity: 1
+          },
+          dark: {
+            opacity: 0.2
+          }
+        },
+        edgeStateStyles: {
+          highlight: {
+            opacity: 1
+          },
+          dark: {
+            opacity: 0.2
+          },
+          click: {
+            lineWidth: 3
+          }
+        },
+        plugins: []
+      });
+      // 节点点击
+      graph.on("node:click", function(e) {});
+      // 路径点击
+      graph.on("edge:click", function(e) {});
+      graph.on("node:dblclick", function(e) {});
+      // 点击画布
+      graph.on("canvas:click", function(e) {});
+      graph.data(self.datas);
+      graph.render();
+    },
+    getLegendNodes() {
+      // legend. maybe you want use parames to reset it, but i did not do the extension
+      const width = this.$refs.lengedNodes.scrollWidth;
+      const height = this.$refs.lengedNodes.scrollHeight;
+      const legendGraph = new G6.Graph({
+        container: "nodes",
+        width: width,
+        height: height,
+        defaultNode: {
+          style: {
+            fill: "transparent", // 节点填充色
+            stroke: "transparent", // 节点描边色
+            lineWidth: 1 // 节点描边粗细
+          },
+          labelCfg: {
+            position: "right",
+            offset: 10,
+            style: {
+              fill: "#333"
+            }
+          }
+        }
+      });
+      const legendX = 20;
+      const legendBeginY = 20;
+      const legendYPadding = 25;
+      const legendData = {
+        nodes: [
+          //   specific legend
+          {
+            id: "level1",
+            x: legendX,
+            y: legendBeginY,
+            type: "image",
+            img: "/static/topology_ic_shujufw.svg",
+            size: [15, 15],
+            label: "数据服务"
+          },
+          {
+            id: "level2",
+            x: legendX,
+            y: legendBeginY + legendYPadding * 1,
+            type: "image",
+            img: "/static/topology_ic_shikongfw.svg",
+            size: [15, 15],
+            label: "时空服务"
+          },
+          {
+            id: "level2",
+            x: legendX,
+            y: legendBeginY + legendYPadding * 2,
+            type: "image",
+            img: "/static/topology_ic_shipinfw.svg",
+            size: [15, 15],
+            label: "视频服务"
+          },
+          {
+            id: "level2",
+            x: legendX,
+            y: legendBeginY + legendYPadding * 3,
+            type: "image",
+            img: "/static/topology_ic_ganzhifw.svg",
+            size: [15, 15],
+            label: "感知服务"
+          },
+          {
+            id: "level2",
+            x: legendX,
+            y: legendBeginY + legendYPadding * 4,
+            type: "image",
+            img: "/static/topology_ic_zonghefw.svg",
+            size: [15, 15],
+            label: "综合服务"
+          }
+        ]
+      };
+      legendGraph.data(legendData);
+      legendGraph.render();
+    },
+    getLegendEdges() {
+      // legend. maybe you want use parames to reset it, but i did not do the extension
+      const width = this.$refs.lengedEdges.scrollWidth;
+      const height = this.$refs.lengedEdges.scrollHeight;
+      const legendGraph = new G6.Graph({
+        container: "edges",
+        width: width,
+        height: height,
+        defaultNode: {
+          style: {
+            fill: "transparent", // 节点填充色
+            stroke: "transparent", // 节点描边色
+            lineWidth: 1 // 节点描边粗细
+          },
+          labelCfg: {
+            position: "right",
+            offset: 10,
+            style: {
+              fill: "#333"
+            }
+          }
+        }
+      });
+      const legendX = 10;
+      const legendBeginY = 20;
+      const legendYPadding = 25;
+      const legendData = {
+        nodes: [
+          //   line1 point 0
+          {
+            id: "line00",
+            x: legendX,
+            y: legendBeginY,
+            type: "circle",
+            size: 1
+          },
+          //   line1 point 1
+          {
+            id: "line01",
+            x: legendX + 30,
+            y: legendBeginY,
+            label: "正常",
+            type: "circle",
+            size: 1
+          },
+          //   line2 point 0
+          {
+            id: "line10",
+            x: legendX,
+            y: legendBeginY + legendYPadding,
+            type: "circle",
+            size: 1
+          },
+          //   line2 point 1
+          {
+            id: "line11",
+            x: legendX + 30,
+            y: legendBeginY + legendYPadding,
+            label: "错误",
+            type: "circle",
+            size: 1
+          }
+        ],
+        edges: [
+          {
+            id: "line0",
+            source: "line00",
+            target: "line01",
+            style: {
+              stroke: "#25bdb1",
+              lineWidth: 2,
+              lineAppendWidth: 5,
+              endArrow: {
+                path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
+                d: -2 // 偏移量
+              },
+              cursor: "pointer"
+            }
+          },
+          {
+            id: "line1",
+            source: "line10",
+            target: "line11",
+            style: {
+              stroke: "#e15260",
+              lineWidth: 2,
+              lineAppendWidth: 5,
+              endArrow: {
+                path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
+                d: -2 // 偏移量
+              },
+              cursor: "pointer"
+            }
+          }
+        ]
+      };
+      legendGraph.data(legendData);
+      legendGraph.render();
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.canvas {
+  height: 600px;
+  width: 1000px;
+  margin: 0 auto;
+  position: relative;
+}
+.topo_inner {
+  position: relative;
+}
+.legend {
+  position: absolute;
+  width: 140px;
+  height: 90%;
+  top: 20px;
+  right: 20px;
+}
+.legend_title {
+  color: #3f4f9c;
+  font-size: 14px;
+  font-weight: 700;
+  margin: 10px;
+}
+.legend_inner {
+  border: 2px #e5f0ff solid;
+  border-radius: 8px;
+  padding: 10px;
+  background-color: #fff;
+}
+.legend_in_tit {
+    color: #8890a7;
+    font-size: 14px;
+    line-height: 26px;
+    padding: 0 10px;
+    border-bottom: 2px #e5f0ff solid;;
+}
+.legend_nodes {
+  width: 100%;
+  height: 150px;
+}
+.legend_edges {
+  width: 100%;
+  height: 60px;
+}
+</style>
+
diff --git a/src/components/upload_file.vue b/src/components/upload_file.vue
index 6d4723df53231a8cac371a6e74d9b2f3a945df26..c2728d69f3c0e80733beed95d0ebb4207498ba6a 100644
--- a/src/components/upload_file.vue
+++ b/src/components/upload_file.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!needCropper">
+    <div v-if="type != 'copper'">
       <el-upload
         action="ssurl"
         :file-list="fileArray"
@@ -53,10 +53,6 @@ export default {
       type: Number,
       default: 1
     },
-    needCropper: {
-      type: Boolean,
-      default: false
-    },
     list: {
       type: Array,
       default: []
diff --git a/src/pages/example_code.vue b/src/pages/example_code.vue
index 741f995fd883fe89bf1d139c4b13adfc69dafad5..fc0f72a7fa62e361b9f465dfdd99e69e01efddc6 100644
--- a/src/pages/example_code.vue
+++ b/src/pages/example_code.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="code-main">
-    <v-apaas-code></v-apaas-code>
+    <v-apaas-code url="/static/data.json"></v-apaas-code>
   </div>
 </template>
 
@@ -36,4 +36,7 @@ export default {
 </script>
 
 <style scoped>
+.code-main {
+  margin-top: 100px;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index b3caa446f3e3e6cbb53f45535971d93028eb7199..44373c9859d58b02ee69f2b348ea991de068ee48 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -20,6 +20,7 @@
       :emptyText="emptyText"
       :stripe="true"
       :pageSizeShow="true"
+      :filterList="filterList"
     ></ces-table>
     <h3>可编辑表格，供服务测试用</h3>
     <ces-table
@@ -114,7 +115,29 @@ export default {
     },
     emptyText: "暂时没数据",
     emptyText1: "可输入表格暂时没数据",
-    emptyText2: "树结构暂时没数据"
+    emptyText2: "树结构暂时没数据",
+    filterList: [
+      {
+        name: "服务类型",
+        prop: "fwlx",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "服务领域",
+        prop: "fwly",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "开放程度",
+        prop: "kfcd",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "服务状态",
+        prop: "fwzt",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+    ]
   }),
   components: {
     cesTable
diff --git a/src/pages/example_topology.vue b/src/pages/example_topology.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb5c165710c5d2aea371986b47067b16e3f6d09c
--- /dev/null
+++ b/src/pages/example_topology.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="topo_ex">
+    <Topology :datas="datas" />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Topology from "@/components/topology.vue";
+
+export default {
+  components: {
+    Topology
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let url = "./static/antv.json";
+      this.$http
+        .get(url)
+        .then(response => {
+          this.datas = response.data.elements;
+        })
+        .catch(function(response) {
+          this.error = true;
+        });
+    },
+  }
+};
+</script>
+<style scoped>
+.topo_ex {
+    margin-top: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/example_upload.vue b/src/pages/example_upload.vue
index 67f767a8f02b2bfd51975ef37eb0695cfd35bc79..a4c7337cd44b61215cfc855f53ca701149d66806 100644
--- a/src/pages/example_upload.vue
+++ b/src/pages/example_upload.vue
@@ -4,7 +4,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="true"
       type="cropper"
       :readOnly="false"
       :list="imgList"
@@ -14,7 +13,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="false"
       type="picture"
       :readOnly="false"
       fit="fill"
@@ -25,7 +23,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="false"
       type="mp3"
       :readOnly="false"
       fit="fill"
diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue
index 43957e7898a33d1f32eb0fc28218cc235039ecdb..9c71ac56383b1bfe28faa0716dab0de5bbc33c6b 100644
--- a/src/pages/fwzc_fwcs.vue
+++ b/src/pages/fwzc_fwcs.vue
@@ -2,7 +2,9 @@
   <div class="fwcs">
     <el-breadcrumb separator="/" class="bread_crumb">
       <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
-      <el-breadcrumb-item>服务测试</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item>
+      <el-breadcrumb-item v-else :to="{ path: '/fwzc' }">服务测试</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="jcxxtx">基础信息填写</el-breadcrumb-item>
     </el-breadcrumb>
     <block-radius>
       <el-row>
@@ -14,6 +16,17 @@
         >{{ item.text }}</el-button>
       </el-row>
       <div class="gray_line"></div>
+      <div v-if="activeBtn == 4">
+        <div class="sqxx_title">服务类型：</div>
+        <el-select v-model="zhyyVal" placeholder="请选择" class="zhyy_select">
+          <el-option
+            v-for="item in optionsZhyy"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
       <div class="fwcs_fwdz">服务地址：</div>
       <div class="fwcs_fwdz_inner">
         <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
@@ -26,7 +39,7 @@
             ></el-option>
           </el-select>
         </el-input>
-        <el-button v-if="activeBtn == 0" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
+        <el-button v-if="activeBtn == 0 || activeBtn == 4" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
       </div>
       <div v-if="activeBtn == 0">
         <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
@@ -94,58 +107,63 @@
         </div>
       </div>
     </block-radius>
-    <block-radius v-if="activeBtn == 0 && resultShow">
-      <div class="sjfw_qqcstx">请求参数信息填写：</div>
-      <ces-table
-        ref="fwcs_sjfw_qqcs"
-        size="mini"
-        :border="true"
-        :headers="sjfw_qqcstx"
-        url="qqcstx"
-        :searchShow="false"
-        :addRowBtn="false"
-        :autoAdd="false"
-        :isDialog="false"
-        :isSelection="false"
-        :isIndex="true"
-        :radius="true"
-        :emptyText="emptyText"
-        :stripe="false"
-        :paginationShow="false"
-        :pageSizeShow="false"
-        headerCellClassName="th_pink"
-      ></ces-table>
-      <div class="sjfw_fhcstx">返回参数信息填写：</div>
-      <ces-table
-        ref="fwcs_sjfw_fhcs"
-        size="mini"
-        :border="true"
-        :headers="sjfw_fhcstx"
-        url="fhcstx"
-        :searchShow="false"
-        :addRowBtn="false"
-        :autoAdd="false"
-        :isDialog="false"
-        :isSelection="false"
-        :isIndex="true"
-        :radius="true"
-        :emptyText="emptyText"
-        :stripe="false"
-        :paginationShow="false"
-        :pageSizeShow="false"
-        headerCellClassName="th_pink"
-      ></ces-table>
-      <div class="btn_footer">
-        <el-button class="reset" @click="resetSjfw">重置</el-button>
-        <el-button class="next" @click="nextJcxx">下一步</el-button>
+    <block-radius v-if="resultShow">
+      <div v-if="activeBtn == 0">
+        <div class="sjfw_qqcstx">请求参数信息填写：</div>
+        <ces-table
+          ref="fwcs_sjfw_qqcs"
+          size="mini"
+          :border="true"
+          :headers="sjfw_qqcstx"
+          url="qqcstx"
+          :searchShow="false"
+          :addRowBtn="false"
+          :autoAdd="false"
+          :isDialog="false"
+          :isSelection="false"
+          :isIndex="true"
+          :radius="true"
+          :emptyText="emptyText"
+          :stripe="false"
+          :paginationShow="false"
+          :pageSizeShow="false"
+          headerCellClassName="th_pink"
+        ></ces-table>
+        <div class="sjfw_fhcstx">返回参数信息填写：</div>
+        <ces-table
+          ref="fwcs_sjfw_fhcs"
+          size="mini"
+          :border="true"
+          :headers="sjfw_fhcstx"
+          url="fhcstx"
+          :searchShow="false"
+          :addRowBtn="false"
+          :autoAdd="false"
+          :isDialog="false"
+          :isSelection="false"
+          :isIndex="true"
+          :radius="true"
+          :emptyText="emptyText"
+          :stripe="false"
+          :paginationShow="false"
+          :pageSizeShow="false"
+          headerCellClassName="th_pink"
+        ></ces-table>
       </div>
-    </block-radius>
-    <block-radius v-if="activeBtn == 1 && resultShow">
-      <div class="skfw_csfwxx">测试服务信息：</div>
-      <div class="test_succ">
-        <div>测试成功</div>
+      <div v-else-if="activeBtn == 1 || activeBtn == 4">
+        <div class="skfw_csfwxx">测试服务信息：</div>
+        <div class="test_succ">
+          <div v-if="skfwResult" class="skcs_jg">
+            <img src="../assets/imgs/test_icon_success.png" class="skcs_jg_img" />&nbsp;测试成功
+          </div>
+          <div v-else class="skcs_jg">
+            <img src="../assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
+          </div>
+          <div></div>
+        </div>
       </div>
       <div class="btn_footer">
+        <el-button class="reset" v-if="activeBtn == 0" @click="resetSjfw">重置</el-button>
         <el-button class="next" @click="nextJcxx">下一步</el-button>
       </div>
     </block-radius>
@@ -222,12 +240,22 @@ export default {
       "OGS(WMTS)",
       "OGS(WFS)",
       "OGS(WCS)"
-    ]
+    ],
+    skfwResult: false,
+    optionsZhyy: [
+      { label: "模型算法类", value: 0 },
+      { label: "查询验证类", value: 1 },
+      { label: "流程类", value: 2 },
+      { label: "应用类", value: 3 },
+    ],
+    zhyyVal: 0,
+    jcxxtx: false
   }),
   computed: {},
   watch: {},
   methods: {
     clickBtn(val) {
+      this.resultShow = false;
       this.activeBtn = val;
     },
     clickFwcs() {
@@ -238,7 +266,9 @@ export default {
       console.log(this.$refs.fwcs_sjfw_qq.getTableData());
     },
     resetSjfw() {},
-    nextJcxx() {},
+    nextJcxx() {
+      this.jcxxtx = true;
+    }
   },
   mounted() {}
 };
@@ -346,6 +376,21 @@ export default {
   width: 100%;
   margin: 0 auto;
 }
+.skcs_jg {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #0f2683;
+  font-size: 20px;
+}
+.skcs_jg_img {
+  position: relative;
+  top: 3px;
+}
+.zhyy_select {
+  width: 70%;
+}
 </style>
 <style>
 .bread_crumb .el-breadcrumb__inner {
diff --git a/src/router/index.js b/src/router/index.js
index c6126060eefc455699eb6ed303b0e88f3fd2880e..cc569cf99cdc20c243aedbfa4b7cebe6ae321b29 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,6 +59,11 @@ export default new Router({
       path: "/example_icon", // svg 实例
       name: "example_icon",
       component: () => import("@/pages/example_icon")
+    },
+    {
+      path: "/example_topology", // 拓扑图实例
+      name: "example_topology",
+      component: () => import("@/pages/example_topology")
     }
   ]
 });
diff --git a/static/antv.json b/static/antv.json
new file mode 100644
index 0000000000000000000000000000000000000000..6b64b2106b650d2c6d3c96ec2b56b3ba972e1909
--- /dev/null
+++ b/static/antv.json
@@ -0,0 +1,698 @@
+{
+    "timestamp": 1587020309,
+    "duration": 600,
+    "graphType": "app",
+    "elements": {
+      "nodes": [
+        {
+          "data": {
+            "id": "ac4338d28c3ad444cdbe51d5e7d69891",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awe-redis",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awe-redis"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpIn": "399.14"
+                }
+              }
+            ],
+            "hasMissingSC": true
+          }
+        },
+        {
+          "data": {
+            "id": "8c3a116b49b6a224bb240304efada0ef",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-ci-api",
+            "isRoot": true
+          }
+        },
+        {
+          "data": {
+            "id": "28d134027d60a0a450655bf9e25fd820",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-dex",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awecloud-dex"
+              }
+            ]
+          }
+        },
+        {
+          "data": {
+            "id": "1166f964717d2b5326c637803017397a",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-hub-api",
+            "traffic": [
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpOut": "0.61"
+                }
+              }
+            ],
+            "isRoot": true
+          }
+        },
+        {
+          "data": {
+            "id": "3bbb6a16f0a039e7f18d86aa5dbeb655",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-istio",
+            "isRoot": true
+          }
+        },
+        {
+          "data": {
+            "id": "c7cb4666416998aff6b6772e492cf1e6",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-kubernetes",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awecloud-kubernetes"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.13",
+                  "httpOut": "0.18"
+                }
+              },
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpOut": "5571.74"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "data": {
+            "id": "17091f02abcc66d5a6aa573af81bc293",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-meshgraph",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awecloud-meshgraph"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.59",
+                  "httpOut": "0.59"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "data": {
+            "id": "1e1c805b21415eb30bf16b4109bb70b8",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-rest",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awecloud-rest"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.20",
+                  "httpOut": "0.21"
+                }
+              },
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpOut": "21.20"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "data": {
+            "id": "d5e9dbf839f63edfb600a17470053845",
+            "nodeType": "app",
+            "namespace": "cloud",
+            "app": "awecloud-ui",
+            "destServices": [
+              {
+                "namespace": "cloud",
+                "name": "awecloud-ui"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.07"
+                }
+              },
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpOut": "10.05"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "data": {
+            "id": "0fa9c4517f3b2ce89f0ae5f3229c9d05",
+            "nodeType": "app",
+            "namespace": "devops",
+            "app": "drone-server",
+            "destServices": [
+              {
+                "namespace": "devops",
+                "name": "drone-server"
+              }
+            ],
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "a4347f4ca23e80f984111fa9252c71cc",
+            "nodeType": "app",
+            "namespace": "devops",
+            "app": "gitlab",
+            "destServices": [
+              {
+                "namespace": "devops",
+                "name": "gitlab"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.08"
+                }
+              }
+            ],
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "71ce69559b37469990f5e55c538acd9f",
+            "nodeType": "app",
+            "namespace": "devops",
+            "app": "stolon",
+            "destServices": [
+              {
+                "namespace": "devops",
+                "name": "stolon-proxy"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpIn": "400.27"
+                }
+              }
+            ],
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "e474e0b8e6b953250452df0c4d19fa4b",
+            "nodeType": "app",
+            "namespace": "istio-system",
+            "app": "istio-ingressgateway",
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpOut": "1.05"
+                }
+              }
+            ],
+            "isOutside": true,
+            "isRoot": true
+          }
+        },
+        {
+          "data": {
+            "id": "ee75dded555d80a2d11d8807e600e28b",
+            "nodeType": "app",
+            "namespace": "istio-system",
+            "app": "kiali",
+            "destServices": [
+              {
+                "namespace": "istio-system",
+                "name": "kiali"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.59"
+                }
+              }
+            ],
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "472267b2b5068361f791ac7d738bb201",
+            "nodeType": "workload",
+            "namespace": "kube-system",
+            "workload": "heapster",
+            "version": "v1.5.0",
+            "destServices": [
+              {
+                "namespace": "kube-system",
+                "name": "heapster"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpIn": "0.18"
+                }
+              }
+            ],
+            "isInaccessible": true,
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "1ef34af8124e05c0b6a4acfec8a2441b",
+            "nodeType": "workload",
+            "namespace": "kube-system",
+            "workload": "traefik",
+            "app": "unknown",
+            "version": "unknown",
+            "destServices": [
+              {
+                "namespace": "default",
+                "name": "kubernetes"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpIn": "984.97"
+                }
+              }
+            ],
+            "isInaccessible": true,
+            "isMisconfigured": "labels=[app version]",
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "64eb41f62645f34716ec98bd07fb5d4e",
+            "nodeType": "app",
+            "namespace": "kubesphere-monitoring-system",
+            "app": "node-exporter",
+            "destServices": [
+              {
+                "namespace": "default",
+                "name": "kubernetes"
+              }
+            ],
+            "isInaccessible": true,
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "de9b5ca2fab6d65e97371a7f492da4d6",
+            "nodeType": "app",
+            "namespace": "monitoring",
+            "app": "kube-prometheus-exporter-node",
+            "destServices": [
+              {
+                "namespace": "default",
+                "name": "kubernetes"
+              }
+            ],
+            "traffic": [
+              {
+                "protocol": "tcp",
+                "rates": {
+                  "tcpIn": "5522.40"
+                }
+              }
+            ],
+            "isOutside": true
+          }
+        },
+        {
+          "data": {
+            "id": "b30b0078325bf2e1adb4d57c4c0c2665",
+            "nodeType": "unknown",
+            "namespace": "unknown",
+            "workload": "unknown",
+            "app": "unknown",
+            "version": "unknown",
+            "traffic": [
+              {
+                "protocol": "http",
+                "rates": {
+                  "httpOut": "0.005"
+                }
+              }
+            ],
+            "isInaccessible": true,
+            "isRoot": true
+          }
+        }
+      ],
+      "edges": [
+        {
+          "data": {
+            "id": "7fef53ce379610b48a6d45d0997532e3",
+            "source": "1166f964717d2b5326c637803017397a",
+            "target": "ac4338d28c3ad444cdbe51d5e7d69891",
+            "traffic": {
+              "protocol": "tcp",
+              "rates": {
+                "tcp": "0.61"
+              },
+              "responses": {
+                "-": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "61e5b52912401edfd1ae6be7b1d7f7fa",
+            "source": "17091f02abcc66d5a6aa573af81bc293",
+            "target": "ee75dded555d80a2d11d8807e600e28b",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.59",
+                "httpPercentReq": "100.0"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "fce91b418e315982d54c02be2c3df25f",
+            "source": "1e1c805b21415eb30bf16b4109bb70b8",
+            "target": "0fa9c4517f3b2ce89f0ae5f3229c9d05",
+            "traffic": {
+              "protocol": "http"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "1e9b3cb3fa3ca3567f8c10b6b34763b2",
+            "source": "1e1c805b21415eb30bf16b4109bb70b8",
+            "target": "a4347f4ca23e80f984111fa9252c71cc",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.08",
+                "httpPercentReq": "37.7"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "aa92e2fd559e9e9e10a27b18127b2195",
+            "source": "1e1c805b21415eb30bf16b4109bb70b8",
+            "target": "ac4338d28c3ad444cdbe51d5e7d69891",
+            "traffic": {
+              "protocol": "tcp",
+              "rates": {
+                "tcp": "21.20"
+              },
+              "responses": {
+                "-": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "0f53f13f9536138d3a8c1691d590cedb",
+            "source": "1e1c805b21415eb30bf16b4109bb70b8",
+            "target": "c7cb4666416998aff6b6772e492cf1e6",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.13",
+                "httpPercentReq": "62.3"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "0f4dbf5205695d97becefc301f9edd23",
+            "source": "28d134027d60a0a450655bf9e25fd820",
+            "target": "71ce69559b37469990f5e55c538acd9f",
+            "traffic": {
+              "protocol": "tcp"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "75a23548fe5582e7e4cf07e3cced89bf",
+            "source": "28d134027d60a0a450655bf9e25fd820",
+            "target": "a4347f4ca23e80f984111fa9252c71cc",
+            "traffic": {
+              "protocol": "http"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "dd2aa003784fa7f869fe12e57d0ea8c6",
+            "source": "28d134027d60a0a450655bf9e25fd820",
+            "target": "ac4338d28c3ad444cdbe51d5e7d69891",
+            "traffic": {
+              "protocol": "tcp"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "290de737a239fc821bb0287fc724375e",
+            "source": "3bbb6a16f0a039e7f18d86aa5dbeb655",
+            "target": "1ef34af8124e05c0b6a4acfec8a2441b",
+            "traffic": {
+              "protocol": "tcp"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "cc2e0258f36eb3b1f147946fd46a1b67",
+            "source": "8c3a116b49b6a224bb240304efada0ef",
+            "target": "71ce69559b37469990f5e55c538acd9f",
+            "traffic": {
+              "protocol": "tcp"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "5024053524fdd64eff56fc11bc3111dd",
+            "source": "c7cb4666416998aff6b6772e492cf1e6",
+            "target": "1ef34af8124e05c0b6a4acfec8a2441b",
+            "traffic": {
+              "protocol": "tcp",
+              "rates": {
+                "tcp": "49.34"
+              },
+              "responses": {
+                "-": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "5a8c0b2ac4c47e0f1654a355d6f6ac7d",
+            "source": "c7cb4666416998aff6b6772e492cf1e6",
+            "target": "472267b2b5068361f791ac7d738bb201",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.18",
+                "httpPercentReq": "100.0"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "c6ee31b229d5f949c1e8fe66915d5540",
+            "source": "c7cb4666416998aff6b6772e492cf1e6",
+            "target": "de9b5ca2fab6d65e97371a7f492da4d6",
+            "traffic": {
+              "protocol": "tcp",
+              "rates": {
+                "tcp": "5522.40"
+              },
+              "responses": {
+                "-": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "d876be957b1f663c90383aa7aec42df5",
+            "source": "d5e9dbf839f63edfb600a17470053845",
+            "target": "ac4338d28c3ad444cdbe51d5e7d69891",
+            "traffic": {
+              "protocol": "tcp",
+              "rates": {
+                "tcp": "10.05"
+              },
+              "responses": {
+                "-": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "0f96e4674e6b79acebee3f560f15212d",
+            "source": "e474e0b8e6b953250452df0c4d19fa4b",
+            "target": "17091f02abcc66d5a6aa573af81bc293",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.59",
+                "httpPercentReq": "56.5"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "c843e09cd081097d292014056f60a805",
+            "source": "e474e0b8e6b953250452df0c4d19fa4b",
+            "target": "1e1c805b21415eb30bf16b4109bb70b8",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.05",
+                "httpPercentReq": "4.9"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "de2ed713d3cb38e6265cb836032aeaf7",
+            "source": "e474e0b8e6b953250452df0c4d19fa4b",
+            "target": "28d134027d60a0a450655bf9e25fd820",
+            "traffic": {
+              "protocol": "http"
+            }
+          }
+        },
+        {
+          "data": {
+            "id": "5219307d003d4802af03fb5d4377a13c",
+            "source": "e474e0b8e6b953250452df0c4d19fa4b",
+            "target": "d5e9dbf839f63edfb600a17470053845",
+            "traffic": {
+              "protocol": "http",
+              "rates": {
+                "http": "0.07",
+                "httpPercentReq": "6.9"
+              },
+              "responses": {
+                "200": {
+                  "-": "100.0"
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/static/data.json b/static/data.json
index fcc7781a05bed5f08d13f9df567b7022116ede9c..fdd6e66bc5cd9830a4ab679202a959b84702c760 100644
--- a/static/data.json
+++ b/static/data.json
@@ -410,7 +410,7 @@
             {
                 "id": 3,
                 "unicode": "2016-05-01",
-                "type": "ssdNW",
+                "type": "ssdNWssdNWssdNWssdNWssdNWssdNWssdNW",
                 "name": "王小虎",
                 "explanation": "上海市普陀区金沙江路 1519 弄",
                 "children": [
diff --git a/static/topology_ic_ganzhifw.svg b/static/topology_ic_ganzhifw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9d1f75758ede69f8da4df86630c6a1ef301f3efd
--- /dev/null
+++ b/static/topology_ic_ganzhifw.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 17</title><rect class="cls-1" x="4.22" y="4.22" width="13.56" height="13.56" transform="translate(-4.56 11) rotate(-45)"/><path class="cls-2" d="M11,2.83,19.17,11,11,19.17,2.83,11,11,2.83M11,0,0,11,11,22,22,11,11,0Z"/></svg>
\ No newline at end of file
diff --git a/static/topology_ic_shikongfw.svg b/static/topology_ic_shikongfw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..48a34980bae936a73c52d9639c6097cd11846842
--- /dev/null
+++ b/static/topology_ic_shikongfw.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 15</title><path class="cls-1" d="M10,19a9,9,0,1,1,9-9A9,9,0,0,1,10,19Z"/><path class="cls-2" d="M10,2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/></svg>
\ No newline at end of file
diff --git a/static/topology_ic_shipinfw.svg b/static/topology_ic_shipinfw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1f386ccae335af89ea436108ab772a16ac5c923a
--- /dev/null
+++ b/static/topology_ic_shipinfw.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19.05"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 16</title><polygon class="cls-1" points="1.73 18.05 11 2 20.27 18.05 1.73 18.05"/><path class="cls-2" d="M11,4l7.54,13.05H3.46L11,4m0-4L0,19.05H22L11,0Z"/></svg>
\ No newline at end of file
diff --git a/static/topology_ic_shujufw.svg b/static/topology_ic_shujufw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d33bbe93cac67ea97b1943c6727a5e3646025b57
--- /dev/null
+++ b/static/topology_ic_shujufw.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 14</title><rect class="cls-1" x="1" y="1" width="16" height="16"/><path class="cls-2" d="M16,2V16H2V2H16m2-2H0V18H18V0Z"/></svg>
\ No newline at end of file
diff --git a/static/topology_ic_zonghefw.svg b/static/topology_ic_zonghefw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b5b13db0304f4fddd6355f48a635d76620c10d39
--- /dev/null
+++ b/static/topology_ic_zonghefw.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20.92"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 18</title><polygon class="cls-1" points="4.93 19.92 1.18 8.37 11 1.24 20.82 8.37 17.07 19.92 4.93 19.92"/><path class="cls-2" d="M11,2.47l8.65,6.28-3.3,10.17H5.65L2.35,8.76,11,2.47M11,0,0,8,4.2,20.92H17.8L22,8,11,0Z"/></svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e66b3d7bb57b46a22e77403d8b84519e72cebaf0..d381e9ce957ca6affa3f09bcb8e7fd3e54c705c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,18 @@
   dependencies:
     "@antv/util" "~1.3.1"
 
+"@antv/dom-util@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@antv/dom-util/-/dom-util-2.0.2.tgz#4c7b0a195e027e55570435a6825cec56dfb0b590"
+  integrity sha512-i/rh385casRd6OA4rbpbA2jyiwY/w7PtkA+74mH43PiBzOcLpDg1jEWR9dMO0tIqUzHQWWqKNNjmXVubl4GS6g==
+  dependencies:
+    tslib "^1.10.0"
+
+"@antv/event-emitter@^0.1.1", "@antv/event-emitter@~0.1.0":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@antv/event-emitter/-/event-emitter-0.1.2.tgz#a17b7cb86e6d071880dc6bfb232756f88624ecbc"
+  integrity sha512-6C6NJOdoNVptCr5y9BVOhKkCgW7LFs/SpcRyAExUeSjAm0zJqcqNkSIRGsXYhj4PJI+CZICHzGwwiSnIsE68Ug==
+
 "@antv/f2@^3.1.4-beta.2":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@antv/f2/-/f2-3.5.0.tgz#81da08194ad4a7e531448aaad79ce65f59bcdb43"
@@ -28,11 +40,109 @@
     "@babel/runtime" "^7.7.7"
     hammerjs "^2.0.8"
 
+"@antv/g-base@^0.4.0", "@antv/g-base@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@antv/g-base/-/g-base-0.4.4.tgz#4da057e2b82c75e0e9367bed8759cb0c95693a0e"
+  integrity sha512-P5qptpFy4QiEiQsESNVxvLJsfJJkTuJyfgchP4tUv/g3Ir6xn3Hj8mFbyjesOJ4/wWyhABYTpekK0HNWr1WiXA==
+  dependencies:
+    "@antv/event-emitter" "^0.1.1"
+    "@antv/g-math" "^0.1.3"
+    "@antv/matrix-util" "^2.0.4"
+    "@antv/path-util" "~2.0.5"
+    "@antv/util" "~2.0.0"
+    "@types/d3-timer" "^1.0.9"
+    d3-ease "^1.0.5"
+    d3-interpolate "^1.3.2"
+    d3-timer "^1.0.9"
+
+"@antv/g-canvas@^0.4.2":
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/@antv/g-canvas/-/g-canvas-0.4.9.tgz#5495a707b45149a94b4e6328b9ffcdf68862d4ff"
+  integrity sha512-ofhDOAQs8anhnlS/9TLGEqEGiYmVVn/N0kmEDQgW7mNNzYMEbmWVGOIAXZUYcRGs49Du1sEyTjsTv5B9MnvSpw==
+  dependencies:
+    "@antv/g-base" "^0.4.4"
+    "@antv/g-math" "^0.1.3"
+    "@antv/path-util" "~2.0.5"
+    "@antv/util" "~2.0.0"
+    gl-matrix "^3.0.0"
+
+"@antv/g-math@^0.1.1", "@antv/g-math@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@antv/g-math/-/g-math-0.1.3.tgz#8922f44bef74314640b591f53583c1217b715c0f"
+  integrity sha512-m4jF1Xm9bSTDLU35u3bSW9UcqJJVxU+E+bKtJgNfXUiDwHILYJey825+ApsZ8yjU7SD1kDP6GH6NTGzmChszEQ==
+  dependencies:
+    "@antv/util" "~2.0.0"
+    gl-matrix "^3.0.0"
+
+"@antv/g-svg@^0.4.0":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@antv/g-svg/-/g-svg-0.4.4.tgz#60ea96e098536ee5e0361bc870363c5aaab050f2"
+  integrity sha512-oHhfT3OhckGpBNlLM+FY5l6ysA044pqJ3CQ/NNqS269PwAXqswu7GbIIDmiy6lUURtaAVgyYxbAddoCnCvZ1Kg==
+  dependencies:
+    "@antv/g-base" "^0.4.4"
+    "@antv/g-math" "^0.1.3"
+    "@antv/util" "~2.0.0"
+    detect-browser "^4.6.0"
+
+"@antv/g6@^3.4.8":
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/@antv/g6/-/g6-3.4.8.tgz#f98505b481e913e297c2a18a04e23c0c6f1db2cc"
+  integrity sha512-8Kkz12Yk35DHTlch5Puq505IukSbxSkXdfyrm575sebjnG0yNxwnTuPKqRg/ck0Hx9SF7RM0SZ3UVK8XxT/sPg==
+  dependencies:
+    "@antv/dom-util" "^2.0.1"
+    "@antv/event-emitter" "~0.1.0"
+    "@antv/g-base" "^0.4.0"
+    "@antv/g-canvas" "^0.4.2"
+    "@antv/g-math" "^0.1.1"
+    "@antv/g-svg" "^0.4.0"
+    "@antv/hierarchy" "^0.6.1"
+    "@antv/matrix-util" "^2.0.4"
+    "@antv/path-util" "^2.0.3"
+    "@antv/scale" "^0.2.0"
+    "@antv/util" "~2.0.5"
+    d3-force "^2.0.1"
+    dagre "^0.8.5"
+    lodash "^4.17.15"
+    numericjs "^1.2.6"
+
 "@antv/gl-matrix@^2.7.1":
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14"
   integrity sha512-oOWcVNlpELIKi9x+Mm1Vwbz8pXfkbJKykoCIOJ/dNK79hSIANbpXJ5d3Rra9/wZqK6MC961B7sybFhPlLraT3Q==
 
+"@antv/hierarchy@^0.6.1":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@antv/hierarchy/-/hierarchy-0.6.3.tgz#5fa5da89e33431c6e769ee20d7a391cc81c4fe95"
+  integrity sha512-91YZUiZFXK8zp2nC2C+4FEc1LDIPZ5Q4YQbzMnKhH+7nei4QCfIdXPrPh0EKRws78CVt2hxR5gHD7zq6UlokAQ==
+  dependencies:
+    "@antv/util" "^2.0.7"
+
+"@antv/matrix-util@^2.0.4":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@antv/matrix-util/-/matrix-util-2.0.7.tgz#a5190599d424c1518a1b5eb3a548271d7e98fc44"
+  integrity sha512-bogifQY8jplWtSTZsPqBOdBlDdkM7IwDqYL8eMYL8OaSyOPCS7l9bnEQjQ9qTAwfCd7wHTuPoCnCpbiR8BYFvQ==
+  dependencies:
+    "@antv/gl-matrix" "^2.7.1"
+    "@antv/util" "^2.0.7"
+    tslib "^1.10.0"
+
+"@antv/path-util@^2.0.3", "@antv/path-util@~2.0.5":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@antv/path-util/-/path-util-2.0.7.tgz#79a702c9e69d53ef09a848c901b8be925b296fd2"
+  integrity sha512-1gvgPxYjQ7QGqeFLJC8C3cQd7hP+3GQSdSTKoSSW4Q7nVXdibVx8D521kJe2NkketdKLwsT8gmwJWcu+NU43+w==
+  dependencies:
+    "@antv/util" "^2.0.7"
+    tslib "^1.10.0"
+
+"@antv/scale@^0.2.0":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@antv/scale/-/scale-0.2.3.tgz#d334b36ecb3e1b6d9e7d656fab935dc7b8b02c3c"
+  integrity sha512-SDniBuf9b5n7dAm7cXpJCFRRWbHzhzHmxs28KRkayas13lfftKXzHrMRjmdhIv5XzIByDBH9Yv2ln46mt9ZVrg==
+  dependencies:
+    "@antv/util" "~2.0.3"
+    moment "^2.24.0"
+    tslib "^1.10.0"
+
 "@antv/scale@~0.1.2":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@antv/scale/-/scale-0.1.4.tgz#bcff21c20e818aa89bf6677ef12f79c0ee4efbdc"
@@ -41,6 +151,13 @@
     "@antv/util" "~1.3.1"
     fecha "~2.3.3"
 
+"@antv/util@^2.0.7", "@antv/util@~2.0.0", "@antv/util@~2.0.3", "@antv/util@~2.0.5":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@antv/util/-/util-2.0.8.tgz#52cb62e130e734fcdde3503bcd9263863f750e59"
+  integrity sha512-G9QRygQJ8UNGMi8L1dfMIa4SofbEO+jkXwvRY4ek/MLd04Q01UN0U28JeMFzw6FCKJdxiFu+2uwT/zjoFr3QoQ==
+  dependencies:
+    tslib "^1.10.0"
+
 "@antv/util@~1.2.5":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@antv/util/-/util-1.2.5.tgz#8896c5055ec29e4a344b5daa97bf82905f7d40cd"
@@ -797,6 +914,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@types/d3-timer@^1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-1.0.9.tgz#aed1bde0cf18920d33f5d44839d73de393633fd3"
+  integrity sha512-WvfJ3LFxBbWjqRGz9n7GJt08RrTHPJDVsIwwoCMROlqF+iDacYiAFjf9oqnq0mXpb2juA2N/qjKP+MKdal3YNQ==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -2235,6 +2357,55 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-color@1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
+  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
+
+d3-dispatch@1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58"
+  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
+
+d3-ease@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.6.tgz#ebdb6da22dfac0a22222f2d4da06f66c416a0ec0"
+  integrity sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ==
+
+d3-force@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.0.1.tgz#31750eee8c43535301d571195bf9683beda534e2"
+  integrity sha512-zh73/N6+MElRojiUG7vmn+3vltaKon7iD5vB/7r9nUaBeftXMzRo5IWEG63DLBCto4/8vr9i3m9lwr1OTJNiCg==
+  dependencies:
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-interpolate@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
+  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
+  dependencies:
+    d3-color "1"
+
+d3-quadtree@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.7.tgz#ca8b84df7bb53763fe3c2f24bd435137f4e53135"
+  integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==
+
+d3-timer@1, d3-timer@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
+  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+
+dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -2375,6 +2546,11 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detect-browser@^4.6.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-4.8.0.tgz#1d73bd88c17be866901950ce0aaae1ed060902c6"
+  integrity sha512-f4h2dFgzHUIpjpBLjhnDIteXv8VQiUm8XzAuzQtYUqECX/eKh67ykuiVoyb7Db7a0PUSmJa3OGXStG0CbQFUVw==
+
 detect-file@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@@ -3066,6 +3242,11 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
+gl-matrix@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
+  integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -3178,6 +3359,13 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
 
+graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4444,6 +4632,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -4640,6 +4833,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+numericjs@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/numericjs/-/numericjs-1.2.6.tgz#c0daf25c4bcb22e043bf83443f9f39e8b336798b"
+  integrity sha1-wNryXEvLIuBDv4NEP5856LM2eYs=
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -6638,7 +6836,7 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.9.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==