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

package/package.json

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

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -2,7 +2,6 @@
   <div class="action-buttons">
     <!-- mark all empty labels as missing -->
     <div
-      v-if="!publicView && !isDocumentReviewed"
       class="missing-button-container all-missing"
       @mouseenter="mouseenterAnnotationSet('missing')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -11,15 +10,16 @@
         type="is-ghost"
         class="missing-btn all-missing-btn"
         :disabled="numberOfEmptyLabelsInAnnotationSet === 0"
-        @click.stop="markAllAsMissing"
+        @click="!isPlaceholder && markAllAsMissing"
       >
-        {{ $t("mark_all_missing") }} ({{ numberOfEmptyLabelsInAnnotationSet }})
+        {{ isPlaceholder ? $t("missing_counter") : $t("mark_all_missing") }} ({{
+          numberOfEmptyLabelsInAnnotationSet
+        }})
       </b-button>
     </div>
 
     <!-- accept all pending annotations -->
     <div
-      v-if="!publicView && !isDocumentReviewed"
       class="accept-all"
       @mouseenter="mouseenterAnnotationSet('accept')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -28,9 +28,9 @@
         type="is-primary"
         class="accept-all-btn"
         :disabled="numberOfNotCorrectAnnotationsInAnnotationSet === 0"
-        @click.stop="acceptAllPending"
+        @click="!isPlaceholder && acceptAllPending"
       >
