Add LabelGroup components

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>

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>

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>