Added label description

3 years ago · 8ba9e95e29
21 changed files with 474 additions and 28 deletions
--- a/backend/label_types/migrations/0008_categorytype_description_relationtype_description_and_more.py
+++ b/backend/label_types/migrations/0008_categorytype_description_relationtype_description_and_more.py
@ -0,0 +1,28 @@
+# Generated by Django 4.1.1 on 2022-10-13 19:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("label_types", "0007_delete_relationtypeold"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="categorytype",
+            name="description",
+            field=models.CharField(max_length=200, null=True),
+        ),
+        migrations.AddField(
+            model_name="relationtype",
+            name="description",
+            field=models.CharField(max_length=200, null=True),
+        ),
+        migrations.AddField(
+            model_name="spantype",
+            name="description",
+            field=models.CharField(max_length=200, null=True),
+        ),
+    ]
--- a/backend/label_types/models.py
+++ b/backend/label_types/models.py
@ -1,3 +1,4 @@
+from pydoc import describe
 import random
 import string

@ -29,6 +30,7 @@ class LabelType(models.Model):
    )
    background_color = models.CharField(max_length=7, default=generate_random_hex_color)
    text_color = models.CharField(max_length=7, default="#ffffff")
+    description = models.CharField(null=True, max_length=200)
    created_at = models.DateTimeField(auto_now_add=True, db_index=True)
    updated_at = models.DateTimeField(auto_now=True)

--- a/backend/label_types/serializers.py
+++ b/backend/label_types/serializers.py
@ -47,6 +47,7 @@ class LabelSerializer(serializers.ModelSerializer):
            "prefix_key",
            "suffix_key",
            "background_color",
+            "description",
            "text_color",
        )

