@konfuzio/document-validation-ui 0.1.13-dev.2 → 0.1.13-dev.4

package/package.json

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

package/src/api.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { cacheAdapterEnhancer } from "axios-extensions";
 
-let HTTP, IMG_REQUEST, authToken, appLocale;
+let HTTP, FILE_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
 
 axios.defaults.xsrfCookieName = "csrftoken";
@@ -11,7 +11,7 @@ HTTP = axios.create({
   baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`,
 });
 
-IMG_REQUEST = axios.create({
+FILE_REQUEST = axios.create({
   baseURL: process.env.VUE_APP_DOCUMENT_IMAGES_URL || `${DEFAULT_URL}`,
   responseType: "blob",
   adapter: cacheAdapterEnhancer(axios.defaults.adapter),
@@ -25,8 +25,8 @@ const setApiUrl = (url) => {
   HTTP.defaults.baseURL = url;
 };
 
-const setImageUrl = (url) => {
-  IMG_REQUEST.defaults.baseURL = url;
+const setFileUrl = (url) => {
+  FILE_REQUEST.defaults.baseURL = url;
 };
 
 const setLocale = (locale) => {
@@ -45,22 +45,25 @@ HTTP.interceptors.request.use(getInterceptorConfig, (error) => {
   return Promise.reject(error);
 });
 
-IMG_REQUEST.interceptors.request.use(getInterceptorConfig, (error) => {
+FILE_REQUEST.interceptors.request.use(getInterceptorConfig, (error) => {
   return Promise.reject(error);
 });
 
-const makeImageRequest = (imageURL) => {
+const makeFileRequest = (fileUrl) => {
   return new Promise((resolve, reject) => {
     if (process.env.NODE_ENV === "test") {
       reject("Running unit tests!");
       return;
     }
-    IMG_REQUEST.get(imageURL)
+    FILE_REQUEST.get(fileUrl)
       .then((response) => {
         return response.data;
       })
       .then((myBlob) => {
         resolve(myBlob);
+      })
+      .catch((error) => {
+        reject(error);
       });
   });
 };
@@ -68,8 +71,9 @@ const makeImageRequest = (imageURL) => {
 export default {
   HTTP,
   setApiUrl,
-  setImageUrl,
-  makeImageRequest,
+  setFileUrl,
+  makeFileRequest,
   setAuthToken,
   setLocale,
+  FILE_REQUEST,
 };

package/src/assets/images/ServerImage.vue

@@ -41,7 +41,7 @@ export default {
     loadImage() {
       if (!this.imageUrl) return;
       return api
-        .makeImageRequest(this.imageUrl)
+        .makeFileRequest(this.imageUrl)
         .then((myBlob) => {
           this.$refs.imgTag.src = URL.createObjectURL(myBlob);
           if (this.height) {

package/src/assets/scss/annotation_details.scss

@@ -66,8 +66,11 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      border-bottom: 1px solid $low-opacity-white;
-      padding-bottom: 8px;
+
+      &:not(.tooltip-in-public-view) {
+        border-bottom: 1px solid $low-opacity-white;
+        padding-bottom: 8px;
+      }
 
       .value {
         color: $green;

package/src/assets/scss/document_thumbnails.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.document-pages {
+#document-pages {
   background: $background;
   min-width: 80px;
   overflow-y: auto;

package/src/assets/scss/document_toolbar.scss

@@ -24,6 +24,16 @@
       display: none;
     }
 
+    .edit-mode-disabled,
+    .zoom-disabled {
+      opacity: 30%;
+
+      &:hover {
+        cursor: not-allowed !important;
+        background: inherit;
+      }
+    }
+
     .toolbar-divider {
       width: 1px;
       background-color: $grey-detail;
@@ -72,7 +82,6 @@
         padding: 7px;
         margin-right: 20px;
       }
-
       .icon {
         width: 32px;
         height: 32px;
@@ -83,13 +92,18 @@
           background: $low-opacity-white;
           border-radius: 4px;
         }
-        &.zoom-disabled {
-          opacity: 30%;
+      }
+    }
 
-          &:hover {
-            cursor: not-allowed !important;
-            background: inherit;
-          }
+    .download-file {
+      color: $toolbar-elements;
+
+      .is-active {
+        background: $low-opacity-white;
+        border-radius: 4px;
+
+        .icon:hover {
+          background: none;
         }
       }
     }

package/src/assets/scss/theme.scss

@@ -251,6 +251,15 @@
     .dropdown-trigger {
       justify-content: space-between;
       width: 100%;
+
+      .icon {
+        &.download-file {
+          svg {
+            height: 100% !important;
+            width: 100% !important;
+          }
+        }
+      }
     }
 
     .dropdown-menu {

package/src/components/App.cy.js

@@ -1,6 +1,6 @@
 import App from "./App.vue";
 
-describe("<App />", () => {
+describe("App", () => {
   it("renders the app", () => {
     cy.mount(App);
   });

package/src/components/App.vue

@@ -165,7 +165,7 @@ export default {
       API.setApiUrl(this.api_url);
     }
     if (this.image_url !== "") {
-      API.setImageUrl(this.image_url);
+      API.setFileUrl(this.image_url);
     }
 
     // document and project config

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -3,7 +3,6 @@
     :animated="false"
     :position="fromTable ? 'is-top' : 'is-bottom'"
     :class="[!fromTable && 'left-aligned', 'annotation-details']"
-    :active="!publicView"
   >
     <div :class="['label-icon', fromTable && 'is-small']">
       <div v-if="(created(annotation) || edited(annotation)) && !publicView">
@@ -68,7 +67,10 @@
         <div v-if="description" class="label-description">
           <span>{{ description }}</span>
         </div>
-        <div v-if="confidence(annotation)" class="confidence">
+        <div
+          v-if="confidence(annotation)"
+          :class="['confidence', publicView && 'tooltip-in-public-view']"
+        >
           <span>{{ $t("confidence") }}</span
           ><span
             :class="[
@@ -82,7 +84,7 @@
             >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
           >
         </div>
-        <div class="revision">
+        <div v-if="!publicView" class="revision">
           <div class="detail-icons">
             <div v-if="created(annotation) || edited(annotation)">
               <div

package/src/components/DocumentPage/DocumentPage.vue

@@ -459,7 +459,7 @@ export default {
         return;
       }
       api
-        .makeImageRequest(
+        .makeFileRequest(
           `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
         )
         .then((myBlob) => {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -26,6 +26,26 @@
         v-if="!editMode && !publicView && !isDocumentReviewed"
         class="toolbar-divider"
       />
+
+      <div v-if="!publicView" class="download-file icons">
+        <b-dropdown aria-role="list" position="is-top-right">
+          <template #trigger>
+            <b-icon icon="download" size="small" class="download-file" />
+          </template>
+
+          <b-dropdown-item aria-role="listitem" @click="handleDownloadFile()">{{
+            $t("original_file")
+          }}</b-dropdown-item>
+          <b-dropdown-item
+            aria-role="listitem"
+            @click="handleDownloadFile('ocr')"
+            >{{ $t("pdf_file") }}</b-dropdown-item
+          >
+        </b-dropdown>
+      </div>
+
+      <div v-if="!publicView" class="toolbar-divider" />
+
       <div class="icons icons-right">
         <div
           :class="[
@@ -63,6 +83,7 @@ import FitZoomIcon from "../../assets/images/FitZoomIcon";
 import PlusIcon from "../../assets/images/PlusIcon";
 import MinusIcon from "../../assets/images/MinusIcon";
 import EditDocIcon from "../../assets/images/EditDocIcon";
+import api from "../../api";
 
 export default {
   name: "DocumentToolbar",
@@ -158,6 +179,41 @@ export default {
         this.$store.dispatch("display/updateScale", { scale });
       });
     },
+    handleDownloadFile(fileType) {
+      let fileUrl;
+      // get the file name without the extension
+      let fileName = this.getFileName(this.selectedDocument.data_file_name);
+
+      if (fileType === "ocr") {
+        fileUrl = this.selectedDocument.file_url;
+        fileName = `${fileName}_${fileType}`;
+      } else {
+        fileUrl = `/doc/show-original/${this.selectedDocument.id}/`;
+      }
+
+      // Automatically download original or ocr files
+      return api
+        .makeFileRequest(fileUrl)
+        .then((myBlob) => {
+          const url = URL.createObjectURL(myBlob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", fileName);
+          link.click();
+          URL.revokeObjectURL(link.href);
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_downloading_file"),
+          });
+          console.log(error);
+        });
+    },
+    getFileName(fileName) {
+      return fileName.split(".").slice(0, -1).join(".");
+    },
     cancelAnnotationEditMode() {
       this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("selection/disableSelection");

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

@@ -0,0 +1,64 @@
+import DocumentThumbnails from "./DocumentThumbnails.vue";
+
+describe("Document Thumbnails", () => {
+  beforeEach(() => {
+    cy.fetchDocument();
+  });
+
+  it("shows thumbnails for all document pages", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then((elements) => {
+        cy.storeState("document", "selectedDocument")
+          .its("pages")
+          .its("length")
+          .should("equal", elements.length);
+      });
+  });
+
+  it("loads thumbnail pictures that are shown on screen", () => {
+    cy.intercept("GET", "**/page/show-thumbnail/**").as("getThumbnail");
+    cy.mount(DocumentThumbnails);
+
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then((elements) => {
+        cy.get("@getThumbnail.all")
+          .its("length")
+          .should("equal", elements.length);
+      });
+  });
+
+  it("displays page number correctly", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row)
+          .find(".number-thumbnail")
+          .contains(index + 1);
+        cy.wait(1000);
+      });
+  });
+
+  it("navigates to every document thumbnail", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row).click();
+        cy.storeState("display", "currentPage").should("equal", index + 1);
+        cy.wait(1000);
+      });
+  });
+
+  it("show loading when a document is not set", () => {
+    cy.mount(DocumentThumbnails);
+    cy.dispatchAction("document", "setSelectedDocument", null);
+    cy.get("#document-pages")
+      .find(".document-thumbnail-loading")
+      .its("length")
+      .should("equal", 1);
+  });
+});

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="documentThumbnails" class="document-pages">
+  <div id="document-pages" ref="documentThumbnails">
     <div v-if="selectedDocument">
       <div
         v-for="page in selectedDocument.pages"
