!505 Optimized ui page initialization

Merge pull request !505 from 冯学峰/myMaster02

mindinsight/ui/src/views/train-manage/profiling-dashboard.vue

@@ -60,7 +60,8 @@ limitations under the License.
         </div>
         <div class="trace-container">
           <div id="trace"
-               class="training-trace">
+               class="training-trace"
+               :style="{height: svg.totalHeight + 'px'}">
             <svg version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  height="100%"
@@ -525,6 +526,10 @@ export default {
         }
       });
     },
+    /**
+     * router link
+     * @param { String } path  router path
+     */
     viewDetail(path) {
       this.$router.push({
         path,
@@ -535,6 +540,9 @@ export default {
         },
       });
     },
+    /**
+     * chart setOption
+     */
     setPieOption() {
       const option = {};
       option.tooltip = {
@@ -580,6 +588,9 @@ export default {
         this.pieChart.chartDom.resize();
       }, 10);
     },
+    /**
+     * init chart
+     */
     initPieChart() {
       const params = {};
       params.params = {
@@ -650,7 +661,8 @@ export default {
           (res) => {
             this.svg.initOver = true;
             if (
-              res.data &&
+              res &&
+            res.data &&
             res.data.training_trace_graph &&
             res.data.training_trace_graph.length
             ) {
@@ -677,14 +689,14 @@ export default {
                 this.tail_percent = '--';
               }
             } else {
-              document.querySelector('#trace').style.height = '0px';
+              this.svg.totalHeight = 0;
               this.svg.noData = true;
               this.svg.data = [];
               this.removeTrace();
             }
           },
           (error) => {
-            document.querySelector('#trace').style.height = '0px';
+            this.svg.totalHeight = 0;
             this.svg.noData = true;
             this.svg.data = [];
             this.svg.initOver = true;
@@ -740,9 +752,6 @@ export default {
         });
 
         this.svg.totalHeight += this.svg.rowPadding;
-        document.querySelector(
-            '#trace',
-        ).style.height = `${this.svg.totalHeight}px`;
         this.svg.data = JSON.parse(JSON.stringify(data));
 
         this.$nextTick(() => {
@@ -853,7 +862,7 @@ export default {
           break;
       }
 
-      const textContent = `${name}: ${data.duration.toFixed(4)}ms`;
+      const textContent = `${name}: ${this.toFixedFun(data.duration, 4)}ms`;
       const textWidth = this.getTextWidth(textContent);
       const normalSize = data.duration >= this.svg.minTime;
 
@@ -932,7 +941,7 @@ export default {
         data.duration === this.svg.totalTime
           ? this.$t('profiling.approximateTime')
           : ''
-      }${data.duration.toFixed(4)}ms`;
+      }${this.toFixedFun(data.duration, 4)}ms`;
       const textWidth = text.textContent
         ? this.getTextWidth(text.textContent)
         : 0;
@@ -1020,7 +1029,10 @@ export default {
             this.timelineInfo.initOver = true;
             if (res && res.data) {
               this.timelineInfo.noData = false;
-              this.timelineInfo.totalTime = res.data.total_time.toFixed(4);
+              this.timelineInfo.totalTime = this.toFixedFun(
+                  res.data.total_time,
+                  4,
+              );
               this.timelineInfo.streamNum = res.data.num_of_streams;
               this.timelineInfo.opNum = res.data.num_of_ops;
               this.timelineInfo.opTimes = res.data.op_exe_times;
@@ -1100,6 +1112,18 @@ export default {
       const timestamp = `${year}${mouth}${day}${hour}${minute}${second}${millisecond}`;
       return `timeline_${this.trainingJobId}_${this.currentCard}_${timestamp}.json`;
     },
+    /**
+     * Keep the number with n decimal places.
+     * @param {Number} num
+     * @param {Number} pow Number of decimal places
+     * @return {Number}
+     */
+    toFixedFun(num, pow) {
+      if (isNaN(num) || isNaN(pow) || !num || !pow) {
+        return num;
+      }
+      return Math.round(num * Math.pow(10, pow)) / Math.pow(10, pow);
+    },
   },
   destroyed() {
     window.removeEventListener('resize', this.resizeTrace, false);

mindinsight/ui/src/views/train-manage/step-trace.vue

@@ -57,7 +57,8 @@ limitations under the License.
     <div class="pf-content-middle">
       <div id="trace-container">
         <div id="trace"
-             class="training-trace">
+             class="training-trace"
+             :style="{height: svg.totalHeight + 'px'}">
           <svg version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                height="100%"
@@ -313,7 +314,7 @@ export default {
       };
       RequestService.targetTimeInfo(params).then(
           (res) => {
-            if (res.data && res.data.summary) {
+            if (res && res.data && res.data.summary) {
               const summary = res.data.summary;
               Object.keys(summary).forEach((val) => {
                 summary[val] = summary[val];
@@ -324,7 +325,7 @@ export default {
                 }
               });
             }
-            if (res.data && res.data.info) {
+            if (res && res.data && res.data.info) {
               if (res.data.size && !this.steps.max) {
                 this.steps.max = res.data.size;
                 this.steps.disabled = false;
@@ -439,7 +440,8 @@ export default {
           (res) => {
             this.svg.initOver = true;
             if (
-              res.data &&
+              res &&
+            res.data &&
             res.data.training_trace_graph &&
             res.data.training_trace_graph.length
             ) {
@@ -527,9 +529,6 @@ export default {
         });
 
         this.svg.totalHeight += this.svg.rowPadding;
-        document.querySelector(
-            '#trace',
-        ).style.height = `${this.svg.totalHeight}px`;
         this.svg.data = JSON.parse(JSON.stringify(data));
 
         this.$nextTick(() => {
@@ -640,7 +639,7 @@ export default {
           break;
       }
 
-      const textContent = `${name}: ${data.duration.toFixed(4)}ms`;
+      const textContent = `${name}: ${this.toFixedFun(data.duration, 4)}ms`;
       const textWidth = this.getTextWidth(textContent);
       const normalSize = data.duration >= this.svg.minTime;
 
@@ -719,7 +718,7 @@ export default {
         data.duration === this.svg.totalTime
           ? this.$t('profiling.approximateTime')
           : ''
-      }${data.duration.toFixed(4)}ms`;
+      }${this.toFixedFun(data.duration, 4)}ms`;
       const textWidth = text.textContent
         ? this.getTextWidth(text.textContent)
         : 0;
@@ -789,6 +788,18 @@ export default {
         this.svg.resizeTimer = null;
       }, 500);
     },
+    /**
+     * Keep the number with n decimal places.
+     * @param {Number} num
+     * @param {Number} pow Number of decimal places
+     * @return {Number}
+     */
+    toFixedFun(num, pow) {
+      if (isNaN(num) || isNaN(pow) || !num || !pow) {
+        return num;
+      }
+      return Math.round(num * Math.pow(10, pow)) / Math.pow(10, pow);
+    },
   },
   destroyed() {
     window.removeEventListener('resize', this.resizeTrace, false);

mindinsight/ui/src/views/train-manage/training-dashboard.vue

@@ -105,9 +105,14 @@ limitations under the License.
                v-show="!firstFloorNodes.length || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
-            <p class='no-data-text'>
+            <p v-if="initOverKey.graph"
+               class='no-data-text'>
               {{$t("public.noData")}}
             </p>
+            <p v-else
+               class='no-data-text'>
+              {{$t("public.dataLoading")}}
+            </p>
           </div>
         </div>
       </div>
@@ -124,9 +129,14 @@ limitations under the License.
                v-show="!showDatasetGraph || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
-            <p class='no-data-text'>
+            <p v-if="initOverKey.dataMap"
+               class='no-data-text'>
               {{$t("public.noData")}}
             </p>
+            <p v-else
+               class='no-data-text'>
+              {{$t("public.dataLoading")}}
+            </p>
           </div>
         </div>
       </div>
@@ -267,6 +277,8 @@ export default {
         image: false,
         tensor: false,
         scalar: false,
+        graph: false,
+        dataMap: false,
       },
     };
   },
@@ -405,6 +417,8 @@ export default {
                 image: true,
                 tensor: true,
                 scalar: true,
+                graph: true,
+                dataMap: true,
               };
               return;
             }
@@ -423,6 +437,8 @@ export default {
             this.dealTensorData(tensorTags);
             if (!this.firstFloorNodes.length && graphIds.length) {
               this.queryGraphData();
+            } else {
+              this.initOverKey.graph = true;
             }
           })
           .catch((error) => {
@@ -431,6 +447,8 @@ export default {
               image: true,
               tensor: true,
               scalar: true,
+              graph: true,
+              dataMap: true,
             };
             if (
               !error.response ||
@@ -575,7 +593,7 @@ export default {
         this.charOption = {};
         this.charData = [];
         this.curPageArr = [];
-        this.initOverKey.scalar=true;
+        this.initOverKey.scalar = true;
         return;
       }
       const params = {
@@ -590,7 +608,7 @@ export default {
             !res.data.train_jobs ||
             !res.data.train_jobs.length
             ) {
-              this.initOverKey.scalar=true;
+              this.initOverKey.scalar = true;
               return;
             }
             if (res.data && res.data.error_code) {
@@ -640,7 +658,7 @@ export default {
             }
           }, this.errorScalar)
           .catch((e) => {
-            this.initOverKey.scalar=true;
+            this.initOverKey.scalar = true;
           });
     },
     /**
@@ -1507,6 +1525,7 @@ export default {
           .dot(dot)
           .attributer(this.attributer)
           .render(() => {
+            this.initOverKey.graph = true;
             if (d3.select('#graph svg')) {
               d3.select('#graph svg').on('.zoom', null);
             }
@@ -1530,18 +1549,27 @@ export default {
       RequestService.queryGraphData(params)
           .then(
               (response) => {
-                if (response && response.data && response.data.nodes) {
+                if (
+                  response &&
+              response.data &&
+              response.data.nodes &&
+              response.data.nodes.length
+                ) {
                   const nodes = response.data.nodes;
-                  if (nodes && nodes.length) {
-                    this.packageDataToObject(nodes);
-                    const dot = this.packageGraphData();
-                    this.initGraph(dot);
-                  }
+                  this.packageDataToObject(nodes);
+                  const dot = this.packageGraphData();
+                  this.initGraph(dot);
+                } else {
+                  this.initOverKey.graph = true;
                 }
               },
-              (error) => {},
+              (error) => {
+                this.initOverKey.graph = true;
+              },
           )
-          .catch((e) => {});
+          .catch((e) => {
+            this.initOverKey.graph = true;
+          });
     },
     /**
      * Processes its own and corresponding child node data when expanding or closing namespaces.
@@ -1861,11 +1889,17 @@ export default {
                     const dot = this.packageDatasetGraph();
                     this.initDatasetGraph(dot);
                   }
+                } else {
+                  this.initOverKey.dataMap = true;
                 }
               },
-              (err) => {},
+              (err) => {
+                this.initOverKey.dataMap = true;
+              },
           )
-          .catch((e) => {});
+          .catch((e) => {
+            this.initOverKey.dataMap = true;
+          });
     },
     /**
      * Processing dataset Graph Data
@@ -1877,8 +1911,9 @@ export default {
       if (!data) {
         return;
       }
-      const key = `${parentKey ? parentKey + '/' : ''}${data.op_type ||
-        ''}_${index}`;
+      const key = `${parentKey ? parentKey + '/' : ''}${
+        data.op_type || ''
+      }_${index}`;
       const obj = {
         key: key,
         id: '',
@@ -1993,6 +2028,7 @@ export default {
      */
     afterinitDatasetGraph() {
       this.showDatasetGraph = true;
+      this.initOverKey.dataMap = true;
       if (d3.select('#dataMapGraph svg')) {
         d3.select('#dataMapGraph svg').on('.zoom', null);
       }
@@ -2003,9 +2039,7 @@ export default {
           this.datasetGraphviz = null;
         }
       }, 100);
-      d3.select('#dataMapGraph')
-          .selectAll('title')
-          .remove();
+      d3.select('#dataMapGraph').selectAll('title').remove();
     },
     /**
      * Query the cachee status of training jonb