From de1c7b127dcdbe5ed92ed3cc4143740a6cb7de65 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:08:36 +0900
Subject: [PATCH 1/6] Add LabelGroup components

---
 .../tasks/textClassification/LabelGroup.vue   | 46 ++++++++++++
 .../multiLabel/LabelGroup.vue                 | 74 +++++++++++++++++++
 .../singleLabel/LabelGroup.vue                | 69 +++++++++++++++++
 3 files changed, 189 insertions(+)
 create mode 100644 frontend/components/tasks/textClassification/LabelGroup.vue
 create mode 100644 frontend/components/tasks/textClassification/multiLabel/LabelGroup.vue
 create mode 100644 frontend/components/tasks/textClassification/singleLabel/LabelGroup.vue

diff --git a/frontend/components/tasks/textClassification/LabelGroup.vue b/frontend/components/tasks/textClassification/LabelGroup.vue
new file mode 100644
index 00000000..cc6dbbee
--- /dev/null
+++ b/frontend/components/tasks/textClassification/LabelGroup.vue
@@ -0,0 +1,46 @@
+<template>
+  <label-group-single
+    v-if="singleLabel"
+    :annotations="annotations"
+    :labels="labels"
+    @add="$emit('add', $event)"
+    @remove="$emit('remove', $event)"
+  />
+  <label-group-multi
+    v-else
+    :annotations="annotations"
+    :labels="labels"
+    @add="$emit('add', $event)"
+    @remove="$emit('remove', $event)"
+  />
+</template>
+
+<script>
+import LabelGroupSingle from './singleLabel/LabelGroup.vue'
+import LabelGroupMulti from './multiLabel/LabelGroup.vue'
+
+export default {
+  components: {
+    LabelGroupSingle,
+    LabelGroupMulti
+  },
+
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    },
+    singleLabel: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/frontend/components/tasks/textClassification/multiLabel/LabelGroup.vue b/frontend/components/tasks/textClassification/multiLabel/LabelGroup.vue
new file mode 100644
index 00000000..1a0bcdae
--- /dev/null
+++ b/frontend/components/tasks/textClassification/multiLabel/LabelGroup.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-chip-group
+    :value="annotatedLabel"
+    column
+    multiple
+    @change="addOrRemove"
+  >
+    <v-chip
+      v-for="item in labels"
+      :key="item.id"
+      :color="item.backgroundColor"
+      filter
+      :text-color="$contrastColor(item.backgroundColor)"
+    >
+      {{ item.text }}
+      <v-avatar
+        right
+        color="white"
+        class="black--text font-weight-bold"
+      >
+        {{ item.suffixKey }}
+      </v-avatar>
+    </v-chip>
+  </v-chip-group>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    }
+  },
+
+  computed: {
+    annotatedLabel() {
+      const labelIds = this.annotations.map(item => item.label)
+      return labelIds.map(id => this.labels.findIndex(item => item.id === id))
+    }
+  },
+
+  methods: {
+    addOrRemove(indexes) {
+      if (indexes.length > this.annotatedLabel.length) {
+        const index = _.difference(indexes, this.annotatedLabel)
+        const label = this.labels[index]
+        this.add(label)
+      } else {
+        const index = _.difference(this.annotatedLabel, indexes)
+        const label = this.labels[index]
+        this.remove(label)
+      }
+    },
+
+    add(label) {
+      this.$emit('add', label.id)
+    },
+
+    remove(label) {
+      const annotation = this.annotations.find(item => item.label === label.id)
+      this.$emit('remove', annotation.id)
+    }
+  }
+}
+</script>
diff --git a/frontend/components/tasks/textClassification/singleLabel/LabelGroup.vue b/frontend/components/tasks/textClassification/singleLabel/LabelGroup.vue
new file mode 100644
index 00000000..d450147b
--- /dev/null
+++ b/frontend/components/tasks/textClassification/singleLabel/LabelGroup.vue
@@ -0,0 +1,69 @@
+<template>
+  <v-chip-group
+    :value="annotatedLabel"
+    column
+    @change="addOrRemove"
+  >
+    <v-chip
+      v-for="item in labels"
+      :key="item.id"
+      :color="item.backgroundColor"
+      filter
+      :text-color="$contrastColor(item.backgroundColor)"
+    >
+      {{ item.text }}
+      <v-avatar
+        right
+        color="white"
+        class="black--text font-weight-bold"
+      >
+        {{ item.suffixKey }}
+      </v-avatar>
+    </v-chip>
+  </v-chip-group>
+</template>
+
+<script>
+export default {
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    }
+  },
+
+  computed: {
+    annotatedLabel() {
+      const labelIds = this.annotations.map(item => item.label)
+      return this.labels.findIndex(item => labelIds.includes(item.id))
+    }
+  },
+
+  methods: {
+    addOrRemove(index) {
+      if (index === undefined) {
+        const label = this.labels[this.annotatedLabel]
+        this.remove(label)
+      } else {
+        const label = this.labels[index]
+        this.add(label)
+      }
+    },
+
+    add(label) {
+      this.$emit('add', label.id)
+    },
+
+    remove(label) {
+      const annotation = this.annotations.find(item => item.label === label.id)
+      this.$emit('remove', annotation.id)
+    }
+  }
+}
+</script>

