!1000 UI fix bug that tensor graph display is not obvious when graph is large and do not show axis name when no data in Model Lineage

From: @huang_wei_feng4
Reviewed-by: @wangyue01,@lilongfei15
Signed-off-by: @lilongfei15

mindinsight/ui/src/components/debugger-tensor.vue

@@ -105,6 +105,10 @@ limitations under the License.
             {{ statistics.overall_neg_zero_count===undefined?'--':statistics.overall_neg_zero_count }}</span>
           <span>{{ $t('debugger.positiveNum') }}
             {{ statistics.overall_pos_zero_count===undefined?'--':statistics.overall_pos_zero_count }}</span>
+          <span>{{ $t('debugger.true') }}
+            {{ statistics.overall_true_count===undefined?'--':statistics.overall_true_count }}</span>
+          <span>{{ $t('debugger.false') }}
+            {{ statistics.overall_false_count===undefined?'--':statistics.overall_false_count }}</span>
         </div>
       </div>
       <div class="deb-con-slide">
@@ -210,18 +214,30 @@ limitations under the License.
             <div class="tensor-title">{{$t('debugger.tensorMsg')}}</div>
             <div class="tensor-detail">
               <span>{{ $t('graph.name') + $t('symbols.colon') }} {{ statistics.name }}</span>
-              <span>{{ $t('debugger.max') }} {{ statistics.overall_max }}</span>
-              <span>{{ $t('debugger.min') }} {{ statistics.overall_min }}</span>
-              <span>{{ $t('debugger.mean') }} {{ statistics.overall_avg }}</span>
-              <span>{{ $t('debugger.nan') }} {{ statistics.overall_nan_count }}</span>
+              <span>{{ $t('debugger.max') }} {{ statistics.overall_max===undefined?'--':statistics.overall_max }}</span>
+              <span>{{ $t('debugger.min') }} {{ statistics.overall_min===undefined?'--':statistics.overall_min }}</span>
+              <span>{{ $t('debugger.mean') }}
+                {{ statistics.overall_avg===undefined?'--':statistics.overall_avg }}
+              </span>
+              <span>{{ $t('debugger.nan') }}
+                {{ statistics.overall_nan_count===undefined?'--':statistics.overall_nan_count }}
+              </span>
               <span>{{ $t('debugger.negativeInf') }}
-                {{ statistics.overall_neg_inf_count }}</span>
-              <span>{{ $t('debugger.inf') }} {{ statistics.overall_pos_inf_count }}</span>
-              <span>{{ $t('debugger.zero') }} {{ statistics.overall_zero_count }}</span>
+                {{ statistics.overall_neg_inf_count===undefined?'--':statistics.overall_neg_inf_count }}
+              </span>
+              <span>{{ $t('debugger.inf') }}
+                {{ statistics.overall_pos_inf_count===undefined?'--': statistics.overall_pos_inf_count}}
+              </span>
+              <span>{{ $t('debugger.zero') }}
+                {{ statistics.overall_zero_count===undefined?'--': statistics.overall_zero_count}}</span>
               <span>{{ $t('debugger.negativeNum') }}
-                {{ statistics.overall_neg_zero_count }}</span>
+                {{ statistics.overall_neg_zero_count===undefined?'--':statistics.overall_neg_zero_count }}</span>
               <span>{{ $t('debugger.positiveNum') }}
-                {{ statistics.overall_pos_zero_count }}</span>
+                {{ statistics.overall_pos_zero_count===undefined?'--':statistics.overall_pos_zero_count }}</span>
+              <span>{{ $t('debugger.true') }}
+                {{ statistics.overall_true_count===undefined?'--':statistics.overall_true_count }}</span>
+              <span>{{ $t('debugger.false') }}
+                {{ statistics.overall_false_count===undefined?'--':statistics.overall_false_count }}</span>
             </div>
           </div>
           <div class="watch-point">
@@ -305,7 +321,10 @@ export default {
         'overall_pos_inf_count',
         'overall_pos_zero_count',
         'overall_zero_count',
+        'overall_true_count',
+        'overall_false_count',
       ],
