From 62f73d39c046208fbbf70eba3080d41f57c077ae Mon Sep 17 00:00:00 2001
From: WeiFeng-mindinsight <huangweifeng4@huawei.com>
Date: Wed, 16 Sep 2020 14:26:37 +0800
Subject: [PATCH] UI fix bug that large graph download svg error

---
 mindinsight/ui/src/views/debugger/debugger.vue  | 15 ++++++---------
 mindinsight/ui/src/views/train-manage/graph.vue | 17 ++++++++---------
 .../src/views/train-manage/summary-manage.vue   |  9 ++++++---
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue
index aedc6545..5a8825e2 100644
--- a/mindinsight/ui/src/views/debugger/debugger.vue
+++ b/mindinsight/ui/src/views/debugger/debugger.vue
@@ -587,11 +587,9 @@ export default {
     tabChange(gridType) {
       this.gridType = gridType;
       if (this.gridType === 'compare') {
-        this.tensorComparisons(this.curRowObj);
+        this.tensorComparisons(this.curRowObj, this.dims);
       } else {
-        this.dims = null;
-        this.tolerance = 0;
-        this.viewValueDetail(this.curRowObj);
+        this.viewValueDetail(this.curRowObj, this.dims);
       }
     },
     /**
@@ -601,7 +599,6 @@ export default {
      */
     tensorComparisons(row, dims) {
       this.curRowObj = row;
-      this.gridType = 'compare';
       const shape = dims
         ? dims
         : JSON.stringify(
@@ -615,7 +612,6 @@ export default {
                 })
                 .reverse(),
         ).replace(/"/g, '');
-      this.dims = shape;
       const params = {
         name: row.name,
         detail: 'data',
@@ -628,6 +624,7 @@ export default {
             loadingInstance.close();
             if (res && res.data && res.data.tensor_value) {
               this.tensorCompareFlag = true;
+              this.gridType = 'compare';
               const tensorValue = res.data.tensor_value;
               if (tensorValue.diff === 'Too large to show.') {
                 this.tensorValue = [];
@@ -1000,11 +997,11 @@ export default {
      * @param {Object} data tensor value data
      */
     tensorFilterChange(data) {
+      this.dims = `[${data.toString()}]`;
       if (this.gridType === 'value') {
-        this.viewValueDetail(this.curRowObj, `[${data.toString()}]`);
+        this.viewValueDetail(this.curRowObj, this.dims);
       } else {
-        this.dims = `[${data.toString()}]`;
-        this.tensorComparisons(this.curRowObj, `[${data.toString()}]`);
+        this.tensorComparisons(this.curRowObj, this.dims);
       }
     },
     /**
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index d52572c1..472b2e31 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -2984,15 +2984,14 @@ export default {
         `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 = 'graph.svg'; // Set the download name.
-      const evt = document.createEvent('MouseEvents');
-      evt.initEvent('click', true, true);
-      a.dispatchEvent(evt);
+      const downloadLink = document.createElement('a');
+      downloadLink.download = 'graph.svg';
+      downloadLink.style.display = 'none';
+      const blob = new Blob([encodeStr], {type: 'text/html'});
+      downloadLink.href = URL.createObjectURL(blob);
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
     },
     /**
      * Fold the legend area.
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index 4f0e90cd..40711b67 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -74,12 +74,12 @@ limitations under the License.
                              class-name="operate-container"
                              :width="operateWidth">
               <template slot-scope="scope">
-                <span class="menu-item operate-btn"
+                <span class="menu-item operate-btn first-btn"
                       v-if="scope.row.viewDashboard"
                       @contextmenu.prevent="rightClick(scope.row, $event, 0)"
                       @click.stop="goToTrainDashboard(scope.row)">
                   {{$t('summaryManage.viewDashboard')}} </span>
-                <span class="menu-item operate-btn button-disable"
+                <span class="menu-item operate-btn first-btn button-disable"
                       v-else
                       :title="$t('summaryManage.disableDashboardTip')">
                   {{$t('summaryManage.viewDashboard')}}
@@ -217,7 +217,7 @@ export default {
         type: 0,
       },
       tableDom: null,
-      operateWidth: localStorage.getItem('milang') === 'en-us' ? 415 : 300,
+      operateWidth: localStorage.getItem('milang') === 'en-us' ? 400 : 290,
     };
   },
   computed: {},
@@ -572,6 +572,9 @@ export default {
     color: #00a5a7;
     cursor: pointer;
   }
+  .menu-item.operate-btn.first-btn {
+    margin-left: 0;
+  }
   #contextMenu {
     position: absolute;
     min-width: 150px;