From 323bba973636bc0ff586b158e5d4ec3161e419a6 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:08:53 +0900
Subject: [PATCH 2/6] Add LabelSelect components

---
 .../tasks/textClassification/LabelSelect.vue  |  46 ++++++++
 .../multiLabel/LabelSelect.vue                | 108 ++++++++++++++++++
 .../singleLabel/LabelSelect.vue               |  93 +++++++++++++++
 3 files changed, 247 insertions(+)
 create mode 100644 frontend/components/tasks/textClassification/LabelSelect.vue
 create mode 100644 frontend/components/tasks/textClassification/multiLabel/LabelSelect.vue
 create mode 100644 frontend/components/tasks/textClassification/singleLabel/LabelSelect.vue

diff --git a/frontend/components/tasks/textClassification/LabelSelect.vue b/frontend/components/tasks/textClassification/LabelSelect.vue
new file mode 100644
index 00000000..0a70cda1
--- /dev/null
+++ b/frontend/components/tasks/textClassification/LabelSelect.vue
@@ -0,0 +1,46 @@
+<template>
+  <label-select-single
+    v-if="singleLabel"
+    :annotations="annotations"
+    :labels="labels"
+    @add="$emit('add', $event)"
+    @remove="$emit('remove', $event)"
+  />
+  <label-select-multi
+    v-else
+    :annotations="annotations"
+    :labels="labels"
+    @add="$emit('add', $event)"
+    @remove="$emit('remove', $event)"
+  />
+</template>
+
+<script>
+import LabelSelectSingle from './singleLabel/LabelSelect.vue'
+import LabelSelectMulti from './multiLabel/LabelSelect.vue'
+
+export default {
+  components: {
+    LabelSelectSingle,
+    LabelSelectMulti
+  },
+
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    },
+    singleLabel: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/frontend/components/tasks/textClassification/multiLabel/LabelSelect.vue b/frontend/components/tasks/textClassification/multiLabel/LabelSelect.vue
new file mode 100644
index 00000000..73386c4d
--- /dev/null
+++ b/frontend/components/tasks/textClassification/multiLabel/LabelSelect.vue
@@ -0,0 +1,108 @@
+<template>
+  <v-combobox
+    v-model="annotatedLabels"
+    chips
+    :items="labels"
+    item-text="text"
+    hide-details
+    hide-selected
+    multiple
+    class="pt-0"
+    :search-input.sync="search"
+    @change="search=''"
+  >
+    <template v-slot:selection="{ attrs, item, select, selected }">
+      <v-chip
+        v-bind="attrs"
+        :input-value="selected"
+        :color="item.backgroundColor"
+        :text-color="$contrastColor(item.backgroundColor)"
+        close
+        @click="select"
+        @click:close="remove(item)"
+      >
+        <v-avatar
+          left
+          color="white"
+          class="black--text font-weight-bold"
+        >
+          {{ item.suffixKey }}
+        </v-avatar>
+        {{ item.text }}
+      </v-chip>
+    </template>
+    <template v-slot:item="{ item }">
+      <v-chip
+        :color="item.backgroundColor"
+        :text-color="$contrastColor(item.backgroundColor)"
+      >
+        <v-avatar
+          left
+          color="white"
+          class="black--text font-weight-bold"
+        >
+          {{ item.suffixKey }}
+        </v-avatar>
+        {{ item.text }}
+      </v-chip>
+    </template>
+  </v-combobox>
+</template>
+
+<script>
+export default {
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      search: ''
+    }
+  },
+
+  computed: {
+    annotatedLabels: {
+      get() {
+        const labelIds = this.annotations.map(item => item.label)
+        return this.labels.filter(item => labelIds.includes(item.id))
+      },
+      set(newValue) {
+        if (newValue.length > this.annotations.length) {
+          const label = newValue[newValue.length - 1]
+          if (typeof label === 'object') {
+            this.add(label)
+          } else {
+            newValue.pop()
+          }
+        } else {
+          const label = this.annotatedLabels.find(x => !newValue.some(y => y.id === x.id))
+          if (typeof label === 'object') {
+            this.remove(label)
+          }
+        }
+      }
+    }
+  },
+
+  methods: {
+    add(label) {
+      this.$emit('add', label.id)
+    },
+
+    remove(label) {
+      const annotation = this.annotations.find(item => item.label === label.id)
+      this.$emit('remove', annotation.id)
+    }
+  }
+}
+</script>
diff --git a/frontend/components/tasks/textClassification/singleLabel/LabelSelect.vue b/frontend/components/tasks/textClassification/singleLabel/LabelSelect.vue
new file mode 100644
index 00000000..f0daa330
--- /dev/null
+++ b/frontend/components/tasks/textClassification/singleLabel/LabelSelect.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-select
+    :value="annotatedLabel"
+    chips
+    :items="labels"
+    item-text="text"
+    hide-details
+    hide-selected
+    return-object
+    class="pt-0"
+    @change="addOrRemove"
+  >
+    <template v-slot:selection="{ attrs, item, select, selected }">
+      <v-chip
+        v-if="item.backgroundColor"
+        v-bind="attrs"
+        :input-value="selected"
+        :color="item.backgroundColor"
+        :text-color="$contrastColor(item.backgroundColor)"
+        close
+        @click="select"
+        @click:close="remove(item)"
+      >
+        <v-avatar
+          left
+          color="white"
+          class="black--text font-weight-bold"
+        >
+          {{ item.suffixKey }}
+        </v-avatar>
+        {{ item.text }}
+      </v-chip>
+    </template>
+    <template v-slot:item="{ item }">
+      <v-chip
+        :color="item.backgroundColor"
+        :text-color="$contrastColor(item.backgroundColor)"
+      >
+        <v-avatar
+          left
+          color="white"
+          class="black--text font-weight-bold"
+        >
+          {{ item.suffixKey }}
+        </v-avatar>
+        {{ item.text }}
+      </v-chip>
+    </template>
+  </v-select>
+</template>
+
+<script>
+export default {
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    }
+  },
+
+  computed: {
+    annotatedLabel() {
+      const labelIds = this.annotations.map(item => item.label)
+      return this.labels.find(item => labelIds.includes(item.id))
+    }
+  },
+
+  methods: {
+    addOrRemove(val) {
+      if (val) {
+        this.add(val)
+      } else {
+        this.remove(this.annotatedLabel)
+      }
+    },
+
+    add(label) {
+      this.$emit('add', label.id)
+    },
+
+    remove(label) {
+      const annotation = this.annotations.find(item => item.label === label.id)
+      this.$emit('remove', annotation.id)
+    }
+  }
+}
+</script>

