!360 Modify the problem of the operator name in the pie chart not completely displayed

Merge pull request !360 from 黄伟锋/r0.5

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

@@ -252,7 +252,7 @@
         "desc"
       ],
       "url": [
-        "https://www.mindspore.cn/tutorial/zh-CN/master/advanced_use/visualization_tutorials.html"
+        "https://www.mindspore.cn/tutorial/zh-CN/master/advanced_use/performance_profiling.html"
       ]
     },
     "step_trace-proposer_type_label": {

mindinsight/ui/src/views/train-manage/data-process.vue

@@ -70,14 +70,15 @@ limitations under the License.
           <div class="cell-container device_queue_op"
                @click="highlight('device_queue_op')"
                clickKey="device_queue_op"
+               :style="{cursor: processSummary.count !== processSummary.maxCount ? 'default' : 'pointer'}"
                v-show="!processSummary.noData">
             <div class="title">
-              {{$t('profiling.deviceQueueOpTip')}}
+              {{$t('profiling.deviceQueueOp')}}
             </div>
           </div>
 
           <div class="queue-container"
-               v-show="processSummary.count === 6 && !processSummary.noData">
+               v-show="processSummary.count === processSummary.maxCount && !processSummary.noData">
             <div class="img">
               <div class="edge">
                 <img src="@/assets/images/data-flow.png"
@@ -116,7 +117,7 @@ limitations under the License.
           <div class="cell-container get-next"
                @click="highlight('get_next')"
                clickKey="get_next"
-               v-if="processSummary.count === 6 && !processSummary.noData">
+               v-if="processSummary.count === processSummary.maxCount && !processSummary.noData">
             <div class="title">
               {{$t('profiling.getData')}}
             </div>
@@ -126,7 +127,7 @@ limitations under the License.
              v-if="!(connectQueueChart.noData && dataQueueChart.noData && deviceQueueOpChart
              && getNextChart.getNextChart)">
           <div class="queue-step-wrap"
-               v-if="processSummary.count === 6">
+               v-if="processSummary.count === processSummary.maxCount">
             <div class="title">{{$t('profiling.queueStep')}}</div>
             <div class="chart-content">
               <div class="chart-wrap"
@@ -164,7 +165,7 @@ limitations under the License.
             </div>
           </div>
           <div class="queue-step-wrap"
-               v-if="processSummary.count === 6">
+               v-if="processSummary.count === processSummary.maxCount">
             <div class="title">{{$t('profiling.operatorTimeConAnalysis')}}</div>
             <div class="chart-content second">
               <div class="chart-wrap analysis"
@@ -202,7 +203,7 @@ limitations under the License.
             </div>
           </div>
           <div class="queue-step-wrap single"
-               v-if="processSummary.count !== 6">
+               v-if="processSummary.count !== processSummary.maxCount">
             <div class="title">{{$t('profiling.queueStep')}}</div>
             <div class="chart-content">
               <div class="chart-wrap"
@@ -344,6 +345,7 @@ export default {
       processSummary: {
         noData: true,
         count: 6,
+        maxCount: 6,
         device: {
           empty: 0,
           full: 0,
@@ -530,7 +532,6 @@ export default {
         xAxis: {
           name: 'step',
           data: [],
-          max: size,
         },
         yAxis: {},
         series: [],
@@ -605,7 +606,7 @@ export default {
 
               this.dealProcess(data);
               this.$nextTick(() => {
-                if (this.processSummary.count < 6) {
+                if (this.processSummary.count < this.processSummary.maxCount) {
                   this.queryQueueInfo(this.connectQueueChart);
                 } else {
                   this.queryQueueInfo(this.connectQueueChart);
@@ -820,7 +821,6 @@ export default {
                 data.sample_interval
               }ms`,
               data: dataY.map((val, index) => index + 1),
-              max: dataY.length,
             },
             yAxis: {
               name: '',
@@ -855,6 +855,12 @@ export default {
       });
     },
     highlight(key) {
+      if (
+        key === 'device_queue_op' &&
+        this.processSummary.count !== this.processSummary.maxCount
+      ) {
+        return;
+      }
       const domList = document.querySelectorAll('.md-top *[clickKey]');
       Array.prototype.forEach.call(domList, (dom) => {
         if (dom.getAttribute('clickKey') === key) {

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

@@ -818,7 +818,7 @@ export default {
           itemHeight: 18,
           padding: [0, 50, 0, 0],
           top: '5%',
-          left: '37%',
+          left: '45%',
           textStyle: {
             padding: [15, 0, 0, 0],
             rich: {
@@ -850,9 +850,9 @@ export default {
         option.series = [
           {
             type: 'pie',
-            center: ['20%', '60%'],
+            center: ['25%', '65%'],
             data: chart.data,
-            radius: '60%',
+            radius: '50%',
             lable: {
               position: 'outer',
               alignTo: 'none',
@@ -1095,10 +1095,10 @@ export default {
     margin-bottom: 10px;
   }
   .cl-profiler-top {
-    height: 36%;
+    height: 45%;
   }
   .cl-profiler-bottom {
-    height: 64%;
+    height: 55%;
     padding-top: 10px;
   }
   .cpu-tab {
@@ -1127,6 +1127,7 @@ export default {
       height: 100%;
       min-width: 1300px;
       min-height: 232px;
+      overflow: hidden;
     }
   }
   .chart-radio-group {

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

@@ -191,7 +191,7 @@ limitations under the License.
           </div>
 
           <div class="queue-container"
-               v-if="processSummary.count === 6">
+               v-if="processSummary.count === processSummary.maxCount">
             <div class="img">
               <div class="edge">
                 <img src="@/assets/images/data-flow.png"
@@ -229,7 +229,7 @@ limitations under the License.
 
           <div class="cell-container get-next"
                clickKey="get_next"
-               v-if="processSummary.count === 6">
+               v-if="processSummary.count === processSummary.maxCount">
             <div class="title">
               {{$t('profiling.getData')}}
             </div>
@@ -390,6 +390,7 @@ export default {
       processSummary: {
         noData: true,
         count: 6,
+        maxCount: 6,
         device: {
           empty: 0,
           full: 0,

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

@@ -1674,7 +1674,7 @@ export default {
         tempOption.visualMap['pieces'] &&
         tempOption.visualMap['pieces'].length > 0
       ) {
-        tempOption.visualMap = false;
+        tempOption.visualMap = null;
         tempOption.series[0].markLine = null;
         sampleObject.charObj.setOption(tempOption, true);
 
@@ -1810,7 +1810,7 @@ export default {
             tempCharOption.visualMap['pieces'] &&
             tempCharOption.visualMap['pieces'].length > 0
             ) {
-              tempCharOption.visualMap = false;
+              tempCharOption.visualMap = null;
               tempCharOption.series[0].markLine = null;
               tempCharOption.series[0].lineStyle.color = sampleItem.colors;
             }