!89 UI fix histogram and data-map issue

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

mindinsight/ui/public/index.html

@@ -21,7 +21,7 @@ limitations under the License.
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="icon" href="<%= BASE_URL %>/static/img/favicon.ico" />
+  <link rel="icon" href="<%= BASE_URL %>/static/img/favicon.png" />
   <title>MindInsight</title>
   <style>
     .errorInfo {

mindinsight/ui/src/common/common-property.js

@@ -96,4 +96,14 @@ export default {
     '.edge.highlighted path {stroke: red;}.edge.highlighted polygon {' +
     'stroke: red;fill: red;}' +
     '.edge.highlighted marker path {fill: red;}</style>',
+  dataMapDownloadStyle: '<style> #graph0 > polygon { fill: transparent; }' +
+    '.node, .cluster { cursor: pointer; }' +
+    '.selected { polygon, ellipse { stroke: red !important; stroke-width: 2px; } }' +
+    '.CreatDataset > polygon, .Operator > ellipse { stroke: #58a4e0; fill: #d1ebff; }' +
+    '.cluster > polygon { fill: #c1f5d5; stroke: #56b077; }' +
+    '.RepeatDataset > polygon { stroke: #fdca5a; fill: #fff2d4; }' +
+    '.ShuffleDataset > polygon { stroke: #f79666; fill: #fed78e; }' +
+    '.BatchDataset > polygon { stroke: #fa8e5a; fill: #ffcfb8; }' +
+    '.edge { path { stroke: rgb(167, 167, 167); }' +
+    'polygon { fill: rgb(167, 167, 167); stroke: rgb(167, 167, 167); } }</style>',
 };

mindinsight/ui/src/components/multiselectGroup.vue

@@ -99,6 +99,7 @@ export default {
       multiSelectedItemNames: {}, // Dictionary for storing the name of the selected tags.
       operateSelectAll: true, // Indicates whether to select all tags.
       perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box.
+      searching: false,
     };
   },
   computed: {},
@@ -156,11 +157,13 @@ export default {
      * Tag Filter
      */
     listFilter() {
+      this.searching = true;
       if (this.searchInputTimer) {
         clearTimeout(this.searchInputTimer);
         this.searchInputTimer = null;
       }
       this.searchInputTimer = setTimeout(() => {
+        this.searching = false;
         let reg;
         try {
           reg = new RegExp(this.searchInput);
@@ -234,6 +237,9 @@ export default {
      * @return {Object} Dictionary containing selected tags
      */
     updateSelectedDic() {
+      if (this.searching) {
+        return this.multiSelectedItemNames;
+      }
       let reg;
       try {
         reg = new RegExp(this.searchInput);

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

@@ -49,6 +49,9 @@ limitations under the License.
               <div :title="$t('graph.fitScreen')"
                    class="fit-screen"
                    @click="fit()"></div>
+              <div :title="$t('graph.downloadPic')"
+                   class="download-button"
+                   @click="downLoadSVG"></div>
             </div>
             <!-- Right column -->
             <div id="sidebar"
@@ -141,6 +144,7 @@ limitations under the License.
 
 <script>
 import RequestService from '../../services/request-service';
+import CommonProperty from '@/common/common-property.js';
 import {select, selectAll, zoom} from 'd3';
 import 'd3-graphviz';
 const d3 = {select, selectAll, zoom};
@@ -510,6 +514,27 @@ export default {
       const str = `translate(${-box.x},${-box.y}) scale(1)`;
       graphDom.setAttribute('transform', str);
     },
+    /**
+     * Download svg
+     */
+    downLoadSVG() {
+      const svgXml = document.querySelector('#graph #graph0').innerHTML;
+      const bbox = document.getElementById('graph0').getBBox();
+      const viewBoxSize = `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`;
+      const encodeStr =
+        `<svg xmlns="http://www.w3.org/2000/svg" ` +
+        `xmlns:xlink="http://www.w3.org/1999/xlink" ` +
+        `width="${bbox.width}" height="${bbox.height}" ` +
+        `viewBox="${viewBoxSize}">${CommonProperty.graphDownloadStyle}<g>${svgXml}</g></svg>`;
+
+      // Write the svg stream encoded by base64 to the image object.
+      const src = `data:image/svg+xml;base64,
+      ${window.btoa(unescape(encodeURIComponent(encodeStr)))}`;
+      const a = document.createElement('a');
+      a.href = src; // Export the information in the canvas as image data.
+      a.download = 'dataMap'; // Set the download name.
+      a.click(); // Click to trigger download.
+    },
     /**
      * Collapse on the right
      */
@@ -624,7 +649,7 @@ 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');
         }
@@ -634,11 +659,24 @@ export default {
           height: 14px;
           right: 32px;
           top: 10px;
-          z-index:999;
+          z-index: 999;
           cursor: pointer;
           display: inline-block;
           background-image: url('../../assets/images/fit.png');
         }
+        .download-button {
+          position: absolute;
+          width: 16px;
+          height: 14px;
+          right: 54px;
+          top: 10px;
+          z-index: 999;
+          cursor: pointer;
+          display: inline-block;
+          background-image: url('../../assets/images/download.png');
+          background-size: 14px 14px;
+          background-repeat: no-repeat;
+        }
       }
     }
     .cl-data-map.full-screen {

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

@@ -755,7 +755,7 @@ export default {
         }</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
           hoveredItem.relative_time / 1000
         ).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
-            new Date(hoveredItem.wall_time).toString(),
+            new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
         const dom = document.querySelector('#tipTr');
         dom.innerHTML = htmlStr;
@@ -1230,7 +1230,7 @@ export default {
       if (filter.length) {
         if (this.curAxisName === 2) {
           data = sampleObject.fullScreen
-            ? this.dealrelativeTime(new Date(filter[0].wall_time).toString())
+            ? this.dealrelativeTime(new Date(filter[0].wall_time * 1000).toString())
             : [];
         } else if (this.curAxisName === 1) {
           data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;