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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.11-dev.0",
+  "version": "0.1.11-dev.2",
   "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;
+let HTTP, IMG_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
 
 axios.defaults.xsrfCookieName = "csrftoken";
@@ -29,9 +29,14 @@ const setImageUrl = (url) => {
   IMG_REQUEST.defaults.baseURL = url;
 };
 
+const setLocale = (locale) => {
+  appLocale = locale;
+};
+
 const getInterceptorConfig = (config) => {
   if (authToken) {
     config.headers["Authorization"] = `Token ${authToken}`;
+    config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
   }
   return config;
 };
@@ -66,4 +71,5 @@ export default {
   setImageUrl,
   makeImageRequest,
   setAuthToken,
+  setLocale,
 };

package/src/assets/scss/document_edit.scss

@@ -194,7 +194,6 @@
                 .button-text {
                   font-size: 14px;
                   font-weight: 500;
-                  max-width: 70%;
                 }
               }
             }

package/src/assets/scss/document_top_bar.scss

@@ -149,6 +149,23 @@
       }
     }
   }
+
+  @media (max-width: 1300px) {
+    .edit-mode-top-bar {
+      .center-bar-components {
+        flex: 1;
+        justify-content: right;
+      }
+
+      .right-bar-components {
+        flex: 2;
+      }
+
+      .left-bar-components {
+        display: none;
+      }
+    }
+  }
 }
 
 .btn-container {

package/src/components/App.vue

@@ -159,6 +159,8 @@ export default {
 
     // api config
     API.setAuthToken(this.userToken);
+    API.setLocale(this.$i18n.locale);
+
     if (this.api_url !== "") {
       API.setApiUrl(this.api_url);
     }

package/src/components/DocumentEdit/SplitInfoBar.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="split-info-bar">
-    <StarIcon />
+    <div class="bar-icon">
+      <StarIcon />
+    </div>
     <span> {{ $t("smart_split_suggestions") }}</span>
   </div>
 </template>

package/src/components/DocumentPage/DocumentPage.vue

@@ -101,10 +101,10 @@
           />
         </v-label>
       </v-layer>
-      <v-layer v-if="selection && !isSelecting && isElementSelected">
+      <v-layer v-if="isBoxSelection">
         <box-selection :page="page" />
       </v-layer>
-      <v-layer v-else-if="selection && isSelectionValid">
+      <v-layer v-else-if="isMultiSelection">
         <multi-ann-selection
           :page="page"
           @buttonEnter="onElementEnter"
@@ -122,7 +122,7 @@
 </template>
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
-import { PIXEL_RATIO } from "../../constants";
+import { PIXEL_RATIO, MULTI_ANN_TABLE_FEATURE } from "../../constants";
 import api from "../../api";
 import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
@@ -155,6 +155,12 @@ export default {
   computed: {
     ...mapState("display", ["currentPage", "showAnnSetTable"]),
 
+    isBoxSelection() {
+      return this.selection && !this.isSelecting && this.isElementSelected;
+    },
+    isMultiSelection() {
+      return MULTI_ANN_TABLE_FEATURE && this.selection && this.isSelectionValid;
+    },
     showFocusedAnnotation() {
       return (
         this.documentAnnotationSelected &&
@@ -169,7 +175,6 @@ export default {
         height: this.page.size[1] * this.scale,
       };
     },
-
     scaledViewport() {
       const { width: actualSizeWidth, height: actualSizeHeight } =
         this.actualSizeViewport;

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -44,7 +44,6 @@
 
 <script>
 import { mapGetters, mapState, mapActions } from "vuex";
-import { ChooseLabelSetModal } from "../DocumentAnnotations";
 import { table_reference_api } from "../../store/document";
 
 export default {

package/src/components/DocumentTopBar/DocumentName.vue

@@ -132,7 +132,11 @@ export default {
   },
   methods: {
     shortFilenameIfNeeded(filename) {
-      if (filename && (filename.length >= 70 || !this.optimalResolution)) {
+      if (
+        filename &&
+        (filename.length >= 70 ||
+          (filename.length >= 25 && !this.optimalResolution))
+      ) {
         return (
           filename.substr(0, 20) +
           "..." +

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -2,7 +2,7 @@
   <div ref="documentTopBar" class="document-top-bar-component">
     <div
       v-if="selectedDocument && selectedDocument.pages.length > 0 && !loading"
-      class="document-top-bar"
+      :class="['document-top-bar', editMode && 'edit-mode-top-bar']"
     >
       <div v-if="!recalculatingAnnotations" class="left-bar-components">
         <DocumentCategory

package/src/constants.js

@@ -1,4 +1,5 @@
 export const PIXEL_RATIO = window.devicePixelRatio || 1;
 export const VIEWPORT_RATIO = 0.98;
 export const MINIMUM_APP_WIDTH = 600;
-export const MINIMUM_OPTIMIZED_APP_WIDTH = 1024;
+export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
+export const MULTI_ANN_TABLE_FEATURE = false;

package/src/store/document.js

@@ -1,4 +1,5 @@
 import myImports from "../api";
+import { MULTI_ANN_TABLE_FEATURE } from "../constants";
 import {
   sleep,
   getURLQueryParam,
@@ -165,33 +166,37 @@ const getters = {
   /* Get annotation sets created in table */
   annotationSetsInTable: (state) => () => {
     const annotationSetsList = {};
-    state.annotationSets.forEach((annotationSet) => {
-      let addAnnotationSet = false;
-      if (annotationSet.labels) {
-        annotationSet.labels.forEach((label) => {
-          if (
-            label.annotations &&
-            label.annotations.find(
-              (annotation) =>
-                annotation.origin && annotation.origin === table_reference_api
-            )
-          ) {
-            addAnnotationSet = true;
-            return;
+    if (MULTI_ANN_TABLE_FEATURE) {
+      state.annotationSets.forEach((annotationSet) => {
+        let addAnnotationSet = false;
+        if (annotationSet.labels) {
+          annotationSet.labels.forEach((label) => {
+            if (
+              label.annotations &&
+              label.annotations.find(
+                (annotation) =>
+                  annotation.origin && annotation.origin === table_reference_api
+              )
+            ) {
+              addAnnotationSet = true;
+              return;
+            }
+          });
+        }
+        if (addAnnotationSet) {
+          // group by label set
+          if (annotationSetsList[`${annotationSet.label_set.id}`]) {
+            annotationSetsList[`${annotationSet.label_set.id}`].push(
+              annotationSet
+            );
+          } else {
+            annotationSetsList[`${annotationSet.label_set.id}`] = [
+              annotationSet,
+            ];
           }
-        });
-      }
-      if (addAnnotationSet) {
-        // group by label set
-        if (annotationSetsList[`${annotationSet.label_set.id}`]) {
-          annotationSetsList[`${annotationSet.label_set.id}`].push(
-            annotationSet
-          );
-        } else {
-          annotationSetsList[`${annotationSet.label_set.id}`] = [annotationSet];
         }
-      }
-    });
+      });
+    }
     return annotationSetsList;
   },
 
@@ -203,6 +208,7 @@ const getters = {
       if (annotationSet.labels) {
         annotationSet.labels.forEach((label) => {
           if (
+            MULTI_ANN_TABLE_FEATURE &&
             label.annotations &&
             label.annotations.find(
               (annotation) =>