-        {{ $t("accept_group") }} ({{
+        {{ isPlaceholder ? $t("pending_counter") : $t("accept_group") }} ({{
           numberOfNotCorrectAnnotationsInAnnotationSet
         }})
       </b-button>
@@ -45,6 +45,10 @@ import { mapGetters, mapState } from "vuex";
 export default {
   name: "AnnotationSetActionButtons",
   props: {
+    isPlaceholder: {
+      type: Boolean,
+      default: false,
+    },
     numberOfEmptyLabelsInAnnotationSet: {
       type: Number,
       default: 0,

package/src/components/DocumentAnnotations/DocumentAnnotations.cy.js

@@ -5,18 +5,18 @@ describe("Document Annotations", () => {
     cy.fetchDocument();
     cy.dispatchAction("document", "setPublicView", false);
     cy.dispatchAction("edit", "disableEditMode");
-    cy.mount(DocumentAnnotations);
+    cy.mount(DocumentAnnotations).then(({ wrapper, component }) => {
+      component.openAllAccordions();
+    });
   });
 
   it("shows loading when there are no annotation sets loaded yet or when loading the data", () => {
     cy.dispatchAction("document", "setAnnotationSets", null);
-    cy.mount(DocumentAnnotations);
     cy.get("#document-annotations")
       .find(".document-annotations-loading")
       .its("length")
       .should("equal", 1);
 
-
     cy.dispatchAction("document", "startLoading");
     cy.get("#document-annotations")
       .find(".document-annotations-loading")
@@ -36,10 +36,9 @@ describe("Document Annotations", () => {
     cy.get("#document-annotations")
       .find(".annotation-set-group")
       .then(($elements) => {
-        cy.getStore("document")
-          .then($document => {
-            expect($document.annotationSets).to.have.lengthOf($elements.length);
-          });
+        cy.getStore("document").then(($document) => {
+          expect($document.annotationSets).to.have.lengthOf($elements.length);
+        });
       });
   });
 
@@ -50,15 +49,14 @@ describe("Document Annotations", () => {
       .find(".empty-annotation-sets")
       .find(".empty-container")
       .find(".title")
-      .should('be.visible');
+      .should("be.visible");
   });
 
   it("shows no annotation set action buttons if the document is read only", () => {
     cy.dispatchAction("document", "setPublicView", true);
-
     cy.get("#document-annotations")
       .find(".labelset-action-buttons")
-      .should("not.be.visible");
+      .should("not.exist");
   });
 
   it("renders action buttons for the annotation sets and annotations", () => {
@@ -87,28 +85,23 @@ describe("Document Annotations", () => {
       .find(".annotation-row")
       .find(".annotation-value")
       .not(".missing-annotation")
-      .each($annotation => {
-        cy.wrap($annotation)
-          .should("not.have.class", "clicked-ann");
-        cy.wrap($annotation)
-          .click();
-        cy.wrap($annotation)
-          .should("have.class", "clicked-ann");
+      .each(($annotation) => {
+        cy.wrap($annotation).should("not.have.class", "clicked-ann");
+        cy.wrap($annotation).click();
+        cy.wrap($annotation).should("have.class", "clicked-ann");
         cy.wait(1000);
       });
   });
 
   it("clicks each annotation and shows action buttons", () => {
-    cy.getStore("document").then($document => {
+    cy.getStore("document").then(($document) => {
       if ($document.annotations.length > 0) {
         cy.get("#document-annotations")
           .find(".label")
           .find(".annotation-row")
           .find(".annotation")
           .each(($row) => {
-            cy.wrap($row)
-              .find(".annotation-value")
-              .click();
+            cy.wrap($row).find(".annotation-value").click();
 
             cy.get("#document-annotations")
               .find(".label")
@@ -117,7 +110,6 @@ describe("Document Annotations", () => {
               .find(".annotation-save-btn")
               .should("be.visible");
 
-
             cy.get("#document-annotations")
               .find(".label")
               .find(".annotation-row")
@@ -138,32 +130,60 @@ describe("Document Annotations", () => {
     });
   });
 
-  it("shows accept and decline buttons when hovering annotation", () => {
-    cy.getStore("document").then($document => {
+  it("shows decline button when hovering annotation", () => {
+    cy.getStore("document").then(($document) => {
       if ($document.annotations.length > 0) {
         cy.get("#document-annotations")
           .find(".label")
           .find(".annotation-row")
           .find(".annotation")
           .each(($row) => {
-            cy.wrap($row)
-              .trigger("mouseover");
-
-            cy.get("#document-annotations")
-              .find(".label")
-              .find(".annotation-row")
-              .find(".action-buttons")
-              .find(".decline-button-container")
-              .should("be.visible");
+            cy.wrap($row).trigger("mouseover");
 
             cy.get("#document-annotations")
               .find(".label")
               .find(".annotation-row")
               .find(".action-buttons")
-              .find(".annotation-accept-btn")
+              .find(".decline-btn")
               .should("be.visible");
+            cy.wait(500);
+          });
+      }
+    });
+  });
 
-            cy.wait(1000);
+  it("shows accept button when hovering annotation that is not accepted", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.annotations.length > 0) {
+        cy.get("#document-annotations")
+          .find(".label")
+          .find(".annotation-row")
+          .find(".annotation")
+          .each(($row) => {
+            cy.wrap($row).trigger("mouseover");
+
+            const annotationId = $row.attr("id");
+            const annotation = $document.annotations.find(
+              (ann) => ann.id === annotationId
+            );
+
+            if (annotation) {
+              cy.gettersStore().then(($getters) => {
+                if (
+                  $getters["document/accepted"](annotation) ||
+                  $getters["document/created"](annotation)
+                ) {
+                  cy.get("#document-annotations")
+                    .find(".label")
+                    .find(".annotation-row")
+                    .find(".action-buttons")
+                    .find(".accept-btn")
+                    .should("be.visible");
+
+                  cy.wait(500);
+                }
+              });
+            }
           });
       }
     });
@@ -179,8 +199,7 @@ describe("Document Annotations", () => {
         if ($annotation.hasClass("missing-annotation")) {
           return;
         } else {
-          cy.wrap($annotation)
-            .click();
+          cy.wrap($annotation).click();
 
           cy.get("#document-annotations")
             .find(".label")
@@ -209,8 +228,7 @@ describe("Document Annotations", () => {
       .find(".annotation-value")
       .not(".missing-annotation")
       .each(($annotation) => {
-        cy.wrap($annotation)
-          .trigger("mouseover");
+        cy.wrap($annotation).trigger("mouseover");
 
         cy.get("#document-annotations")
           .find(".label")
@@ -231,8 +249,7 @@ describe("Document Annotations", () => {
       .find(".annotation-value")
       .not(".missing-annotation")
       .each(($annotation) => {
-        cy.wrap($annotation)
-          .trigger("mouseover");
+        cy.wrap($annotation).trigger("mouseover");
 
         cy.get("#document-annotations")
           .find(".label")
@@ -242,8 +259,7 @@ describe("Document Annotations", () => {
           .find(".missing-btn")
           .click();
 
-        cy.wrap($annotation)
-          .trigger("mouseleave");
+        cy.wrap($annotation).trigger("mouseleave");
 
         cy.wait(1000);
       });
@@ -252,13 +268,12 @@ describe("Document Annotations", () => {
       .find(".label")
       .find(".annotation-row")
       .find(".empty-annotation")
-      .then($elements => {
-
-        cy.getStore("document")
-          .then($document => {
-            expect($document.missingAnnotations)
-              .to.have.lengthOf($elements.length);
-          });
+      .then(($elements) => {
+        cy.getStore("document").then(($document) => {
+          expect($document.missingAnnotations).to.have.lengthOf(
+            $elements.length
+          );
+        });
       });
   });
 
@@ -269,8 +284,7 @@ describe("Document Annotations", () => {
       .find(".empty-annotation")
       .find(".missing-annotation")
       .each(($annotation) => {
-        cy.wrap($annotation)
-          .trigger("mouseover");
+        cy.wrap($annotation).trigger("mouseover");
 
         cy.get("#document-annotations")
           .find(".label")
@@ -279,8 +293,7 @@ describe("Document Annotations", () => {
           .find(".restore-btn")
           .click();
 
-        cy.wrap($annotation)
-          .trigger("mouseleave");
+        cy.wrap($annotation).trigger("mouseleave");
 
         cy.wait(1000);
       });
@@ -301,10 +314,11 @@ describe("Document Annotations", () => {
       .then(($element) => {
         const annotationId = $element[0].id;
 
-        cy.intercept('PATCH', `**/annotations/${annotationId}/`).as('updateAnnotation');
+        cy.intercept("PATCH", `**/annotations/${annotationId}/`).as(
+          "updateAnnotation"
+        );
 
-        cy.wrap($element)
-          .trigger("mouseover");
+        cy.wrap($element).trigger("mouseover");
 
         cy.wait(1000);
 
@@ -315,11 +329,13 @@ describe("Document Annotations", () => {
           .find(".annotation-accept-btn")
           .click();
 
-        cy.wait("@updateAnnotation").its("response.statusCode").should("eq", 200);
+        cy.wait("@updateAnnotation")
+          .its("response.statusCode")
+          .should("eq", 200);
       });
   });
 
-  it("gets successfull response from the API when declining annotation", () => {
+  it("gets successful response from the API when declining annotation", () => {
     cy.get("#document-annotations")
       .find(".label")
       .find(".annotation-row")
@@ -328,10 +344,11 @@ describe("Document Annotations", () => {
       .then(($element) => {
         const annotationId = $element[0].id;
 
-        cy.intercept('DELETE', `**/annotations/${annotationId}/`).as('deleteAnnotation');
+        cy.intercept("DELETE", `**/annotations/${annotationId}/`).as(
+          "deleteAnnotation"
+        );
 
-        cy.wrap($element)
-          .trigger("mouseover");
+        cy.wrap($element).trigger("mouseover");
 
         cy.wait(1000);
 
@@ -342,7 +359,9 @@ describe("Document Annotations", () => {
           .find(".decline-btn")
           .click();
 
-        cy.wait("@deleteAnnotation").its("response.statusCode").should("eq", 204);
+        cy.wait("@deleteAnnotation")
+          .its("response.statusCode")
+          .should("eq", 204);
       });
   });
 
@@ -353,10 +372,11 @@ describe("Document Annotations", () => {
       .find(".empty-annotation")
       .first()
       .then(($element) => {
-        cy.intercept('POST', `**/missing-annotations/`).as('addMissingAnnotations');
+        cy.intercept("POST", `**/missing-annotations/`).as(
+          "addMissingAnnotations"
+        );
 
-        cy.wrap($element)
-          .trigger("mouseover");
+        cy.wrap($element).trigger("mouseover");
 
         cy.wait(1000);
 
@@ -367,7 +387,9 @@ describe("Document Annotations", () => {
           .find(".missing-btn")
           .click();
 
-        cy.wait("@addMissingAnnotations").its("response.statusCode").should("eq", 201);
+        cy.wait("@addMissingAnnotations")
+          .its("response.statusCode")
+          .should("eq", 201);
       });
   });
 
@@ -379,13 +401,14 @@ describe("Document Annotations", () => {
       .find(".missing-annotation")
       .first()
       .then(($element) => {
-
-        cy.getStore("document").then($document => {
-          cy.intercept('DELETE', `**/missing-annotations/${$document.missingAnnotations[0].id}/`).as('deleteMissingAnnotation');
+        cy.getStore("document").then(($document) => {
+          cy.intercept(
+            "DELETE",
+            `**/missing-annotations/${$document.missingAnnotations[0].id}/`
+          ).as("deleteMissingAnnotation");
         });
 
-        cy.wrap($element)
-          .trigger("mouseover");
+        cy.wrap($element).trigger("mouseover");
 
         cy.wait(1000);
 
@@ -396,14 +419,16 @@ describe("Document Annotations", () => {
           .find(".restore-btn")
           .click();
 
-        cy.wait("@deleteMissingAnnotation").its("response.statusCode").should("eq", 204);
+        cy.wait("@deleteMissingAnnotation")
+          .its("response.statusCode")
+          .should("eq", 204);
       });
   });
 
   it("shows details regarding translated strings if they are enabled for the project", () => {
-    cy.getStore("project").then($project => {
+    cy.getStore("project").then(($project) => {
       if ($project.translationsEnabled) {
-        cy.getStore("document").then($document => {
+        cy.getStore("document").then(($document) => {
           if ($document.annotations.length > 0) {
             cy.get("#document-annotations")
               .find(".labels")
@@ -439,4 +464,4 @@ describe("Document Annotations", () => {
       }
     });
   });
-});
+});

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -72,11 +72,15 @@
             }}
           </div>
           <div
-            v-if="annotationSet.labels.length !== 0"
+            v-if="
+              !publicView &&
+              !isDocumentReviewed &&
+              annotationSet.labels.length !== 0
+            "
             class="labelset-action-buttons"
           >
             <AnnotationSetActionButtons
-              v-if="annotationSetsAccordion[indexGroup] === true"
+              :is-placeholder="annotationSetsAccordion[indexGroup] === false"
               :number-of-empty-labels-in-annotation-set="
                 emptyLabels(annotationSet).length
               "
@@ -213,11 +217,53 @@ export default {
       }
     },
     annotationSets(newAnnotationSets, oldAnnotationSets) {
+      this.loadAccordions(newAnnotationSets, oldAnnotationSets);
+    },
+    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);
+    if (this.annotationSets) {
+      this.loadAccordions(this.annotationSets);
+    }
+  },
+  destroyed() {
+    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;
+    },
+    loadAccordions(newAnnotationSets, oldAnnotationSets = null) {
       if (newAnnotationSets) {
         const newAnnotationSetsAccordion = [];
         const annotationSetsOpened = [];
         const annotationSetsCreated = [];
-        if (oldAnnotationSets) {
+
+        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
 
@@ -247,8 +293,10 @@ export default {
               newAnnotationSet.id &&
               newAnnotationSet.id === annotationSetOpened.id
           );
-
-          if (wasOpen) {
+          if (isFirstTime && index === 0) {
+            // open first one by default
+            newAnnotationSetsAccordion[index] = true;
+          } else if (wasOpen) {
             newAnnotationSetsAccordion[index] = wasOpen !== undefined;
           } else {
             const wasCreated = annotationSetsCreated.find(
@@ -263,44 +311,10 @@ export default {
         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);
-  },
-  destroyed() {
-    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
       );
-
       return found;
     },
 

package/src/components/DocumentPage/DocumentPage.vue

@@ -72,7 +72,7 @@
                 :key="'ann' + annotation.id + '-' + index"
                 :config="annotationRect(bbox, annotation.id)"
                 @click="handleFocusedAnnotation(annotation)"
-                @mouseenter="onElementEnter(annotation, bbox)"
+                @mouseenter="onElementEnter"
                 @mouseleave="onElementLeave"
               />
             </template>
@@ -284,7 +284,6 @@ export default {
       "isDocumentReadyToBeReviewed",
       "entitiesOnSelection",
       "isDocumentReviewed",
-      "labelOfAnnotation",
     ]),
   },
   watch: {
@@ -447,7 +446,7 @@ export default {
       }
     },
 
-    onElementEnter(annotation = null, span = null) {
+    onElementEnter() {
       if (
         !this.categorizeModalIsActive &&
         !this.publicView &&
@@ -456,23 +455,10 @@ 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/locales/de.json

@@ -89,6 +89,8 @@
   "annotations_pending": "Ausstehende Annotationen",
   "annotations_accepted": "Akzeptierte Annotationen",
   "mark_all_missing": "Alle leeren als fehlend markieren",
+  "missing_counter": "Fehlen",
+  "pending_counter": "Ausstehende",
   "no_labels_to_choose": "Keine Labels",
   "accept_group": "Alle akzeptieren",
   "use_your_keyboard": "Benutze deine Tastatur",

package/src/locales/en.json

@@ -89,6 +89,8 @@
   "annotations_pending": "pending",
   "annotations_accepted": "accepted",
   "mark_all_missing": "Mark all empty as Missing",
+  "missing_counter": "Missing",
+  "pending_counter": "Pending",
   "no_labels_to_choose": "No Labels",
   "accept_group": "Accept all",
   "new_ann_set_title": "New annotation set",

package/src/locales/es.json

@@ -89,6 +89,8 @@
   "annotations_pending": "pendientes",
   "annotations_accepted": "aceptadas",
   "mark_all_missing": "Marcar todas las anotaciones vacías como Faltantes",
+  "missing_counter": "Faltantes",
+  "pending_counter": "Pendientes",
   "no_labels_to_choose": "Sin etiquetas",
   "accept_group": "Aceptar todas",
   "use_your_keyboard": "Use su teclado",

package/src/store/document.js

@@ -269,28 +269,6 @@ const getters = {
     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