UI add % after percentage parameter and add no data page display of debugger

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

@@ -30,21 +30,13 @@ limitations under the License.
             <div class="detection-judgment">
               <span>{{ $t('debugger.watchPoint') }}{{item.id}}</span>
               <span>{{ $t('symbols.colon') }}</span>
-              <span>{{ getFormateName(item.condition) }}</span>
+              <span>{{ $parent.transCondition(item.condition) }}</span>
             </div>
             <div class="reason"
                  v-for="(ele,key) in item.params"
                  :key="key">
               <div class="tensor-icon icon-secondary"></div>
-              <div class="tensor-content">
-                <span>{{ getFormateName(ele.name) }}</span>
-                <span>
-                  {{ $t('symbols.leftbracket') }}{{ $t('debugger.setValue') }}{{ $t('symbols.colon') }}{{ele.value}}
-                </span>
-                <span>
-                  {{ele.actual}}
-                </span>
-              </div>
+              <div class="tensor-content">{{ele.content}}</div>
             </div>
             <div class="hit-tip"
                  v-if="item.tip">
@@ -207,7 +199,12 @@ limitations under the License.
           </span>
         </div>
         <div id="tensor-graph"
-             class="deb-graph"></div>
+             class="deb-graph"
+             v-if="graphShow"></div>
+        <div class="nodata"
+             v-else-if="!graphShow">
+          {{ $t('public.noData') }}
+        </div>
         <div class="deb-tensor-info">
           <div class="tensor">
             <div class="tensor-title">{{$t('debugger.tensorMsg')}}</div>
@@ -236,9 +233,7 @@ limitations under the License.
                 <div class="watch-judgment">
                   <span>{{ $t('debugger.watchPoint') }}{{item.id}}</span>
                   <span>{{ $t('symbols.colon') }}</span>
-                  <span>
-                    {{ getFormateWatchPoint(item) }}
-                  </span>
+                  <span>{{ getFormateWatchPoint(item) }}</span>
                 </div>
               </div>
             </div>
@@ -265,6 +260,7 @@ export default {
       type: Object,
       default: () => {},
     },
