From 00daf7d4da4aa950b44b8492ded59669b113f061 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 8 Feb 2022 10:05:17 +0900
Subject: [PATCH] Add new labeling option for sequence labeling

---
 .../tasks/sequenceLabeling/EntityEditor.vue   | 13 +++--
 .../projects/_id/sequence-labeling/index.vue  | 47 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/frontend/components/tasks/sequenceLabeling/EntityEditor.vue b/frontend/components/tasks/sequenceLabeling/EntityEditor.vue
index 3f927544..a00e9e92 100644
--- a/frontend/components/tasks/sequenceLabeling/EntityEditor.vue
+++ b/frontend/components/tasks/sequenceLabeling/EntityEditor.vue
@@ -49,8 +49,6 @@
         <v-list-item
           v-for="(label, i) in entityLabels"
           :key="i"
-          v-shortkey="[label.suffixKey]"
-          @shortkey="addOrUpdateEntity(label.id)"
           @click="addOrUpdateEntity(label.id)"
         >
           <v-list-item-action
@@ -125,6 +123,11 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    selectedLabel: {
+      type: Object,
+      default: null,
+      required: false,
+    },
   },
 
   data() {
@@ -175,7 +178,11 @@ export default Vue.extend({
 
     handleAddEvent(e: any, startOffset: number, endOffset: number) {
       this.setOffset(startOffset, endOffset)
-      this.showEntityLabelMenu(e)
+      if (this.selectedLabel) {
+        this.addOrUpdateEntity(this.selectedLabel.id)
+      } else {
+        this.showEntityLabelMenu(e)
+      }
     },
 
     handleEntityClickEvent(e: any, entityId: number) {
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index c6110f87..d588b5aa 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout-text v-if="doc.id">
+  <layout-text v-if="doc.id" v-shortkey="shortKeys" @shortkey="changeSelectedLabel">
     <template #header>
       <toolbar-laptop
         :doc-id="doc.id"
@@ -29,6 +29,7 @@
             :relation-labels="linkTypes"
             :allow-overlapping="project.allowOverlapping"
             :grapheme-mode="project.graphemeMode"
+            :selected-label="selectedLabel"
             @addEntity="addEntity"
             @click:entity="updateEntity"
             @contextmenu:entity="deleteEntity"
@@ -38,6 +39,35 @@
     </template>
     <template #sidebar>
       <list-metadata :metadata="doc.meta" />
+      <v-card class="mt-4">
+        <v-card-title>Label Types</v-card-title>
+        <v-card-text>
+          <v-chip-group
+            v-model="selectedLabelIndex"
+            column
+          >
+            <v-chip
+              v-for="(item, index) in labels"
+              :key="item.id"
+              v-shortkey="[item.suffixKey]"
+              :color="item.backgroundColor"
+              filter
+              :text-color="$contrastColor(item.backgroundColor)"
+              @shortkey="selectedLabelIndex = index"
+            >
+              {{ item.text }}
+              <v-avatar
+                v-if="item.suffixKey"
+                right
+                color="white"
+                class="black--text font-weight-bold"
+              >
+                {{ item.suffixKey }}
+              </v-avatar>
+            </v-chip>
+          </v-chip-group>
+        </v-card-text>
+      </v-card>
     </template>
   </layout-text>
 </template>
@@ -77,6 +107,7 @@ export default {
       project: {},
       enableAutoLabeling: false,
       rtl: false,
+      selectedLabelIndex: null,
     }
   },
 
@@ -101,15 +132,25 @@ export default {
     shortKeys() {
       return Object.fromEntries(this.labels.map(item => [item.id, [item.suffixKey]]))
     },
+
     projectId() {
       return this.$route.params.id
     },
+
     doc() {
       if (_.isEmpty(this.docs) || this.docs.items.length === 0) {
         return {}
       } else {
         return this.docs.items[0]
       }
+    },
+
+    selectedLabel() {
+      if (Number.isInteger(this.selectedLabelIndex)) {
+        return this.labels[this.selectedLabelIndex]
+      } else {
+        return null
+      }
     }
   },
 
@@ -178,6 +219,10 @@ export default {
       await this.$services.example.confirm(this.projectId, this.doc.id)
       await this.$fetch()
     },
+
+    changeSelectedLabel(event) {
+      this.selectedLabelIndex = this.labels.findIndex((item) => item.suffixKey === event.srcKey)
+    }
   }
 }
 </script>