!635 UI optimizing debugger error code message and fix chart display bug of model trace back page

Merge pull request !635 from 黄伟锋/myMaster

mindinsight/ui/src/components/debuggerGridTableSimple.vue

@@ -327,7 +327,7 @@ export default {
             const innerOrder = innerIndex;
             const tempArr = [];
             innerData.forEach((innerValue) => {
-              if (isNaN(innerValue)) {
+              if (isNaN(innerValue) || innerValue === 'Infinity' || innerValue === '-Infinity') {
                 tempArr.push(innerValue);
               } else {
                 tempArr.push(innerValue.toFixed(this.accuracy));
@@ -344,7 +344,7 @@ export default {
           };
           outerData.forEach((innerData, innerIndex) => {
             const innerOrder = innerIndex;
-            if (isNaN(innerData)) {
+            if (isNaN(innerData) || innerData === 'Infinity' || innerData === '-Infinity') {
               tempData[innerOrder] = innerData;
             } else {
               tempData[innerOrder] = innerData.toFixed(this.accuracy);

mindinsight/ui/src/components/histogramUnit.vue

@@ -386,8 +386,8 @@ export default {
             : [];
         } else if (this.axisName === 1) {
           data = `${this.formateNUmber(
-              (filter[0].relative_time / 3600).toFixed(3),
-          )}h`;
+              (filter[0].relative_time).toFixed(0),
+          )}s`;
         } else {
           data = this.formateNUmber(filter[0].step);
         }
@@ -525,7 +525,7 @@ export default {
         }</td><td style="text-align:center;">${this.formateNUmber(
             hoveredItem.step,
         )}</td><td>${this.formateNUmber(
-            (hoveredItem.relative_time).toFixed(3),
+            (hoveredItem.relative_time).toFixed(0),
         )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;

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

@@ -526,16 +526,12 @@
     "50545013": "The requested data is too large. Try another dimension.",
     "50545014": "The queried tensor data has been replaced by new data. Please refresh.",
     "50548001": "Ascend AI Processor information query timed out.",
-    "5054B080": "Incorrect parameter type.",
-    "5054B081": "Incorrect parameter value.",
-    "5054B082": "Parameters are missing.",
-    "5054B083": "Running error.",
-    "5054B100": "The node does not exist.",
-    "5054B101": "The graph does not exist.",
-    "5054B180": "Failed to create the watchpoint.",
-    "5054B181": "Failed to update the watchpoint.",
-    "5054B182": "Failed to delete the watchpoint.",
-    "5054B183": "Backend training is in progress or has ended.",
-    "5054B184": "Backend training is not started or has been paused."
+
+    "5054B080": "Incorrect parameter type. Please check the input parameter type.",
+    "5054B081": "Incorrect parameter value. Please check the input parameter.",
+    "5054B180": "Failed to create the watchpoint. Please stop training and try again.",
+    "5054B181": "Failed to update the watchpoint. Please stop training and try again.",
+    "5054B182": "Failed to delete the watchpoint. Please stop training and try again.",
+    "5054B183": "Backend training is in progress or has ended. Please try again later"
   }
 }

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

@@ -526,16 +526,11 @@
     "50545014": "查询的张量数据已被新数据替换，请刷新。",
     "50548001": "昇腾AI处理器信息查询超时",
 
-    "5054B080": "参数类型错误",
-    "5054B081": "参数值错误",
-    "5054B082": "参数缺失",
-    "5054B083": "运行错误",
-    "5054B100": "节点不存在",
-    "5054B101": "图不存在",
-    "5054B180": "监测点创建失败",
-    "5054B181": "监测点更新失败",
-    "5054B182": "监测点删除失败",
-    "5054B183": "后台训练运行中或已结束",
-    "5054B184": "后台训练未开始或已暂停"
+    "5054B080": "参数类型错误，请检查输入参数类型",
+    "5054B081": "参数值错误，请检查输入参数",
+    "5054B180": "监测点创建失败，请暂停训练后重试",
+    "5054B181": "监测点更新失败，请暂停训练后重试",
+    "5054B182": "监测点删除失败，请暂停训练后重试",
+    "5054B183": "后台训练运行中，请稍后重试"
   }
 }

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

@@ -112,6 +112,7 @@ limitations under the License.
                         </el-option>
                       </el-select>
                       <el-input v-model="item.param"
+                                :placeholder="$t('scalar.placeHolderNumber')"
                                 v-if="conditions.hasValue.includes(item.condition)"
                                 @input="validateParam(item)"
                                 class="condition-param"></el-input>
@@ -141,19 +142,21 @@ limitations under the License.
               <el-button type="primary"
                          size="mini"
                          class="custom-btn green"
-                         :disabled="!step"
+                         :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
                          @click="control(0)">{{ $t('public.sure') }}</el-button>
             </div>
             <div class="btn-two">
               <el-button size="mini"
                          class="custom-btn white"
+                         :disabled="metadata.state==='running'|| metadata.state==='pending'"
                          @click="control(1)">{{$t('debugger.continue')}}</el-button>
               <el-button size="mini"
-                         class="custom-btn  white"
+                         class="custom-btn white"
                          :disabled="metadata.state!=='running'"
                          @click="control(3)">{{$t('debugger.pause')}}</el-button>
               <el-button size="mini"
-                         class="custom-btn  white"
+                         class="custom-btn white"
+                         :disabled="metadata.state==='pending'"
                          @click="terminate">{{$t('debugger.terminate')}}</el-button>
             </div>
           </div>
@@ -195,12 +198,13 @@ limitations under the License.
               <el-button type="primary"
                          size="mini"
                          class="custom-btn green"
-                         :disabled="!step"
+                         :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
                          @click="control(0)">{{ $t('public.sure') }}</el-button>
             </div>
             <div class="btn-two">
               <el-button size="mini"
                          class="custom-btn white"
+                         :disabled="metadata.state==='running'|| metadata.state==='pending'"
                          @click="control(1)">{{$t('debugger.continue')}}</el-button>
               <el-button size="mini"
                          class="custom-btn white"
@@ -208,6 +212,7 @@ limitations under the License.
                          @click="control(3)">{{$t('debugger.pause')}}</el-button>
               <el-button size="mini"
                          class="custom-btn white"
+                         :disabled="metadata.state==='pending'"
                          @click="terminate">{{$t('debugger.terminate')}}</el-button>
             </div>
           </div>
@@ -618,6 +623,20 @@ export default {
         if (res && res.data && res.data.tensor_value) {
           this.tensorCompareFlag = true;
           const tensorValue = res.data.tensor_value;
+          if (
+            tensorValue.diff &&
+            tensorValue.diff.includes('Too large to show')
+          ) {
+            this.tensorValue = [];
+            this.$nextTick(() => {
+              this.$refs.tensorValue.showRequestErrorMessage(
+                  this.$t('debugger.largeDataTip'),
+                  JSON.parse(row.shape),
+                  shape,
+              );
+            });
+            return;
+          }
           this.tensorValue = tensorValue.diff;
           if (
             this.tensorValue &&
@@ -804,11 +823,8 @@ export default {
       const params = {ascend, name, watch_point_id: this.curWatchPointId};
       RequestService.retrieveNodeByBfs(params).then(
           (res) => {
-            if (res.data && res.data.tensor_history) {
-              this.tableData = res.data.tensor_history;
-              this.dealTableData(this.tableData);
-            }
             if (res.data && res.data.graph && res.data.name) {
+              this.retrieveTensorHistory({name: res.data.name});
               const graph = res.data.graph;
               this.curLeafNodeName = res.data.name;
               this.nodeName = res.data.name;
@@ -910,7 +926,7 @@ export default {
       if (this.treeFlag) {
         this.querySingleNode({}, data.name, true);
       } else {
-        this.queryAllTreeData(data.name, false);
+        this.queryAllTreeData(data.name, true);
       }
     },
     /**
@@ -1013,7 +1029,8 @@ export default {
             this.tensorCompareFlag = true;
             if (res.data.tensor_value) {
               const value = res.data.tensor_value.value;
-              if (value === 'Too large to show') {
+              if (value.includes('Too large to show')) {
+                this.tensorValue = [];
                 this.$nextTick(() => {
                   this.$refs.tensorValue.showRequestErrorMessage(
                       this.$t('debugger.largeDataTip'),
@@ -2177,7 +2194,7 @@ export default {
       this.initContextMenu();
 
       if (this.selectedNode.name) {
-        this.selectNode(true);
+        this.selectNode(true, true);
       }
     },
     /**
@@ -2305,6 +2322,7 @@ export default {
         'Depend',
         'make_tuple',
         'tuple_getitem',
+        'ControlDepend',
       ];
 
       const dispatch = d3
@@ -4065,7 +4083,7 @@ export default {
                     width: 150px;
                   }
                   .condition-param {
-                    width: 100px;
+                    width: 120px;
                     margin-left: 10px;
                   }
                   .btn-wrap {

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

@@ -2092,6 +2092,15 @@ export default {
           selectedNode.type === 'aggregation_scope';
         this.selectedNode.count = selectedNode.subnode_count;
         const attrTemp = JSON.parse(JSON.stringify(selectedNode.attr || {}));
+        if (attrTemp.shape && attrTemp.shape.length) {
+          const shape = attrTemp.shape;
+          let str = '';
+          for (let i = 0; i < shape.length; i++) {
+            str += (str ? ',' : '') + JSON.stringify(shape[i]);
+          }
+          attrTemp.shape = str;
+        }
+
         this.selectedNode.info.attributes = Object.keys(attrTemp).map((key) => {
           return {
             name: key,

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

@@ -787,7 +787,7 @@ export default {
         }</td><td style="text-align:center;">${this.formateNUmber(
             hoveredItem.step,
         )}</td><td>${this.formateNUmber(
-            (hoveredItem.relative_time).toFixed(3),
+            (hoveredItem.relative_time).toFixed(0),
         )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
@@ -1268,8 +1268,8 @@ export default {
             : [];
         } else if (this.curAxisName === 1) {
           data = `${this.formateNUmber(
-              (filter[0].relative_time / 3600).toFixed(3),
-          )}h`;
+              (filter[0].relative_time).toFixed(0),
+          )}s`;
         } else {
           data = this.formateNUmber(filter[0].step);
         }

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

@@ -80,16 +80,16 @@ limitations under the License.
                             @click="barAllSelect"
                             class="select-all-button"
                             :class="[selectedAllBar ? 'checked-color' : 'button-text',
-                            (baseSelectOptions.length > barNameList.length)||!canSelected.length ? 'btn-disabled' : '']"
-                            :disabled="(baseSelectOptions.length > barNameList.length)||!canSelected.length">
+                            (baseOptions.length > searchOptions.length)||!canSelected.length ? 'btn-disabled' : '']"
+                            :disabled="(baseOptions.length > searchOptions.length)||!canSelected.length">
                       {{$t('public.selectAll')}}
                     </button>
                     <button type="text"
                             @click="barDeselectAll"
                             class="deselect-all-button"
                             :class="[!selectedAllBar ? 'checked-color' : 'button-text',
-                            (baseSelectOptions.length > barNameList.length)||!canSelected.length ? 'btn-disabled' : '']"
-                            :disabled="(baseSelectOptions.length > barNameList.length)||!canSelected.length">
+                            (baseOptions.length > searchOptions.length)||!canSelected.length ? 'btn-disabled' : '']"
+                            :disabled="(baseOptions.length > searchOptions.length)||!canSelected.length">
                       {{$t('public.deselectAll')}}
                     </button>
                   </div>
@@ -181,7 +181,7 @@ limitations under the License.
                             class="select-all-button"
                             :class="[selectCheckAll ? 'checked-color' : 'button-text',
                             basearr.length > checkOptions.length ? 'btn-disabled' : '']"
-                            :disabled="(basearr.length > checkOptions.length)||!canSelected.length">
+                            :disabled="basearr.length > checkOptions.length">
                       {{$t('public.selectAll')}}
                     </button>
                     <button type="text"
@@ -189,7 +189,7 @@ limitations under the License.
                             class="deselect-all-button"
                             :class="[!selectCheckAll ? 'checked-color' : 'button-text',
                             basearr.length > checkOptions.length ? 'btn-disabled' : '']"
-                            :disabled="(basearr.length > checkOptions.length)||!canSelected.length">
+                            :disabled="basearr.length > checkOptions.length">
                       {{$t('public.deselectAll')}}
                     </button>
                   </div>
@@ -517,6 +517,8 @@ export default {
   data() {
     return {
       // left data
+      searchOptions: [],
+      baseOptions: [],
       // Expand and collapse the left column
       collapse: false,
       showLeftChart: null,
@@ -577,7 +579,6 @@ export default {
       recordsNumber: 0,
       showNumber: 0,
       delayTime: 500,
-      otherDelayTime: 300,
       showEchartPic: true,
       hideRecord: false,
       hidenDirChecked: [],
@@ -726,7 +727,7 @@ export default {
                     setTimeout(() => {
                       this.setChartOfPie();
                       this.setChartOfBar();
-                    }, this.otherDelayTime);
+                    }, this.delayTime);
                   });
                 } else {
                   this.leftChartNoData();
@@ -965,6 +966,8 @@ export default {
         label: this.$t('modelTraceback.customOptions'),
         options: otherListOptions,
       };
+      this.baseOptions = mustSelectOptions.concat(otherListOptions);
+      this.searchOptions = this.baseOptions;
       // The displayed bar drop-down box content
       this.barNameList.push(nameObjMust, nameObjOther);
       // Save all the contents of the drop-down box
@@ -1011,6 +1014,9 @@ export default {
           itemWidth: 10,
           itemHeight: 10,
           itemGap: 10,
+          orient: 'vertical',
+          left: 'left',
+          top: 'bottom',
         },
         color: ['#6c91fb', '#7cdc9f', '#fc8b5d', '#f1689b', '#ab74ff'],
         series: [
@@ -1018,7 +1024,7 @@ export default {
             name: this.targetLabel,
             type: 'pie',
             radius: '55%',
-            center: ['50%', '60%'],
+            center: ['67%', '50%'],
             label: {alignTo: 'labelLine', formatter: '{c}({d}%)'},
             data: this.pieSeriesData,
             emphasis: {
@@ -2395,6 +2401,7 @@ export default {
       if (val === 'left') {
         // Parameter importance drop-down box
         this.barKeyWord = '';
+        this.searchOptions = this.baseOptions;
         this.barNameList = this.baseSelectOptions;
       } else {
         // Model traceability drop-down box on the right
@@ -2415,6 +2422,12 @@ export default {
           ? this.createFilter(queryString, restaurants)
           : restaurants;
         this.barNameList = results;
+        this.searchOptions = [];
+        const list = [];
+        results.forEach((item) => {
+          list.concat(item.options);
+        });
+        this.searchOptions = list;
       } else {
         // Model traceability drop-down box on the right
         const queryString = this.keyWord;
@@ -3162,7 +3175,7 @@ export default {
       padding: 10px 0 0px;
       height: 250px;
       #pie-chart {
-        width: 100%;
+        width: 368px;
         height: 200px;
       }
     }
@@ -3188,7 +3201,7 @@ export default {
         line-height: 32px;
       }
       #bar-chart {
-        width: 100%;
+        width: 368px;
         height: 220px;
       }
     }