From d8b23a7af05485c7bfced5f0bdfeaef93c5fc103 Mon Sep 17 00:00:00 2001 From: Clemens Wolff Date: Fri, 12 Apr 2019 11:25:15 -0400 Subject: [PATCH] Fix all Vue eslint errors --- app/server/static/js/.eslintrc.js | 4 +- .../static/js/demo/demo_named_entity.js | 119 +++++++++------- app/server/static/js/demo/demo_translation.js | 20 +-- app/server/static/js/label.js | 15 +- app/server/static/js/seq2seq.js | 14 +- app/server/static/js/sequence_labeling.js | 131 ++++++++++-------- app/server/static/js/stats.js | 46 +++--- 7 files changed, 197 insertions(+), 152 deletions(-) diff --git a/app/server/static/js/.eslintrc.js b/app/server/static/js/.eslintrc.js index 1592b8a8..951612b0 100644 --- a/app/server/static/js/.eslintrc.js +++ b/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 \ No newline at end of file diff --git a/app/server/static/js/demo/demo_named_entity.js b/app/server/static/js/demo/demo_named_entity.js index e60c5fef..a2c8ba94 100644 --- a/app/server/static/js/demo/demo_named_entity.js +++ b/app/server/static/js/demo/demo_named_entity.js @@ -6,19 +6,21 @@ Vue.use(require('vue-shortkey'), { }); Vue.component('annotator', { - template: '
' - + ' {{ text.slice(r.start_offset, r.end_offset) }}' - + '
', 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: '
' + + ' {{ text.slice(r.start_offset, r.end_offset) }}' + + '
', }); const vm = new Vue({ // eslint-disable-line no-unused-vars diff --git a/app/server/static/js/demo/demo_translation.js b/app/server/static/js/demo/demo_translation.js index c603c8d5..f8dcb5c5 100644 --- a/app/server/static/js/demo/demo_translation.js +++ b/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() { diff --git a/app/server/static/js/label.js b/app/server/static/js/label.js index 1b92663f..ed3b24c0 100644 --- a/app/server/static/js/label.js +++ b/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(); - }); - }, }); diff --git a/app/server/static/js/seq2seq.js b/app/server/static/js/seq2seq.js index a00abfc2..29c7e61f 100644 --- a/app/server/static/js/seq2seq.js +++ b/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(); diff --git a/app/server/static/js/sequence_labeling.js b/app/server/static/js/sequence_labeling.js index e1f78fe0..6e8988fa 100644 --- a/app/server/static/js/sequence_labeling.js +++ b/app/server/static/js/sequence_labeling.js @@ -10,26 +10,69 @@ Vue.use(require('vue-shortkey'), { Vue.filter('simpleShortcut', simpleShortcut); Vue.component('annotator', { - template: '
' - + ' {{ [...text].slice(r.start_offset, r.end_offset).join(\'\') }}' - + '
', 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: '
' + + ' {{ [...text].slice(r.start_offset, r.end_offset).join(\'\') }}' + + '
', }); const vm = new Vue({ // eslint-disable-line no-unused-vars diff --git a/app/server/static/js/stats.js b/app/server/static/js/stats.js index 914e0427..adeb4104 100644 --- a/app/server/static/js/stats.js +++ b/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; + }, + }, });