Browse Source

Implement seq2seq components

pull/341/head
Hironsan 5 years ago
parent
commit
1ea7ad832a
5 changed files with 249 additions and 2 deletions
  1. 3
      frontend/api/db/docs.json
  2. 3
      frontend/api/routes/docs.js
  3. 65
      frontend/components/containers/Seq2seqContainer.vue
  4. 109
      frontend/components/organisms/Seq2seqBox.vue
  5. 71
      frontend/pages/projects/_id/seq2seq/index.vue

3
frontend/api/db/docs.json

@ -10,7 +10,8 @@
"start_offset": 10,
"end_offset": 24,
"user": 1,
"document": 1
"document": 1,
"text": "This text is for seq2seq testing"
}
],
"meta": "{}",

3
frontend/api/routes/docs.js

@ -92,7 +92,8 @@ router.post('/:docId/annotations', (req, res, next) => {
start_offset: req.body.start_offset,
end_offset: req.body.end_offset,
user: 1,
document: parseInt(req.params.docId)
document: parseInt(req.params.docId),
text: req.body.text
}
doc.annotations.push(annotation)
res.json(annotation)

65
frontend/components/containers/Seq2seqContainer.vue

@ -0,0 +1,65 @@
<template>
<div>
<v-card
v-if="currentDoc"
class="title mb-5"
>
<v-card-text>
{{ currentDoc.text }}
</v-card-text>
</v-card>
<seq2seq-box
v-if="currentDoc"
:text="currentDoc.text"
:annotations="currentDoc.annotations"
:delete-annotation="_deleteAnnotation"
:update-annotation="_updateAnnotation"
:create-annotation="_createAnnotation"
/>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import Seq2seqBox from '~/components/organisms/Seq2seqBox'
export default {
components: {
Seq2seqBox
},
computed: {
...mapGetters('documents', ['currentDoc'])
},
created() {
this.getDocumentList()
},
methods: {
...mapActions('documents', ['getDocumentList', 'deleteAnnotation', 'updateAnnotation', 'addAnnotation']),
_deleteAnnotation(annotationId) {
const payload = {
annotationId,
projectId: this.$route.params.id
}
this.deleteAnnotation(payload)
},
_updateAnnotation(annotationId, text) {
const payload = {
annotationId,
text: text,
projectId: this.$route.params.id
}
this.updateAnnotation(payload)
},
_createAnnotation(text) {
const payload = {
text,
projectId: this.$route.params.id
}
this.addAnnotation(payload)
}
}
}
</script>

109
frontend/components/organisms/Seq2seqBox.vue

@ -0,0 +1,109 @@
<template>
<v-card>
<v-data-table
:headers="headers"
:items="annotations"
item-key="id"
hide-default-header
hide-default-footer
disable-pagination
class="elevation-1"
@input="update"
>
<template v-slot:top>
<v-text-field
v-model="newText"
prepend-inner-icon="mdi-pencil"
label="New text"
autofocus
single-line
hide-details
filled
@keyup.enter="create"
/>
</template>
<template v-slot:item.text="{ item }">
<v-edit-dialog>
{{ item.text }}
<template v-slot:input>
<v-textarea
:value="item.text"
label="Edit"
autofocus
@change="update(item.id, $event)"
/>
</template>
</v-edit-dialog>
</template>
<template v-slot:item.action="{ item }">
<v-icon
small
@click="deleteAnnotation(item.id)"
>
delete
</v-icon>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
props: {
annotations: {
type: Array,
default: () => ([]),
required: true
},
deleteAnnotation: {
type: Function,
default: () => ([]),
required: true
},
updateAnnotation: {
type: Function,
default: () => ([]),
required: true
},
createAnnotation: {
type: Function,
default: () => ([]),
required: true
}
},
data() {
return {
newText: '',
headers: [
{
text: 'Text',
align: 'left',
value: 'text'
},
{
text: 'Actions',
align: 'right',
value: 'action'
}
]
}
},
methods: {
update(annotationId, text) {
if (text.length > 0) {
this.updateAnnotation(annotationId, text)
} else {
this.deleteAnnotation(annotationId)
}
},
create() {
if (this.newText.length > 0) {
this.createAnnotation(this.newText)
this.newText = ''
}
}
}
}
</script>

71
frontend/pages/projects/_id/seq2seq/index.vue

@ -0,0 +1,71 @@
<template>
<div>
<side-bar-labeling
:labels="labels"
:progress="progress"
:metadata="metadata"
/>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center>
<v-flex>
<seq2seq-container />
</v-flex>
</v-layout>
</v-container>
</v-content>
</div>
</template>
<script>
import Seq2seqContainer from '~/components/containers/Seq2seqContainer'
import SideBarLabeling from '~/components/organisms/SideBarLabeling'
export default {
layout: 'annotation',
components: {
Seq2seqContainer,
SideBarLabeling
},
data: () => ({
progress: 30,
metadata: '{"wikiPageId":2}',
search: '',
labels: [
{
id: 1,
name: 'Location',
color: '#E91E63',
shortcut: 'l'
},
{
id: 2,
name: 'Organization',
color: '#03A9F4',
shortcut: 'o'
},
{
id: 3,
name: 'Person',
color: '#009688',
shortcut: 'p'
},
{
id: 4,
name: 'Date',
color: '#FF6F00',
shortcut: 'd'
},
{
id: 5,
name: 'Other',
color: '#333333',
shortcut: 't'
}
]
})
}
</script>
<style scoped>
</style>
Loading…
Cancel
Save