!117 Modify user guild of graph on ui

Merge pull request !117 from WeiFeng/master_ph

mindinsight/ui/src/locales/zh-cn.json

@@ -150,10 +150,10 @@
     "guideTitle2": "2/3 节点类型介绍",
     "guideTitle3": "3/3 边介绍",
     "guideContent11": "1. 在计算图展示区域可以查看计算图，可以通过滚轮对计算图放大和缩小，可以鼠标点击后拖拽。",
-    "guideContent12": "2. 支持全屏展示计算图，或者将当前页面保存成SVG文件。",
+    "guideContent12": "2. 支持全屏展示计算图，或者将当前页面保存成SVG图片文件。",
     "guideContent13": "3. 在右边的功能区中，可以切换查看不同文件的计算图，或者在计算图中进行节点搜索。",
-    "guideContent14": "4. 在节点信息的输入和输出中，可以选择并点击跳转到该节点。",
-    "guideContent2": "计算图主要由命名空间节点，算子节点，虚拟节点，聚合节点，常量节点等几种类型节点构成。其中 \"Default\" 表示正向传播，\"Gradients\" 表示反向传播。",
+    "guideContent14": "4. 在节点信息的输入和输出中，选择并点击一个节点后，可以跳转到选择的节点。",
+    "guideContent2": "计算图中有命名空间节点，算子节点，虚拟节点，聚合节点，常量节点等几种类型节点。其中 \"Default\" 表示正向传播，\"Gradients\" 表示反向传播。",
     "guideContent3": "计算图中存在数据边和控制边。其中数据边表示数据的输入，控制边表示节点之间执行依赖关系。",
     "next": "下一步",
     "finish": "完成"

mindinsight/ui/src/views/train-manage/graph.vue

@@ -31,7 +31,10 @@ limitations under the License.
           <div v-for="item in guide.content"
                :key="item"
                class="guide-span">{{ item }}</div>
-          <img :src="require(`@/assets/images/graph-stepimg${guide.step}.svg`)" />
+          <div class="step-pic">
+            <img :src="require(`@/assets/images/graph-stepimg${guide.step}.svg`)" />
+          </div>
+
           <el-button type="primary"
                      @click="guideNext">{{
             guide.step === 3 ? $t('graph.finish') : $t('graph.next')
@@ -39,17 +42,17 @@ limitations under the License.
         </el-popover>
         <div class="step"
              v-show="guide.step == 1">
-          <img src="@/assets/images/graph-step1.png"
+          <img src="@/assets/images/graph-step1.svg"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 2">
-          <img src="@/assets/images/graph-step2.png"
+          <img src="@/assets/images/graph-step2.svg"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 3">
-          <img src="@/assets/images/graph-step3.png"
+          <img src="@/assets/images/graph-step3.svg"
                alt="" />
         </div>
       </div>
@@ -1030,6 +1033,7 @@ export default {
           ? this.allGraphData[name].independent_layout
           : false;
       if (independentLayout && nodes && nodes.length > aggregationNodeLimit) {
+        const nodesLength = nodes.length;
         // The selected node must be included.
         let startIndex = 0;
         if (this.selectedNode.more) {
@@ -1068,7 +1072,7 @@ export default {
           };
           nodes.splice(0, 0, ellipsisNodeL);
         }
-        if (startIndex + aggregationNodeLimit < nodes.length) {
+        if (startIndex + aggregationNodeLimit < nodesLength) {
           const ellipsisNode = {
             name: `${name}/right/${ellipsisNum} more...`,
             attr: {},
@@ -2808,9 +2812,11 @@ export default {
     line-height: 56px;
     .guide {
       cursor: pointer;
-      margin-left: 16px;
+      margin-left: 10px;
       line-height: 20px;
       display: inline-block;
+      line-height: 18px;
+      font-size: 12px;
       .guide-icon {
         display: inline-block;
         width: 16px;
@@ -2836,11 +2842,14 @@ export default {
       position: absolute;
       background-color: #c6c8cc;
       z-index: 9999;
+      .step-pic {
+        text-align: center;
+        margin-top: 8px;
+      }
       .step {
         height: 100%;
         background-repeat: round;
         img {
-          height: 100%;
           width: 100%;
         }
       }
@@ -2867,6 +2876,7 @@ export default {
         font-size: 16px;
         color: #252b3a;
         line-height: 24px;
+        font-weight: bold;
       }
       .el-button {
         display: block;