From 511d8175e6e99c1aa41c42d5c284b6a3fdaddf7d Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 15 Oct 2021 14:19:49 +0900
Subject: [PATCH] Update sequence labeling page

---
 frontend/pages/projects/_id/links/index.vue   |   6 +-
 .../projects/_id/sequence-labeling/index.vue  | 105 +++++-------------
 .../services/application/links/linkData.ts    |  16 +--
 .../links/linkTypesApplicationService.ts      |   4 +-
 4 files changed, 42 insertions(+), 89 deletions(-)

diff --git a/frontend/pages/projects/_id/links/index.vue b/frontend/pages/projects/_id/links/index.vue
index 04c9cd15..a10a842a 100644
--- a/frontend/pages/projects/_id/links/index.vue
+++ b/frontend/pages/projects/_id/links/index.vue
@@ -71,11 +71,11 @@ export default Vue.extend({
       dialogUpload: false,
       editedIndex: -1,
       editedItem: {
-        name: '',
+        text: '',
         color: '#ffffff'
       } as LinkTypeDTO,
       defaultItem: {
-        name: '',
+        text: '',
         color: '#ffffff'
       } as LinkTypeDTO,
       items: [] as LinkTypeDTO[],
@@ -94,7 +94,7 @@ export default Vue.extend({
     },
     usedNames(): string[] {
       const item = this.items[this.editedIndex] // to remove myself
-      return this.items.filter(_ => _ !== item).map(item => item.name)
+      return this.items.filter(_ => _ !== item).map(item => item.text)
     }
   },
 
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index 66ae5273..bbfcfa53 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -18,24 +18,21 @@
     </template>
     <template v-slot:content>
       <v-card>
-        <v-card-text class="title">
-          <entity-item-box
-            :labels="labels"
-            :link-types="linkTypes"
+        <div class="annotation-text pa-4">
+          <entity-editor
+            :dark="$vuetify.theme.dark"
+            :rtl="rtl"
             :text="doc.text"
             :entities="annotations"
-            :delete-annotation="remove"
-            :update-entity="update"
-            :add-entity="add"
-            :source-chunk="sourceChunk"
-            :source-link-type="sourceLinkType"
-            :select-source="selectSource"
-            :select-target="selectTarget"
-            :delete-link="deleteLink"
-            :select-new-link-type="selectNewLinkType"
-            :hide-all-link-menus="hideAllLinkMenus"
+            :entity-labels="labels"
+            :relations="links"
+            :relation-labels="linkTypes"
+            :allow-overlapping="allowOverlapping"
+            @addEntity="addEntity"
+            @click:entity="updateEntity"
+            @contextmenu:entity="deleteEntity"
           />
-        </v-card-text>
+        </div>
       </v-card>
     </template>
     <template v-slot:sidebar>
@@ -51,18 +48,13 @@ import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
-import EntityItemBox from '~/components/tasks/sequenceLabeling/EntityItemBox'
-
-const NONE = {
-  id: -1,
-  none: true
-};
+import EntityEditor from '@/components/tasks/sequenceLabeling/EntityEditor.vue'
 
 export default {
   layout: 'workspace',
 
   components: {
-    EntityItemBox,
+    EntityEditor,
     LayoutText,
     ListMetadata,
     ToolbarLaptop,
@@ -86,15 +78,14 @@ export default {
   data() {
     return {
       annotations: [],
+      allowOverlapping: false,
       docs: [],
       labels: [],
       links: [],
       linkTypes: [],
       project: {},
       enableAutoLabeling: false,
-      sourceChunk: NONE,
-      sourceLink: NONE,
-      sourceLinkType: NONE
+      rtl: false,
     }
   },
 
@@ -127,48 +118,29 @@ export default {
 
   async created() {
     this.labels = await this.$services.label.list(this.projectId)
-
     this.linkTypes = await this.$services.linkTypes.list(this.projectId)
-
     this.project = await this.$services.project.findById(this.projectId)
   },
 
   methods: {
     async list(docId) {
-      this.hideAllLinkMenus();
-
       const annotations = await this.$services.sequenceLabeling.list(this.projectId, docId);
       const links = await this.$services.sequenceLabeling.listLinks(this.projectId);
-
-      annotations.forEach(function(annotation) {
-        annotation.links = links.filter(link => link.annotation_id_1 === annotation.id);
-      });
-
       this.annotations = annotations;
       this.links = links;
     },
 
-    populateLinks() {
-      const links = this.links;
-      this.annotations.forEach(function(annotation) {
-        annotation.links = links.filter(link => link.annotation_id_1 === annotation.id);
-      });
-    },
-
-    async remove(id) {
-      this.hideAllLinkMenus();
+    async deleteEntity(id) {
       await this.$services.sequenceLabeling.delete(this.projectId, this.doc.id, id)
       await this.list(this.doc.id)
     },
 
-    async add(startOffset, endOffset, labelId) {
-      this.hideAllLinkMenus();
+    async addEntity(startOffset, endOffset, labelId) {
       await this.$services.sequenceLabeling.create(this.projectId, this.doc.id, labelId, startOffset, endOffset)
       await this.list(this.doc.id)
     },
 
-    async update(labelId, annotationId) {
-      this.hideAllLinkMenus();
+    async updateEntity(annotationId, labelId) {
       await this.$services.sequenceLabeling.changeLabel(this.projectId, this.doc.id, annotationId, labelId)
       await this.list(this.doc.id)
     },
@@ -190,35 +162,6 @@ export default {
       await this.$services.example.confirm(this.projectId, this.doc.id)
       await this.$fetch()
     },
-
-    selectSource(chunk) {
-      this.sourceChunk = chunk;
-    },
-
-    async selectTarget(chunk) {
-      // to avoid duplicated links:
-      if (!chunk.links.find(ch => ch.id === this.sourceChunk.id)) {
-        await this.$services.sequenceLabeling.createLink(this.projectId, this.sourceChunk.id, chunk.id, this.sourceLinkType.id, this.getUserId);
-        await this.list(this.doc.id);
-      }
-      this.hideAllLinkMenus();
-    },
-
-    async deleteLink(id, ndx) {
-      await this.$services.sequenceLabeling.deleteLink(this.projectId, this.sourceChunk.links[ndx].id)
-      await this.list(this.doc.id)
-
-      this.hideAllLinkMenus();
-    },
-
-    selectNewLinkType(type) {
-      this.sourceLinkType = type;
-    },
-
-    hideAllLinkMenus() {
-      this.sourceChunk = NONE;
-      this.sourceLinkType = NONE;
-    }
   },
 
   validate({ params, query }) {
@@ -226,3 +169,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.annotation-text {
+  font-size: 1.25rem !important;
+  font-weight: 500;
+  line-height: 2rem;
+  font-family: "Roboto", sans-serif !important;
+  opacity: 0.6;
+}
+</style>
diff --git a/frontend/services/application/links/linkData.ts b/frontend/services/application/links/linkData.ts
index 8217247f..46d514cc 100644
--- a/frontend/services/application/links/linkData.ts
+++ b/frontend/services/application/links/linkData.ts
@@ -2,26 +2,26 @@ import { LinkTypeItem, LinkItem } from '~/domain/models/links/link'
 
 export class LinkTypeDTO {
   id: number
-  name: string
+  text: string
   color: string
 
   constructor(item: LinkTypeItem) {
     this.id = item.id
-    this.name = item.name
+    this.text = item.name
     this.color = item.color
   }
 }
 
 export class LinkDTO {
   id: number
-  annotation_id_1: number
-  annotation_id_2: number
-  type: number
+  fromId: number
+  toId: number
+  labelId: number
 
   constructor(item: LinkItem) {
     this.id = item.id
-    this.annotation_id_1 = item.annotation_id_1
-    this.annotation_id_2 = item.annotation_id_2
-    this.type = item.type
+    this.fromId = item.annotation_id_1
+    this.toId = item.annotation_id_2
+    this.labelId = item.type
   }
 }
\ No newline at end of file
diff --git a/frontend/services/application/links/linkTypesApplicationService.ts b/frontend/services/application/links/linkTypesApplicationService.ts
index c294dbd6..5c54a666 100644
--- a/frontend/services/application/links/linkTypesApplicationService.ts
+++ b/frontend/services/application/links/linkTypesApplicationService.ts
@@ -14,12 +14,12 @@ export class LinkTypesApplicationService {
   }
 
   public create(projectId: string, item: LinkTypeDTO): void {
-    const label = new LinkTypeItem(0, item.name, item.color)
+    const label = new LinkTypeItem(0, item.text, item.color)
     this.repository.create(projectId, label)
   }
 
   public update(projectId: string, item: LinkTypeDTO): void {
-    const label = new LinkTypeItem(item.id, item.name, item.color)
+    const label = new LinkTypeItem(item.id, item.text, item.color)
     this.repository.update(projectId, label)
   }