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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.16-dev.0",
+  "version": "0.1.16-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
@@ -53,7 +53,7 @@
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^27.0.0",
     "babel-jest": "^27.0.6",
-    "cypress": "^12.17.3",
+    "cypress": "^13.2.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.6.0",

package/src/assets/scss/document_top_bar.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.document-top-bar-component {
+#document-top-bar-component {
   width: 100%;
   height: $top-bar-height;
   border-bottom: $component-border;

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

@@ -35,11 +35,12 @@ describe("Document Annotations", () => {
         cy.mount(DocumentAnnotations);
         cy.get("#labels-sidebar")
           .find(".annotation-set-group")
-          .then((elements) => {
-            cy.storeState("document", "annotationSets")
-              .its("length")
-              .should("equal", elements.length);
-            });
+          .then(($elements) => {
+            cy.getStore("document")
+              .then($document => {
+                expect($document.annotationSets).to.have.lengthOf($elements.length);
+              })
+          });
     });
 
     it("shows the empty state if there are no annotation sets", () => {
@@ -240,7 +241,7 @@ describe("Document Annotations", () => {
         .find(".empty-annotation")
         .find(".annotation-value")
         .not(".missing-annotation")
-        .each(($annotation, index) => {
+        .each(($annotation) => {
           cy.wrap($annotation)
             .trigger("mouseover");
 
@@ -250,15 +251,26 @@ describe("Document Annotations", () => {
             .find(".action-buttons")
             .find(".missing-button-container")
             .find(".missing-btn")
-            .click();
-          
-          cy.storeState("document", "missingAnnotations").its("length").should("not.eq", 0);
+            .click();        
 
           cy.wrap($annotation)
             .trigger("mouseleave");
 
           cy.wait(1000);
-        })
+        });
+
+        cy.get("#labels-sidebar")
+          .find(".label")
+          .find(".annotation-row")
+          .find(".empty-annotation")
+          .then($elements => {
+
+            cy.getStore("document")
+              .then($document => {
+                expect($document.missingAnnotations)
+                  .to.have.lengthOf($elements.length);
+            });
+          })
     });
 
     it("restores empty annotation", () => {

package/src/components/DocumentCategory.vue

@@ -34,7 +34,12 @@
               {{ $t("category") }}
             </p>
             <div class="category-name">
-              {{ setCategoryDefaultText }}
+              <span>
+                {{ setCategoryDefaultText }}
+              </span>
+              <span v-if="splitMode && setCategoryConfidence >= 0">
+                {{ `(${setCategoryConfidence}%)` }}
+              </span>
             </div>
           </div>
           <div :class="[!splitMode && 'caret-section']">
@@ -48,13 +53,14 @@
       </template>
 
       <b-dropdown-item
-        v-for="category in currentProjectCategories"
+        v-for="category in listOfCategories()"
         :key="category.id"
         aria-role="listitem"
         :disabled="handleOptionInDropdownDisabled(category)"
         @click="handleChangeCategory(category)"
       >
         <span>{{ category.name }}</span>
+        <span v-if="splitMode && category.confidence >= 0">{{ ` (${ category.confidence }%)` }}</span>
       </b-dropdown-item>
     </b-dropdown>
   </b-tooltip>
@@ -73,18 +79,17 @@ export default {
     splitMode: {
       type: Boolean,
     },
-    page: {
-      type: Object,
-      default: null,
-    },
-    index: {
-      type: Number,
-      default: 0,
-    },
+  page: {
+    type: Object,
+    default: null,
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
   },
   data() {
     return {
-      currentProjectCategories: [],
       categoryError: false,
       tooltipIsShown: false,
       tooltipCloseDelay: 0,
@@ -139,21 +144,24 @@ export default {
         return categoryName ? categoryName : this.$t("choose_category");
       }
     },
+
+    setCategoryConfidence() {
+      if (!this.updatedDocument[this.index].categories || !this.categoryName(
+          this.updatedDocument[this.index].category
+        )) return;
+
+      const found = this.updatedDocument[this.index].categories.find(category => category.id === this.updatedDocument[this.index].category);
+      
+      return this.handleCategoryConfidence(found.confidence);
+    }
   },
   watch: {
-    categories() {
-      this.handleCategories();
-    },
     annotations() {
       this.checkIfDropdownIsDisabled();
       this.setTooltipText();
     },
   },
   mounted() {
-    if (this.categories) {
-      this.handleCategories();
-    }
-
     if (this.projectHasSingleCategory()) {
       this.tooltipIsShown = true;
     }
@@ -163,16 +171,31 @@ export default {
     this.checkIfDropdownIsDisabled();
   },
   methods: {
-    handleCategories() {
-      this.categories.map((category) => {
-        if (category.project === this.selectedDocument.project) {
-          const found = this.currentProjectCategories.find(
-            (cat) => cat.id === category.id
-          );
-          if (found) return;
-          this.currentProjectCategories.push(category);
-        }
-      });
+    listOfCategories() {
+      let list;
+
+      if(this.splitMode && this.updatedDocument[this.index].categories) {
+        list = this.handleCategories(this.updatedDocument[this.index].categories);
+      } else if (this.categories) {
+        const filtered = this.categories.filter(category => category.project === this.selectedDocument.project)
+        list = this.handleCategories(filtered);
+      }
+
+      return list;
+    },
+    handleCategories(categories) {
+      return categories.map((category) => {
+          return {id: category.id, name: this.categoryName(category.id), confidence: this.handleCategoryConfidence(category.confidence)};
+        });
+    },
+    handleCategoryConfidence(confidence) {
+      if(!confidence) {
+        if(confidence === 0) return 0;
+
+        return;
+      }
+
+      return (confidence * 100).toFixed(2);
     },
     checkIfDropdownIsDisabled() {
       if (
@@ -193,7 +216,6 @@ export default {
 
       return category.id === this.updatedDocument[this.index].category;
     },
-
     handleChangeCategory(category) {
       // handling the category change will be different based on
       // the dropdown being on the topbar or the Rename and Categorize view
@@ -224,7 +246,6 @@ export default {
       // to update the new document category
       this.$emit("category-change", this.page, category.id);
     },
-
     setTooltipText() {
       // Text set from innerHTML vs 'label' due to html tag in locales file string
       let tooltipText;

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -114,6 +114,11 @@ export default {
 
       this.saveEditChanges();
     },
+    updatedDocument(newValue, oldValue) {
+      if(newValue && oldValue && newValue.length !== oldValue.length && newValue.length === 1) {
+        this.saveUpdatedDocuments();
+      }
+    }
   },
   mounted() {
     this.setPages();
@@ -287,6 +292,7 @@ export default {
         const newDocument = {
           name: this.handleNewDocumentName(i),
           category: this.handleNewDocumentCategory(i, clickedLines),
+          categories: this.handleNewDocumentCategoriesAndConfidence(i, clickedLines),
           pages: this.handleNewDocumentPages(i, clickedLines),
         };
 
@@ -309,7 +315,7 @@ export default {
       return newFileName;
     },
     handleNewDocumentCategory(index, clickedLines) {
-      if (clickedLines[index].origin && clickedLines[index].origin === "AI") {
+      if (this.updatedDocument && this.updatedDocument.length > 1 && clickedLines[index].origin && clickedLines[index].origin === "AI") {
         // get the index of the new document in the splitting suggestions
         // to return its category
         const i = this.indexOfSplittingSuggestion(index, clickedLines);
@@ -319,6 +325,17 @@ export default {
         return this.selectedDocument.category;
       }
     },
+    handleNewDocumentCategoriesAndConfidence(index, clickedLines) {
+      if (this.updatedDocument && this.updatedDocument.length > 1 && clickedLines[index].origin && clickedLines[index].origin === "AI") {
+        // get the index of the new document in the splitting suggestions
+        // to return its category
+        const i = this.indexOfSplittingSuggestion(index, clickedLines);
+
+        return this.splittingSuggestions[i].categories;
+      } else {
+        return null;
+      }
+    },
     handleNewDocumentPages(index, clickedLines) {
       // assign the correct pages to each new document
       let pages;
@@ -380,8 +397,13 @@ export default {
         this.documentShouldBePostprocessed ||
         this.waitingForSplittingConfirmation(this.selectedDocument)
       ) {
+        // delete the document categories since the backend doesn't need them
+        const documentToProcess = this.updatedDocument.map(document => {
+          delete document.categories;
+          return document;
+        })
         this.$store
-          .dispatch("edit/editDocument", this.updatedDocument)
+          .dispatch("edit/editDocument", documentToProcess)
           .catch((error) => {
             this.$store.dispatch("document/createErrorMessage", {
               error,

package/src/components/DocumentThumbnails/DocumentThumbnails.cy.js

@@ -9,11 +9,12 @@ describe("Document Thumbnails", () => {
     cy.mount(DocumentThumbnails);
     cy.get("#document-pages")
       .find(".document-thumbnail")
-      .then((elements) => {
-        cy.storeState("document", "selectedDocument")
-          .its("pages")
-          .its("length")
-          .should("equal", elements.length);
+      .then(($elements) => {
+        cy.getStore("document")
+          .then($document => {
+            expect($document.selectedDocument.pages)
+              .to.have.lengthOf($elements.length);
+          });
       });
   });
 
@@ -48,7 +49,12 @@ describe("Document Thumbnails", () => {
       .find(".document-thumbnail")
       .each(($row, index) => {
         cy.wrap($row).click();
-        cy.storeState("display", "currentPage").should("equal", index + 1);
+        cy.getStore("display")
+          .then($display => {
+            expect($display.currentPage)
+              .to.equal(index + 1);
+          });
+
         cy.wait(1000);
       });
   });

package/src/components/DocumentTopBar/DocumentTopBar.cy.js

@@ -0,0 +1,228 @@
+import DocumentTopBar from "./DocumentTopBar";
+
+describe("Document Top Bar", () => {
+	let currentDocument;
+	beforeEach(() => {
+
+		cy.fetchDocument().then(() => {			
+			cy.getStore("document")
+				.then($document => {
+					currentDocument = $document.selectedDocument;
+				});
+
+			
+			cy.getStore("project")
+				.then($project => {
+				  cy.fetchCategories($project.projectId);
+			  });
+		});
+
+		cy.dispatchAction("document", "setPublicView", false);
+	});
+
+	it("Shows category dropdown if not edit mode or reviewed", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".left-bar-components")
+			.find(".category-chooser")
+			.should("be.visible");
+	});
+
+	it("Shows correct file name", () => {
+		cy.mount(DocumentTopBar);
+		const fileName = currentDocument.data_file_name
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.contains(fileName);
+	});
+
+	it("Shows arrows if available documents to navigate to", () => {
+		cy.mount(DocumentTopBar);
+		cy.fetchDocumentList();
+		const assignee = currentDocument.assignee;
+		
+		cy.getStore("project")
+      .then($project => {
+				const filtered = $project.documentsInProject.filter(
+					(document) =>
+						(document.status_data === 41 || (document.status_data === 2 && document.labeling_available === 1)
+						) && document.assignee === assignee 
+				);
+
+				if(filtered.length > 0) {
+					cy.get("#document-top-bar-component")
+					.find(".center-bar-components")
+					.find(".navigation-arrow")
+					.should("be.visible");
+				}
+			});
+	});
+
+	it("Shows keyboard icon", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.should("be.visible");
+	});
+
+	it("Shows disabled finish review button", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.find(".finish-review-btn")
+			.should("be.disabled");
+	});
+
+	it("Shows edit mode buttons", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.should("not.exist");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".edit-mode-buttons")
+			.should("be.visible");
+		
+		cy.dispatchAction("edit", "disableEditMode");
+	});
+
+	it("Edits file name", () => {
+		cy.mount(DocumentTopBar);
+		const fileName = currentDocument.data_file_name.split(".").slice(0, -1).join(".");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".edit-btn")
+			.click();
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.should("have.class", "is-editable");
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.type('{selectAll}')
+			.type('{backspace}')
+			.type("test-name");
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".save-btn")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".save-btn")
+			.click();
+
+		cy.wait(1000);
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".cloud-icon")
+			.should("be.visible");
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.contains(fileName);
+	});
+
+	it("Shows tooltip when hovering over keyboard info", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.trigger("mouseenter");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.find(".keyboard-actions-description")
+			.should("be.visible");
+		
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.trigger("mouseleave");
+	});
+
+	it("Closes edit mode when clicking 'back to annotaiton view' button", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.should("exist");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".button-cancel")
+			.click();
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.should("not.exist");
+	});
+
+	it("Shows rename and categorize section when clicking 'next' button", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".button-next")
+			.click();
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".submit-btn")
+			.should("be.visible")
+	});
+});

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="documentTopBar" class="document-top-bar-component">
+  <div id="document-top-bar-component" ref="documentTopBar">
     <div
       v-if="selectedDocument && selectedDocument.pages.length > 0 && !loading"
       :class="['document-top-bar', editMode && 'edit-mode-top-bar']"

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -21,7 +21,7 @@
         <b-button
           :label="editMode && !renameAndCategorize ? $t('next') : $t('submit')"
           type="is-primary"
-          class="button-next primary-button edit-mode-btn"
+          :class="['button-next primary-button edit-mode-btn', renameAndCategorize && 'submit-btn']"
           :disabled="renameAndCategorize && !enableSubmit"
           @click="handleButton"
         />