In order to optimize performance, limit the number of Tensor columns to no more than 1000 columns

mindinsight/ui/src/components/debugger-grid-table-simple.vue

@@ -124,6 +124,12 @@ export default {
       type: String,
       default: 'value',
     },
+    // Maximum number of columns
+    // If the value is less then 0, there is no maximun value.
+    columnLimitNum: {
+      type: Number,
+      default: -1,
+    },
   },
   data() {
     return {
@@ -446,8 +452,9 @@ export default {
       let filterCorrect = true;
       let incorrectData = false;
       let limitCount = 2;
+      const indexArr = [];
       const tempArr = [];
-      this.filterArr.forEach((filter) => {
+      this.filterArr.forEach((filter, index) => {
         let value = filter.model.trim();
         if (!isNaN(value)) {
           if (value < -(filter.max + 1) || value > filter.max || value === '' || value % 1) {
@@ -458,6 +465,7 @@ export default {
             value = Number(value);
           }
         } else if (value.indexOf(':') !== -1) {
+          indexArr.push(index);
           const tempResult = this.checkCombinatorialInput(filter);
           if (tempResult) {
             filter.showError = false;
@@ -476,6 +484,22 @@ export default {
         }
         tempArr.push(value);
       });
+      if (indexArr.length) {
+        const lastIndex = indexArr.pop();
+        const filterItem = this.filterArr[lastIndex];
+        if (
+          this.columnLimitNum > 0 &&
+          filterItem &&
+          !filterItem.showError &&
+          filterItem.max >= this.columnLimitNum
+        ) {
+          const result = this.checkFilterLimitOver(filterItem);
+          if (result) {
+            filterItem.showError = true;
+            filterCorrect = false;
+          }
+        }
+      }
       this.filterCorrect = filterCorrect;
       if (incorrectData && filterCorrect) {
         this.incorrectData = true;
@@ -488,6 +512,24 @@ export default {
         this.$emit('martixFilterChange', tempArr);
       }
     },
+    /**
+     * Check filter input limit
+     * @param {Object} filter Filter item
+     * @return {Boolean} Filter over limit
+     */
+    checkFilterLimitOver(filter) {
+      let result = false;
+      const value = filter.model.trim();
+      const tempArr = value.split(':');
+      let startValue = tempArr[0] ? tempArr[0] : 0;
+      let endValue = tempArr[1] ? tempArr[1] : filter.max + 1;
+      startValue = startValue < 0 ? filter.max + Number(startValue) + 1 : Number(startValue);
+      endValue = endValue < 0 ? filter.max + Number(endValue) + 1 : Number(endValue);
+      if ((endValue - startValue) > this.columnLimitNum) {
+        result = true;
+      }
+      return result;
+    },
     /**
      * Check combinatorial input
      * @param {Object} filter Filter item

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

@@ -135,13 +135,13 @@ limitations under the License.
           <div class="deb-slide-width">
             <el-slider v-model="tolerance"
                        :format-tooltip="formatTolenrance"
-                       @change="tensorComparisons(curRowObj,dims)"
+                       @change="tensorComparisons(curRowObj,dims,true)"
                        @input="toleranceInputChange()"></el-slider>
           </div>
           <div class="deb-slide-input">
             <el-input v-model="toleranceInput"
                       @input="toleranceValueChange"
-                      @keyup.native.enter="tensorComparisons(curRowObj,dims)"></el-input>
+                      @keyup.native.enter="tensorComparisons(curRowObj,dims,true)"></el-input>
           </div>
         </div>
         <div class="deb-con-slide-middle">
@@ -156,6 +156,7 @@ limitations under the License.
           <debuggerGridTable v-if="gridType==='value'"
                              :fullData="tensorValue"
                              :showFilterInput="showFilterInput"
+                             :columnLimitNum="columnLimitNum"
                              ref="tensorValue"
                              gridType="value"
                              @martixFilterChange="tensorFilterChange($event)">
@@ -163,6 +164,7 @@ limitations under the License.
           <debuggerGridTable v-else-if="gridType==='preStep'"
                              :fullData="tensorValue"
                              :showFilterInput="showFilterInput"
+                             :columnLimitNum="columnLimitNum"
                              ref="tensorValue"
                              gridType="value"
                              @martixFilterChange="tensorFilterChange($event)">
@@ -170,6 +172,7 @@ limitations under the License.
           <debuggerGridTable v-else
                              :fullData="tensorValue"
                              :showFilterInput="showFilterInput"
+                             :columnLimitNum="columnLimitNum"
                              ref="tensorValue"
                              gridType="compare"
                              @martixFilterChange="tensorFilterChange($event)">
@@ -326,6 +329,7 @@ export default {
       ],
       loadingInstance: {},
       initOver: false,
+      columnLimitNum: 1000, // Maximum number of columns is 1000
     };
   },
   computed: {
@@ -955,17 +959,18 @@ export default {
     tabChange(gridType) {
       this.gridType = gridType;
       if (this.gridType === 'compare') {
-        this.tensorComparisons(this.curRowObj, this.dims);
+        this.tensorComparisons(this.curRowObj, this.dims, true);
       } else {
-        this.viewValueDetail(this.curRowObj, this.dims);
+        this.viewValueDetail(this.curRowObj, this.dims, true);
       }
     },
     /**
      * Query tensor Comparison data
      * @param { Object } row current clickd tensor value data
      * @param { Object } dims dims
+     * @param { Boolean } loadingFlag Whether to show loading
      */
-    tensorComparisons(row, dims) {
+    tensorComparisons(row, dims, loadingFlag = false) {
       const shape = dims
         ? dims
         : JSON.stringify(
@@ -973,6 +978,9 @@ export default {
                 .map((val, index) => {
                 // The default parameter format of shape is that the last two digits are:. The front is all 0
                   if (index < 2) {
+                    if (index === 0 && val > this.columnLimitNum) {
+                      return `0:${this.columnLimitNum}`;
+                    }
                     return ':';
                   } else {
                     return 0;
@@ -987,6 +995,9 @@ export default {
         tolerance: this.tolerance / 100,
         graph_name: row.graph_name,
       };
+      if (loadingFlag) {
+        this.loadingInstance = this.$loading(this.loadingOption);
+      }
       RequestService.tensorComparisons(params).then(
           (res) => {
             if (res && res.data && res.data.tensor_value) {
@@ -1040,17 +1051,18 @@ export default {
     tensorFilterChange(data) {
       this.dims = `[${data.toString()}]`;
       if (this.gridType === 'compare') {
-        this.tensorComparisons(this.curRowObj, this.dims);
+        this.tensorComparisons(this.curRowObj, this.dims, true);
       } else {
-        this.viewValueDetail(this.curRowObj, this.dims);
+        this.viewValueDetail(this.curRowObj, this.dims, true);
       }
     },
     /**
      * Query tensor value data
      * @param {Object} row current row data
      * @param { String } dims
+     * @param { Boolean } loadingFlag Whether to show loading
      */
-    viewValueDetail(row, dims) {
+    viewValueDetail(row, dims, loadingFlag = false) {
       const shape = dims
         ? dims
         : JSON.stringify(
@@ -1058,6 +1070,9 @@ export default {
                 .map((val, index) => {
                 // The default parameter format of shape is that the last two digits are:. The front is all 0
                   if (index < 2) {
+                    if (index === 0 && val > this.columnLimitNum) {
+                      return `0:${this.columnLimitNum}`;
+                    }
                     return ':';
                   } else {
                     return 0;
@@ -1072,6 +1087,9 @@ export default {
         graph_name: row.graph_name,
         prev: this.gridType === 'preStep' ? true : false,
       };
+      if (loadingFlag) {
+        this.loadingInstance = this.$loading(this.loadingOption);
+      }
       RequestService.tensors(params).then(
           (res) => {
             if (row.shape === '[]') {

mindinsight/ui/src/components/grid-table-simple.vue

@@ -38,7 +38,7 @@ limitations under the License.
            @keyup.enter="filterChange">
         <div class="filter-input-title">{{$t('components.dimsFilterInputTitle')}}
           <span :title="$t('components.dimsFilterInputTip')"
-                class="el-icon-warning"></span>
+                class="el-icon-info"></span>
         </div>
         <div v-for="(item, itemIndex) in filterArr"
              :key="itemIndex">
@@ -70,7 +70,7 @@ limitations under the License.
         </el-select>
         {{$t('components.gridAccuracy')}}
         <span :title="$t('components.accuracyTips')"
-              class="el-icon-warning"></span>
+              class="el-icon-info"></span>
         <el-select v-model="accuracy"
                    class="select-item"
                    @change="accuracyChange">
@@ -118,6 +118,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    // Maximum number of columns
+    // If the value is less then 0, there is no maximun value.
+    columnLimitNum: {
+      type: Number,
+      default: -1,
+    },
   },
   data() {
     return {
@@ -373,8 +379,9 @@ export default {
       let filterCorrect = true;
       let incorrectData = false;
       let limitCount = 2;
+      const indexArr = [];
       const tempArr = [];
-      this.filterArr.forEach((filter) => {
+      this.filterArr.forEach((filter, index) => {
         let value = filter.model.trim();
         if (!isNaN(value)) {
           if (
@@ -390,6 +397,7 @@ export default {
             value = Number(value);
           }
         } else if (value.indexOf(':') !== -1) {
+          indexArr.push(index);
           const tempResult = this.checkCombinatorialInput(filter);
           if (tempResult) {
             filter.showError = false;
@@ -408,6 +416,22 @@ export default {
         }
         tempArr.push(value);
       });
+      if (indexArr.length) {
+        const lastIndex = indexArr.pop();
+        const filterItem = this.filterArr[lastIndex];
+        if (
+          this.columnLimitNum > 0 &&
+          filterItem &&
+          !filterItem.showError &&
+          filterItem.max >= this.columnLimitNum
+        ) {
+          const result = this.checkFilterLimitOver(filterItem);
+          if (result) {
+            filterItem.showError = true;
+            filterCorrect = false;
+          }
+        }
+      }
       this.filterCorrect = filterCorrect;
       if (incorrectData && filterCorrect) {
         this.incorrectData = true;
@@ -420,6 +444,24 @@ export default {
         this.$emit('martixFilterChange', tempArr);
       }
     },
+    /**
+     * Check filter input limit
+     * @param {Object} filter Filter item
+     * @return {Boolean} Filter over limit
+     */
+    checkFilterLimitOver(filter) {
+      let result = false;
+      const value = filter.model.trim();
+      const tempArr = value.split(':');
+      let startValue = tempArr[0] ? tempArr[0] : 0;
+      let endValue = tempArr[1] ? tempArr[1] : filter.max + 1;
+      startValue = startValue < 0 ? filter.max + Number(startValue) + 1 : Number(startValue);
+      endValue = endValue < 0 ? filter.max + Number(endValue) + 1 : Number(endValue);
+      if ((endValue - startValue) > this.columnLimitNum) {
+        result = true;
+      }
+      return result;
+    },
     /**
      * Check combinatorial input
      * @param {Object} filter Filter item

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

@@ -475,7 +475,7 @@
     "gridTableNoData": "No data in the table.",
     "value": "Value",
     "dimsFilterInputTitle": "Dimension Selection",
-    "dimsFilterInputTip": "The dimension value can be a specific index (consistent with the Python index meaning and supporting negative signs) or a colon (:) that indicates all values of the current dimension.",
+    "dimsFilterInputTip": "The dimension value can be a specific index (consistent with the Python index meaning and supporting negative signs) or a colon (:) that indicates all values of the current dimension.The number of Tensor columns does not exceed 1,000, and the total number does not exceed 100,000.",
     "category": "Type",
     "scientificCounting": "Scientific notation",
     "accuracyTips": "If a value is not completely displayed, drag a border of the table header to resize."

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

@@ -474,7 +474,7 @@
     "gridTableNoData": "表格无数据",
     "value": "数值",
     "dimsFilterInputTitle": "维度选择",
-    "dimsFilterInputTip": "维度输入值可以是具体的索引（和Python的索引含义一致，支持负号）或者冒号\":\"，其中冒号\":\"表示当前维度的所有值",
+    "dimsFilterInputTip": "维度输入值可以是具体的索引（和Python的索引含义一致，支持负号）或者冒号\":\"，其中冒号\":\"表示当前维度的所有值。Tensor列数不超过1000列，且总个数不超过10万。",
     "category": "分类",
     "scientificCounting": "科学计数",
     "accuracyTips": "如果数值展示不全，可以拖拽表头的分隔线查看"

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

@@ -118,6 +118,7 @@ limitations under the License.
                                    :fullScreen="sampleItem.fullScreen"
                                    @martixFilterChange="filterChange($event, sampleItem)"
                                    @toggleFullScreen="toggleFullScreen(sampleItem)"
+                                   :columnLimitNum="columnLimitNum"
                                    :fullData="sampleItem.curData"></gridTableComponents>
               <histogramUntil v-else
                               :ref="sampleItem.ref"
@@ -209,6 +210,7 @@ export default {
       curViewName: 1, // Current histogram view type
       curAxisName: 0, // Current histogran axis type
       chartTipFlag: false, // Wheather to display tips of the histogram
+      columnLimitNum: 1000, // Maximum number of columns is 1000
     };
   },
   computed: {},
@@ -456,6 +458,13 @@ export default {
       for (let i = 0; i < array.length; i++) {
         tempArr.push(i >= countLinit ? ':' : '0');
       }
+      if (tempArr.length) {
+        const lastIndex = tempArr.length - 1;
+        const lastFilter = tempArr[lastIndex];
+        if (lastFilter && array[lastIndex] > this.columnLimitNum) {
+          tempArr[lastIndex] = `0:${this.columnLimitNum}`;
+        }
+      }
       return `[${tempArr.toString()}]`;
     },
     /**