@konfuzio/document-validation-ui 0.1.10-dev.1 → 0.1.10-dev.11

package/package.json

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

package/src/api.js

@@ -21,6 +21,14 @@ const setAuthToken = (token) => {
   authToken = token;
 };
 
+const setApiUrl = (url) => {
+  HTTP.defaults.baseURL = url;
+};
+
+const setImageUrl = (url) => {
+  IMG_REQUEST.defaults.baseURL = url;
+};
+
 const getInterceptorConfig = (config) => {
   if (authToken) {
     config.headers["Authorization"] = `Token ${authToken}`;
@@ -54,6 +62,8 @@ const makeImageRequest = (imageURL) => {
 
 export default {
   HTTP,
+  setApiUrl,
+  setImageUrl,
   makeImageRequest,
   setAuthToken,
 };

package/src/assets/scss/document_category.scss

@@ -2,6 +2,7 @@
 
 .category-chooser {
   cursor: pointer;
+  height: 100%;
 
   &.split-mode {
     border: 1px solid $grey-outline;

package/src/assets/scss/document_edit.scss

@@ -3,7 +3,7 @@
 .document-edit {
   display: flex;
   flex: 1;
-  background-color: $background;
+  background-color: $light-grey-background;
 
   .pages-section {
     width: 100%;
@@ -14,6 +14,22 @@
     flex-direction: column;
     justify-content: space-between;
 
+    .grid-header {
+      height: 60px;
+      background-color: $background;
+      border-bottom: $component-border;
+      display: flex;
+      align-items: center;
+
+      .header-title {
+        color: $text-color;
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 18px;
+        padding-left: 28px;
+      }
+    }
+
     .document-grid {
       padding: 32px;
       display: flex;
@@ -236,18 +252,18 @@
     }
   }
 
-  &.split-overview-component {
+  &.rename-and-categorize-component {
     background-color: $background;
     min-width: 600px;
 
-    .split-overview-section {
+    .rename-and-categorize-section {
       padding-left: 30px;
       padding-right: 10px;
       overflow-y: scroll;
       width: 100%;
     }
 
-    .split-overview {
+    .rename-and-categorize {
       margin-top: 20px;
       img {
         height: 30px !important;
@@ -263,7 +279,7 @@
         cursor: pointer;
 
         .back-btn-section {
-          padding-top: 5px;
+          padding-top: 4px;
         }
 
         .back-text {
@@ -274,7 +290,7 @@
         }
       }
 
-      .overview-title {
+      .rename-and-categorize-title {
         color: $text-color;
         font-size: 16px;
         font-weight: 600;
@@ -291,7 +307,7 @@
           gap: 20px;
           padding-bottom: 40px;
 
-          .overview-thumbnails {
+          .rename-and-categorize-thumbnails {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -318,6 +334,10 @@
                         5px 5px $white, 6px 6px $detail;
                     }
                   }
+
+                  &:hover {
+                    cursor: pointer;
+                  }
                 }
               }
             }

package/src/assets/scss/document_name.scss

@@ -1,7 +1,7 @@
 @import "./imports.scss";
 
 .document-name-component {
-  flex: 3;
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/assets/scss/document_top_bar.scss

@@ -119,6 +119,10 @@
           display: flex;
           align-items: center;
           margin-right: 16px;
+
+          .edit-mode-btn {
+            font-size: 14px;
+          }
         }
       }
     }

package/src/assets/scss/new_annotation.scss

@@ -12,6 +12,7 @@
   z-index: 40;
   color: $white;
   padding: 8px;
+  cursor: default;
 
   .popup-input {
     background-color: $text-color;
@@ -59,9 +60,15 @@
     left: 0;
   }
 
-  .annotation-dropdowns {
-    display: flex;
-    flex-direction: column;
+  .annotation-dropdown {
+    border-radius: 12px;
+    border: 1px solid $grey-low-opacity !important;
+
+    .button.is-text {
+      box-shadow: none !important;
+      color: $white !important;
+      background-color: transparent !important;
+    }
   }
 
   .annotation-buttons {
@@ -70,6 +77,10 @@
     flex-direction: row;
     gap: 2px;
 
+    .button.is-text {
+      color: $white !important;
+    }
+
     .cancel-button {
       color: $white;
 

package/src/assets/scss/{main.scss → theme.scss}

@@ -1,9 +1,21 @@
+@use "sass:meta";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 @import "./imports.scss";
 
-body {
+:root {
+  --konfuzio-green: #41af85;
+  --white: #fff;
+  --primary-color: var(--konfuzio-green);
+  --primary-button: 4px;
+  --top-bar-background: var(--white);
+}
+
+.dv-ui-app-container {
+  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
+  display: flex;
+  height: 100%;
+  flex-direction: column;
   margin: 0;
-  font-family: $font-family;
 
   .overlay {
     height: 100%;
@@ -16,13 +28,16 @@ body {
     overflow-x: hidden;
   }
 
-  .dv-ui-app-container {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-  }
+  &.dv-ui-theme {
+    font-family: $font-family;
 
-  .dv-ui-theme {
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    box-sizing: border-box;
     button {
       &.is-primary {
         background-color: $primary !important;
@@ -37,6 +52,7 @@ body {
         }
       }
 
+      // TODO: custom classes should have the styles under the component file
       &.missing-decline-btn {
         font-size: 14px;
         color: $grey-blue !important;
@@ -56,11 +72,6 @@ body {
         }
       }
 
-      &:not(.is-text, .is-primary, .missing-btn) {
-        background-color: $white;
-        color: $text-color;
-      }
-
       &.is-text {
         text-decoration: none;
 
@@ -220,8 +231,6 @@ body {
     }
 
     .dropdown {
-      height: 100%;
-
       &.no-padding-bottom {
         .dropdown-content {
           padding-bottom: 0;
@@ -246,6 +255,7 @@ body {
       .dropdown-menu {
         padding-top: 0px;
         min-width: 40px;
+        width: 100%;
       }
 
       a.dropdown-item {
@@ -520,7 +530,7 @@ body {
           }
         }
 
-        &.finish-review {
+        &.no-right-margin {
           .tooltip-content {
             right: 0 !important;
           }
@@ -564,7 +574,6 @@ body {
 
       &.bottom-aligned {
         width: 100%;
-        bottom: 10px;
 
         .tooltip-content {
           &::before {

package/src/assets/scss/variables.scss

@@ -1,6 +1,5 @@
 /* Theme */
 
-$konfuzio-green: #41af85;
 $green: #4bb543;
 $green-low-opacity: rgba(75, 181, 67, 0.11);
 $green-border: #67d19f;
@@ -27,6 +26,7 @@ $grey-darker: #101828;
 $grey-hover: #fafafa;
 $grey-blue: #667085;
 $detail: #e2e3e4;
+$light-grey-background: #f7f7f7;
 
 $dark: #2f3032;
 $full-black: #000;
@@ -42,12 +42,6 @@ $purple: #7b61ff;
 $purple-low-opacity: rgba(123, 97, 255, 0.08);
 $text-color: #1a1a1a;
 
-:root {
-  --primary-color: #{$konfuzio-green};
-  --primary-button: 4px;
-  --top-bar-background: #{$white};
-}
-
 $primary: var(--primary-color);
 $hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
 $font-family: "Inter", sans-serif;

package/src/components/App.vue

@@ -5,9 +5,12 @@
   </div>
 </template>
 <script>
+import Vue from "vue";
+import * as Sentry from "@sentry/vue";
 import DocumentDashboard from "./DocumentDashboard";
 import { DocumentsList } from "./DocumentsList";
 import { getURLQueryParam, getURLPath } from "../utils/utils";
+import { Integrations } from "@sentry/tracing";
 import API from "../api";
 
 export default {
@@ -39,6 +42,30 @@ export default {
       required: false,
       default: "false",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_dsn: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_env: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    api_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    image_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
     locale: {
       type: String,
       required: false,
@@ -93,13 +120,40 @@ export default {
     },
   },
   created() {
+    // Sentry config
+    if (process.env.NODE_ENV != "development") {
+      Sentry.init({
+        Vue,
+        dsn: process.env.VUE_APP_SENTRY_DSN,
+        integrations: [new Integrations.BrowserTracing()],
+        environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
+
+        // We recommend adjusting this value in production, or using tracesSampler
+        // for finer control
+        tracesSampleRate: 1.0,
+
+        // If false, errors won't show up in devtools
+        logErrors: true,
+
+        tracingOptions: {
+          trackComponents: true,
+        },
+      });
+    }
+
     // locale config
     if (this.locale && this.locale !== "") {
       this.$i18n.locale = this.locale;
     }
 
-    // user token config
+    // api config
     API.setAuthToken(this.userToken);
+    if (this.api_url !== "") {
+      API.setApiUrl(this.api_url);
+    }
+    if (this.image_url !== "") {
+      API.setImageUrl(this.image_url);
+    }
 
     // document and project config
     Promise.all([
@@ -128,4 +182,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="../assets/scss/main.scss"></style>
+<style lang="scss" src="../assets/scss/theme.scss"></style>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,18 +14,10 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal
-        v-if="
-          !publicView &&
-          !isDocumentReviewed &&
-          !waitingForSplittingConfirmation(selectedDocument)
-        "
-      />
       <EmptyState />
     </div>
 
     <div v-else :class="['annotation-set-list']">
-      <CategorizeModal v-if="!publicView || !isDocumentReviewed" />
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -114,7 +106,6 @@ import ExtractingData from "./ExtractingData";
 import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
 import LoadingAnnotations from "./LoadingAnnotations";
-import CategorizeModal from "./CategorizeModal";
 import GridIcon from "../../assets/images/GridIcon";
 
 /**
@@ -127,7 +118,6 @@ export default {
     AnnotationSetActionButtons,
     DocumentLabel,
     LoadingAnnotations,
-    CategorizeModal,
     GridIcon,
   },
   data() {
@@ -157,7 +147,6 @@ export default {
       "numberOfAnnotationSetGroup",
       "emptyLabelsLength",
       "annotationsWithPendingReviewLength",
-      "waitingForSplittingConfirmation",
       "annotationSetsToShowInList",
       "annotationSetsInTable",
       "isDocumentReviewed",

package/src/components/DocumentCategory.vue

@@ -168,7 +168,7 @@ export default {
 
     handleChangeCategory(category) {
       // handling the category change will be different based on
-      // the dropdown being on the topbar or the split overview
+      // the dropdown being on the topbar or the Rename and Categorize view
       const updatedCategory = {
         category: category.id,
       };
@@ -192,7 +192,7 @@ export default {
         return;
       }
 
-      // Send the category ID to the split overview
+      // Send the category ID to the Rename and Categorize view
       // to update the new document category
       this.$emit("category-change", this.page, category.id);
     },

package/src/components/DocumentDashboard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
+    <div :class="['dashboard-viewer', renameAndCategorize ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
       <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
       <DocumentAnnotations v-if="!editMode" ref="annotations" />
-      <DocumentEdit v-else ref="editView" />
+      <DocumentEdit v-if="editMode" ref="editView" />
 
       <MultiAnnotationTableOverlay
         v-if="showAnnSetTable"
@@ -34,15 +34,6 @@
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
-    <div
-      v-if="
-        selectedDocument &&
-        waitingForSplittingConfirmation(selectedDocument) &&
-        !documentBeingSplit
-      "
-    >
-      <SplittingSuggestionsModal />
-    </div>
   </div>
 </template>
 
@@ -59,7 +50,6 @@ import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
-import SplittingSuggestionsModal from "../components/DocumentModals/SplittingSuggestionsModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -76,7 +66,6 @@ export default {
     ErrorMessage,
     NotOptimizedViewportModal,
     DocumentErrorModal,
-    SplittingSuggestionsModal,
     MultiAnnotationTableOverlay,
   },
   data() {
@@ -103,9 +92,8 @@ export default {
       "selectedDocument",
       "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview", "documentBeingSplit"]),
+    ...mapState("edit", ["editMode", "renameAndCategorize"]),
     ...mapGetters("display", ["isMinimumWidth"]),
-    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
 
   watch: {