From 1673176082988abdc80c42b32378e63fb93be306 Mon Sep 17 00:00:00 2001 From: Hironsan Date: Fri, 20 Jul 2018 13:05:12 +0900 Subject: [PATCH] Extract code from sequence_labeling for reuse --- app/db.sqlite3 | Bin 258048 -> 258048 bytes app/server/package-lock.json | 6 +- app/server/package.json | 2 +- app/server/static/js/http.js | 8 ++ app/server/static/js/mixin.js | 102 ++++++++++++++ app/server/static/js/sequence_labeling.js | 127 ++---------------- .../annotation/sequence_labeling.html | 17 +-- app/server/webpack.config.js | 36 ++--- 8 files changed, 153 insertions(+), 145 deletions(-) create mode 100644 app/server/static/js/http.js create mode 100644 app/server/static/js/mixin.js diff --git a/app/db.sqlite3 b/app/db.sqlite3 index 7bf9ba88d58031178881daeaa974e43968df314f..fd4231294e7d344cf12ee937f297387011754d81 100644 GIT binary patch delta 391 zcmZp8z~AtIe}XjQ%84@0j4L-Lgy}JgPTsD!oKdAYUVnSMKI75?W)*(T>Ff&_U0L|` z`878y8rm%6>EO|K|V3|B3%C&_A641c7BlUoSYou^4s70GYc*N04QcFf&_T{jCR zyyTnyL7s_ay5)Mt(?Id?>FgW8;@te(!}l|;6<}6kT`-;f0#M9RAcS@Mf~$<#RjkkX zZ}Fc6YTnB~{cJpwBrhiqJ0m9}5HPWdYi$1<&m>X6`j!7Z|I5vS5AO0$e|w*aU51mD z86*!P__-Ju7#R6~G4TK5$Eu7Kq>Kfs>^B4dZ~pK6pZMPbZ3LP2pNW%|lZBa+ar^K8 ZOwav!d3iV)K$dfIasX|A@6Rl_007>uPXhn| diff --git a/app/server/package-lock.json b/app/server/package-lock.json index 33ed639e..bb5a41ec 100644 --- a/app/server/package-lock.json +++ b/app/server/package-lock.json @@ -4012,9 +4012,9 @@ } }, "vue-shortkey": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/vue-shortkey/-/vue-shortkey-3.1.5.tgz", - "integrity": "sha512-tva1QsEbEO0Qc4N62ODSophFB4LszwQZzwEn9VaB3uchIJ0wsfVX8zSYi1OkFOuY/MsodDoC/YbbHlwINl27gA==", + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/vue-shortkey/-/vue-shortkey-3.1.6.tgz", + "integrity": "sha512-Nh5cwN86rfNCKINVi16OzN/iVPLvhk1yvVZD8h8E34WlzDRtdm+dngUjfsedz30+Eebbr6c444TmLLIrKqzW9g==", "requires": { "vue": "2.5.16" } diff --git a/app/server/package.json b/app/server/package.json index e1ed08ec..c4986a15 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -11,7 +11,7 @@ "dependencies": { "vue": "^2.5.16", "vue-loader": "^15.2.4", - "vue-shortkey": "^3.1.5" + "vue-shortkey": "^3.1.6" }, "devDependencies": { "webpack": "^4.12.0", diff --git a/app/server/static/js/http.js b/app/server/static/js/http.js new file mode 100644 index 00000000..e80cc13a --- /dev/null +++ b/app/server/static/js/http.js @@ -0,0 +1,8 @@ +axios.defaults.xsrfCookieName = 'csrftoken'; +axios.defaults.xsrfHeaderName = 'X-CSRFToken'; +var base_url = window.location.href.split('/').slice(3, 5).join('/'); +let HTTP = axios.create({ + baseURL: `/api/${base_url}/` +}); + +export default HTTP; \ No newline at end of file diff --git a/app/server/static/js/mixin.js b/app/server/static/js/mixin.js new file mode 100644 index 00000000..531c3321 --- /dev/null +++ b/app/server/static/js/mixin.js @@ -0,0 +1,102 @@ +import HTTP from './http.js'; + +var annotationMixin = { + data: function () { + return { + cur: 0, + items: [{ + id: null, + text: '', + labels: [] + }], + labels: [], + guideline: 'Here is the Annotation Guideline Text', + total: 0, + remaining: 0, + searchQuery: '', + url: '', + } + }, + methods: { + nextPage: async function () { + this.cur += 1; + if (this.cur == this.items.length) { + if (this.next) { + this.url = this.next; + await this.search(); + this.cur = 0; + } else { + this.cur = this.items.length - 1; + } + } + this.showMessage(this.cur); + }, + prevPage: async function () { + this.cur -= 1; + if (this.cur == -1) { + if (this.prev) { + this.url = this.prev; + await this.search(); + this.cur = this.items.length - 1; + } else { + this.cur = 0; + } + } + this.showMessage(this.cur); + }, + search: async function () { + await HTTP.get(this.url).then(response => { + this.items = response.data['results']; + this.next = response.data['next']; + this.prev = response.data['previous']; + }) + }, + showMessage: function (index) { + this.cur = index; + }, + submit: async function () { + this.url = `docs/?q=${this.searchQuery}`; + await this.search(); + this.cur = 0; + }, + updateProgress: function () { + HTTP.get('progress').then(response => { + this.total = response.data['total']; + this.remaining = response.data['remaining']; + }) + }, + deleteLabel: async function (index) { + var doc_id = this.items[this.cur].id; + var annotation_id = this.items[this.cur]['labels'][index].id; + HTTP.delete(`docs/${doc_id}/annotations/${annotation_id}`).then(response => { + this.items[this.cur]['labels'].splice(index, 1) + }); + this.updateProgress(); + } + }, + created: function () { + HTTP.get('labels').then(response => { + this.labels = response.data + }); + this.updateProgress(); + this.submit(); + }, + computed: { + achievement: function () { + var done = this.total - this.remaining; + var percentage = Math.round(done / this.total * 100); + return this.total > 0 ? percentage : 0; + }, + progressColor: function () { + if (this.achievement < 30) { + return 'is-danger' + } else if (this.achievement < 70) { + return 'is-warning' + } else { + return 'is-primary' + } + } + } +}; + +export default annotationMixin; \ No newline at end of file diff --git a/app/server/static/js/sequence_labeling.js b/app/server/static/js/sequence_labeling.js index 2f08ec12..38f42506 100644 --- a/app/server/static/js/sequence_labeling.js +++ b/app/server/static/js/sequence_labeling.js @@ -1,14 +1,9 @@ -//import Vue from 'vue'; -//Vue.use(require('vue-shortkey')); +import Vue from 'vue'; +Vue.use(require('vue-shortkey')); +import annotationMixin from './mixin.js'; +import HTTP from './http.js'; -axios.defaults.xsrfCookieName = 'csrftoken'; -axios.defaults.xsrfHeaderName = 'X-CSRFToken'; -var base_url = window.location.href.split('/').slice(3, 5).join('/'); -const HTTP = axios.create({ - baseURL: `/api/${base_url}/` -}) - -const Annotator = { +Vue.component('annotator', { template: '
\ {{ r.word }}\
', @@ -75,14 +70,14 @@ const Annotator = { this.entityPositions.splice(index, 1) }, getBackgroundColor: function (label_id) { - for (item of this.labels) { + for (var item of this.labels) { if (item.id == label_id) { return item.background_color } } }, getTextColor: function (label_id) { - for (item of this.labels) { + for (var item of this.labels) { if (item.id == label_id) { return item.text_color } @@ -101,7 +96,9 @@ const Annotator = { chunks: function () { var res = []; var left = 0; - for (let [i, e] of this.sortedEntityPositions.entries()) { + var i = 0; + for (let i in this.sortedEntityPositions) { + var e = this.sortedEntityPositions[i]; var text = this.text.slice(left, e['start_offset']); res.push({ 'word': text, @@ -130,113 +127,11 @@ const Annotator = { return res } } -} - -var annotationMixin = { - data: function () { - return { - cur: 0, - items: [{ - id: null, - text: '', - labels: [] - }], - labels: [], - guideline: 'Here is the Annotation Guideline Text', - total: 0, - remaining: 0, - searchQuery: '', - url: '', - } - }, - methods: { - nextPage: async function () { - this.cur += 1; - if (this.cur == this.items.length) { - if (this.next) { - this.url = this.next; - await this.search(); - this.cur = 0; - } else { - this.cur = this.items.length - 1; - } - } - this.showMessage(this.cur); - }, - prevPage: async function () { - this.cur -= 1; - if (this.cur == -1) { - if (this.prev) { - this.url = this.prev; - await this.search(); - this.cur = this.items.length - 1; - } else { - this.cur = 0; - } - } - this.showMessage(this.cur); - }, - search: async function () { - await HTTP.get(this.url).then(response => { - this.items = response.data['results']; - this.next = response.data['next']; - this.prev = response.data['previous']; - }) - }, - showMessage: function (index) { - this.cur = index; - }, - submit: async function () { - this.url = `docs/?q=${this.searchQuery}`; - await this.search(); - this.cur = 0; - }, - updateProgress: function () { - HTTP.get('progress').then(response => { - this.total = response.data['total']; - this.remaining = response.data['remaining']; - }) - }, - deleteLabel: async function (index) { - var doc_id = this.items[this.cur].id; - var annotation_id = this.items[this.cur]['labels'][index].id; - HTTP.delete(`docs/${doc_id}/annotations/${annotation_id}`).then(response => { - this.items[this.cur]['labels'].splice(index, 1) - }); - this.updateProgress(); - } - }, - created: function () { - HTTP.get('labels').then(response => { - this.labels = response.data - }); - this.updateProgress(); - this.submit(); - }, - computed: { - achievement: function () { - var done = this.total - this.remaining; - var percentage = Math.round(done / this.total * 100); - return this.total > 0 ? percentage : 0; - }, - progressColor: function () { - if (this.achievement < 30) { - return 'is-danger' - } else if (this.achievement < 70) { - return 'is-warning' - } else { - return 'is-primary' - } - } - } -} +}) var vm = new Vue({ el: '#mail-app', delimiters: ['[[', ']]'], - components: { - 'annotator': Annotator, - }, mixins: [annotationMixin], methods: { annotate: function (label_id) { diff --git a/app/server/templates/annotation/sequence_labeling.html b/app/server/templates/annotation/sequence_labeling.html index 982ca62f..7f07d081 100644 --- a/app/server/templates/annotation/sequence_labeling.html +++ b/app/server/templates/annotation/sequence_labeling.html @@ -1,13 +1,6 @@ {% extends "annotation/annotation_base.html" %} {% load static %} -
-
- npm - 0.5.0 -
-
- {% block annotation-area %}
@@ -17,7 +10,7 @@
+ v-on:click="annotate(label.id)" v-shortkey.once="['ctrl', [[ label.shortcut ]] ]" @shortkey="annotate(label.id)"> [[ label.text ]] [[ label.shortcut ]] @@ -28,12 +21,16 @@
- +
{% endblock %} {% block footer %} - + {% endblock %} \ No newline at end of file diff --git a/app/server/webpack.config.js b/app/server/webpack.config.js index 7017a2a1..ef37dd95 100644 --- a/app/server/webpack.config.js +++ b/app/server/webpack.config.js @@ -1,23 +1,29 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin') - module.exports = { +module.exports = { + mode: 'development', + entry: { + 'sequence_labeling': './static/js/sequence_labeling.js' + }, + output: { + path: __dirname + '/static/dist', + filename: '[name].js' + }, module: { - rules: [ - // ... other rules -{ - test: /\.vue$/, - loader: 'vue-loader' -} - ] + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader' + } + ] }, plugins: [ - // make sure to include the plugin! - new VueLoaderPlugin() - ], + new VueLoaderPlugin() + ], resolve: { - extensions: ['.js', '.vue'], - alias: { - vue$: 'vue/dist/vue.esm.js', //webpack使う場合はこっちを指定する https://jp.vuejs.org/v2/guide/installation.html#%E7%94%A8%E8%AA%9E - }, + extensions: ['.js', '.vue'], + alias: { + vue$: 'vue/dist/vue.esm.js', + }, }, } \ No newline at end of file