@konfuzio/document-validation-ui 0.1.22-dev.0 → 0.1.22-dev.2

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -51,6 +51,7 @@
 
     .annotation-set-group {
       .label-set-header {
+        cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -66,6 +67,14 @@
           font-size: 14px;
           line-height: 20px;
           color: $text;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .icon {
+            width: 12px;
+            height: 12px;
+          }
         }
       }
 

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -300,32 +300,22 @@ export default {
       ) {
         clearTimeout(this.annotationAnimationTimeout);
 
-        let timeout;
-
-        if (!newSidebarAnnotationSelected.trigger) {
-          timeout = 600;
-        } else {
-          timeout = 1200;
-        }
-
         this.isSelected = true;
         // remove annotation selection after some time
         this.annotationAnimationTimeout = setTimeout(() => {
           this.$store.dispatch("document/setSidebarAnnotationSelected", null);
           this.isSelected = false;
-        }, timeout);
+        }, 1200);
 
         // Check if sidebarAnnotationSelected changed from a click or hover
-        if (newSidebarAnnotationSelected.trigger === "click") {
-          const runAnimation = () => {
-            this.$el.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-              inline: "nearest",
-            });
-          };
-          runAnimation();
-        }
+        const runAnimation = () => {
+          this.$el.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+          });
+        };
+        runAnimation();
       }
     },
     editAnnotation(newValue) {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -49,12 +49,22 @@
         </div>
       </div>
       <div
-        v-for="(annotationSet, indexGroup) in annotationSetsToShowInList()"
+        v-for="(annotationSet, indexGroup) in annotationSets"
         :key="indexGroup"
-        class="annotation-set-group"
+        :class="[
+          'annotation-set-group',
+          !annotationSetsAccordion[indexGroup] === true &&
+            'annotation-set-collapsed',
+        ]"
       >
-        <div class="label-set-header">
+        <div class="label-set-header" @click="toggleAccordion(indexGroup)">
           <div class="label-set-name">
