@konfuzio/document-validation-ui 0.1.44-dev.0 → 0.1.44-dev.1

package/package.json

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

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -2,10 +2,10 @@
   <div>
     <b-tooltip
       :animated="false"
-      :position="fromTable ? 'is-top' : 'is-bottom'"
-      :class="[!fromTable && 'left-aligned', 'annotation-details']"
+      :position="'is-bottom'"
+      :class="['left-aligned', 'annotation-details']"
     >
-      <div :class="['label-icon', fromTable && 'is-small']">
+      <div :class="['label-icon']">
         <div
           v-if="
             (created(annotation) || edited(annotation)) &&
@@ -180,10 +180,6 @@ export default {
       type: Object,
       default: null,
     },
-    fromTable: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -24,7 +24,6 @@
           :annotation="annotation"
           :annotation-set="annotationSet"
           :label="label"
-          :from-table="fromTable"
         />
       </div>
 
@@ -129,6 +128,7 @@
               :span-index="index"
               :label="label"
               :annotation-set="annotationSet"
+              :label-set="labelSet"
               :is-hovered="hoveredAnnotation"
               :is-missing-annotation="
                 annotationIsNotFound(annotationSet, label)
@@ -137,9 +137,10 @@
             />
           </div>
           <EmptyAnnotation
-            v-else-if="!fromTable"
+            v-else
             :label="label"
             :annotation-set="annotationSet"
+            :label-set="labelSet"
             :is-hovered="hoveredAnnotation"
             :is-missing-annotation="annotationIsNotFound(annotationSet, label)"
             @save-empty-annotation-changes="saveEmptyAnnotationChanges"