+    formateWatchpointParams: Function,
   },
   data() {
     return {
@@ -296,6 +292,20 @@ export default {
       tuningAdviceTitle: '',
       watchPoints: [],
       callbackFun: null,
+      graphShow: true,
+      statisticsKeys: [
+        'name',
+        'overall_avg',
+        'overall_count',
+        'overall_max',
+        'overall_min',
+        'overall_nan_count',
+        'overall_neg_inf_count',
+        'overall_neg_zero_count',
+        'overall_pos_inf_count',
+        'overall_pos_zero_count',
+        'overall_zero_count',
+      ],
     };
   },
   computed: {
@@ -329,7 +339,8 @@ export default {
       };
       RequestService.getTensorGraphData(params).then(
           (res) => {
-            if (res && res.data && res.data.graph && res.data.graph.nodes) {
+            if (res && res.data && res.data.graph && res.data.graph.nodes && res.data.graph.nodes.length) {
+              this.graphShow = true;
               const nodes = JSON.parse(JSON.stringify(res.data.graph.nodes));
               this.tensorGraphData = {};
               nodes.forEach((node) => {
@@ -356,9 +367,20 @@ export default {
                   this.setNodeData();
                 }
               }
+            } else {
+              this.graphShow = false;
+              this.rightDataShow = false;
+              this.statisticsKeys.forEach((key) => {
+                this.statistics[key] = '--';
+              });
             }
           },
-          (err) => {},
+          (err) => {
+            this.graphShow = false;
+            this.statisticsKeys.forEach((key) => {
+              this.statistics[key] = '--';
+            });
+          },
       );
     },
     updateGraphData(graphName, tensorName) {
@@ -391,24 +413,17 @@ export default {
                     : '',
                 };
               });
+
+              const tensorAdvice = this.$t(`debugger.tensorTuningAdvice`);
               this.tensorList.forEach((item) => {
-                const tuning = item.condition;
-                const adviceData = this.$t(`debugger.tensorTuningAdvice`)[tuning];
-                if (adviceData === undefined) {
+                const tuning = tensorAdvice[item.condition];
+                if (!tuning) {
                   item.tuningAdviceTitle = this.$t(`debugger.noAdvice`);
                 } else {
-                  item.tuningAdviceTitle = this.$t(`debugger.tensorTuningAdvice`)[tuning][1];
-                  item.tuningAdvice = this.$t(`debugger.tensorTuningAdvice`)[tuning][2];
+                  item.tuningAdviceTitle = tuning[1];
+                  item.tuningAdvice = tuning[2];
                 }
-                item.params.forEach((element) => {
-                  if (element.actual_value === undefined || element.actual_value === null) {
-                    element.actual = this.$t('symbols.rightbracket');
-                  } else {
-                    element.actual = `, ${this.$t('debugger.actualValue')}${this.$t('symbols.colon')}${
-                      element.actual_value
-                    }${this.$t('symbols.rightbracket')}`;
-                  }
-                });
+                this.formateWatchpointParams(item.params);
               });
             } else {
               this.leftDataShow = false;
@@ -420,33 +435,13 @@ export default {
           },
       );
     },
-    getFormateName(watchName) {
-      const name = this.$parent.transCondition(watchName);
-      return name;
-    },
     getFormateWatchPoint(item) {
       let param = '';
-      if (item.params.length) {
-        item.params.forEach((i, ind) => {
-          const name = this.$parent.transCondition(i.name);
-          const actual =
-            i.actual_value === undefined || i.actual_value === null
-              ? ''
-              : `, ${this.$t('debugger.actualValue')}:${i.actual_value}`;
-          if (!ind) {
-            param += `${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${
-              i.value
-            }${actual}${this.$t('symbols.rightbracket')}`;
-          } else {
-            param += `, ${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${
-              i.value
-            }${actual}${this.$t('symbols.rightbracket')}`;
-          }
-        });
-        param = `(${param})`;
+      if (item.params && item.params.length) {
+        this.formateWatchpointParams(item.params);
+        param = item.params.map((i) => i.content).join('; ');
       }
-      const str = `${this.$parent.transCondition(item.condition)} ${param}`;
-      return str;
+      return `${this.$parent.transCondition(item.condition)} (${param})`;
     },
     packageData() {
       let nodeStr = '';
@@ -742,22 +737,9 @@ export default {
       d3.selectAll('#tensor-graph .edge').classed('selected', false);
       this.selectedNode = JSON.parse(JSON.stringify(this.tensorGraphData[this.selectedNode.name]));
 
-      const keys = [
-        'name',
-        'overall_avg',
-        'overall_count',
-        'overall_max',
-        'overall_min',
-        'overall_nan_count',
-        'overall_neg_inf_count',
-        'overall_neg_zero_count',
-        'overall_pos_inf_count',
-        'overall_pos_zero_count',
-        'overall_zero_count',
-      ];
       if (this.selectedNode.type === 'slot') {
         if (!(this.selectedNode.statistics && Object.keys(this.selectedNode.statistics).length)) {
-          keys.forEach((key) => {
+          this.statisticsKeys.forEach((key) => {
             this.statistics[key] = '--';
           });
         } else {
@@ -779,7 +761,7 @@ export default {
           this.rightDataShow = false;
         }
       } else {
-        keys.forEach((key) => {
+        this.statisticsKeys.forEach((key) => {
           this.statistics[key] = '--';
         });
         this.rightDataShow = false;
@@ -1338,6 +1320,11 @@ export default {
           cursor: pointer;
         }
       }
+      .nodata {
+        width: calc(100% - 375px);
+        text-align: center;
+        margin-top: 120px;
+      }
       .deb-graph {
         width: calc(100% - 375px);
         .edge {

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

@@ -1483,13 +1483,8 @@ export default {
                   let params = [];
                   if (j.watch_condition) {
                     item += ` ${this.transCondition(j.watch_condition.id)}`;
-                    params = (j.watch_condition.params || []).map((k) =>
-                      k.actual_value === undefined || k.actual_value === null
-                        ? `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}`
-                        : `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}, ${this.$t(
-                            'debugger.actualValue',
-                        )}:${k.actual_value}`,
-                    );
+                    this.formateWatchpointParams(j.watch_condition.params || []);
+                    params = JSON.parse(JSON.stringify(j.watch_condition.params));
                   }
                   obj.lists.push({
                     name: item,

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

@@ -218,7 +218,7 @@ limitations under the License.
                            :key="ind"
                            class="param">
                         <div class="tensor-icon"></div>
-                        {{j}}
+                        {{j.content}}
                       </div>
                       <div class="hit-tip"
                            v-if="i.tip">
@@ -459,6 +459,7 @@ limitations under the License.
     <div class="deb-con"
          v-if="tensorCompareFlag">
       <debugger-tensor :row="curRowObj"
+                       :formateWatchpointParams="formateWatchpointParams"
                        ref="deb-tensor"
                        @close="closeTensor"></debugger-tensor>
     </div>
@@ -468,7 +469,7 @@ limitations under the License.
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                class="creat-watch-point-dialog"
-               width="870px">
+               width="890px">
 
       <div class="conditions-container">
         <div class="condition-item"
@@ -525,6 +526,8 @@ limitations under the License.
                        :value="false">
             </el-option>
           </el-select>
+          <div class="percent-sign"
+               v-show="percentParams.includes(item.param.name)">%</div>
 
           <div class="inclusive-param"
                v-if="item.compositeParams.selections.length">
@@ -999,7 +1002,6 @@ export default {
           },
       );
     },
-    /** ************************ graph **********************/
 
     /**
      * Get watchpoint messages
@@ -1009,19 +1011,28 @@ export default {
     getWatchPointContent(item) {
       let param = '';
       if (item.params.length) {
-        item.params.forEach((i, ind) => {
-          const name = this.transCondition(i.name);
-          if (!ind) {
-            param += `${name}:${i.value}`;
-          } else {
-            param += `, ${name}:${i.value}`;
-          }
-        });
+        param = item.params
+            .map((i) => {
+              const name = this.transCondition(i.name);
+              const symbol = this.percentParams.includes(i.name) ? '%' : '';
+              return `${name} ${i.value + symbol}`;
+            })
+            .join(', ');
         param = `(${param})`;
       }
 
-      const str = `${this.$t('debugger.watchPoint')} ${item.id}: ${this.transCondition(item.condition)} ${param}`;
-      return str;
+      return `${this.$t('debugger.watchPoint')} ${item.id}: ${this.transCondition(item.condition)} ${param}`;
+    },
+    formateWatchpointParams(params = []) {
+      params.forEach((i) => {
+        const symbol = this.percentParams.includes(i.name) ? '%' : '';
+        let content = `${this.transCondition(i.name)}: ${this.$t('debugger.setValue')} ${i.value + symbol}`;
+        content +=
+          i.actual_value || i.actual_value === 0
+            ? `, ${this.$t('debugger.actualValue')} ${i.actual_value + symbol}`
+            : '';
+        i.content = content;
+      });
     },
     /** ************************ graph **********************/
 
@@ -1778,7 +1789,7 @@ export default {
                 .name {
                   .item-content {
                     display: inline-block;
-                    width: 310px;
+                    width: 300px;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
@@ -2182,6 +2193,11 @@ export default {
       margin-left: 10px;
       width: 200px;
     }
+    .percent-sign {
+      display: inline-block;
+      text-align: right;
+      width: 20px;
+    }
     .inclusive-param {
       text-align: right;
       .item {