@konfuzio/document-validation-ui 0.1.42-dev.1 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.42-dev.1",
+  "version": "0.1.42",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/choose_label_set_modal.scss

@@ -16,17 +16,15 @@
       color: $text-strong;
     }
 
-    .label-set-dropdown {
-      width: 100%;
-      border: 1px solid $grey-outline;
-      height: 40px;
-      cursor: pointer;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 8px;
-      margin-bottom: 4px;
-
-      &.dropdown-disabled {
-        cursor: not-allowed;
+    .label-set-list {
+      max-height: 400px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      button.full-width {
+        width: 100%;
       }
     }
 
@@ -35,17 +33,6 @@
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
-
-      .labels-select {
-        padding: 12px;
-        overflow: scroll;
-        height: 154px;
-        border: 1px solid $grey-detail;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
     }
 
     .next-step-description {
@@ -56,10 +43,5 @@
       color: $text-color;
       margin-top: 8px;
     }
-
-    .submit-ann-set {
-      margin-top: 16px;
-      width: 100%;
-    }
   }
 }

package/src/assets/scss/theme.scss

@@ -49,6 +49,10 @@
     color: $text-color;
   }
 
+  a {
+    color: $primary;
+  }
+
   button {
     &.is-primary {
       background-color: $primary !important;

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <section class="choose-label-set-modal">
     <b-modal
@@ -8,89 +9,57 @@
       :on-cancel="close"
     >
       <section class="modal-card-body">
-        <div class="content">
+        <b-loading :active="loading" :is-full-page="false">
+          <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+        </b-loading>
+        <div v-if="!loading" class="content">
           <h3>
-            {{
-              isMultipleAnnotations
-                ? $t("new_multi_ann_title")
-                : $t("new_ann_set_title")
-            }}
+            {{ $t("new_ann_set_title") }}
           </h3>
-          <p>
-            {{
-              isMultipleAnnotations
-                ? $t("new_multi_ann_description")
-                : $t("new_ann_set_description")
-            }}
-          </p>
-          <b-tooltip
-            multilined
-            :active="labelSets.length === 0"
-            size="is-large"
-            position="is-bottom"
-            class="bottom-aligned"
-            :close-delay="5000"
-          >
-            <template #content>
-              <div ref="tooltipContent"></div>
-            </template>
-            <b-dropdown
-              v-model="selectedLabelSet"
-              aria-role="list"
-              :disabled="labelSets.length === 0"
-              :class="[
-                'label-set-dropdown',
-                labelSets.length === 0 && 'dropdown-disabled',
-              ]"
-              scrollable
-            >
-              <template #trigger>
-                <div>
-                  <div>
-                    <span v-if="selectedLabelSet">{{
-                      selectedLabelSet.name
-                    }}</span>
-                    <span v-else>{{ $t("select_label_set") }}</span>
+          <div>
+            <div v-if="labelSets.length === 0">
+              <p v-html="$t('no_multi_ann_labelset_model')" />
+            </div>
+            <div v-else>
+              <p>
+                {{ $t("new_ann_set_description") }}
+              </p>
+
+              <div class="label-set-list">
+                <div
+                  v-for="labelSetItem in labelSets"
+                  :key="labelSetItem.id"
+                  class="label-set-list-row"
+                >
+                  <b-button
+                    class="full-width"
+                    type="is-secondary"
+                    @click="submit(labelSetItem)"
+                  >
+                    {{
+                      `${labelSetItem.name} ${numberOfLabelSetGroup(
+                        labelSetItem
+                      )}`
+                    }}
+                  </b-button>
+                  <div class="labels-list">
+                    <span
+                      v-for="(label, index) in labelSetItem.labels"
+                      :key="label.id"
+                      >{{
+                        `${label.name}${
+                          index + 1 !== labelSetItem.labels.length ? ", " : ""
+                        }`
+                      }}</span
+                    >
                   </div>
                 </div>
-              </template>
-              <b-dropdown-item
-                v-for="labelSetItem in labelSets"
-                :key="labelSetItem.id"
-                aria-role="listitem"
-                :value="labelSetItem"
-                @click="setSelectedLabelSet(labelSetItem)"
-              >
-                <span>{{ labelSetItem.name }}</span>
-              </b-dropdown-item>
-            </b-dropdown>
-          </b-tooltip>
-          <div v-if="selectedLabelSet" class="labels-list">
-            <div v-if="isMultipleAnnotations" class="labels-select">
-              <div v-for="label in labels" :key="label.id">
-                <b-checkbox v-model="label.selected">{{
-                  label.name
-                }}</b-checkbox>
               </div>
+              <p class="next-step-description">
+                {{ $t("new_ann_set_hint") }}
+              </p>
             </div>
-            <span v-for="(label, index) in labels" v-else :key="label.id">{{
-              `${label.name}${index + 1 !== labels.length ? ", " : ""}`
-            }}</span>
           </div>
-          <b-button
-            class="submit-ann-set primary-button"
-            type="is-primary"
-            :disabled="!selectedLabelSet"
-            @click="submit"
-          >
-            {{ $t("continue") }}
-          </b-button>
-          <p
-            v-if="!isMultipleAnnotations && selectedLabelSet"
-            class="next-step-description"
-          >
-            {{ $t("new_ann_set_hint") }}
-          </p>
         </div>
       </section>
     </b-modal>
@@ -106,31 +75,18 @@ import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "CreateAnnotationSetModal",
-  props: {
-    isMultipleAnnotations: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-  },
   data() {
     return {
-      selectedLabelSet: null,
       labelSets: [],
       show: true,
       labels: [],
+      loading: true,
     };
   },
   computed: {
     ...mapState("document", ["annotationSets"]),
     ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
-  },
-  watch: {
-    labelSets(newValue) {
-      if (newValue.length === 0) {
-        this.setTooltipText();
-      }
-    },
+    ...mapGetters("document", ["numberOfLabelSetGroup"]),
   },
   mounted() {
     this.$store.dispatch("project/fetchLabelSets").then((data) => {
@@ -138,43 +94,18 @@ export default {
         data,
         this.annotationSets
       );
+      this.loading = false;
     });
   },
   methods: {
-    submit() {
-      // filter labels that were selected (by default all are selected so no issue if the feature is disabled)
-      const labelsFiltered = this.labels.filter((label) => label.selected);
-      this.selectedLabelSet.labels = this.selectedLabelSet.labels.filter(
-        (label) => {
-          return labelsFiltered.find((filtered) => filtered.id === label.id);
-        }
-      );
-
-      this.$emit("finish", this.selectedLabelSet);
+    submit(labelSet) {
+      this.$emit("finish", labelSet);
       this.close();
     },
-    setSelectedLabelSet(labelSet) {
-      this.createLabelsList(labelSet.labels);
-      this.selectedLabelSet = labelSet;
-    },
     close() {
       this.$store.dispatch("display/showChooseLabelSetModal", null);
       this.$emit("close");
     },
-    createLabelsList(labels) {
-      this.labels = labels.map((label) => {
-        return {
-          ...label,
-          selected: true,
-        };
-      });
-    },
-    setTooltipText() {
-      // Text set from innerHTML vs 'label' due to html tag in locales file string
-      this.$refs.tooltipContent.innerHTML = this.$t(
-        "no_multi_ann_labelset_model"
-      );
-    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -45,132 +45,115 @@
       >
         <EmptyState :is-search="true" />
       </div>
-
-      <div
-        v-if="Object.entries(annotationSetsInTable()).length > 0"
-        class="annotation-set-group"
-      >
-        <div class="label-set-header">
-          <div class="label-set-name">{{ $t("table") }}</div>
-        </div>
+      <div v-if="annotationSetsAccordion">
         <div
-          v-for="(tableSet, index) in Object.values(annotationSetsInTable())"
-          :key="index"
-          class="ann-set-table"
-          @click="openAnnotationSetTable(tableSet)"
+          v-for="(
+            annotationSet, indexGroup
+          ) in getAnnotationsFiltered.annotationSets"
+          :key="indexGroup"
+          :class="[
+            'annotation-set-group',
+            !annotationSetsAccordion[indexGroup] === true &&
+              'annotation-set-collapsed',
+          ]"
         >
-          <div class="ann-set-table-icon">
-            <GridIcon /><span class="ann-set-number">{{
-              tableSet.length
-            }}</span>
-          </div>
-          <span class="ann-set-table-label-set-name">{{
-            tableSet[0].label_set.name
-          }}</span>
-        </div>
-      </div>
-      <div
-        v-for="(
-          annotationSet, indexGroup
-        ) in getAnnotationsFiltered.annotationSets"
-        :key="indexGroup"
-        :class="[
-          'annotation-set-group',
-          !annotationSetsAccordion[indexGroup] === true &&
-            'annotation-set-collapsed',
-        ]"
-      >
-        <div class="label-set-header" @click="toggleAccordion(indexGroup)">
-          <div class="label-set-name">
-            <b-icon
-              :icon="
-                annotationSetsAccordion[indexGroup] ? 'angle-up' : 'angle-down'
-              "
-              size="is-12"
-            />
-            {{
-              `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
-                annotationSet
-              )}`
-            }}
-          </div>
-          <div
-            v-if="
-              !publicView &&
-              !isDocumentReviewed &&
-              annotationSet.labels.length !== 0
-            "
-            class="labelset-action-buttons"
-          >
-            <AnnotationSetActionButtons
-              :is-placeholder="annotationSetsAccordion[indexGroup] === false"
-              :number-of-empty-labels-in-annotation-set="
-                emptyLabels(annotationSet).length
-              "
-              :number-of-not-correct-annotations-in-annotation-set="
-                notCorrectAnnotations(annotationSet).length
-              "
-              @mark-all-empty-missing="
-                markAnnotationsAsMissing(null, null, annotationSet, true)
-              "
-              @hover-annotation-set-to-mark-missing="
-                handleHoverAnnotationSet(annotationSet, 'missing')
-              "
-              @leave-annotation-set-to-mark-missing="
-                handleHoverAnnotationSet(null)
-              "
-              @accept-all-pending-annotations="
-                acceptPendingAnnotationsInAnnotationSet(annotationSet)
-              "
-              @hover-annotation-set-to-accept="
-                handleHoverAnnotationSet(annotationSet, 'accept')
+          <div class="label-set-header" @click="toggleAccordion(indexGroup)">
+            <div class="label-set-name">
+              <b-icon
+                :icon="
+                  annotationSetsAccordion[indexGroup]
+                    ? 'angle-up'
+                    : 'angle-down'
+                "
+                size="is-12"
+              />
+              {{
+                `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
+                  annotationSet
+                )}`
+              }}
+            </div>
+            <div
+              v-if="
+                !publicView &&
+                !isDocumentReviewed &&
+                annotationSet.labels.length !== 0
               "
