UI encode image tag and fixes the issue that the histogram layer is

disordered

mindinsight/ui/src/components/histogramUnit.vue

@@ -257,6 +257,7 @@ export default {
 
               return {
                 type: 'polyline',
+                z2: params.dataIndex,
                 silent: true,
                 shape: {
                   points,

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

@@ -1133,6 +1133,7 @@ export default {
 
               return {
                 type: 'polyline',
+                z2: params.dataIndex,
                 silent: true,
                 shape: {
                   points,

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

@@ -388,7 +388,9 @@ export default {
             sampleItem.showErrMsg = false;
             sampleItem.curImgUrl =
             `${basePath}${this.imageBasePath}train_id=${sampleItem.summaryId}` +
-            `&tag=${sampleItem.tagName}&step=${params.step}&wt=${params.wt}`;
+            `&tag=${encodeURIComponent(sampleItem.tagName)}&step=${
+              params.step
+            }&wt=${params.wt}`;
           },
           (e) => {
             if (e.response && e.response.data && e.response.data.error_code) {
@@ -399,7 +401,9 @@ export default {
               sampleItem.showErrMsg = false;
               sampleItem.curImgUrl =
               `${basePath}${this.imageBasePath}train_id=${sampleItem.summaryId}` +
-              `&tag=${sampleItem.tagName}&step=${params.step}&wt=${params.wt}`;
+              `&tag=${encodeURIComponent(sampleItem.tagName)}&step=${
+                params.step
+              }&wt=${params.wt}`;
             }
           },
       );

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

@@ -1308,6 +1308,7 @@ export default {
 
               return {
                 type: 'polyline',
+                z2: params.dataIndex,
                 silent: true,
                 shape: {
                   points,
@@ -1514,7 +1515,9 @@ export default {
                 sampleItem.sampleData[sampleIndex].wall_time;
                   sampleItem.curImgUrl =
                 `${basePath}${this.imageBasePath}` +
-                `train_id=${sampleItem.runId}&tag=${sampleItem.tagName}` +
+                `train_id=${sampleItem.runId}&tag=${encodeURIComponent(
+                    sampleItem.tagName,
+                )}` +
                 `&step=-1&wt=${sampleWallTime}`;
                 } else {
                   this.curImageShowSample = {};