Eslint clean up (#369)

.pre-commit-config.yaml

@@ -34,10 +34,10 @@
         language: system
         files: \.(py)$
 
-#-   repo: local
-#    hooks:
-#    -   id: eslint-format-checker
-#        name: eslint-format-checker
-#        description: Format files with ESLint.
-#        entry: bash ./.eslint_format.hook
-#        language: system
+-   repo: local
+    hooks:
+    -   id: eslint-format-checker
+        name: eslint-format-checker
+        description: Format files with ESLint.
+        entry: bash ./.eslint_format.hook
+        language: system

frontend/.eslintrc.js

@@ -5,11 +5,20 @@ module.exports = {
     'plugin:vue/essential',
     'plugin:vue/strongly-recommended',
   ],
+  parserOptions: {
+    "sourceType": "module",
+  },
   rules: {
     // override/add rules settings here, such as:
     'vue/no-unused-vars': 'warn',
     'max-len': ["warn", 120],
     "vue/prop-name-casing": ["error"],
     'vue/script-indent': 'error',
+
+    // The following rules should apply eventually. Turn them off for now
+    // so we can have pre-commit running
+    'no-invalid-this': 'off',
+    'require-jsdoc': 'off',
+    'no-unused-vars': 'off',
   }
 }

frontend/src/audio/Audio.vue

@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginAudioTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';

frontend/src/audio/ui/AudioPanel.vue