-              @leave-annotation-set-to-accept="handleHoverAnnotationSet(null)"
-            />
+              class="labelset-action-buttons"
+            >
+              <AnnotationSetActionButtons
+                :is-placeholder="annotationSetsAccordion[indexGroup] === false"
+                :number-of-empty-labels-in-annotation-set="
+                  emptyLabels(annotationSet).length
+                "
+                :number-of-not-correct-annotations-in-annotation-set="
+                  notCorrectAnnotations(annotationSet).length
+                "
+                @mark-all-empty-missing="
+                  markAnnotationsAsMissing(null, null, annotationSet, true)
+                "
+                @hover-annotation-set-to-mark-missing="
+                  handleHoverAnnotationSet(annotationSet, 'missing')
+                "
+                @leave-annotation-set-to-mark-missing="
+                  handleHoverAnnotationSet(null)
+                "
+                @accept-all-pending-annotations="
+                  acceptPendingAnnotationsInAnnotationSet(annotationSet)
+                "
+                @hover-annotation-set-to-accept="
+                  handleHoverAnnotationSet(annotationSet, 'accept')
+                "
+                @leave-annotation-set-to-accept="handleHoverAnnotationSet(null)"
+              />
+            </div>
           </div>
-        </div>
 
-        <b-collapse :open="annotationSetsAccordion[indexGroup] === true">
-          <div v-if="annotationSet.labels.length > 0">
-            <div v-for="label in annotationSet.labels" :key="label.id">
-              <div
-                v-if="!(label.annotations.length === 0 && publicView)"
-                class="labels"
-              >
-                <DocumentLabel
-                  :label="label"
-                  :annotation-set="annotationSet"
-                  :index-group="indexGroup"
-                  @handle-missing-annotation="markAnnotationsAsMissing"
-                />
+          <b-collapse :open="annotationSetsAccordion[indexGroup] === true">
+            <div v-if="annotationSet.labels.length > 0">
+              <div v-for="label in annotationSet.labels" :key="label.id">
+                <div
+                  v-if="!(label.annotations.length === 0 && publicView)"
+                  class="labels"
+                >
+                  <DocumentLabel
+                    :label="label"
+                    :annotation-set="annotationSet"
+                    :index-group="indexGroup"
+                    @handle-missing-annotation="markAnnotationsAsMissing"
+                  />
+                </div>
               </div>
             </div>