@@ -191,6 +192,10 @@ export default {
   },
   props: {
     annotationSet: {
+      type: Object,
+      default: null,
+    },
+    labelSet: {
       type: Object,
       required: true,
     },
@@ -206,10 +211,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    fromTable: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     const checkboxValue =
@@ -284,6 +285,7 @@ export default {
       return (
         this.hoveredAnnotationSet &&
         this.hoveredAnnotationSet.type == "missing" &&
+        this.annotationSet &&
         !this.annotationIsNotFound(this.annotationSet, this.label) &&
         this.annotationSet.id === this.hoveredAnnotationSet.annotationSet.id &&
         this.annotationSet.label_set.id ===
@@ -417,7 +419,7 @@ export default {
       }
     },
     currentAnnotationId() {
-      if (!this.annotationSet || !this.label) return;
+      if ((!this.annotationSet && !this.labelSet) || !this.label) return;
 
       if (
         this.annotation &&
@@ -426,20 +428,17 @@ export default {
       )
         return this.annotation.id;
 
-      let emptyAnnotationId;
+      const setId = this.annotationSet
+        ? this.annotationSet.id
+        : this.labelSet.id;
 
-      if (this.annotationSet.id) {
-        emptyAnnotationId = `${this.annotationSet.id}_${this.label.id}`;
-      } else {
-        emptyAnnotationId = `${this.annotationSet.label_set.id}_${this.label.id}`;
-      }
-      return emptyAnnotationId;
+      return `${setId}_${this.label.id}`;
     },
     onAnnotationHoverEnter(span) {
       if (span) {
         this.$store.dispatch("document/setDocumentAnnotationSelected", {
           annotation: this.annotation,
-          label: this.fromTable ? null : this.label,
+          label: this.label,
           span,
           scrollTo: false,
         });
@@ -449,9 +448,6 @@ export default {
       this.$store.dispatch("document/disableDocumentAnnotationSelected");
     },
     onAnnotationClick() {
-      if (!this.fromTable) {
-        this.$store.dispatch("display/showAnnSetTable", null);
-      }
       this.$store.dispatch("document/scrollToDocumentAnnotationSelected");
     },
     hoveredEmptyLabels() {
@@ -571,7 +567,7 @@ export default {
       this.$parent.$emit(
         "handle-missing-annotation",
         this.label.id,
-        this.annotationSet.label_set.id,
+        this.labelSet.id,
         this.annotationSet.id,
         false
       );
@@ -636,7 +632,7 @@ export default {
         (item) =>
           item.annotation_set === this.annotationSet.id &&
           item.label === this.label.id &&
-          item.label_set === this.annotationSet.label_set.id
+          item.label_set === this.annotationSet.labelSet.id
       );
 
       this.$store
@@ -699,7 +695,7 @@ export default {
     saveEmptyAnnotationChanges() {
       let annotationToCreate;
 
-      if (this.annotationSet.id) {
+      if (this.annotationSet && this.annotationSet.id) {
         annotationToCreate = {
           document: this.documentId,
           span: this.spanSelection,
@@ -714,7 +710,7 @@ export default {
           document: this.documentId,
           span: this.spanSelection,
           label: this.label.id,
-          label_set: this.annotationSet.label_set.id,
+          label_set: this.labelSet.id,
           is_correct: true,
           revised: true,
         };
@@ -778,7 +774,7 @@ export default {
         this.annotationsMarkedAsMissing.map((annotation) => {
           // Check if the annotation set and label are marked as missing
           if (
-            annotation.label_set === this.annotationSet.label_set.id &&
+            annotation.label_set === this.labelSet.id &&
             annotation.annotation_set === this.annotationSet.id &&
             annotation.label === this.label.id
           ) {

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -9,15 +9,12 @@
       :on-cancel="close"
     >
       <section class="modal-card-body">
-        <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">
+        <div class="content">
           <h3>
             {{ $t("new_ann_set_title") }}
           </h3>
           <div>
-            <div v-if="labelSets.length === 0">
+            <div v-if="labelSetsFilteredForAnnotationSetCreation.length === 0">
               <p v-html="$t('no_multi_ann_labelset_model')" />
             </div>
             <div v-else>
@@ -27,7 +24,7 @@
 
               <div class="label-set-list">
                 <div
-                  v-for="labelSetItem in labelSets"
+                  v-for="labelSetItem in labelSetsFilteredForAnnotationSetCreation"
                   :key="labelSetItem.id"
                   class="label-set-list-row"
                 >
@@ -71,32 +68,20 @@
  * This component shows a modal to choose a label set from the project
  */
 
-import { mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
 
 export default {
   name: "CreateAnnotationSetModal",
   data() {
     return {
-      labelSets: [],
       show: true,
       labels: [],
-      loading: true,
     };
   },
   computed: {
-    ...mapState("document", ["annotationSets"]),
     ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
     ...mapGetters("document", ["numberOfLabelSetGroup"]),
   },
-  mounted() {
-    this.$store.dispatch("project/fetchLabelSets").then((data) => {
-      this.labelSets = this.labelSetsFilteredForAnnotationSetCreation(
-        data,
-        this.annotationSets
-      );
-      this.loading = false;
-    });
-  },
   methods: {
     submit(labelSet) {
       this.$emit("finish", labelSet);

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -19,13 +19,45 @@
       </div>
     </div>
 
-    <!-- When there's no annotation sets -->
+    <!-- When there's no annotation sets but show label sets for annotation creation-->
     <div
       v-else-if="
         getAnnotationsFiltered.annotationSets.length === 0 &&
+        labelSets &&
+        labelSets.length > 0 &&
         !isSearchingAnnotationList
       "
       class="empty-annotation-sets"
+    >
+      <div class="annotation-set-list">
+        <div
+          v-for="labelSet in labelSets"
+          :key="labelSet.id"
+          class="annotation-set-group"
+        >
+          <div class="label-set-header">
+            <div class="label-set-name">
+              {{ `${labelSet.name}` }}
+            </div>
+          </div>
+
+          <div v-if="labelSet.labels.length > 0">
+            <div v-for="label in labelSet.labels" :key="label.id">
+              <div class="labels">
+                <DocumentLabel :label="label" :label-set="labelSet" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else-if="
+        getAnnotationsFiltered.annotationSets.length === 0 &&
+        !isSearchingAnnotationList &&
+        (!labelSets || labelSets.length === 0)
+      "
+      class="empty-annotation-sets"
     >
       <EmptyState />
     </div>
@@ -119,6 +151,7 @@
                   <DocumentLabel
                     :label="label"
                     :annotation-set="annotationSet"
+                    :label-set="annotationSet.label_set"
                     :index-group="indexGroup"
                     @handle-missing-annotation="markAnnotationsAsMissing"
                   />
@@ -203,6 +236,7 @@ export default {
       "selectedDocument",
       "splittingSuggestions",
     ]),
+    ...mapState("project", ["labelSets"]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "getAnnotationsFiltered",
@@ -570,7 +604,11 @@ export default {
             annotation_set: annotationSet,
           },
         ];
-      } else if (this.editAnnotation && this.editAnnotation.id !== null) {
+      } else if (
+        this.editAnnotation &&
+        this.editAnnotation.id !== null &&
+        this.editAnnotation.annotationSet
+      ) {
         // if annotation is marked as missing from "delete" key
 
         missing = [

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -29,32 +29,41 @@
           </div>
         </div>
       </div>
-      <div v-if="showAnnotationsGroup" class="label-group-annotation-list">
+      <div
+        v-if="annotationSet && showAnnotationsGroup"
+        class="label-group-annotation-list"
+      >
         <AnnotationRow
           v-for="annotation in label.annotations"
           :key="annotation.id"
           :annotation="annotation"
           :label="label"
           :annotation-set="annotationSet"
+          :label-set="annotationSet.label_set"
         />
       </div>
     </div>
-    <div v-else-if="hasAnnotations">
+    <div v-else-if="annotationSet && hasAnnotations">
       <AnnotationRow
         v-for="annotation in label.annotations"
         :key="annotation.id"
         :annotation="annotation"
         :label="label"
         :annotation-set="annotationSet"
+        :label-set="annotationSet.label_set"
       />
     </div>
-    <div v-else>
+    <div v-else-if="annotationSet">
       <AnnotationRow
         :annotation="singleAnnotation"
         :label="label"
         :annotation-set="annotationSet"
+        :label-set="annotationSet.label_set"
       />
     </div>
+    <div v-else-if="labelSet">
+      <AnnotationRow :label="label" :label-set="labelSet" />
+    </div>
   </div>
 </template>
 <script>
@@ -73,6 +82,10 @@ export default {
       required: true,
     },
     annotationSet: {
+      type: Object,
+      default: null,
+    },
+    labelSet: {
       type: Object,
       required: true,
     },
@@ -93,13 +106,13 @@ export default {
     ]),
     ...mapGetters("document", ["numberOfAcceptedAnnotationsInLabel"]),
     singleAnnotation() {
-      if (this.label.annotations.length > 0) {
+      if (this.label.annotations && this.label.annotations.length > 0) {
         return this.label.annotations[0];
       }
       return null;
     },
     hasAnnotations() {
-      return this.label.annotations.length > 0;
+      return this.label.annotations && this.label.annotations.length > 0;
     },
   },
   watch: {
@@ -159,6 +172,7 @@ export default {
     updateValues() {
       // more than 1 Annotation extracted for a non multiple Label
       this.nonMultipleAnnotationsExtracted =
+        this.label.annotations &&
         this.label.annotations.length > 1 &&
         !this.label.has_multiple_top_candidates;
 

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -55,6 +55,10 @@ export default {
       required: true,
     },
     annotationSet: {
+      type: Object,
+      default: null,
+    },
+    labelSet: {
       type: Object,
       required: true,
     },
@@ -118,13 +122,10 @@ export default {
 
   methods: {
     emptyAnnotationId() {
-      if (!this.annotationSet || !this.label) return;
+      if ((!this.annotationSet && !this.labelSet) || !this.label) return;
 
-      if (this.annotationSet.id) {
-        return `${this.annotationSet.id}_${this.label.id}`;
-      } else {
-        return `${this.annotationSet.label_set.id}_${this.label.id}`;
-      }
+      const id = this.annotationSet ? this.annotationSet.id : this.labelSet.id;
+      return `${id}_${this.label.id}`;
     },
     isAnnotationBeingEdited() {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
@@ -148,12 +149,11 @@ export default {
           "selection/selectElement",
           this.emptyAnnotationId()
         );
-
         this.$store.dispatch("document/setEditAnnotation", {
           id: this.emptyAnnotationId(),
           index: this.spanIndex,
           label: this.label,
-          labelSet: this.annotationSet.label_set,
+          labelSet: this.labelSet,
           annotationSet: this.annotationSet,
         });
       }

package/src/store/document.js

@@ -301,13 +301,15 @@ const getters = {
     let processedAnnotationSets = [];
     let processedLabels = [];
 
+    const isSearching = state.annotationSearch.length > 0;
+
     // search feature
     const addAnnotation = (listToAdd, annotation, force) => {
       if (force) {
         listToAdd.push(annotation);
         return true;
       }
-      if (state.annotationSearch.length > 0) {
+      if (isSearching) {
         if (
           annotation.offset_string &&
           state.annotationSearch.find((search) =>
@@ -333,7 +335,7 @@ const getters = {
     };
 
     const labelHasSearchText = (label) => {
-      if (state.annotationSearch.length > 0) {
+      if (isSearching) {
         if (
           label.name &&
           state.annotationSearch.find((search) =>
@@ -356,7 +358,10 @@ const getters = {
           let addLabel = false;
           const labelHasSearch = labelHasSearchText(label);
           if (!label.annotations || label.annotations.length === 0) {
-            if (state.annotationFilters.showEmpty) {
+            if (
+              state.annotationFilters.showEmpty &&
+              (!isSearching || labelHasSearch)
+            ) {
               addLabel = true;
             }
           } else if (
@@ -627,17 +632,20 @@ const getters = {
   annotationIsNotFound: (state) => (annotationSet, label) => {
     // Check if the combined label and label set have been marked as missing
     // or if the document is in public mode
-    if (state.missingAnnotations.length === 0) {
-      return false;
-    } else {
-      const found = state.missingAnnotations.filter(
-        (el) =>
-          el.label === label.id &&
-          el.annotation_set === annotationSet.id &&
-          el.label_set === annotationSet.label_set.id
-      );
-      return found.length !== 0;
+    if (annotationSet) {
+      if (state.missingAnnotations.length === 0) {
+        return false;
+      } else {
+        const found = state.missingAnnotations.filter(
+          (el) =>
+            el.label === label.id &&
+            el.annotation_set === annotationSet.id &&
+            el.label_set === annotationSet.label_set.id
+        );
+        return found.length !== 0;
+      }
     }
+    return false;
   },
 
   isAnnotationInAnnotationSet: (state) => (annotationSet, annotationId) => {
@@ -1063,6 +1071,10 @@ const actions = {
     if (!state.publicView) {
       await dispatch("fetchMissingAnnotations");
 
+      await dispatch("project/fetchLabelSets", null, {
+        root: true,
+      });
+
       await dispatch("project/fetchCurrentUser", null, {
         root: true,
       });
@@ -1280,9 +1292,7 @@ const actions = {
 
   fetchMissingAnnotations: ({ commit, state, getters }) => {
     return new Promise((resolve, reject) => {
-      return HTTP.get(
-        `/missing-annotations/?document=${state.documentId}`
-      )
+      return HTTP.get(`/missing-annotations/?document=${state.documentId}`)
         .then((response) => {
           commit("SET_MISSING_ANNOTATIONS", response.data.results);
           resolve(true);

package/src/store/project.js

@@ -3,6 +3,7 @@ const HTTP = myImports.HTTP;
 
 const state = {
   projectId: null,
+  labelSets: null,
   currentUser: null,
   documentsListPath: null,
   documentsInProject: null,
@@ -13,24 +14,25 @@ const getters = {
   /**
    * Gets label sets for an annotation set creation
    */
-  labelSetsFilteredForAnnotationSetCreation:
-    (state) => (labelsSet, annotationSets) => {
-      let returnLabels = [];
-      if (labelsSet) {
-        returnLabels = labelsSet.filter((labelSet) => {
-          // check if label set has multiple and if not, if there's already an annotation set created
-          if (!labelSet.has_multiple_annotation_sets) {
-            const existingAnnotationSet = annotationSets.find((annSet) => {
+  labelSetsFilteredForAnnotationSetCreation: (state, _, rootState) => {
+    let returnLabels = [];
+    if (state.labelSets) {
+      returnLabels = state.labelSets.filter((labelSet) => {
+        // check if label set has multiple and if not, if there's already an annotation set created
+        if (!labelSet.has_multiple_annotation_sets) {
+          const existingAnnotationSet = rootState.document.annotationSets.find(
+            (annSet) => {
               return annSet.label_set.id === labelSet.id;
-            });
-            return !existingAnnotationSet;
-          } else {
-            return true;
-          }
-        });
-      }
-      return returnLabels;
-    },
+            }
+          );
+          return !existingAnnotationSet;
+        } else {
+          return true;
+        }
+      });
+    }
+    return returnLabels;
+  },
 };
 
 const actions = {
@@ -52,17 +54,14 @@ const actions = {
   },
 
   // Get label sets from the project
-  fetchLabelSets: ({ state }) => {
-    return new Promise((resolve, reject) => {
-      HTTP.get(`label-sets/?project=${state.projectId}`)
-        .then((response) => {
-          return resolve(response.data.results);
-        })
-        .catch((error) => {
-          reject(error);
-          console.log(error);
-        });
-    });
+  fetchLabelSets: ({ commit, state }) => {
+    return HTTP.get(`label-sets/?project=${state.projectId}`)
+      .then((response) => {
+        commit("SET_LABEL_SETS", response.data.results);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   },
 
   fetchCurrentUser: ({ commit }) => {
@@ -113,6 +112,9 @@ const mutations = {
   SET_CURRENT_USER: (state, currentUser) => {
     state.currentUser = currentUser;
   },
+  SET_LABEL_SETS: (state, labelSets) => {
+    state.labelSets = labelSets;
+  },
   SET_DOCUMENTS_LIST_PATH: (state, path) => {
     state.documentsListPath = path;
   },