@konfuzio/document-validation-ui 0.1.18-dev.4 → 0.1.19-dev.0

package/package.json

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

package/src/components/DocumentPage/DocumentPage.cy.js

@@ -0,0 +1,92 @@
+import DocumentDashboard from "../DocumentDashboard.vue";
+import DocumentPage from "../DocumentPage/DocumentPage.vue";
+
+const viewport = {
+  width: 1280,
+  height: 1300,
+};
+
+describe("Document Page", () => {
+  beforeEach(() => {
+    cy.fetchDocument();
+    cy.setFullMode();
+    cy.viewport(viewport.width, viewport.height);
+  });
+
+  it("All annotations appear at the right place", () => {
+    cy.getStore("document").then(($document) => {
+      if (
+        $document.selectedDocument.pages[0] &&
+        $document.annotations &&
+        $document.annotations.length > 0
+      ) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(DocumentPage, {
+            propsData: {
+              page: $document.selectedDocument.pages[0],
+              imageBlob: blob,
+            },
+          }).then(({ wrapper, component }) => {
+            $document.annotations.forEach((annotation) => {
+              const values = component.annotationRect(annotation.span[0]);
+              if (values.y < viewport.height) {
+                // check if ann is visible on viewport
+                cy.get(".pdf-page-container").click(values.x, values.y);
+
+                cy.getStore("document").then(($newDocument) => {
+                  if ($newDocument.sidebarAnnotationSelected) {
+                    expect(
+                      $newDocument.sidebarAnnotationSelected.annotation.id
+                    ).to.eql(annotation.id);
+                  } else {
+                    throw new Error("Annotation not on right place");
+                  }
+                });
+              }
+            });
+          });
+        });
+      } else {
+        throw new Error("Document has no annotations");
+      }
+    });
+  });
+
+  it("Can click on an entity", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.selectedDocument.pages[0]) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(DocumentPage, {
+            propsData: {
+              page: $document.pages[0],
+              imageBlob: blob,
+            },
+          }).then(({ wrapper, component }) => {
+            if ($document.pages && $document.pages.length > 0) {
+              const entities = $document.pages.flatMap((page) => {
+                return page.entities;
+              });
+              const entity =
+                entities[Math.floor(Math.random() * entities.length)]; // get a random entity
+              const values = component.entityRect(entity);
+              if (values.y < viewport.height) {
+                cy.get(".pdf-page-container").click(values.x, values.y);
+                cy.get(".annotation-popup").should("exist");
+              }
+            } else {
+              cy.get(".annotation-popup").should("not.exist");
+            }
+          });
+        });
+      } else {
+        throw new Error("Document has no pages");
+      }
+    });
+  });
+});

package/src/components/DocumentPage/DocumentPage.vue

@@ -143,6 +143,11 @@ export default {
       type: Object,
       required: true,
     },
+    imageBlob: {
+      type: Blob,
+      required: false,
+      default: null,
+    },
   },
 
   data() {
@@ -458,22 +463,31 @@ export default {
       if (this.image && !force) {
         return;
       }
-      const image = new Image();
       if (process.env.NODE_ENV === "test") {
         return;
       }
-      api
-        .makeFileRequest(
-          `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
-        )
-        .then((myBlob) => {
-          image.src = URL.createObjectURL(myBlob);
-          image.onload = () => {
-            // set image only when it is loaded
-            this.image = image;
-          };
-        })
-        .catch((error) => {});
+
+      const convertBlob = (blob) => {
+        const image = new Image();
+        image.src = URL.createObjectURL(blob);
+        image.onload = () => {
+          // set image only when it is loaded
+          this.image = image;
+        };
+      };
+
+      if (!this.imageBlob) {
+        api
+          .makeFileRequest(
+            `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
+          )
+          .then((myBlob) => {
+            convertBlob(myBlob);
+          })
+          .catch((error) => {});
+      } else {
+        convertBlob(this.imageBlob);
+      }
     },
 
     /**