+            <b-icon
+              :icon="
+                annotationSetsAccordion[indexGroup] ? 'angle-up' : 'angle-down'
+              "
+            >
+            </b-icon>
             {{
               `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
                 annotationSet
@@ -66,6 +76,7 @@
             class="labelset-action-buttons"
           >
             <AnnotationSetActionButtons
+              v-if="annotationSetsAccordion[indexGroup] === true"
               :number-of-empty-labels-in-annotation-set="
                 emptyLabels(annotationSet).length
               "
@@ -92,34 +103,38 @@
           </div>
         </div>
 
-        <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-if="annotationSet.labels.length === 0" class="no-labels">
-          <span> {{ $t("no_labels_in_set") }}</span>
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-if="isDocumentEditable" v-html="$t('link_to_add_labels')" />
-        </div>
+          <div v-if="annotationSet.labels.length === 0" class="no-labels">
+            <span> {{ $t("no_labels_in_set") }}</span>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-if="isDocumentEditable" 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>
+          <div
+            v-else-if="
+              !annotationSetHasAnnotations(annotationSet) && publicView
+            "
+            class="no-labels"
+          >
+            <span> {{ $t("no_annotations_in_annotation_set") }}</span>
+          </div>
+        </b-collapse>
       </div>
     </div>
   </div>
@@ -150,6 +165,7 @@ export default {
       count: 0,
       jumpToNextAnnotation: false,
       numberOfLoadingAnnotations: 3,
+      annotationSetsAccordion: [],
     };
   },
   computed: {
@@ -166,15 +182,16 @@ export default {
       "labels",
       "selectedDocument",
       "splittingSuggestions",
+      "sidebarAnnotationSelected",
     ]),
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "emptyLabels",
       "notCorrectAnnotations",
-      "annotationSetsToShowInList",
       "annotationSetsInTable",
       "isDocumentReviewed",
+      "annotationSetOfAnnotation",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -195,6 +212,70 @@ export default {
         this.jumpToNextAnnotation = false;
       }
     },
+    annotationSets(newAnnotationSets, oldAnnotationSets) {
+      if (newAnnotationSets) {
+        const newAnnotationSetsAccordion = [];
+        const annotationSetsOpened = [];
+        const annotationSetsCreated = [];
+        if (oldAnnotationSets) {
+          // when annotation sets changed, restore old state
+          // and check if new ones were created to be open by default
+
+          this.annotationSetsAccordion.forEach((isOpen, index) => {
+            if (isOpen) {
+              annotationSetsOpened.push(oldAnnotationSets[index]);
+            }
+          });
+
+          newAnnotationSets.forEach((newAnnotationSet) => {
+            const existed = oldAnnotationSets.find(
+              (oldAnnotationSet) =>
+                oldAnnotationSet.id &&
+                newAnnotationSet.id &&
+                oldAnnotationSet.id === newAnnotationSet.id
+            );
+            if (!existed && newAnnotationSet.id !== null) {
+              annotationSetsCreated.push(newAnnotationSet);
+            }
+          });
+        }
+
+        newAnnotationSets.forEach((newAnnotationSet, index) => {
+          const wasOpen = annotationSetsOpened.find(
+            (annotationSetOpened) =>
+              annotationSetOpened.id &&
+              newAnnotationSet.id &&
+              newAnnotationSet.id === annotationSetOpened.id
+          );
+
+          if (wasOpen) {
+            newAnnotationSetsAccordion[index] = wasOpen !== undefined;
+          } else {
+            const wasCreated = annotationSetsCreated.find(
+              (annotationSetCreated) =>
+                annotationSetCreated.id &&
+                newAnnotationSet.id &&
+                newAnnotationSet.id === annotationSetCreated.id
+            );
+            newAnnotationSetsAccordion[index] = wasCreated !== undefined;
+          }
+        });
+        this.annotationSetsAccordion = newAnnotationSetsAccordion;
+      }
+    },
+    sidebarAnnotationSelected(annotation) {
+      if (annotation) {
+        const annotationSet = this.annotationSetOfAnnotation(annotation);
+        if (annotationSet) {
+          const index = this.annotationSets.findIndex(
+            (annotationSetToFind) => annotationSetToFind.id === annotationSet.id
+          );
+          const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
+          newAnnotationSetsAccordion[index] = true;
+          this.annotationSetsAccordion = newAnnotationSetsAccordion;
+        }
+      }
+    },
   },
   created() {
     window.addEventListener("keydown", this.keyDownHandler);
@@ -203,6 +284,18 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
+    toggleAccordion(index) {
+      const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
+      newAnnotationSetsAccordion[index] = !newAnnotationSetsAccordion[index];
+      this.annotationSetsAccordion = newAnnotationSetsAccordion;
+    },
+    openAllAccordions() {
+      const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
+      newAnnotationSetsAccordion.forEach((_, index) => {
+        newAnnotationSetsAccordion[index] = true;
+      });
+      this.annotationSetsAccordion = newAnnotationSetsAccordion;
+    },
     annotationSetHasAnnotations(annotationSet) {
       const found = annotationSet.labels.find(
         (label) => label.annotations.length > 0
@@ -280,6 +373,10 @@ export default {
 
       // Not allow starting edit mode with ArrowUp key
       if (event.key === "ArrowUp" && !this.isAnnotationBeingEdited) return;
+
+      // open accordions
+      this.openAllAccordions();
+
       // Get all the annotation elements
       let annotations = this.createArray("keyboard-nav");
 
@@ -297,7 +394,9 @@ export default {
         if (this.count >= annotations.length) {
           const finishBtn = this.createArray("finish-review-btn");
 
-          finishBtn[0].focus();
+          if (finishBtn && finishBtn[0]) {
+            finishBtn[0].focus();
+          }
           this.$store.dispatch("document/resetEditAnnotation");
           this.count = 0;
           if (event.key === "Enter" && !finishBtn.disabled) {

package/src/components/DocumentPage/DocumentPage.vue

@@ -71,8 +71,8 @@
                 v-if="!isAnnotationInEditMode(annotation.id)"
                 :key="'ann' + annotation.id + '-' + index"
                 :config="annotationRect(bbox, annotation.id)"
-                @click="handleFocusedAnnotation(annotation, 'click')"
-                @mouseenter="handleFocusedAnnotation(annotation)"
+                @click="handleFocusedAnnotation(annotation)"
+                @mouseenter="onElementEnter(annotation, bbox)"
                 @mouseleave="onElementLeave"
               />
             </template>
@@ -284,6 +284,7 @@ export default {
       "isDocumentReadyToBeReviewed",
       "entitiesOnSelection",
       "isDocumentReviewed",
+      "labelOfAnnotation",
     ]),
   },
   watch: {
@@ -396,17 +397,9 @@ export default {
       });
     },
 
-    handleFocusedAnnotation(annotation, trigger) {
-      this.$store.dispatch("document/setSidebarAnnotationSelected", {
-        annotation,
-        trigger,
-      });
-
-      if (trigger && trigger === "click") {
-        this.closePopups(true);
-      } else {
-        this.onElementEnter();
-      }
+    handleFocusedAnnotation(annotation) {
+      this.$store.dispatch("document/setSidebarAnnotationSelected", annotation);
+      this.closePopups(true);
     },
 
     handleClickedEntity(entity) {
@@ -454,7 +447,7 @@ export default {
       }
     },
 
-    onElementEnter() {
+    onElementEnter(annotation = null, span = null) {
       if (
         !this.categorizeModalIsActive &&
         !this.publicView &&
@@ -463,10 +456,23 @@ export default {
       ) {
         this.$refs.stage.$el.style.cursor = "pointer";
       }
+
+      if (annotation) {
+        const label = this.labelOfAnnotation(annotation);
+        if (label) {
+          this.$store.dispatch("document/setDocumentAnnotationSelected", {
+            annotation,
+            label,
+            span,
+            scrollTo: false,
+          });
+        }
+      }
     },
 
     onElementLeave() {
       this.$refs.stage.$el.style.cursor = "inherit";
+      this.$store.dispatch("document/disableDocumentAnnotationSelected");
     },
 
     /**

package/src/store/document.js

@@ -247,6 +247,50 @@ const getters = {
     return annotations;
   },
 
+  /* Get annotation set for a given annotation */
+  annotationSetOfAnnotation: (state) => (annotationToFind) => {
+    let foundAnnotationSet = null;
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((label) => {
+        label.annotations.forEach((annotation) => {
+          if (annotation.id === annotationToFind.id) {
+            foundAnnotationSet = annotationSet;
+            return;
+          }
+        });
+        if (foundAnnotationSet) {
+          return;
+        }
+      });
+      if (foundAnnotationSet) {
+        return;
+      }
+    });
+    return foundAnnotationSet;
+  },
+
+  /* Get label for a given annotation */
+  labelOfAnnotation: (state) => (annotationToFind) => {
+    let foundLabel = null;
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((label) => {
+        label.annotations.forEach((annotation) => {
+          if (annotation.id === annotationToFind.id) {
+            foundLabel = label;
+            return;
+          }
+        });
+        if (foundLabel) {
+          return;
+        }
+      });
+      if (foundLabel) {
+        return;
+      }
+    });
+    return foundLabel;
+  },
+
   /* Process annotations and extract labels and sets */
   processAnnotationSets: (state, getters) => (annotationSets) => {
     // group annotations for sidebar