-          </div>
 
-          <div v-else-if="annotationSet.labels.length === 0" class="no-labels">
-            <span>
-              {{
-                isSearchingAnnotationList
-                  ? $t("no_results")
-                  : $t("no_labels_in_set")
-              }}</span
+            <div
+              v-else-if="annotationSet.labels.length === 0"
+              class="no-labels"
             >
-            <!-- eslint-disable vue/no-v-html -->
-            <span
-              v-if="isDocumentEditable && !isSearchingAnnotationList"
-              v-html="$t('link_to_add_labels')"
-            />
-          </div>
+              <span>
+                {{
+                  isSearchingAnnotationList
+                    ? $t("no_results")
+                    : $t("no_labels_in_set")
+                }}</span
+              >
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                v-if="isDocumentEditable && !isSearchingAnnotationList"
+                v-html="$t('link_to_add_labels')"
+              />
+            </div>
 
-          <div
-            v-else-if="
-              !annotationSetHasAnnotations(annotationSet) && publicView
-            "
-            class="no-labels"
-          >
-            <span> {{ $t("no_annotations_in_annotation_set") }}</span>
-          </div>
-        </b-collapse>
+            <div
+              v-else-if="
+                !annotationSetHasAnnotations(annotationSet) && publicView
+              "
+              class="no-labels"
+            >
+              <span> {{ $t("no_annotations_in_annotation_set") }}</span>
+            </div>
+          </b-collapse>
+        </div>
       </div>
     </div>
   </div>
