@konfuzio/document-validation-ui 0.1.13-dev.3 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.13-dev.3",
+  "version": "0.1.13",
   "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/document_annotations.scss

@@ -99,245 +99,261 @@
           line-height: 20px;
         }
       }
-    }
-
-    .labels {
-      .label {
-        .label-group {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 1px solid $grey-lightest;
-          min-height: 44px;
-          cursor: pointer;
 
-          .label-group-left {
+      .labels {
+        .label {
+          .label-group {
             display: flex;
             flex-direction: row;
-            padding-left: 28px;
-            color: $text-lighter;
+            justify-content: space-between;
             align-items: center;
+            border-bottom: 1px solid $grey-lightest;
+            min-height: 44px;
+            cursor: pointer;
 
-            .label-name {
-              padding-left: 20px;
-            }
-          }
-
-          .label-group-right {
-            display: flex;
-            flex-direction: row;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            padding-right: 16px;
-            cursor: default;
-
-            .label-annotations-pending {
-              padding: 0px 8px;
-              border-radius: 20px;
-              background: $grey-lighter-low-opacity;
+            .label-group-left {
+              display: flex;
+              flex-direction: row;
+              padding-left: 28px;
               color: $text-lighter;
-              margin-right: 4px;
-            }
+              align-items: center;
 
-            .label-annotations-accepted {
-              padding: 0px 8px;
-              border-radius: 20px;
-              background: $green-low-opacity;
-              color: $green;
+              .label-name {
+                padding-left: 20px;
+              }
             }
-          }
-        }
 
-        .label-group-annotation-list {
-          background-color: $grey-hover;
+            .label-group-right {
+              display: flex;
+              flex-direction: row;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 20px;
+              padding-right: 16px;
+              cursor: default;
+
+              .label-annotations-pending {
+                padding: 0px 8px;
+                border-radius: 20px;
+                background: $grey-lighter-low-opacity;
+                color: $text-lighter;
+                margin-right: 4px;
+              }
 
-          .annotation-row {
-            padding-left: 16px;
+              .label-annotations-accepted {
+                padding: 0px 8px;
+                border-radius: 20px;
+                background: $green-low-opacity;
+                color: $green;
+              }
+            }
           }
-        }
-
-        .label-name {
-          color: $text-lighter;
-          word-break: break-word;
-          font-size: 14px;
-          line-height: 20px;
-          font-weight: 400;
-        }
 
-        .annotation-row {
-          width: 100%;
-          border-bottom: 1px solid $grey-lightest;
-          transition: background-color 0.2s ease-out;
-          display: flex;
-          align-items: center;
-          padding-right: 5px;
-
-          .annotation-row-left {
-            flex: 1;
-            padding-left: 8px;
-            display: flex;
-            align-items: center;
+          .label-group-annotation-list {
+            background-color: $grey-hover;
 
-            .annotation-icon {
-              height: 40px;
-              padding: 0 15px;
+            .annotation-row {
+              padding-left: 16px;
             }
+          }
 
-            .label-name {
-              padding: 10px 0;
-              padding-right: 4px;
-            }
+          .label-name {
+            color: $text-lighter;
+            word-break: break-word;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 400;
           }
 
-          .annotation-row-right {
-            width: 60%;
+          .annotation-row {
+            width: 100%;
+            border-bottom: 1px solid $grey-lightest;
+            transition: background-color 0.2s ease-out;
             display: flex;
             align-items: center;
+            padding-right: 5px;
 
-            .notification {
-              background-color: transparent;
-            }
-
-            .annotation-content {
-              width: 100%;
-              font-size: 14px;
-              line-height: 20px;
-              font-weight: 400;
-
-              .annotation,
-              .empty-annotation {
-                min-height: 36px;
-                display: flex;
-                align-items: center;
-              }
-
-              .loading-container {
-                height: 20px;
-                display: flex;
-                align-items: center;
+            .annotation-row-left {
+              flex: 1;
+              padding-left: 8px;
+              display: flex;
+              align-items: center;
 
-                .loading-icon-size {
-                  width: 13px;
-                  height: 13px;
-                }
+              .annotation-icon {
+                height: 40px;
+                padding: 0 15px;
               }
 
-              .spinner {
-                color: $grey;
+              .label-name {
+                padding: 10px 0;
+                padding-right: 4px;
               }
             }
 
-            .buttons-container {
+            .annotation-row-right {
+              width: 60%;
               display: flex;
-              gap: 8px;
-            }
+              align-items: center;
 
-            .annotation-value {
-              display: inline-block;
-              color: $text;
-              padding: 0 8px;
-              border: none;
-              background-color: transparent;
-              inline-size: 100%;
-              overflow-wrap: break-word;
-              word-break: break-all;
-
-              &:focus {
-                outline: none;
+              .notification {
+                background-color: transparent;
               }
 
-              &.label-empty {
-                font-weight: 500;
+              .annotation-content {
+                width: 100%;
                 font-size: 14px;
-                color: $primary;
+                line-height: 20px;
+                font-weight: 400;
+
+                .annotation,
+                .empty-annotation {
+                  min-height: 36px;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .loading-container {
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+
+                  .loading-icon-size {
+                    width: 13px;
+                    height: 13px;
+                  }
+                }
 
-                &.clicked-ann {
-                  font-weight: 400;
-                  color: $text-lighter;
+                .spinner {
+                  color: $grey;
                 }
               }
-            }
-          }
 
-          .empty-annotation {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-          }
+              .buttons-container {
+                display: flex;
+                gap: 8px;
+              }
 
-          &:hover,
-          &.selected {
-            background-color: $grey-lightest;
-          }
+              .annotation-value {
+                display: inline-block;
+                color: $text;
+                padding: 0 8px;
+                border: none;
+                background-color: transparent;
+                inline-size: 100%;
+                overflow-wrap: break-word;
+                word-break: break-all;
+
+                &:focus {
+                  outline: none;
+                }
 
-          &.hovered-empty-labels {
-            background-color: $grey-lightest;
-            border-bottom-color: $grey-detail;
-          }
+                &.label-empty {
+                  font-weight: 500;
+                  font-size: 14px;
+                  color: $primary;
 
-          &.hovered-pending-annotations {
-            position: relative;
-            border-bottom-color: $primary;
+                  &.clicked-ann {
+                    font-weight: 400;
+                    color: $text-lighter;
+                  }
+                }
+              }
+            }
 
-            &:before {
-              display: block;
-              content: "";
+            .empty-annotation {
+              display: flex;
               width: 100%;
-              height: 100%;
-              background: $primary;
-              opacity: 0.1;
-              position: absolute;
-              top: 0;
-              left: 0;
+              justify-content: space-between;
             }
-          }
 
-          &.editing {
-            background-color: $background;
-            border-bottom: 1px solid $primary;
-          }
+            &:hover,
+            &.selected {
+              background-color: $grey-lightest;
+            }
 
-          .not-found-text {
-            color: $grey;
-            opacity: 0.3;
-          }
+            &.hovered-empty-labels {
+              background-color: $grey-lightest;
+              border-bottom-color: $grey-detail;
+            }
 
-          .saving-changes {
-            color: $grey;
-          }
+            &.hovered-pending-annotations {
+              position: relative;
+              border-bottom-color: $primary;
+
+              &:before {
+                display: block;
+                content: "";
+                width: 100%;
+                height: 100%;
+                background: $primary;
+                opacity: 0.1;
+                position: absolute;
+                top: 0;
+                left: 0;
+              }
+            }
 
-          .error-editing {
-            color: $red;
-            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-            transform: translate3d(0, 0, 0);
-          }
+            &.editing {
+              background-color: $background;
+              border-bottom: 1px solid $primary;
+            }
 
-          @keyframes shake {
-            10%,
-            90% {
-              transform: translate3d(-1px, 0, 0);
+            .not-found-text {
+              color: $grey;
+              opacity: 0.3;
             }
 
-            20%,
-            80% {
-              transform: translate3d(2px, 0, 0);
+            .saving-changes {
+              color: $grey;
             }
 
-            30%,
-            50%,
-            70% {
-              transform: translate3d(-4px, 0, 0);
+            .error-editing {
+              color: $red;
+              animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+              transform: translate3d(0, 0, 0);
             }
 
-            40%,
-            60% {
-              transform: translate3d(4px, 0, 0);
+            @keyframes shake {
+              10%,
+              90% {
+                transform: translate3d(-1px, 0, 0);
+              }
+
+              20%,
+              80% {
+                transform: translate3d(2px, 0, 0);
+              }
+
+              30%,
+              50%,
+              70% {
+                transform: translate3d(-4px, 0, 0);
+              }
+
+              40%,
+              60% {
+                transform: translate3d(4px, 0, 0);
+              }
             }
           }
         }
       }
+
+      .no-labels {
+        display: flex;
+        gap: 5px;
+        padding-left: 28px;
+        color: $text-lighter;
+        font-size: 14px;
+        line-height: 20px;
+        min-height: 44px;
+
+        a {
+          color: $white;
+          text-decoration: underline;
+          font-weight: 500;
+        }
+      }
     }
   }
 

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 {
@@ -499,6 +508,7 @@
   .b-tooltip {
     height: 100%;
     align-items: center;
+
     .tooltip-content {
       background-color: $text-color !important;
 
@@ -776,4 +786,16 @@
       }
     }
   }
+
+  .no-labels {
+    a {
+      color: (var(--primary-color));
+      text-decoration: underline;
+      font-weight: 500;
+
+      &:hover {
+        filter: brightness(0.8) contrast(160%) grayscale(0.4);
+      }
+    }
+  }
 }

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

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