@@ -32,7 +32,7 @@
         </div>
       </div>
     </div>
-    <div v-else>
+    <div v-else class="document-thumbnail-loading">
       <div class="document-thumbnail">
         <div class="image-section">
           <div class="image-container">

package/src/icons.js

@@ -17,6 +17,7 @@ import {
   faRepeat,
   faArrowLeft,
   faArrowRight,
+  faDownload,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -37,7 +38,8 @@ library.add(
   faScissors,
   faRepeat,
   faArrowLeft,
-  faArrowRight
+  faArrowRight,
+  faDownload
 );
 
 export default Icons;

package/src/locales/de.json

@@ -132,5 +132,8 @@
   "delete_label": "Label löschen",
   "table": "Tabelle",
   "prepare_document": "Dokument vorbereiten",
-  "delete_table": "Tabelle löschen"
+  "delete_table": "Tabelle löschen",
+  "error_downloading_file": "Die Datei konnte nicht heruntergeladen werden.",
+  "original_file": "Originaldatei",
+  "pdf_file": "PDF Datei"
 }

package/src/locales/en.json

@@ -132,5 +132,8 @@
   "edit_label": "Edit label",
   "delete_label": "Delete label",
   "table": "Table",
-  "delete_table": "Delete table"
+  "delete_table": "Delete table",
+  "error_downloading_file": "The file could not be downloaded.",
+  "original_file": "Original file",
+  "pdf_file": "PDF file"
 }