From 64cde612f3aab424583fe0afa74bc95ba144b90b Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:09:18 +0900
Subject: [PATCH 3/6] Add slot to ToolbarLaptop

---
 frontend/components/tasks/toolbar/ToolbarLaptop.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/tasks/toolbar/ToolbarLaptop.vue b/frontend/components/tasks/toolbar/ToolbarLaptop.vue
index 390c9800..265fc331 100644
--- a/frontend/components/tasks/toolbar/ToolbarLaptop.vue
+++ b/frontend/components/tasks/toolbar/ToolbarLaptop.vue
@@ -59,6 +59,7 @@
           />
         </v-dialog>
       </v-btn-toggle>
+      <slot />
       <v-spacer />
       <button-pagination
         :value="page"

From 66d62cecbadb91386481587779f84ca780528141 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:10:32 +0900
Subject: [PATCH 4/6] Use LabelSelect and LabelGroup in text classification
 page

---
 .../_id/text-classification/index.vue         | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/pages/projects/_id/text-classification/index.vue b/frontend/pages/projects/_id/text-classification/index.vue
index d3d65dfa..a50df08a 100644
--- a/frontend/pages/projects/_id/text-classification/index.vue
+++ b/frontend/pages/projects/_id/text-classification/index.vue
@@ -11,7 +11,20 @@
         class="d-none d-sm-block"
         @click:clear-label="clear"
         @click:review="approve"