+      loadingInstance: {},
     };
   },
   computed: {
@@ -359,9 +378,13 @@ export default {
               });
 
               if (initPage) {
+                this.loadingInstance = this.$loading(this.loadingOption);
                 this.selectedNode.name = this.curRowObj.name;
                 const dot = this.packageData();
-                this.initGraph(dot);
+                // Delay is required, otherwise the loading icon cannot be loaded
+                setTimeout(() => {
+                  this.initGraph(dot);
+                }, 200);
               } else {
                 if (this.selectedNode.name) {
                   this.setNodeData();
@@ -584,6 +607,7 @@ export default {
       const graphDom = d3.select('#tensor-graph');
       graphDom.selectAll('title').remove();
       this.initZooming();
+      this.fitGraph();
 
       const nodes = graphDom.selectAll('.node');
       nodes.on('click', (target, index, nodesList) => {
@@ -618,10 +642,57 @@ export default {
         }
       });
 
+      this.loadingInstance.close();
       if (this.selectedNode.name) {
         this.setNodeData();
       }
     },
+    fitGraph() {
+      const graphContainer = document.getElementById('tensor-graph');
+      const graphDom = graphContainer.querySelector(`#graph0`);
+      const containerRect = graphContainer.getBoundingClientRect();
+      let graphRect = graphDom.getBoundingClientRect();
+      const transformData = this.$parent.getTransformData(graphDom);
+      const selectedNode = graphDom.querySelector(`g[id="${this.curRowObj.name}"]`);
+      let nodeRect = selectedNode.getBoundingClientRect();
+      const nodeBox = selectedNode.getBBox();
+      const transRate = nodeBox.width / nodeRect.width;
+      const paddingTop = 20;
+
+      if (graphRect.height < containerRect.height / 2) {
+        let scale = (containerRect.height - paddingTop * 2) / graphRect.height;
+        graphDom.setAttribute(
+            'transform',
+            `translate(${transformData.translate[0]},${transformData.translate[1]}) scale(${
+              scale * transformData.scale[0]
+            })`,
+        );
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            nodeRect = selectedNode.getBoundingClientRect();
+            graphRect = graphDom.getBoundingClientRect();
+            const nodeCenter = {
+              x: nodeRect.x + nodeRect.width / 2,
+            };
+            const containerCenter = {
+              x: containerRect.x + containerRect.width / 2,
+            };
+
+            let x = (containerCenter.x - nodeCenter.x) * transRate;
+            let y = (containerRect.top + paddingTop - graphRect.top) * transRate;
+            x = parseFloat(x.toFixed(2));
+            y = parseFloat(y.toFixed(2));
+            scale = parseFloat((scale * transformData.scale[0]).toFixed(2));
+
+            graphDom.setAttribute(
+                'transform',
+                `translate(${transformData.translate[0] + x},${transformData.translate[1] + y}) scale(${scale})`,
+            );
+          }, 100);
+        });
+      }
+    },
     /**
      * Initializing the Zoom Function of a Graph
      */