package/src/locales/es.json

@@ -132,5 +132,8 @@
   "new_multi_ann_description": "Seleccione un modelo de datos de los existentes, luego deseleccione las etiquetas que no existen en este documento.",
   "new_multi_ann_title": "Crear múltiples anotaciones",
   "prepare_document": "Prepare el documento",
-  "delete_table": "Eliminar tabla"
+  "delete_table": "Eliminar tabla",
+  "error_downloading_file": "El documento no pudo ser descargado.",
+  "original_file": "Documento original",
+  "pdf_file": "Documento PDF"
 }

package/src/store/document.js

@@ -17,7 +17,7 @@ const state = {
   annotationSets: null,
   annotations: null,
   labels: [],
-  documentId: null,
+  documentId: process.env.VUE_APP_DOCUMENT_ID,
   sidebarAnnotationSelected: null,
   documentAnnotationSelected: null,
   selectedDocument: null,
@@ -1256,7 +1256,9 @@ const mutations = {
     state.selectedDocument = document;
 
     // this is to handle cache when a document is edited or changed
-    state.selectedDocument.downloaded_at = Date.now();
+    if (state.selectedDocument) {
+      state.selectedDocument.downloaded_at = Date.now();
+    }
   },
   SET_RECALCULATING_ANNOTATIONS: (state, recalculatingAnnotations) => {
     state.recalculatingAnnotations = recalculatingAnnotations;

package/src/store/project.js

@@ -2,7 +2,7 @@ import myImports from "../api";
 const HTTP = myImports.HTTP;
 
 const state = {
-  projectId: null,
+  projectId: process.env.VUE_APP_PROJECT_ID,
   currentUser: null,
   documentsListPath: null,
   documentsInProject: null,