Fix all Vue eslint errors

app/server/static/js/.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
   },
   extends: [
     "airbnb-base",
-    "plugin:vue/base",
+    "plugin:vue/recommended",
   ],
   rules: {
     "no-new": "off",
@@ -18,6 +18,6 @@ module.exports = {
     "object-shorthand": "off",
     "prefer-destructuring": "off",
     "prefer-template": "off",
+    "vue/max-attributes-per-line": 3,
   },
 };
-// https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

app/server/static/js/demo/demo_named_entity.js

@@ -6,19 +6,21 @@ Vue.use(require('vue-shortkey'), {
 });
 
 Vue.component('annotator', {
-  template: '<div @click="setSelectedRange">'
-          + '       <span v-for="r in chunks"'
-          + '            v-bind:class="{tag: id2label[r.label].text_color}"'
-          + '            v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
-          + '       >{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"'
-          + '                            v-if="id2label[r.label].text_color"'
-          + '                            @click="removeLabel(r)"></button></span>'
-          + '  </div>',
   props: {
-    labels: Array, // [{id: Integer, color: String, text: String}]
-    text: String,
-    entityPositions: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
+    labels: {
+      type: Array, // [{id: Integer, color: String, text: String}]
+      default: () => [],
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    entityPositions: {
+      type: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
+      default: () => [],
+    },
   },
+
   data() {
     return {
       startOffset: 0,
@@ -26,6 +28,51 @@ Vue.component('annotator', {
     };
   },
 
+  computed: {
+    sortedEntityPositions() {
+      /* eslint-disable vue/no-side-effects-in-computed-properties */
+      this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
+      return this.entityPositions;
+      /* eslint-enable vue/no-side-effects-in-computed-properties */
+    },
+
+    chunks() {
+      const res = [];
+      let left = 0;
+      for (let i = 0; i < this.sortedEntityPositions.length; i++) {
+        const e = this.sortedEntityPositions[i];
+        const l = this.makeLabel(left, e.start_offset);
+        res.push(l);
+        res.push(e);
+        left = e.end_offset;
+      }
+      const l = this.makeLabel(left, this.text.length);
+      res.push(l);
+
+      return res;
+    },
+
+    id2label() {
+      const id2label = {};
+      // default value;
+      id2label[-1] = {
+        text_color: '',
+        background_color: '',
+      };
+      for (let i = 0; i < this.labels.length; i++) {
+        const label = this.labels[i];
+        id2label[label.id] = label;
+      }
+      return id2label;
+    },
+  },
+
+  watch: {
+    entityPositions() {
+      this.resetRange();
+    },
+  },
+
   methods: {
     setSelectedRange() {
       let start;
@@ -103,48 +150,14 @@ Vue.component('annotator', {
     },
   },
 
-  watch: {
-    entityPositions() {
-      this.resetRange();
-    },
-  },
-
-  computed: {
-    sortedEntityPositions() {
-      this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
-      return this.entityPositions;
-    },
-
-    chunks() {
-      const res = [];
-      let left = 0;
-      for (let i = 0; i < this.sortedEntityPositions.length; i++) {
-        const e = this.sortedEntityPositions[i];
-        const l = this.makeLabel(left, e.start_offset);
-        res.push(l);
-        res.push(e);
-        left = e.end_offset;
-      }
-      const l = this.makeLabel(left, this.text.length);
-      res.push(l);
-
-      return res;
-    },
-
-    id2label() {
-      const id2label = {};
-      // default value;
-      id2label[-1] = {
-        text_color: '',
-        background_color: '',
-      };
-      for (let i = 0; i < this.labels.length; i++) {
-        const label = this.labels[i];
-        id2label[label.id] = label;
-      }
-      return id2label;
-    },
-  },
+  template: '<div @click="setSelectedRange">'
+          + '       <span v-for="r in chunks"'
+          + '            v-bind:class="{tag: id2label[r.label].text_color}"'
+          + '            v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
+          + '       >{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"'
+          + '                            v-if="id2label[r.label].text_color"'
+          + '                            @click="removeLabel(r)"></button></span>'
+          + '  </div>',
 });
 
 const vm = new Vue({ // eslint-disable-line no-unused-vars

app/server/static/js/demo/demo_translation.js

@@ -6,7 +6,19 @@ Vue.use(require('vue-shortkey'));
 
 const vm = new Vue({ // eslint-disable-line no-unused-vars
   el: '#mail-app',
+
   delimiters: ['[[', ']]'],
+
+  directives: {
+    'todo-focus': (el, binding) => {
+      if (binding.value) {
+        el.focus();
+      }
+    },
+  },
+
+  mixins: [annotationMixin],
+
   data: {
     newTodo: '',
     editedTodo: null,
@@ -53,14 +65,6 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
       [],
     ],
   },
-  mixins: [annotationMixin],
-  directives: {
-    'todo-focus': (el, binding) => {
-      if (binding.value) {
-        el.focus();
-      }
-    },
-  },
 
   methods: {
     addTodo() {

app/server/static/js/label.js

@@ -7,7 +7,9 @@ Vue.filter('simpleShortcut', simpleShortcut);
 
 const vm = new Vue({ // eslint-disable-line no-unused-vars
   el: '#mail-app',
+
   delimiters: ['[[', ']]'],
+
   data: {
     labels: [],
     newLabel: null,
@@ -15,6 +17,13 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
     messages: [],
   },
 
+  created() {
+    HTTP.get('labels').then((response) => {
+      this.labels = response.data;
+      this.sortLabels();
+    });
+  },
+
   methods: {
     generateColor() {
       const color = (Math.random() * 0xFFFFFF | 0).toString(16); // eslint-disable-line no-bitwise
@@ -114,10 +123,4 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
       Object.assign(label, this.beforeEditCache);
     },
   },
-  created() {
-    HTTP.get('labels').then((response) => {
-      this.labels = response.data;
-      this.sortLabels();
-    });
-  },
 });

app/server/static/js/seq2seq.js

@@ -7,12 +7,9 @@ Vue.use(require('vue-shortkey'));
 
 const vm = new Vue({ // eslint-disable-line no-unused-vars
   el: '#mail-app',
+
   delimiters: ['[[', ']]'],
-  data: {
-    newTodo: '',
-    editedTodo: null,
-  },
-  mixins: [annotationMixin],
+
   directives: {
     'todo-focus': (el, binding) => {
       if (binding.value) {
@@ -21,6 +18,13 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
     },
   },
 
+  mixins: [annotationMixin],
+
+  data: {
+    newTodo: '',
+    editedTodo: null,
+  },
+
   methods: {
     addTodo() {
       const value = this.newTodo && this.newTodo.trim();

app/server/static/js/sequence_labeling.js

@@ -10,26 +10,69 @@ Vue.use(require('vue-shortkey'), {
 Vue.filter('simpleShortcut', simpleShortcut);
 
 Vue.component('annotator', {
-  template: '<div @click="setSelectedRange">'
-          + '       <span class="text-sequence"'
-          + '            v-for="r in chunks"'
-          + '            v-if="id2label[r.label]"'
-          + '            v-bind:class="{tag: id2label[r.label].text_color}"'
-          + '            v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
-          + '       >{{ [...text].slice(r.start_offset, r.end_offset).join(\'\') }}<button class="delete is-small"'
-          + '                            v-if="id2label[r.label].text_color"'
-          + '                            @click="removeLabel(r)"></button></span>'
-          + '  </div>',
   props: {
-    labels: Array, // [{id: Integer, color: String, text: String}]
-    text: String,
-    entityPositions: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
+    labels: {
+      type: Array, // [{id: Integer, color: String, text: String}]
+      default: () => [],
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    entityPositions: {
+      type: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]
+      default: () => [],
+    },
+  },
+
+  data: () => ({
+    startOffset: 0,
+    endOffset: 0,
+  }),
+
+  computed: {
+    sortedEntityPositions() {
+      /* eslint-disable vue/no-side-effects-in-computed-properties */
+      this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
+      return this.entityPositions;
+      /* eslint-enable vue/no-side-effects-in-computed-properties */
+    },
+
+    chunks() {
+      const res = [];
+      let left = 0;
+      for (let i = 0; i < this.sortedEntityPositions.length; i++) {
+        const e = this.sortedEntityPositions[i];
+        const l = this.makeLabel(left, e.start_offset);
+        res.push(l);
+        res.push(e);
+        left = e.end_offset;
+      }
+      const l = this.makeLabel(left, this.text.length);
+      res.push(l);
+
+      return res;
+    },
+
+    id2label() {
+      const id2label = {};
+      // default value;
+      id2label[-1] = {
+        text_color: '',
+        background_color: '',
+      };
+      for (let i = 0; i < this.labels.length; i++) {
+        const label = this.labels[i];
+        id2label[label.id] = label;
+      }
+      return id2label;
+    },
   },
-  data() {
-    return {
-      startOffset: 0,
-      endOffset: 0,
-    };
+
+  watch: {
+    entityPositions() {
+      this.resetRange();
+    },
   },
 
   methods: {
@@ -115,48 +158,16 @@ Vue.component('annotator', {
     },
   },
 
-  watch: {
-    entityPositions() {
-      this.resetRange();
-    },
-  },
-
-  computed: {
-    sortedEntityPositions() {
-      this.entityPositions = this.entityPositions.sort((a, b) => a.start_offset - b.start_offset);
-      return this.entityPositions;
-    },
-
-    chunks() {
-      const res = [];
-      let left = 0;
-      for (let i = 0; i < this.sortedEntityPositions.length; i++) {
-        const e = this.sortedEntityPositions[i];
-        const l = this.makeLabel(left, e.start_offset);
-        res.push(l);
-        res.push(e);
-        left = e.end_offset;
-      }
-      const l = this.makeLabel(left, this.text.length);
-      res.push(l);
-
-      return res;
-    },
-
-    id2label() {
-      const id2label = {};
-      // default value;
-      id2label[-1] = {
-        text_color: '',
-        background_color: '',
-      };
-      for (let i = 0; i < this.labels.length; i++) {
-        const label = this.labels[i];
-        id2label[label.id] = label;
-      }
-      return id2label;
-    },
-  },
+  template: '<div @click="setSelectedRange">'
+          + '       <span class="text-sequence"'
+          + '            v-for="r in chunks"'
+          + '            v-if="id2label[r.label]"'
+          + '            v-bind:class="{tag: id2label[r.label].text_color}"'
+          + '            v-bind:style="{ color: id2label[r.label].text_color, backgroundColor: id2label[r.label].background_color }"'
+          + '       >{{ [...text].slice(r.start_offset, r.end_offset).join(\'\') }}<button class="delete is-small"'
+          + '                            v-if="id2label[r.label].text_color"'
+          + '                            @click="removeLabel(r)"></button></span>'
+          + '  </div>',
 });
 
 const vm = new Vue({ // eslint-disable-line no-unused-vars

app/server/static/js/stats.js

@@ -7,7 +7,12 @@ const { reactiveProp } = mixins;
 Vue.component('line-chart', {
   extends: HorizontalBar,
   mixins: [reactiveProp],
-  props: ['chartData'],
+  props: {
+    chartData: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       options: {
@@ -36,7 +41,12 @@ Vue.component('line-chart', {
 Vue.component('doughnut-chart', {
   extends: Doughnut,
   mixins: [reactiveProp],
-  props: ['chartData'],
+  props: {
+    chartData: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       options: {
@@ -60,22 +70,6 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
     messages: [],
   },
 
-  methods: {
-    makeData(object, label) {
-      const labels = Object.keys(object);
-      const counts = Object.values(object);
-      const res = {
-        labels: labels,
-        datasets: [{
-          label: label,
-          backgroundColor: '#00d1b2',
-          data: counts,
-        }],
-      };
-      return res;
-    },
-  },
-
   created() {
     HTTP.get('statistics').then((response) => {
       this.labelData = this.makeData(response.data.label, 'Label stats');
@@ -95,4 +89,20 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
       };
     });
   },
+
+  methods: {
+    makeData(object, label) {
+      const labels = Object.keys(object);
+      const counts = Object.values(object);
+      const res = {
+        labels: labels,
+        datasets: [{
+          label: label,
+          backgroundColor: '#00d1b2',
+          data: counts,
+        }],
+      };
+      return res;
+    },
+  },
 });