!87 fix histogram tip issue and support fitting screen for data-map graph

Merge pull request !87 from 潘慧/r0.2

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

@@ -45,8 +45,8 @@
     "learningRate": "学习率",
     "modelSize": "模型大小",
     "dataProcess": "数据处理",
-    "noDataFound":"暂无满足筛选条件的数据",
-    "noDataTips":"请点击“显示全量数据”按钮查看全量数据",
+    "noDataFound": "暂无满足筛选条件的数据",
+    "noDataTips": "请点击“显示全量数据”按钮查看全量数据",
     "userDefined": "自定义数据",
     "metric": "度量指标",
     "deviceNum": "device数目"
@@ -56,8 +56,8 @@
     "key": "KEY",
     "value": "VALUE",
     "dataTraceTips": "该数据涉及合并操作",
-    "noDataFound":"暂无满足筛选条件的数据",
-    "noDataTips":"请点击“显示全量数据”按钮查看全量数据"
+    "noDataFound": "暂无满足筛选条件的数据",
+    "noDataTips": "请点击“显示全量数据”按钮查看全量数据"
   },
   "trainingDashboard": {
     "trainingDashboardTitle": "训练看板",
@@ -66,7 +66,8 @@
     "trainingScalar": "训练标量信息",
     "samplingData": "数据抽样",
     "imagesampleSwitch": "切换标签",
-    "invalidId": "无效的训练作业"
+    "invalidId": "无效的训练作业",
+    "summaryDirPath": "summary路径："
   },
   "scalar": {
     "titleText": "标量",
@@ -120,6 +121,7 @@
   "graph": {
     "titleText": "计算图",
     "downloadPic": "下载",
+    "fitScreen": "适应屏幕",
     "nodeInfo": "节点信息",
     "legend": "图例",
     "nameSpace": "命名空间",

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

@@ -46,6 +46,9 @@ limitations under the License.
               <div :title="$t('graph.fullScreen')"
                    class="full-screen-button"
                    @click="fullScreen = !fullScreen"></div>
+              <div :title="$t('graph.fitScreen')"
+                   class="fit-screen"
+                   @click="fit()"></div>
             </div>
             <!-- Right column -->
             <div id="sidebar"
@@ -340,6 +343,7 @@ export default {
      * Initialization method executed after the graph rendering is complete
      */
     startApp() {
+      this.initZooming();
       const nodes = d3.selectAll('g.node, g.cluster');
       nodes.on('click', (target, index, nodesList) => {
         this.selectNodeInfo(target);
@@ -347,9 +351,109 @@ export default {
         nodes.classed('selected', false);
         d3.select(`g[id="${selectedNode.id}"]`).classed('selected', true);
       });
-      d3.select('svg').on('dblclick.zoom', null);
     },
 
+    /**
+     * Initializing the Zoom Function of a Graph
+     */
+    initZooming() {
+      const graphDom = document.querySelector('#graph0');
+      const graphBox = graphDom.getBBox();
+      const padding = 4;
+      const pointer = {
+        start: {
+          x: 0,
+          y: 0,
+        },
+        end: {
+          x: 0,
+          y: 0,
+        },
+      };
+      const zoom = d3
+          .zoom()
+          .on('start', (target) => {
+            pointer.start.x = event.x;
+            pointer.start.y = event.y;
+          })
+          .on('zoom', (target) => {
+            const transformData = this.getTransformData(graphDom);
+            let tempStr = '';
+            let change = {};
+            let scale = transformData.scale[0];
+            const graphRect = graphDom.getBoundingClientRect();
+            const mapping = {
+              width: graphBox.width / graphRect.width,
+              height: graphBox.height / graphRect.height,
+            };
+            if (event.type === 'mousemove') {
+              pointer.end.x = event.x;
+              pointer.end.y = event.y;
+              change = {
+                x: (pointer.end.x - pointer.start.x) * mapping.width * scale,
+                y: (pointer.end.y - pointer.start.y) * mapping.height * scale,
+              };
+              pointer.start.x = pointer.end.x;
+              pointer.start.y = pointer.end.y;
+            } else if (event.type === 'wheel') {
+              const wheelDelta = event.wheelDelta;
+              const rate = Math.abs(wheelDelta / 100);
+              scale =
+              wheelDelta > 0
+                ? transformData.scale[0] * rate
+                : transformData.scale[0] / rate;
+              scale = Math.max(this.scaleRange[0], scale);
+              scale = Math.min(this.scaleRange[1], scale);
+              change = {
+                x:
+                (graphRect.x + padding / mapping.width - event.x) *
+                mapping.width *
+                (scale - transformData.scale[0]),
+                y:
+                (graphRect.bottom - padding / mapping.height - event.y) *
+                mapping.height *
+                (scale - transformData.scale[0]),
+              };
+            }
+            tempStr = `translate(${transformData.translate[0] +
+            change.x},${transformData.translate[1] +
+            change.y}) scale(${scale})`;
+            graphDom.setAttribute('transform', tempStr);
+          });
+
+      const svg = d3.select('svg');
+      svg.on('.zoom', null);
+      svg.call(zoom);
+      svg.on('dblclick.zoom', null);
+    },
+    /**
+     * Obtains the transform data of a node.
+     * @param {Object} node Node dom data
+     * @return {Object} transform data of a node
+     */
+    getTransformData(node) {
+      if (!node) {
+        return [];
+      }
+      const transformData = node.getAttribute('transform');
+      const attrObj = {};
+      if (transformData) {
+        const lists = transformData.trim().split(' ');
+        lists.forEach((item) => {
+          const index1 = item.indexOf('(');
+          const index2 = item.indexOf(')');
+          const name = item.substring(0, index1);
+          const params = item
+              .substring(index1 + 1, index2)
+              .split(',')
+              .map((i) => {
+                return parseFloat(i) || 0;
+              });
+          attrObj[name] = params;
+        });
+      }
+      return attrObj;
+    },
     /**
      * Process the selected node information.
      * @param {Object} target Selected Object
@@ -397,6 +501,15 @@ export default {
         });
       }
     },
+    /**
+     * Adapt to the screen
+     */
+    fit() {
+      const graphDom = document.getElementById('graph0');
+      const box = graphDom.getBBox();
+      const str = `translate(${-box.x},${-box.y}) scale(1)`;
+      graphDom.setAttribute('transform', str);
+    },
     /**
      * Collapse on the right
      */
@@ -511,10 +624,21 @@ export default {
           cursor: pointer;
           width: 12px;
           height: 12px;
-          z-index: 999;
+          z-index:999;
           display: inline-block;
           background-image: url('../../assets/images/full-screen.png');
         }
+        .fit-screen {
+          position: absolute;
+          width: 16px;
+          height: 14px;
+          right: 32px;
+          top: 10px;
+          z-index:999;
+          cursor: pointer;
+          display: inline-block;
+          background-image: url('../../assets/images/fit.png');
+        }
       }
     }
     .cl-data-map.full-screen {

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

@@ -1010,6 +1010,10 @@ export default {
           source = node.name;
           for (let i = 0; i < Math.min(5, keys.length); i++) {
             target = keys[i];
+            isConst = !!(
+              this.allGraphData[keys[i]] &&
+              this.allGraphData[keys[i]].type === 'Const'
+            );
             const nodeStr = isConst
               ? `shape="circle";width="0.14";height="0.14";fixedsize=true;` +
                 `label="${target.split('/').pop()}\n\n\n";`

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

@@ -138,6 +138,8 @@ export default {
       zrDrawElement: {hoverDots: []},
       chartTipFlag: false,
       charResizeTimer: null,
+      changeAxisTimer: null,
+      changeViewTimer: null,
     };
   },
   computed: {
@@ -394,19 +396,29 @@ export default {
      * @param {Number} val Current mode
      */
     timeTypeChange(val) {
+      if (this.changeAxisTimer) {
+        clearTimeout(this.changeAxisTimer);
+      }
+      this.changeAxisTimer = setTimeout(() => {
         this.curPageArr.forEach((item) => {
           this.updateSampleData(item);
         });
+      }, 500);
     },
     /**
      * The view display type is changed
      * @param {Number} val Current mode
      */
     viewTypeChange(val) {
+      if (this.changeViewTimer) {
+        clearTimeout(this.changeViewTimer);
+      }
+      this.changeViewTimer = setTimeout(() => {
         this.curPageArr.forEach((item) => {
           this.formatDataToChar(item);
           this.updateSampleData(item);
         });
+      }, 200);
     },
     /**
      * Update the data list based on the filtered tags
@@ -996,7 +1008,9 @@ export default {
         const z = this.getValue(rawData, dataIndex, i++);
         const pt = getCoord([x, y], sampleObject);
         // linear map in z axis
+        if (maxZ !== minZ) {
           pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight;
+        }
         points.push(pt);
       }
       return points;

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

@@ -21,6 +21,12 @@ limitations under the License.
       <div class="cl-dashboard-top-title">
         {{$t('trainingDashboard.trainingDashboardTitle')}}
       </div>
+      <div class="path-message">
+        <span>{{$t('symbols.leftbracket')}}</span>
+        <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+        <span>{{summaryPath}}</span>
+        <span>{{$t('symbols.rightbracket')}}</span>
+      </div>
     </div>
     <div class="cl-dashboard-center">
       <div class="cl-dashboard-con-up"
@@ -166,6 +172,7 @@ export default {
     return {
       // training job id
       trainingJobId: '',
+      summaryPath: '',
       defColorCount: CommonProperty.commonColorArr.length, // default color
       colorNum: 0,
       charObj: null,
@@ -284,6 +291,7 @@ export default {
     init() {
       if (this.$route.query && this.$route.query.id) {
         this.trainingJobId = this.$route.query.id;
+        this.summaryPath = decodeURIComponent(this.trainingJobId);
       } else {
         this.trainingJobId = '';
         this.$message.error(this.$t('trainingDashboard.invalidId'));
@@ -1720,6 +1728,12 @@ export default {
     height: 56px;
     vertical-align: middle;
     background: #ffffff;
+    .path-message {
+      display: inline-block;
+      line-height: 20px;
+      padding: 18px 16px;
+      font-weight: bold;
+    }
     .cl-dashboard-top-title {
       float: left;
       color: #000000;