@@ -183,7 +166,6 @@ import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
 import AnnotationFilters from "./AnnotationFilters";
 import LoadingAnnotations from "./LoadingAnnotations";
-import GridIcon from "../../assets/images/GridIcon";
 
 /**
  * This component loads all annotations for one document
@@ -195,7 +177,6 @@ export default {
     AnnotationSetActionButtons,
     DocumentLabel,
     LoadingAnnotations,
-    GridIcon,
     AnnotationFilters,
   },
   data() {
@@ -203,9 +184,10 @@ export default {
       count: 0,
       jumpToNextAnnotation: false,
       numberOfLoadingAnnotations: 3,
-      annotationSetsAccordion: [],
+      annotationSetsAccordion: null,
     };
   },
+
   computed: {
     ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
@@ -226,7 +208,6 @@ export default {
       "getAnnotationsFiltered",
       "emptyLabels",
       "notCorrectAnnotations",
-      "annotationSetsInTable",
       "isDocumentReviewed",
       "annotationSetOfAnnotation",
       "isAnnotationInAnnotationSet",
@@ -251,12 +232,7 @@ export default {
         this.jumpToNextAnnotation = false;
       }
     },
-    annotationSets(newAnnotationSets, oldAnnotationSets) {
-      this.loadAccordions(
-        this.getAnnotationsFiltered.annotationSets,
-        oldAnnotationSets
-      );
-    },
+
     getAnnotationsFiltered(newFiltered, oldFiltered) {
       this.loadAccordions(
         newFiltered.annotationSets,
@@ -279,7 +255,12 @@ export default {
   },
   created() {
     window.addEventListener("keydown", this.keyDownHandler);
-    if (this.getAnnotationsFiltered.annotationSets) {
+
+    // validation for when page is hot reloaded and data reinitialize
+    if (
+      this.getAnnotationsFiltered.annotationSets &&
+      this.getAnnotationsFiltered.annotationSets.length > 0
+    ) {
       this.loadAccordions(this.getAnnotationsFiltered.annotationSets);
     }
   },
@@ -292,6 +273,7 @@ export default {
         annotationSet.labels.length === 0 && this.isSearchingAnnotationList
       );
     },
+
     toggleAccordion(index) {
       const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
       newAnnotationSetsAccordion[index] = !newAnnotationSetsAccordion[index];
@@ -306,12 +288,11 @@ export default {
     },
     loadAccordions(newAnnotationSets, oldAnnotationSets = null) {
       if (newAnnotationSets) {
+        const isFirstTime = this.annotationSetsAccordion === null;
         const newAnnotationSetsAccordion = [];
         const annotationSetsOpened = [];
         const annotationSetsCreated = [];
 
-        const isFirstTime = oldAnnotationSets === null;
-
         if (!isFirstTime) {
           // when annotation sets changed, restore old state
           // and check if new ones were created to be open by default

package/src/components/DocumentPage/DocumentPage.vue

@@ -179,13 +179,6 @@
           @selectEntities="handleEntitiesFromSelection"
         />
       </v-layer>
-      <v-layer v-if="isMultiSelection">
-        <multi-ann-selection
-          :page="page"
-          @buttonEnter="onElementEnter"
-          @buttonLeave="onElementLeave"
-        />
-      </v-layer>
     </v-stage>
     <b-skeleton
       v-else
@@ -197,10 +190,9 @@
 </template>
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
-import { PIXEL_RATIO, MULTI_ANN_TABLE_FEATURE } from "../../constants";
+import { PIXEL_RATIO } from "../../constants";
 import api from "../../api";
 import BoxSelection from "./BoxSelection";
-import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
 import EditAnnotation from "./EditAnnotation";
 import AnnSetTableOptions from "./AnnSetTableOptions";
@@ -209,7 +201,6 @@ export default {
   name: "DocumentPage",
   components: {
     BoxSelection,
-    MultiAnnSelection,
     NewAnnotation,
     EditAnnotation,
     AnnSetTableOptions,
@@ -269,19 +260,6 @@ export default {
     selectionPage() {
       return this.selection && this.selection.pageNumber;
     },
-    isBoxSelection() {
-      if (!MULTI_ANN_TABLE_FEATURE) {
-        return (
-          true &&
-          this.selection &&
-          this.selection.pageNumber === this.currentPage
-        );
-      }
-      return this.selection && !this.isSelecting && this.isElementSelected;
-    },
-    isMultiSelection() {
-      return MULTI_ANN_TABLE_FEATURE && this.selection && this.isSelectionValid;
-    },
     showFocusedAnnotation() {
       return (
         this.documentAnnotationSelected &&

package/src/components/DocumentPage/EditAnnotation.vue

@@ -125,7 +125,6 @@ const margin = 12;
 const widthOfPopup = 205;
 
 import { mapGetters, mapState } from "vuex";
-import { MULTI_ANN_TABLE_FEATURE } from "../../constants";
 
 export default {
   props: {
@@ -334,7 +333,6 @@ export default {
     openAnnotationSetCreation() {
       this.$store.dispatch("display/showChooseLabelSetModal", {
         show: true,
-        isMultipleAnnotations: MULTI_ANN_TABLE_FEATURE,
         finish: this.chooseLabelSet,
       });
     },