@konfuzio/document-validation-ui 0.1.14-dev.1 → 0.1.14-dev.2

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.labels-sidebar {
+#labels-sidebar {
   font-family: $font-family;
   flex: 1;
   background-color: $background;
@@ -426,10 +426,10 @@
       }
     }
 
-    .missing-decline-button-container {
+    .missing-button-container, .decline-button-container {
       background-color: transparent;
 
-      .missing-decline-btn {
+      .missing-btn, .decline-btn {
         color: $grey-blue !important;
         font-size: 14px !important;
         font-weight: 500;

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -41,11 +41,11 @@
         !publicView &&
         !isDocumentReviewed
       "
-      class="missing-decline-button-container"
+      class="decline-button-container"
     >
       <b-button
         type="is-ghost"
-        class="missing-decline-btn decline-btn"
+        class="decline-btn"
         @click.stop="decline"
       >
         {{ $t("decline") }}
@@ -79,11 +79,11 @@
         !publicView &&
         !isDocumentReviewed
       "
-      class="missing-decline-button-container"
+      class="missing-button-container"
     >
       <b-button
         type="is-ghost"
-        class="missing-decline-btn missing-btn"
+        class="missing-btn"
         @click.stop="markAsMissing"
       >
         {{ $t("missing_annotation") }}

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -12,6 +12,7 @@
           editAnnotation.id === annotation.id &&
           'error-editing',
         isAnnotationBeingEdited && 'clicked-ann',
+        !annotation.revised && 'not-revised'
       ]"
       role="textbox"
       :contenteditable="isAnnotationBeingEdited"

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -84,7 +84,7 @@
             >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
           >
         </div>
-        <div v-if="!publicView" class="revision" >
+        <div v-if="!publicView" class="revision">
           <div class="detail-icons">
             <div v-if="created(annotation) || edited(annotation)">
               <div

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -3,13 +3,13 @@
     <!-- mark all empty labels as missing -->
     <div
       v-if="!publicView && !isDocumentReviewed"
-      class="missing-decline-button-container all-missing"
+      class="missing-button-container all-missing"
       @mouseenter="mouseenterAnnotationSet('missing')"
       @mouseleave="mouseleaveAnnotationSet"
     >
       <b-button
         type="is-ghost"
-        class="missing-decline-btn missing-btn all-missing-btn"
+        class="missing-btn all-missing-btn"
         :disabled="numberOfEmptyLabelsInAnnotationSet === 0"
         @click.stop="markAllAsMissing"
       >

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

@@ -0,0 +1,295 @@
+import DocumentAnnotations from "./DocumentAnnotations.vue";
+
+describe("Document Annotations", () => {
+    beforeEach(() => {
+        cy.fetchDocument();
+        cy.dispatchAction("document", "setPublicView", false);
+    });
+
+    it("shows loading when there are no annotation sets loaded yet or when loading the data", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "setAnnotationSets", null);
+        cy.get("#labels-sidebar")
+          .find(".document-annotations-loading")
+          .its("length")
+          .should("equal", 1);
+
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "startLoading");
+        cy.get("#labels-sidebar")
+          .find(".document-annotations-loading")
+          .its("length")
+          .should("equal", 1);
+    });
+
+    it("shows 3 rows of loading annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "startLoading");
+        cy.get("#labels-sidebar")
+          .find(".loading-annotation-set")
+          .its("length")
+          .should("equal", 3);
+    });
+
+    it("shows all annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.get("#labels-sidebar")
+          .find(".annotation-set-group")
+          .then((elements) => {
+            cy.storeState("document", "annotationSets")
+              .its("length")
+              .should("equal", elements.length);
+            });
+    });
+
+    it("shows the empty state if there are no annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "setAnnotationSets", []);
+        
+        cy.get("#labels-sidebar")
+          .find(".empty-annotation-sets")
+          .find(".empty-container")
+          .find(".title")
+          .should('be.visible')
+    });
+
+    it("shows no annotation set action buttons if the document is read only", () => {
+      cy.mount(DocumentAnnotations);
+      cy.dispatchAction("document", "setPublicView", true);
+      
+      cy.get("#labels-sidebar")
+        .find(".labelset-action-buttons")
+        .should("not.be.visible");
+    });
+
+    it("renders action buttons for the annotation sets and annotations", () => {
+      cy.mount(DocumentAnnotations);
+    
+      cy.get("#labels-sidebar")
+        .find(".labelset-action-buttons")
+        .should("be.visible");
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".buttons-container")
+        .should("exist");
+    });
+
+    it("does not show annotations action buttons by default", () => {
+      cy.mount(DocumentAnnotations);
+    
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".buttons-container")
+        .should("not.be.visible");
+    });
+
+    it("clicks each annotation and empty annotation and checks that it is in edit mode", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .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")
+          cy.wait(1000);
+        })
+    });
+
+    it("clicks each annotation and shows action buttons", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".annotation")
+        .each(($row) => {
+          cy.wrap($row)
+            .find(".annotation-value")
+            .click();
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-save-btn")
+            .should("be.visible")
+            
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .should("be.visible")
+          
+          
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .click();
+
+          cy.wait(1000);
+        })
+    });
+
+    it("shows accept and decline buttons when hovering annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".not-revised")
+        .each(($row) => {
+          cy.wrap($row)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".decline-button-container")
+            .should("be.visible");
+            
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-accept-btn")
+            .should("be.visible");
+
+          cy.wait(1000);
+        })
+    });
+
+    it("clicks each empty annotation and shows action buttons", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .each(($annotation) => {
+          if ($annotation.hasClass("missing-annotation")) {
+           return;
+          } else {
+            cy.wrap($annotation)
+            .click();
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .should("be.visible")
+            
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .click();
+
+          cy.wait(1000);
+          }
+        });     
+    });
+
+    it("shows mark as missing button when hovering empty annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .not(".missing-annotation")
+        .each(($annotation) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".missing-button-container")
+            .should("be.visible");
+            
+          cy.wait(1000);
+        })
+    });
+
+    it("marks empty annotation as missing", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .not(".missing-annotation")
+        .each(($annotation, index) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".missing-button-container")
+            .find(".missing-btn")
+            .click();
+          
+          cy.storeState("document", "missingAnnotations").its("length").should("not.eq", 0);
+
+          cy.wrap($annotation)
+            .trigger("mouseleave");
+
+          cy.wait(1000);
+        })
+    });
+
+    it("restores empty annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".missing-annotation")
+        .each(($annotation) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".restore-btn")
+            .click();
+
+          cy.wrap($annotation)
+            .trigger("mouseleave");
+
+          cy.wait(1000);
+        });
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .should("not.have.class", "missing-annotation");
+    });
+});

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="labels-sidebar">
+  <div id="labels-sidebar">
     <!-- When extracting annotations after editing -->