@@ -674,7 +745,7 @@ export default {
               pointer.end.y = event.y;
               let tempX = pointer.end.x - pointer.start.x;
               let tempY = pointer.end.y - pointer.start.y;
-              const paddingTrans = Math.max((padding / transRate) * scale, minDistance);
+              const paddingTrans = Math.max(padding / transRate / scale, minDistance);
               if (graphRect.left + paddingTrans + tempX >= svgRect.left + svgRect.width) {
                 tempX = Math.min(tempX, 0);
               }
@@ -733,7 +804,9 @@ export default {
       window.getSelection().removeAllRanges();
       const selectedNode = document.querySelector(`#tensor-graph g[id="${this.selectedNode.name}"]`);
       d3.selectAll('#tensor-graph .node').classed('selected', false);
-      selectedNode.classList.add('selected');
+      if (selectedNode) {
+        selectedNode.classList.add('selected');
+      }
       d3.selectAll('#tensor-graph .edge').classed('selected', false);
       this.selectedNode = JSON.parse(JSON.stringify(this.tensorGraphData[this.selectedNode.name]));
 

mindinsight/ui/src/locales/en-us.json

@@ -186,7 +186,7 @@
     "unreasonable": "The logic is improper.",
     "info": "Information",
     "isDelete": "Are you sure you want to delete the current threshold?",
-    "noLog":"There is no logarithm of 0 and negative numbers"
+    "noLog": "There is no logarithm of 0 and negative numbers"
   },
   "images": {
     "titleText": "Image",
@@ -527,6 +527,8 @@
     "zero": "0:",
     "positiveNum": "Positive number:",
     "negativeNum": "Negative number:",
+    "true": "TRUE:",
+    "false": "FALSE:",
     "all": "All",
     "tensorTip": "tensor",
     "recheck": "Recheck (only for watchpoints with tensor values)",

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

@@ -185,7 +185,7 @@
     "unreasonable": "逻辑不合理",
     "info": "提示",
     "isDelete": "是否删除当前阈值？",
-    "noLog":"不存在0和负数的对数"
+    "noLog": "不存在0和负数的对数"
   },
   "images": {
     "titleText": "图像",
@@ -472,7 +472,7 @@
     "dimsFilterInputTip": "维度输入值可以是具体的索引（和Python的索引含义一致，支持负号）或者冒号\":\"，其中冒号\":\"表示当前维度的所有值",
     "category": "分类",
     "scientificCounting": "科学计数",
-    "accuracyTips":"如果数值展示不全，可以拖拽表头的分隔线查看"
+    "accuracyTips": "如果数值展示不全，可以拖拽表头的分隔线查看"
   },
   "debugger": {
     "debugger": "调试器",
@@ -527,6 +527,8 @@
     "zero": "零：",
     "positiveNum": "正数：",
     "negativeNum": "负数：",
+    "true": "TRUE：",
+    "false": "FALSE：",
     "all": "全部",
     "tensorTip": "张量",
     "recheck": "重新检查（只针对目前有张量值的监测点）",

mindinsight/ui/src/mixins/common-graph.vue

@@ -230,7 +230,7 @@ export default {
               let tempX = pointer.end.x - pointer.start.x;
               let tempY = pointer.end.y - pointer.start.y;
               const paddingTrans = Math.max(
-                  (padding / transRate) * scale,
+                  (padding / transRate) / scale,
                   minDistance,
               );
               if (

mindinsight/ui/src/mixins/debugger-mixin.vue

@@ -615,7 +615,11 @@ export default {
      * @param {Object} item watchpoint data
      */
     deleteWatchpoint(item) {
-      if (!this.watchPointArr.length || this.metadata.state === this.state.running || this.metadata.state === this.state.sending) {
+      if (
+        !this.watchPointArr.length ||
+        this.metadata.state === this.state.running ||
+        this.metadata.state === this.state.sending
+      ) {
         return;
       }
       if ((item && item.id) || !item) {

mindinsight/ui/src/views/debugger/debugger.vue

@@ -344,6 +344,10 @@ limitations under the License.
                      type="primary"
                      size="mini"
                      class="custom-btn white"
+                     :disabled="metadata.state === state.running ||
+                     metadata.state === state.sending"
+                     :class="{disabled: metadata.state === state.running ||
+                     metadata.state === state.sending}"
                      @click="getNextNodeInfo">
             {{ $t('debugger.nextNode')}}
           </el-button>
@@ -844,7 +848,7 @@ export default {
   },
   methods: {
     showTensor(row, type) {
-      this.curRowObj = row;
+      this.curRowObj = JSON.parse(JSON.stringify(row));
       this.curRowObj.type = type;
       this.curRowObj.curFileName = this.graphFiles.value;
       this.curRowObj.step = this.metadata.step;

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -154,7 +154,7 @@ limitations under the License.
                 </div>
               </div>
             </div>
-            <div class="left-scatters-container">
+            <div class="left-scatters-container" v-show="!viewBigBtnDisabled">
               <Scatter ref="smallScatter"
                        :data="scatterChartData"
                        :yTitle="yTitle"