Implement seq2seq components

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": "{}",

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)

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>

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>

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>