-    <div v-if="recalculatingAnnotations">
+    <div v-if="recalculatingAnnotations" class="extracting-data">
       <ExtractingData />
     </div>
 
     <!-- When document data is still loading -->
-    <div v-else-if="!annotationSets || loading">
-      <div v-for="n in numberOfLoadingAnnotations" :key="n">
+    <div v-else-if="!annotationSets || loading" class="document-annotations-loading">
+      <div v-for="n in numberOfLoadingAnnotations" :key="n" class="loading-annotation-set">
         <LoadingAnnotations />
       </div>
     </div>
 
     <!-- When there's no annotations in the label -->
-    <div v-else-if="annotationSets.length === 0">
+    <div v-else-if="annotationSets.length === 0" class="empty-annotation-sets">
       <EmptyState />
     </div>
 
@@ -55,7 +55,7 @@
             }}
           </div>
           <div
-          v-if="annotationSet.labels.length !== 0"
+            v-if="annotationSet.labels.length !== 0"
             class="labelset-action-buttons"
           >
             <AnnotationSetActionButtons

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -22,7 +22,7 @@
               } ${$t("annotations_pending")}`
             }}
           </div>
-          <div v-if="!publicView" class="label-annotations-accepted" >
+          <div v-if="!publicView" class="label-annotations-accepted">
             {{
               `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
             }}