-      />
+      >
+        <v-btn-toggle
+          v-model="labelOption"
+          mandatory
+          class="ms-2"
+        >
+          <v-btn icon>
+            <v-icon>mdi-format-list-bulleted</v-icon>
+          </v-btn>
+          <v-btn icon>
+            <v-icon>mdi-text</v-icon>
+          </v-btn>
+        </v-btn-toggle>
+      </toolbar-laptop>
       <toolbar-mobile
         :total="docs.count"
         class="d-flex d-sm-none"
@@ -23,21 +36,24 @@
         @shortkey="addOrRemove"
       >
         <v-card-title>
-          <single-label
-            v-if="project.singleClassClassification"
+          <label-group
+            v-if="labelOption === 0"
             :labels="labels"
             :annotations="annotations"
+            :single-label="project.singleClassClassification"
             @add="add"
             @remove="remove"
           />
-          <text-classification
+          <label-select
             v-else
             :labels="labels"
             :annotations="annotations"
+            :single-label="project.singleClassClassification"
             @add="add"
             @remove="remove"
           />
         </v-card-title>
+        <v-divider />
         <v-card-text class="title highlight" v-text="doc.text" />
       </v-card>
     </template>
@@ -49,10 +65,10 @@
 
 <script>
 import _ from 'lodash'
+import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
+import LabelSelect from '@/components/tasks/textClassification/LabelSelect'
 import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
-import SingleLabel from '@/components/tasks/textClassification/SingleLabel'
-import TextClassification from '@/components/tasks/textClassification/TextClassification'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 
@@ -60,10 +76,10 @@ export default {
   layout: 'workspace',
 
   components: {
+    LabelGroup,
+    LabelSelect,
     LayoutText,
     ListMetadata,
-    SingleLabel,
-    TextClassification,
     ToolbarLaptop,
     ToolbarMobile
   },
@@ -89,7 +105,8 @@ export default {
       docs: [],
       labels: [],
       project: {},
-      enableAutoLabeling: false
+      enableAutoLabeling: false,
+      labelOption: 0
     }
   },
 

From 4e20d80e8bded8184f1c930af0ddb0476197a2c5 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:14:32 +0900
Subject: [PATCH 5/6] Use LabelGroup in demo page

---
 frontend/pages/demo/sentiment-analysis/index.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/demo/sentiment-analysis/index.vue b/frontend/pages/demo/sentiment-analysis/index.vue
index 9673c9eb..885fc81b 100644
--- a/frontend/pages/demo/sentiment-analysis/index.vue
+++ b/frontend/pages/demo/sentiment-analysis/index.vue
@@ -5,13 +5,15 @@
         <v-col cols="12" md="9">
           <v-card>
             <v-card-title>
-              <text-classification
+              <label-group
                 :labels="items"
                 :annotations="currentDoc.annotations"
+                single-label="true"
                 @add="addLabel"
                 @remove="removeLabel"
               />
             </v-card-title>
+            <v-divider />
             <v-card-text class="title">
               {{ currentDoc.text }}
             </v-card-text>