--- a/backend/label_types/urls.py
+++ b/backend/label_types/urls.py
@ -1,4 +1,4 @@
-from django.urls import path
+from django.urls import path, include

 from .views import (
    CategoryTypeDetail,
@ -13,6 +13,7 @@ from .views import (
 )

 urlpatterns = [
+    path('__debug__/', include('debug_toolbar.urls')),
    path(route="category-types", view=CategoryTypeList.as_view(), name="category_types"),
    path(route="category-types/<int:label_id>", view=CategoryTypeDetail.as_view(), name="category_type"),
    path(route="span-types", view=SpanTypeList.as_view(), name="span_types"),
@ -22,4 +23,4 @@ urlpatterns = [
    path(route="relation-type-upload", view=RelationTypeUploadAPI.as_view(), name="relation_type-upload"),
    path(route="relation-types", view=RelationTypeList.as_view(), name="relation_types_list"),
    path(route="relation-types/<int:label_id>", view=RelationTypeDetail.as_view(), name="relation_type_detail"),
-]
+]
--- a/backend/projects/serializers.py
+++ b/backend/projects/serializers.py
@ -62,7 +62,6 @@ class ProjectSerializer(serializers.ModelSerializer):
        fields = [
            "id",
            "name",
-            "description",
            "guideline",
            "project_type",
            "created_at",
--- a/frontend/assets/css/fonts.css
+++ b/frontend/assets/css/fonts.css
@ -0,0 +1,378 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-cyrillic-ext1.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-cyrillic2.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-greek-ext3.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-greek4.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-vietnamese5.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-latin-ext6.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-100-latin7.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-cyrillic-ext8.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-cyrillic9.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-greek-ext10.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-greek11.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-vietnamese12.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-latin-ext13.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-300-latin14.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-cyrillic-ext15.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-cyrillic16.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-greek-ext17.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-greek18.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-vietnamese19.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-latin-ext20.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-400-latin21.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-cyrillic-ext22.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-cyrillic23.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-greek-ext24.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-greek25.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-vietnamese26.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-latin-ext27.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-500-latin28.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-cyrillic-ext29.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-cyrillic30.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-greek-ext31.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-greek32.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-vietnamese33.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-latin-ext34.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-700-latin35.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-cyrillic-ext36.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-cyrillic37.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-greek-ext38.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-greek39.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-vietnamese40.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-latin-ext41.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('~assets/fonts/Roboto-900-latin42.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/frontend/components/label/FormCreate.vue
+++ b/frontend/components/label/FormCreate.vue
@ -26,7 +26,17 @@
            />
          </v-col>
        </v-row>
-
+        <v-row>
+          <v-col cols="12" sm="12">
+            <v-text-field
+              :value="description"
+              :counter="200"
+              :label="$t('labels.labelDescripton')"
+              outlined
+              @input="$emit('update:description', $event)"
+            />
+          </v-col>
+        </v-row>
        <v-row>
          <v-col cols="12" sm="12">
            <v-text-field
@ -102,6 +112,10 @@ export default Vue.extend({
      type: String,
      required: true
    },
+    description: {
+      type: String,
+      required: true
+    },
    backgroundColor: {
      type: String,
      required: true
--- a/frontend/components/label/FormImport.vue
+++ b/frontend/components/label/FormImport.vue
@ -63,12 +63,14 @@ export default Vue.extend({
          text: 'Dog',
          suffix_key: 'a',
          background_color: '#FF0000',
+          description: 'Canis lupus',
          text_color: '#ffffff'
        },
        {
          text: 'Cat',
          suffix_key: 'c',
          background_color: '#FF0000',
+          description: 'Felis catus',
          text_color: '#ffffff'
        }
      ]
--- a/frontend/components/label/LabelList.vue
+++ b/frontend/components/label/LabelList.vue
@ -81,10 +81,12 @@ export default Vue.extend({

  computed: {
    headers() {
-      const headers = [
-        { text: this.$t('generic.name'), value: 'text', sortable: true },
-        { text: this.$t('labels.shortkey'), value: 'suffixKey', sortable: true },
-        { text: this.$t('labels.color'), value: 'backgroundColor', sortable: true }
+      return [
+        { text: this.$t('generic.name'), value: 'text' },
+        { text: this.$t('labels.shortkey'), value: 'suffixKey' },
+        { text: this.$t('labels.color'), value: 'backgroundColor' },
+        { text: this.$t('labels.description'), value: 'description' },
+        { text: 'Actions', value: 'actions', sortable: false }
      ]
      if (!this.disableEdit) {
        headers.push({ text: 'Actions', value: 'actions', sortable: false })
--- a/frontend/components/tasks/sequenceLabeling/LabelingMenu.vue
+++ b/frontend/components/tasks/sequenceLabeling/LabelingMenu.vue
@ -17,6 +17,7 @@
        />
      </v-list-item>
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
      <v-list-item v-for="(label, i) in labels" :key="i" @click="onLabelSelected(label.id)">
 =======
@ -25,6 +26,9 @@
 =======
      <!-- <v-list-item v-for="(label, i) in labels.slice(0,100)" :key="i" @click="onLabelSelected(label.id)">
 >>>>>>> 8d1f4d31 (Removed remaining labels from the dropdown menu)
+=======
+      <v-list-item v-for="(label, i) in labels.slice(0,100)" :key="i" @click="onLabelSelected(label.id)">
+>>>>>>> 0b78e227 (Added label description)
        <v-list-item-action v-if="hasAnySuffixKey">
          <v-chip
            v-if="label.suffixKey"
@ -38,14 +42,13 @@
        <v-list-item-content>
          <v-list-item-title v-text="label.text" />
        </v-list-item-content>
-      </v-list-item> -->
+      </v-list-item>
    </v-list>
  </v-menu>
 </template>

 <script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
+import Vue from 'vue'export default Vue.extend({
  props: {
    labels: {
      type: Array,
--- a/frontend/domain/models/label/label.ts
+++ b/frontend/domain/models/label/label.ts
@ -5,15 +5,17 @@ export class LabelItem {
    readonly prefixKey: string | null,
    readonly suffixKey: string | null,
    readonly backgroundColor: string,
-    readonly textColor: string = '#ffffff'
+    readonly description: string,
+    readonly textColor: string = '#ffffff',
  ) {}

  static create(
    text: string,
    prefixKey: string | null,
    suffixKey: string | null,
-    backgroundColor: string
+    backgroundColor: string,
+    description: string,
  ): LabelItem {
-    return new LabelItem(0, text, prefixKey, suffixKey, backgroundColor)
+    return new LabelItem(0, text, prefixKey, suffixKey, backgroundColor, description)
  }
 }
--- a/frontend/i18n/en/projects/labels.js
+++ b/frontend/i18n/en/projects/labels.js
@ -7,6 +7,7 @@ export default {
  exportLabels: 'Export Labels',
  labelName: 'Label name',
  labelMessage: 'Label name is required',
+  description: 'Description',
  createLink: 'Create Link',
  linkName: 'Link name',
  linkMessage: 'Link name is required',
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@ -2,6 +2,11 @@ import colors from 'vuetify/es5/util/colors'
 import i18n from './i18n'

 export default {
+  generate: {
+    target: 'static',
+    devtools: true,
+  },
+
  ssr: false,
  /*
   ** Headers of the page
--- a/frontend/pages/demo/intent-detection-and-slot-filling/index.vue
+++ b/frontend/pages/demo/intent-detection-and-slot-filling/index.vue
@ -15,15 +15,17 @@
            </v-card-title>
            <v-divider />
            <div class="annotation-text pa-4">
-              <entity-editor
-                :dark="$vuetify.theme.dark"
-                :text="currentDoc.text"
-                :entities="currentDoc.annotations"
-                :entity-labels="entityLabels"
-                @addEntity="addEntity"
-                @click:entity="updateEntity"
-                @contextmenu:entity="deleteEntity"
-              />
+              <KeepAlive>
+                <entity-editor
+                  :dark="$vuetify.theme.dark"
+                  :text="currentDoc.text"
+                  :entities="currentDoc.annotations"
+                  :entity-labels="entityLabels"
+                  @addEntity="addEntity"
+                  @click:entity="updateEntity"
+                  @contextmenu:entity="deleteEntity"
+                />
+              </KeepAlive>
            </div>
          </v-card>
        </v-col>
--- a/frontend/pages/projects/_id/labels/_label_id/edit.vue
+++ b/frontend/pages/projects/_id/labels/_label_id/edit.vue
@ -39,6 +39,7 @@ export default Vue.extend({
        prefixKey: null,
        suffixKey: null,
        backgroundColor: '#73D8FF',
+        description: '',
        textColor: '#ffffff'
      } as LabelDTO,
      items: [] as LabelDTO[]
--- a/frontend/pages/projects/_id/labels/add.vue
+++ b/frontend/pages/projects/_id/labels/add.vue
@ -49,6 +49,7 @@ export default Vue.extend({
        prefixKey: null,
        suffixKey: null,
        backgroundColor: '#73D8FF',
+        description: '',
        textColor: '#ffffff'
      } as LabelDTO,
      defaultItem: {
@ -56,6 +57,7 @@ export default Vue.extend({
        prefixKey: null,
        suffixKey: null,
        backgroundColor: '#73D8FF',
+        description: '',
        textColor: '#ffffff'
      } as LabelDTO,
      items: [] as LabelDTO[]
--- a/frontend/plugins/role.ts
+++ b/frontend/plugins/role.ts
@ -1,5 +1,4 @@
 import Vue from 'vue'
-
 declare module 'vue/types/vue' {
  interface Vue {
    $translateRole(role: string, mappings: object): string
--- a/frontend/repositories/label/apiLabelRepository.ts
+++ b/frontend/repositories/label/apiLabelRepository.ts
@ -9,6 +9,7 @@ function toModel(item: { [key: string]: any }): LabelItem {
    item.prefix_key,
    item.suffix_key,
    item.background_color,
+    item.description,
    item.text_color
  )
 }
@ -20,6 +21,7 @@ function toPayload(item: LabelItem): { [key: string]: any } {
    prefix_key: item.prefixKey,
    suffix_key: item.suffixKey,
    background_color: item.backgroundColor,
+    description: item.description,
    text_color: item.textColor
  }
 }
--- a/frontend/services/application/label/labelApplicationService.ts
+++ b/frontend/services/application/label/labelApplicationService.ts
@ -17,7 +17,7 @@ export class LabelApplicationService {
  }

  public async create(projectId: string, item: CreateLabelCommand): Promise<LabelDTO> {
-    const label = LabelItem.create(item.text, item.prefixKey, item.suffixKey, item.backgroundColor)
+    const label = LabelItem.create(item.text, item.prefixKey, item.suffixKey, item.backgroundColor, item.description)
    const created = await this.repository.create(projectId, label)
    return new LabelDTO(created)
  }
@ -28,7 +28,8 @@ export class LabelApplicationService {
      item.text,
      item.prefixKey,
      item.suffixKey,
-      item.backgroundColor
+      item.backgroundColor,
+      item.description
    )
    const updated = await this.repository.update(projectId, label)
    return new LabelDTO(updated)
--- a/frontend/services/application/label/labelData.ts
+++ b/frontend/services/application/label/labelData.ts
@ -6,6 +6,7 @@ export class LabelDTO {
  prefixKey: string | null
  suffixKey: string | null
  backgroundColor: string
+  description: string
  textColor: string

  constructor(item: LabelItem) {
@ -14,6 +15,7 @@ export class LabelDTO {
    this.prefixKey = item.prefixKey
    this.suffixKey = item.suffixKey
    this.backgroundColor = item.backgroundColor
+    this.description = item.description
    this.textColor = '#ffffff'
  }
 }
--- a/frontend/vue-shim.d.ts
+++ b/frontend/vue-shim.d.ts
@ -1,5 +1,4 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import Vue from 'vue'  export default Vue
 }
 declare module 'v-annotator'