Scalar button information

1 The scalar button prompts the display position
2 The scalar button prompts the display in English
3 formatting code

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

@@ -298,8 +298,8 @@ export default {
       thresholdErrorMsg: '',
       thresholdRelational: '',
       thresholdValue: [
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
       ],
       filterOptions: [
         {
@@ -412,7 +412,7 @@ export default {
       return;
     }
     document.title = `${decodeURIComponent(
-        this.$route.query.train_id,
+      this.$route.query.train_id
     )}-${this.$t('scalar.titleText')}-MindInsight`;
     // Adding a Listener
     window.addEventListener('resize', this.resizeCallback, false);
@@ -440,7 +440,7 @@ export default {
       if (localStorage.getItem('thresholdCache')) {
         try {
           this.thresholdLocal = JSON.parse(
-              localStorage.getItem('thresholdCache'),
+            localStorage.getItem('thresholdCache')
           );
           this.clearCache();
         } catch (e) {
@@ -467,8 +467,8 @@ export default {
         ) {
           delete this.thresholdLocal[this.decodeTrainingJobId];
           localStorage.setItem(
-              'thresholdCache',
-              JSON.stringify(this.thresholdLocal),
+            'thresholdCache',
+            JSON.stringify(this.thresholdLocal)
           );
         }
       }
@@ -484,81 +484,81 @@ export default {
         train_id: this.trainingJobId,
       };
       RequestService.getSingleTrainJob(params, false)
-          .then((res) => {
+        .then((res) => {
           // error;
-            if (
-              !res ||
+          if (
+            !res ||
             !res.data ||
             !res.data.train_jobs ||
             !res.data.train_jobs.length
-            ) {
-              this.initOver = true;
-              return;
-            }
-            const tempTagList = [];
-            const dataList = [];
-            const propsList = [];
-            const data = res.data.train_jobs[0];
-            const runNmeColor = CommonProperty.commonColorArr[0];
-            data.tags.forEach((tagObj) => {
-              if (!this.oriDataDictionaries[tagObj]) {
-                this.oriDataDictionaries[tagObj] = true;
-                // Add the tag list
-                tempTagList.push({
-                  label: tagObj,
-                  checked: true,
-                  show: true,
-                });
-                const sampleIndex = dataList.length;
-                // Adding Chart Data
-                dataList.push({
-                  tagName: tagObj,
-                  runNames: data.name,
-                  colors: runNmeColor,
-                  show: false,
-                  updateFlag: false,
-                  dataRemove: false,
-                  fullScreen: false,
-                  sampleIndex: sampleIndex,
-                  domId: 'prDom' + this.DomIdIndex,
-                  charData: {
-                    oriData: [],
-                    charOption: {},
-                  },
-                  zoomData: [null, null],
-                  zoomDataTimer: null,
-                  charObj: null,
-                  invalidData: false,
-                });
-
-                propsList.push({
-                  tagName: tagObj,
-                  runNames: data.name,
-                  colors: '',
-                });
-                this.DomIdIndex++;
-              }
-            });
-            this.tagOperateList = tempTagList;
-            this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
-            if (dataList.length === 1) {
-              dataList[0].fullScreen = true;
-            }
-            this.originDataArr = dataList;
-            this.propsList = propsList;
+          ) {
             this.initOver = true;
+            return;
+          }
+          const tempTagList = [];
+          const dataList = [];
+          const propsList = [];
+          const data = res.data.train_jobs[0];
+          const runNmeColor = CommonProperty.commonColorArr[0];
+          data.tags.forEach((tagObj) => {
+            if (!this.oriDataDictionaries[tagObj]) {
+              this.oriDataDictionaries[tagObj] = true;
+              // Add the tag list
+              tempTagList.push({
+                label: tagObj,
+                checked: true,
+                show: true,
+              });
+              const sampleIndex = dataList.length;
+              // Adding Chart Data
+              dataList.push({
+                tagName: tagObj,
+                runNames: data.name,
+                colors: runNmeColor,
+                show: false,
+                updateFlag: false,
+                dataRemove: false,
+                fullScreen: false,
+                sampleIndex: sampleIndex,
+                domId: 'prDom' + this.DomIdIndex,
+                charData: {
+                  oriData: [],
+                  charOption: {},
+                },
+                zoomData: [null, null],
+                zoomDataTimer: null,
+                charObj: null,
+                invalidData: false,
+              });
 
-            this.$nextTick(() => {
-              this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
-              // Obtains data on the current page
-              this.updateTagInPage();
-              this.resizeCallback();
-            });
-          }, this.requestErrorCallback)
-          .catch((e) => {
-            this.initOver = true;
-            this.$message.error(this.$t('public.dataError'));
+              propsList.push({
+                tagName: tagObj,
+                runNames: data.name,
+                colors: '',
+              });
+              this.DomIdIndex++;
+            }
+          });
+          this.tagOperateList = tempTagList;
+          this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
+          if (dataList.length === 1) {
+            dataList[0].fullScreen = true;
+          }
+          this.originDataArr = dataList;
+          this.propsList = propsList;
+          this.initOver = true;
+
+          this.$nextTick(() => {
+            this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
+            // Obtains data on the current page
+            this.updateTagInPage();
+            this.resizeCallback();
           });
+        }, this.requestErrorCallback)
+        .catch((e) => {
+          this.initOver = true;
+          this.$message.error(this.$t('public.dataError'));
+        });
     },
 
     /**
@@ -606,108 +606,108 @@ export default {
         };
 
         RequestService.getScalarsSample(params)
-            .then((res) => {
+          .then((res) => {
             // error
-              if (!res || !res.data || !res.data.metadatas) {
+            if (!res || !res.data || !res.data.metadatas) {
               // canceled
-                if (res.toString() === 'false') {
-                  return;
-                }
-                if (sampleObject.charObj) {
-                  sampleObject.charObj.clear();
-                  sampleObject.onePoint = false;
-                }
+              if (res.toString() === 'false') {
                 return;
               }
-              let hasInvalidData = false;
-
               if (sampleObject.charObj) {
-                sampleObject.charObj.showLoading();
+                sampleObject.charObj.clear();
+                sampleObject.onePoint = false;
               }
+              return;
+            }
+            let hasInvalidData = false;
 
-              const resData = res.data;
+            if (sampleObject.charObj) {
+              sampleObject.charObj.showLoading();
+            }
 
-              const tempObject = {
-                valueData: {
-                  stepData: [],
-                  absData: [],
-                  relativeData: [],
-                },
-                logData: {
-                  stepData: [],
-                  absData: [],
-                  relativeData: [],
-                },
-              };
-              let relativeTimeBench = 0;
-              if (resData.metadatas.length) {
-                relativeTimeBench = resData.metadatas[0].wall_time;
-              }
+            const resData = res.data;
 
-              // Initializing Chart Data
-              resData.metadatas.forEach((metaData) => {
-                if (metaData.value === null && !hasInvalidData) {
-                  hasInvalidData = true;
-                }
-                tempObject.valueData.stepData.push([
-                  metaData.step,
-                  metaData.value,
-                ]);
-                tempObject.valueData.absData.push([
-                  metaData.wall_time,
-                  metaData.value,
-                ]);
-                tempObject.valueData.relativeData.push([
-                  metaData.wall_time - relativeTimeBench,
-                  metaData.value,
-                ]);
-                const logValue = metaData.value >= 0 ? metaData.value : '';
-                tempObject.logData.stepData.push([metaData.step, logValue]);
-                tempObject.logData.absData.push([metaData.wall_time, logValue]);
-                tempObject.logData.relativeData.push([
-                  metaData.wall_time - relativeTimeBench,
-                  logValue,
-                ]);
-              });
-
-              sampleObject.charData.oriData[0] = tempObject;
+            const tempObject = {
+              valueData: {
+                stepData: [],
+                absData: [],
+                relativeData: [],
+              },
+              logData: {
+                stepData: [],
+                absData: [],
+                relativeData: [],
+              },
+            };
+            let relativeTimeBench = 0;
+            if (resData.metadatas.length) {
+              relativeTimeBench = resData.metadatas[0].wall_time;
+            }
 
-              if (hasInvalidData) {
-                this.$set(sampleObject, 'invalidData', true);
-              } else {
-                this.$set(sampleObject, 'invalidData', false);
+            // Initializing Chart Data
+            resData.metadatas.forEach((metaData) => {
+              if (metaData.value === null && !hasInvalidData) {
+                hasInvalidData = true;
               }
+              tempObject.valueData.stepData.push([
+                metaData.step,
+                metaData.value,
+              ]);
+              tempObject.valueData.absData.push([
+                metaData.wall_time,
+                metaData.value,
+              ]);
+              tempObject.valueData.relativeData.push([
+                metaData.wall_time - relativeTimeBench,
+                metaData.value,
+              ]);
+              const logValue = metaData.value >= 0 ? metaData.value : '';
+              tempObject.logData.stepData.push([metaData.step, logValue]);
+              tempObject.logData.absData.push([metaData.wall_time, logValue]);
+              tempObject.logData.relativeData.push([
+                metaData.wall_time - relativeTimeBench,
+                logValue,
+              ]);
+            });
 
-              sampleObject.charData.charOption = this.formateCharOption(
-                  sampleIndex,
-              );
-              const tempOption = sampleObject.charData.charOption;
-              if (
-                tempOption.series[0].data.length === 1 ||
+            sampleObject.charData.oriData[0] = tempObject;
+
+            if (hasInvalidData) {
+              this.$set(sampleObject, 'invalidData', true);
+            } else {
+              this.$set(sampleObject, 'invalidData', false);
+            }
+
+            sampleObject.charData.charOption = this.formateCharOption(
+              sampleIndex
+            );
+            const tempOption = sampleObject.charData.charOption;
+            if (
+              tempOption.series[0].data.length === 1 ||
               sampleObject.onePoint
-              ) {
-                tempOption.series[0].showSymbol = true;
-              } else {
-                tempOption.series[0].showSymbol = false;
-              }
+            ) {
+              tempOption.series[0].showSymbol = true;
+            } else {
+              tempOption.series[0].showSymbol = false;
+            }
 
-              this.$forceUpdate();
+            this.$forceUpdate();
 
-              this.$nextTick(() => {
-                if (sampleObject.charObj) {
-                  sampleObject.charObj.hideLoading();
-                }
-                // Draw chart
-                if (!this.compare) {
-                  this.updateOrCreateChar(sampleIndex, true);
-                }
-              });
-            })
-            .catch((e) => {
+            this.$nextTick(() => {
               if (sampleObject.charObj) {
-                sampleObject.charObj.clear();
+                sampleObject.charObj.hideLoading();
+              }
+              // Draw chart
+              if (!this.compare) {
+                this.updateOrCreateChar(sampleIndex, true);
               }
             });
+          })
+          .catch((e) => {
+            if (sampleObject.charObj) {
+              sampleObject.charObj.clear();
+            }
+          });
       });
     },
 
@@ -718,7 +718,7 @@ export default {
 
     setOnePoint(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('datazoom', function(params) {
+      sampleObject.charObj.on('datazoom', function (params) {
         const xAxisObject = params.batch[0];
         const yAxisObject = params.batch[1];
         const charData = sampleObject.charData.charOption.series[0].data;
@@ -777,7 +777,7 @@ export default {
 
     setRestore(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('restore', function(params) {
+      sampleObject.charObj.on('restore', function (params) {
         const charData = sampleObject.charData.charOption.series[0].data;
         const tempCharOption = sampleObject.charData.charOption;
 
@@ -846,12 +846,12 @@ export default {
       if (curOriData) {
         if (sampleObject.log) {
           dataObj.data = this.formateSmoothData(
-              curOriData.logData[this.curBenchX],
+            curOriData.logData[this.curBenchX]
           );
           dataObjBackend.data = curOriData.logData[this.curBenchX];
         } else {
           dataObj.data = this.formateSmoothData(
-              curOriData.valueData[this.curBenchX],
+            curOriData.valueData[this.curBenchX]
           );
           dataObjBackend.data = curOriData.valueData[this.curBenchX];
         }
@@ -981,23 +981,23 @@ export default {
           position: (point, params, dom, rect, size) => {
             const curDom = document.getElementById(sampleObject.domId);
             if (!curDom) {
-              return {left: 0, bottom: '100%'};
+              return { left: 0, bottom: '100%' };
             }
             if (sampleObject.fullScreen) {
               if (point[0] + size.contentSize[0] <= size.viewSize[0]) {
-                return {left: point[0], bottom: '10%'};
+                return { left: point[0], bottom: '10%' };
               } else {
-                return {right: size.viewSize[0] - point[0], bottom: '10%'};
+                return { right: size.viewSize[0] - point[0], bottom: '10%' };
               }
             } else {
               const parentNode = curDom.parentNode;
               if (!parentNode) {
-                return {left: 0, bottom: '100%'};
+                return { left: 0, bottom: '100%' };
               }
               if (parentNode.offsetLeft > size.contentSize[0]) {
-                return {right: '100%', bottom: 0};
+                return { right: '100%', bottom: 0 };
               } else {
-                return {left: '100%', bottom: 0};
+                return { left: '100%', bottom: 0 };
               }
             }
           },
@@ -1082,16 +1082,16 @@ export default {
                     `display:inline-block;"></td><td>${parma.seriesName}</td>` +
                     `<td>${that.formateYaxisValue(parma.value[1])}</td>` +
                     `<td>${that.formateYaxisValue(
-                        curSerieOriData.stepData[parma.dataIndex][1],
+                      curSerieOriData.stepData[parma.dataIndex][1]
                     )}</td>` +
                     `<td>${curSerieOriData.stepData[parma.dataIndex][0]}</td>` +
                     `<td>${curSerieOriData.relativeData[
-                        parma.dataIndex
+                      parma.dataIndex
                     ][0].toFixed(3)}${unit}</td>` +
                     `<td>${that.dealrelativeTime(
-                        new Date(
-                            curSerieOriData.absData[parma.dataIndex][0] * 1000,
-                        ).toString(),
+                      new Date(
+                        curSerieOriData.absData[parma.dataIndex][0] * 1000
+                      ).toString()
                     )}</td>` +
                     `</tr>`;
                 }
@@ -1108,6 +1108,7 @@ export default {
           emphasis: {
             iconStyle: {
               textPosition: 'top',
+              textAlign: 'right',
             },
           },
           // toolbox
@@ -1151,7 +1152,9 @@ export default {
             },
 
             // restore
-            restore: {},
+            restore: {
+              title: this.$t('scalar.restore'),
+            },
           },
         },
         series: seriesData,
@@ -1173,9 +1176,9 @@ export default {
         this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
       ) {
         const tempStorgeArr = JSON.parse(
-            JSON.stringify(
-                this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
-            ),
+          JSON.stringify(
+            this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
+          )
         );
         let pieceStr = '';
         pieceStr = this.formatePieceStr(tempStorgeArr);
@@ -1209,8 +1212,8 @@ export default {
         // Updating chart option
         if (sampleObject.updateFlag) {
           sampleObject.charObj.setOption(
-              sampleObject.charData.charOption,
-              sampleObject.dataRemove,
+            sampleObject.charData.charOption,
+            sampleObject.dataRemove
           );
           sampleObject.updateFlag = false;
           sampleObject.dataRemove = false;
@@ -1218,8 +1221,8 @@ export default {
       } else {
         // creat chart
         sampleObject.charObj = echarts.init(
-            document.getElementById(sampleObject.domId),
-            null,
+          document.getElementById(sampleObject.domId),
+          null
         );
         sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
         this.setOnePoint(sampleObject);
@@ -1325,13 +1328,13 @@ export default {
               const oriIndexData = sampleObject.charData.oriData[index];
               if (sampleObject.log) {
                 seriesData[index * 2].data = this.formateSmoothData(
-                    oriIndexData.logData[this.curBenchX],
+                  oriIndexData.logData[this.curBenchX]
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.logData[this.curBenchX];
               } else {
                 seriesData[index * 2].data = this.formateSmoothData(
-                    oriIndexData.valueData[this.curBenchX],
+                  oriIndexData.valueData[this.curBenchX]
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.valueData[this.curBenchX];
@@ -1545,56 +1548,56 @@ export default {
         train_id: this.trainingJobId,
       };
       RequestService.getSingleTrainJob(params, ignoreError)
-          .then((res) => {
-            if (this.isReloading) {
-              this.$store.commit('setIsReload', false);
-              this.isReloading = false;
-            }
+        .then((res) => {
+          if (this.isReloading) {
+            this.$store.commit('setIsReload', false);
+            this.isReloading = false;
+          }
 
-            // Fault tolerance processing
-            if (!res || !res.data) {
-              return;
-            } else if (!res.data.train_jobs || !res.data.train_jobs.length) {
-              this.clearAllData();
-              return;
-            }
-            const data = res.data.train_jobs[0];
-            // Delete the data that does not exist
-            const tagRemoveFlag = this.removeNonexistentData(data);
+          // Fault tolerance processing
+          if (!res || !res.data) {
+            return;
+          } else if (!res.data.train_jobs || !res.data.train_jobs.length) {
+            this.clearAllData();
+            return;
+          }
+          const data = res.data.train_jobs[0];
+          // Delete the data that does not exist
+          const tagRemoveFlag = this.removeNonexistentData(data);
 
-            // Check whether new data exists and add it to the page
-            const tagAddFlag = this.checkNewDataAndComplete(data);
+          // Check whether new data exists and add it to the page
+          const tagAddFlag = this.checkNewDataAndComplete(data);
 
-            this.$nextTick(() => {
-              this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
-              this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
-              this.resizeCallback();
-            });
+          this.$nextTick(() => {
+            this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
+            this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
+            this.resizeCallback();
+          });
 
-            const tempTagList = [];
-            const propsList = [];
-            // Initial chart data
-            data.tags.forEach((tagObj) => {
+          const tempTagList = [];
+          const propsList = [];
+          // Initial chart data
+          data.tags.forEach((tagObj) => {
             // Check whether the tag with the same name exists
-              tempTagList.push({
-                label: tagObj,
-                checked: true,
-                show: true,
-              });
+            tempTagList.push({
+              label: tagObj,
+              checked: true,
+              show: true,
+            });
 
-              // Add the tag list.
-              propsList.push({
-                tagName: tagObj,
-                runNames: data.name,
-                colors: '',
-              });
+            // Add the tag list.
+            propsList.push({
+              tagName: tagObj,
+              runNames: data.name,
+              colors: '',
             });
-            this.tagPropsList = tempTagList;
-            this.propsList = propsList;
-          }, this.requestErrorCallback)
-          .catch((e) => {
-            this.$message.error(this.$t('public.dataError'));
           });
+          this.tagPropsList = tempTagList;
+          this.propsList = propsList;
+        }, this.requestErrorCallback)
+        .catch((e) => {
+          this.$message.error(this.$t('public.dataError'));
+        });
     },
 
     /**
@@ -1700,15 +1703,15 @@ export default {
             if (index % 2 === 0) {
               if (log) {
                 serie.data = this.formateSmoothData(
-                    sampleObject.charData.oriData[index / 2].logData[
-                        this.curBenchX
-                    ],
+                  sampleObject.charData.oriData[index / 2].logData[
+                    this.curBenchX
+                  ]
                 );
               } else {
                 serie.data = this.formateSmoothData(
-                    sampleObject.charData.oriData[index / 2].valueData[
-                        this.curBenchX
-                    ],
+                  sampleObject.charData.oriData[index / 2].valueData[
+                    this.curBenchX
+                  ]
                 );
               }
             }
@@ -1804,13 +1807,13 @@ export default {
         tempOriData.forEach((originData, index) => {
           if (log) {
             tempOption.series[index * 2].data = this.formateSmoothData(
-                tempOriData[index].logData[this.curBenchX],
+              tempOriData[index].logData[this.curBenchX]
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].logData[this.curBenchX];
           } else {
             tempOption.series[index * 2].data = this.formateSmoothData(
-                tempOriData[index].valueData[this.curBenchX],
+              tempOriData[index].valueData[this.curBenchX]
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].valueData[this.curBenchX];
@@ -1897,7 +1900,7 @@ export default {
         this.thresholdLocal[this.decodeTrainingJobId][sampleItem.tagName]
       ) {
         delete this.thresholdLocal[this.decodeTrainingJobId][
-            sampleItem.tagName
+          sampleItem.tagName
         ];
       }
       this.currentTagName = sampleItem.tagName;
@@ -2246,7 +2249,7 @@ export default {
           this.originDataArr.forEach((sampleObject) => {
             if (this.multiSelectedTagNames[sampleObject.tagName]) {
               this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ] = chartPieces;
               sampleObject.pieceStr = pieceStr;
 
@@ -2257,14 +2260,14 @@ export default {
           });
         } else {
           this.thresholdLocal[this.decodeTrainingJobId][
-              this.currentTagName
+            this.currentTagName
           ] = chartPieces;
           this.currentSample.pieceStr = pieceStr;
           this.setVisualMap(this.currentSample, chartPieces);
         }
         localStorage.setItem(
-            'thresholdCache',
-            JSON.stringify(this.thresholdLocal),
+          'thresholdCache',
+          JSON.stringify(this.thresholdLocal)
         );
 
         this.thresholdDialogVisible = false;
@@ -2329,11 +2332,11 @@ export default {
               this.thresholdLocal &&
               this.thresholdLocal[this.decodeTrainingJobId] &&
               this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ]
             ) {
               delete this.thresholdLocal[this.decodeTrainingJobId][
-                  sampleObject.tagName
+                sampleObject.tagName
               ];
               sampleObject.pieceStr = '';
               const tempCharOption = sampleObject.charData.charOption;
@@ -2360,7 +2363,7 @@ export default {
           this.thresholdLocal[this.decodeTrainingJobId][this.currentTagName]
         ) {
           delete this.thresholdLocal[this.decodeTrainingJobId][
-              this.currentTagName
+            this.currentTagName
           ];
           this.currentSample.pieceStr = '';
           const tempCharOption = this.currentSample.charData.charOption;
@@ -2372,7 +2375,7 @@ export default {
             tempCharOption.visualMap = null;
             tempCharOption.series[0].markLine = null;
             tempCharOption.series[0].lineStyle[
-                'color'
+              'color'
             ] = this.currentSample.colors;
           }
           this.currentSample.charObj.setOption(tempCharOption, false);
@@ -2380,8 +2383,8 @@ export default {
       }
       this.clearCache();
       localStorage.setItem(
-          'thresholdCache',
-          JSON.stringify(this.thresholdLocal),
+        'thresholdCache',
+        JSON.stringify(this.thresholdLocal)
       );
       this.delThresholdVisible = false;
     },