@@ -27,13 +29,13 @@
 
 <script>
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
-import TextClassification from '@/components/tasks/textClassification/TextClassification'
+import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
 
 export default {
   layout: 'demo',
 
   components: {
-    TextClassification,
+    LabelGroup,
     ListMetadata
   },
 

From c18ca5959daed55569a801973e454b44bd71cbdf Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 23 Mar 2021 08:15:23 +0900
Subject: [PATCH 6/6] Remove SingleLabel.vue and TextClassification.vue

---
 .../tasks/textClassification/SingleLabel.vue  |  92 ---------------
 .../textClassification/TextClassification.vue | 107 ------------------
 2 files changed, 199 deletions(-)
 delete mode 100644 frontend/components/tasks/textClassification/SingleLabel.vue
 delete mode 100644 frontend/components/tasks/textClassification/TextClassification.vue

diff --git a/frontend/components/tasks/textClassification/SingleLabel.vue b/frontend/components/tasks/textClassification/SingleLabel.vue
deleted file mode 100644
index 387b2999..00000000
--- a/frontend/components/tasks/textClassification/SingleLabel.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <v-select
-    :value="annotatedLabel"
-    :items="labels"
-    item-text="text"
-    :label="$t('labels.labels')"
-    hide-selected
-    return-object
-    chips
-    @change="addOrRemove"
-  >
-    <template v-slot:selection="{ attrs, item, select, selected }">
-      <v-chip
-        v-if="item.backgroundColor"
-        v-bind="attrs"
-        :input-value="selected"
-        :color="item.backgroundColor"
-        :text-color="$contrastColor(item.backgroundColor)"
-        close
-        @click="select"
-        @click:close="remove(item)"
-      >
-        <v-avatar
-          left
-          color="white"
-          class="black--text font-weight-bold"
-        >
-          {{ item.suffixKey }}
-        </v-avatar>
-        {{ item.text }}
-      </v-chip>
-    </template>
-    <template v-slot:item="{ item }">
-      <v-chip
-        :color="item.backgroundColor"
-        :text-color="$contrastColor(item.backgroundColor)"
-      >
-        <v-avatar
-          left
-          color="white"
-          class="black--text font-weight-bold"
-        >
-          {{ item.suffixKey }}
-        </v-avatar>
-        {{ item.text }}
-      </v-chip>
-    </template>
-  </v-select>
-</template>
-
-<script>
-export default {
-  props: {
-    labels: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    annotations: {
-      type: Array,
-      default: () => ([]),
-      required: true
-    }
-  },
-
-  computed: {
-    annotatedLabel() {
-      const labelIds = this.annotations.map(item => item.label)
-      return this.labels.find(item => labelIds.includes(item.id))
-    }
-  },
-
-  methods: {
-    addOrRemove(val) {
-      if (val) {
-        this.add(val)
-      } else {
-        this.remove(this.annotatedLabel)
-      }
-    },
-
-    add(label) {
-      this.$emit('add', label.id)
-    },
-
-    remove(label) {
-      const annotation = this.annotations.find(item => item.label === label.id)
-      this.$emit('remove', annotation.id)
-    }
-  }
-}
-</script>
diff --git a/frontend/components/tasks/textClassification/TextClassification.vue b/frontend/components/tasks/textClassification/TextClassification.vue
deleted file mode 100644
index 87d5b548..00000000
--- a/frontend/components/tasks/textClassification/TextClassification.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <v-combobox
-    v-model="annotatedLabels"
-    :items="labels"
-    item-text="text"
-    :label="$t('labels.labels')"
-    hide-selected
-    chips
-    multiple
-    :search-input.sync="search"
-    @change="search=''"
-  >
-    <template v-slot:selection="{ attrs, item, select, selected }">
-      <v-chip
-        v-bind="attrs"
-        :input-value="selected"
-        :color="item.backgroundColor"
-        :text-color="$contrastColor(item.backgroundColor)"
-        close
-        @click="select"
-        @click:close="remove(item)"
-      >
-        <v-avatar
-          left
-          color="white"
-          class="black--text font-weight-bold"
-        >
-          {{ item.suffixKey }}
-        </v-avatar>
-        {{ item.text }}
-      </v-chip>
-    </template>
-    <template v-slot:item="{ item }">
-      <v-chip
-        :color="item.backgroundColor"
-        :text-color="$contrastColor(item.backgroundColor)"
-      >
-        <v-avatar
-          left
-          color="white"
-          class="black--text font-weight-bold"
-        >
-          {{ item.suffixKey }}
-        </v-avatar>
-        {{ item.text }}
-      </v-chip>
-    </template>
-  </v-combobox>
-</template>
-
-<script>
-export default {
-  props: {
-    labels: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    annotations: {
-      type: Array,
-      default: () => ([]),
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      search: ''
-    }
-  },
-
-  computed: {
-    annotatedLabels: {
-      get() {
-        const labelIds = this.annotations.map(item => item.label)
-        return this.labels.filter(item => labelIds.includes(item.id))
-      },
-      set(newValue) {
-        if (newValue.length > this.annotations.length) {
-          const label = newValue[newValue.length - 1]
-          if (typeof label === 'object') {
-            this.add(label)
-          } else {
-            newValue.pop()
-          }
-        } else {
-          const label = this.annotatedLabels.find(x => !newValue.some(y => y.id === x.id))
-          if (typeof label === 'object') {
-            this.remove(label)
-          }
-        }
-      }
-    }
-  },
-
-  methods: {
-    add(label) {
-      this.$emit('add', label.id)
-    },
-
-    remove(label) {
-      const annotation = this.annotations.find(item => item.label === label.id)
-      this.$emit('remove', annotation.id)
-    }
-  }
-}
-</script>