@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ audioData.step }}</span>
-      <span class="visual-del-audio-time">{{ audioData.wall_time | formatTime }}</span>
+      <span class="visual-del-audio-time">{{ audioData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -31,7 +31,24 @@ import {getPluginAudioAudio} from '../../service';
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -85,13 +102,13 @@ export default {
     currentIndex: function(index) {
       if (this.data && this.data[index]) {
         let currentAudioInfo = this.data ? this.data[index] : {};
-        let {query, step, wall_time} = currentAudioInfo;
-        let url = '/data/plugin/audio/individualAudio?ts=' + wall_time;
+        let {query, step, wallTime} = currentAudioInfo;
+        let url = '/data/plugin/audio/individualAudio?ts=' + wallTime;
         let audioSrc = [url, query].join('&');
         this.audioData = {
           audioSrc,
           step,
-          wall_time,
+          wallTime,
         };
       }
     },

frontend/src/audio/ui/AudioPanelContainer.vue

@@ -29,7 +29,24 @@ import AudioPanel from './AudioPanel';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-audio': AudioPanel,
     'ui-expand-panel': ExpandPanel,

frontend/src/audio/ui/Config.vue

@@ -33,8 +33,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {

frontend/src/common/component/AppMenu.vue

@@ -22,7 +22,12 @@
 
 <script>
 export default {
-  props: ['initialRoute'],
+  props: {
+    initialRoute: {
+      type: String,
+      required: true,
+    },
+  },
   name: 'AppMenu',
   data() {
     return {

frontend/src/common/component/ExpandPanel.vue

@@ -23,8 +23,14 @@
 <script>
 export default {
   props: {
-    title: String,
-    info: Number,
+    title: {
+      type: String,
+      required: true,
+    },
+    info: {
+      type: Number,
+      required: true,
+    },
   },
   computed: {
     iconName() {

frontend/src/graph/ui/Config.vue

@@ -54,7 +54,16 @@
 <script>
 
 export default {
-  props: ['config', 'curNode'],
+  props: {
+    curNode: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
   methods: {
     handleFitScreen() {
       this.$emit('fitScreen');

frontend/src/high-dimensional/HighDimensional.vue

@@ -6,7 +6,7 @@
         :display-word-label="config.displayWordLabel"
         :search-text="config.searchText"
         :dimension="config.dimension"
-        :embedding_data="embedding_data"
+        :embedding-data="embeddingData"
       />
     </div>
     <div class="visual-dl-page-right">
@@ -40,7 +40,7 @@ export default {
         reduction: 'tsne',
         running: true,
       },
-      embedding_data: [],
+      embeddingData: [],
     };
   },
   created() {
@@ -65,14 +65,14 @@ export default {
         reduction: this.config.reduction,
       };
       getHighDimensionalDatasets(params).then(({errno, data}) => {
-        let vector_data = data.embedding;
+        let vectorData = data.embedding;
         let labels = data.labels;
 
-        for ( let i = 0; i < vector_data.length; i ++) {
-          vector_data[i].push(labels[i]);
+        for ( let i = 0; i < vectorData.length; i ++) {
+          vectorData[i].push(labels[i]);
         }
 
-        this.embedding_data = vector_data;
+        this.embeddingData = vectorData;
       });
     },
   },

frontend/src/high-dimensional/ui/Chart.vue

@@ -14,7 +14,28 @@ import echarts from 'echarts';
 import 'echarts-gl';
 
 export default {
-  props: ['config', 'displayWordLabel', 'searchText', 'embedding_data', 'dimension'],
+  props: {
+    embeddingData: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    displayWordLabel: {
+      type: Boolean,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      required: true,
+    },
+    dimension: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       width: 900,
@@ -36,7 +57,7 @@ export default {
     this.setDisplayWordLabel();
   },
   watch: {
-    embedding_data: function(val) {
+    embeddingData: function(val) {
       this.myChart.hideLoading();
       this.myChart.setOption({
         series: [{
@@ -62,7 +83,7 @@ export default {
     },
     searchText: function(val) {
       // Filter the data that has the hasPrefix
-      let matched_words = [];
+      let matchedWords = [];
       if (val != '') {
         val = val.toLowerCase();
 
@@ -71,7 +92,7 @@ export default {
           return (typeof word == 'string' && word.toLowerCase().startsWith(val));
         }
 
-        matched_words = this.embedding_data.filter(hasPrefix);
+        matchedWords = this.embeddingData.filter(hasPrefix);
       }
 
       // Update the matched series data
@@ -79,7 +100,7 @@ export default {
         series: [{
           // Grab the 'matched' series data
           name: 'matched',
-          data: matched_words,
+          data: matchedWords,
         }],
       });
     },
@@ -91,14 +112,13 @@ export default {
       this.myChart = echarts.init(el);
     },
     set2DChartOptions() {
-      let typeD = 'normal';
       let option = {
         xAxis: {},
         yAxis: {},
         series: [{
                    name: 'all',
                    symbolSize: 10,
-                   data: this.embedding_data,
+                   data: this.embeddingData,
                    type: 'scatter',
                  },
                  {
@@ -137,7 +157,7 @@ export default {
         xAxis3D: {},
         zAxis3D: {},
         dataset: {
-          source: this.embedding_data,
+          source: this.embeddingData,
         },
         series: [
           {

frontend/src/high-dimensional/ui/Config.vue

@@ -55,8 +55,10 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {

frontend/src/histogram/ui/Chart.vue

@@ -40,7 +40,28 @@ const p = Math.max(0, precisionRound(0.01, 1.01) - 1);
 const yValueFormat = format('.' + p + 'e');
 
 export default {
-  props: ['tagInfo', 'runs', 'chartType', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    chartType: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       originData: [],

frontend/src/histogram/ui/ChartPage.vue

@@ -31,8 +31,24 @@ import Chart from './Chart';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
-
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,

frontend/src/histogram/ui/Config.vue

@@ -42,7 +42,16 @@
 </template>
 <script>
 export default {
-  props: ['config', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       chartTypeItems: [

frontend/src/images/Images.vue

@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginImagesTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';
@@ -112,7 +112,6 @@ export default {
       });
     },
     filteredConfig() {
-      let tansformArr = ['isActualImageSize'];
       let config = this.config || {};
       let filteredConfig = {};
       Object.keys(config).forEach((key) => {

frontend/src/images/ui/ChartPage.vue

@@ -30,7 +30,24 @@ import Image from './Image';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-image': Image,
     'ui-expand-panel': ExpandPanel,

frontend/src/images/ui/Config.vue

@@ -38,8 +38,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {

frontend/src/images/ui/Image.vue

@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ imgData.step }}</span>
-      <span class="visual-del-image-time">{{ imgData.wall_time | formatTime }}</span>
+      <span class="visual-del-image-time">{{ imgData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -32,7 +32,28 @@ const defaultImgHeight = 300;
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'isActualImageSize', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    isActualImageSize: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -95,15 +116,15 @@ export default {
       /* eslint-disable fecs-camelcase */
       if (this.data && this.data[index]) {
         let currentImgInfo = this.data ? this.data[index] : {};
-        let {height, width, query, step, wall_time} = currentImgInfo;
-        let url = '/data/plugin/images/individualImage?ts=' + wall_time;
+        let {height, width, query, step, wallTime} = currentImgInfo;
+        let url = '/data/plugin/images/individualImage?ts=' + wallTime;
         let imgSrc = [url, query].join('&');
         this.imgData = {
           imgSrc,
           height,
           width,
           step,
-          wall_time,
+          wallTime,
         };
       }
       /* eslint-enable fecs-camelcase */

frontend/src/scalars/Scalars.vue

@@ -30,7 +30,7 @@
 
 <script>
 import {getPluginScalarsTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';

frontend/src/scalars/ui/Chart.vue

@@ -102,8 +102,40 @@ const maxQuantile = 0.95;
 const intervalTime = 15;
 
 export default {
-  props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'outlier', 'runs',
-          'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    smoothing: {
+      type: Number,
+      required: true,
+    },
+    horizontal: {
+      type: String,
+      required: true,
+    },
+    sortingMethod: {
+      type: String,
+      required: true,
+    },
+    outlier: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     computedStyle() {
       return 'height:' + this.height + 'px;'
@@ -366,7 +398,7 @@ export default {
     /**
      * @desc 1、add smooth data depend on smoothingWeight. see https://en.wikipedia.org/wiki/Moving_average for detail
      *       2、add relative data
-     * @param {Object} echarts series Object
+     * @param {Object} seriesData: echarts series Object
      * @param {number} smoothingWeight smooth weight, between 0 ~ 1
      */
     transformData(seriesData, smoothingWeight) {
@@ -645,7 +677,8 @@ export default {
 
       let headerHtml = '<tr style="font-size:14px;">';
       headerHtml += Object.keys(transformedData[0]).map((key) => {
-        return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
+        return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' +
+          widthPropMap[key] + 'px;">' + key + '</td>';
       }).join('');
       headerHtml += '</tr>';
 

frontend/src/scalars/ui/ChartPage.vue

@@ -10,7 +10,6 @@
           v-for="(tagInfo, index) in filteredTagList"
           :key="index"
           :tag-info="tagInfo"
-          :group-name-reg="config.groupNameReg"
           :smoothing="config.smoothing"
           :horizontal="config.horizontal"
           :sorting-method="config.sortingMethod"
@@ -37,9 +36,25 @@ export default {
   components: {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,
-    // 'ui-pagination': Pagination
   },
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     filteredRunsList() {
       let tagList = this.tagList || [];

frontend/src/scalars/ui/Config.vue

@@ -77,8 +77,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {

frontend/src/texts/Texts.vue

@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginTextsTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';

frontend/src/texts/ui/Chart.vue

@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ textData.step }}</span>
-      <span class="visual-del-text-time">{{ textData.wall_time | formatTime }}</span>
+      <span class="visual-del-text-time">{{ textData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -28,7 +28,24 @@ import {getPluginTextsTexts} from '../../service';
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -82,13 +99,13 @@ export default {
     currentIndex: function(index) {
       if (this.data && this.data[index]) {
         let currentTextInfo = this.data ? this.data[index] : {};
-        let wall_time = currentTextInfo[0];
+        let wallTime = currentTextInfo[0];
         let step = currentTextInfo[1];
         let message = currentTextInfo[2];
 
         this.textData = {
           step,
-          wall_time,
+          wallTime,
           message,
         };
       }

frontend/src/texts/ui/ChartPage.vue

@@ -35,7 +35,24 @@ export default {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,
   },
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     filteredRunsList() {
       let tagList = this.tagList || [];

frontend/src/texts/ui/Config.vue

@@ -35,8 +35,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {