@konfuzio/document-validation-ui 0.1.8-pre-release-1 → 0.1.8-pre-release-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.8-pre-release-1",
+  "version": "0.1.8-pre-release-3",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -21,14 +21,6 @@ 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}`;
@@ -62,8 +54,6 @@ const makeImageRequest = (imageURL) => {
 
 export default {
   HTTP,
-  setApiUrl,
-  setImageUrl,
   makeImageRequest,
   setAuthToken,
 };

package/src/assets/scss/categorize_modal.scss

@@ -18,7 +18,7 @@
 
     .categorize-dropdown {
       width: 100%;
-      border: 1px solid #d0d5dd;
+      border: 1px solid $grey-outline;
       height: 40px;
       cursor: pointer;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

package/src/assets/scss/choose_label_set_modal.scss

@@ -18,7 +18,7 @@
 
     .label-set-dropdown {
       width: 100%;
-      border: 1px solid #d0d5dd;
+      border: 1px solid $grey-outline;
       height: 40px;
       cursor: pointer;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

package/src/assets/scss/document_category.scss

@@ -4,25 +4,30 @@
   cursor: pointer;
 
   &.split-mode {
-    border: 1px solid $grey-detail;
+    border: 1px solid $grey-outline;
     border-radius: 4px;
     background-color: $white;
+
+    &:hover {
+      border-color: $grey-outline-dark;
+      background-color: transparent;
+    }
   }
 
   &.disabled {
     cursor: not-allowed;
   }
 
+  &:not(.split-mode) {
+    .category-drop-down {
+      border-right: $component-border;
+    }
+  }
   .category-drop-down {
     display: flex;
     height: 100%;
     align-items: center;
     padding: 0 8px 0 14px;
-    border-right: $component-border;
-
-    &:hover {
-      background-color: $background;
-    }
 
     .caret-section {
       padding-top: 5px;

package/src/assets/scss/document_edit.scss

@@ -74,7 +74,7 @@
 
           &.active-split {
             .lines {
-              margin-left: 3px;
+              margin-left: 15px;
               margin-right: 3px;
               padding-right: 12px;
             }

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

@@ -1,21 +1,9 @@
-@use "sass:meta";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 @import "./imports.scss";
 
-: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;
+body {
   margin: 0;
+  font-family: $font-family;
 
   .overlay {
     height: 100%;
@@ -28,17 +16,13 @@
     overflow-x: hidden;
   }
 
-  &.dv-ui-theme {
-    font-family: $font-family;
-
-    -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;
+  .dv-ui-app-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
 
+  .dv-ui-theme {
     button {
       &.is-primary {
         background-color: $primary !important;
@@ -261,14 +245,19 @@
 
       .dropdown-menu {
         padding-top: 0px;
+        min-width: 40px;
       }
 
-      a.dropdown-item.is-active {
-        background-color: $primary;
-      }
+      a.dropdown-item {
+        padding-right: 16px;
 
-      a.dropdown-item.is-disabled {
-        color: $grey-blue !important;
+        &.is-active {
+          background-color: $primary;
+        }
+
+        &.is-disabled {
+          color: $grey-blue !important;
+        }
       }
 
       &.dropdown-menu-animation {
@@ -291,7 +280,7 @@
     }
 
     .b-checkbox.checkbox {
-      input[type="checkbox"] + .check {
+      .check {
         background-color: $white;
       }
       &:hover input[type="checkbox"]:not(:disabled) + .check {
@@ -312,6 +301,8 @@
       }
 
       &.modal-400 {
+        position: absolute !important;
+
         .modal-content {
           max-width: 400px !important;
 
@@ -544,6 +535,12 @@
         }
       }
 
+      &.full-height-tooltip {
+        .tooltip-trigger {
+          height: 100%;
+        }
+      }
+
       &.width-184 {
         .tooltip-content {
           width: 184px !important;
@@ -635,6 +632,7 @@
       &.split-mode {
         .dropdown-trigger {
           font-size: 14px;
+          height: 38px;
         }
       }
 

package/src/assets/scss/variables.scss

@@ -1,3 +1,6 @@
+/* Theme */
+
+$konfuzio-green: #41af85;
 $green: #4bb543;
 $green-low-opacity: rgba(75, 181, 67, 0.11);
 $green-border: #67d19f;
@@ -16,6 +19,7 @@ $grey-low-opacity: rgba(133, 140, 154, 0.4);
 $grey-lighter-low-opacity: rgba(223, 224, 228, 0.5);
 $grey-lightest: #f0f0f0;
 $grey-outline: #d0d5dd;
+$grey-outline-dark: #b5b5b5;
 $grey-detail: #e1e1e1;
 $subtle-grey: #f2f4f7;
 $subtlest-grey: #e3e4e5;
@@ -27,7 +31,7 @@ $detail: #e2e3e4;
 $dark: #2f3032;
 $full-black: #000;
 
-$white: var(--white);
+$white: #fff;
 $low-opacity-white: rgba(255, 255, 255, 0.1);
 
 $yellow: #ffd600;
@@ -38,6 +42,12 @@ $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,8 +5,6 @@
   </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";
@@ -41,30 +39,6 @@ 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,
@@ -119,40 +93,13 @@ 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;
     }
 
-    // api config
+    // user token 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([
@@ -181,4 +128,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="../assets/scss/theme.scss"></style>
+<style lang="scss" src="../assets/scss/main.scss"></style>

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -11,7 +11,7 @@
 
     <!-- save button -->
     <b-button
-      v-if="saveBtn && !isLoading && !publicView && !documentIsReviewed"
+      v-if="saveBtn && !isLoading && !publicView && !isDocumentReviewed"
       :class="[
         'annotation-save-btn text-btn',
         actionBar && 'action-bar-save-btn',
@@ -25,7 +25,7 @@
 
     <!-- cancel button -->
     <b-button
-      v-if="cancelBtn && !isLoading && !documentIsReviewed"
+      v-if="cancelBtn && !isLoading && !isDocumentReviewed"
       class="is-small annotation-cancel-btn"
       icon-left="xmark"
       @click.stop="cancel"
@@ -39,7 +39,7 @@
         !saveBtn &&
         !cancelBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="missing-decline-button-container"
     >
@@ -60,7 +60,7 @@
         !saveBtn &&
         !cancelBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="annotation-accept-btn primary-button"
       type="is-primary"
@@ -77,7 +77,7 @@
         !cancelBtn &&
         !saveBtn &&
         !publicView &&
-        !documentIsReviewed
+        !isDocumentReviewed
       "
       class="missing-decline-button-container"
     >
@@ -92,7 +92,7 @@
 
     <!-- Restore not found annotations -->
     <b-button
-      v-if="restoreBtn && !isLoading && !publicView && !documentIsReviewed"
+      v-if="restoreBtn && !isLoading && !publicView && !isDocumentReviewed"
       class="restore-btn"
       type="is-primary"
       @click.stop="restore"
@@ -103,7 +103,7 @@
 </template>
 <script>
 /* Component for showing actions for each annotation row */
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 export default {
   name: "AnnotationActionButtons",
   props: {
@@ -135,11 +135,8 @@ export default {
     },
   },
   computed: {
-    ...mapState("document", [
-      "publicView",
-      "missingAnnotations",
-      "documentIsReviewed",
-    ]),
+    ...mapState("document", ["publicView", "missingAnnotations"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
   methods: {
     save() {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="annotation.id" ref="annotation" class="annotation">
     <span
-      v-if="!publicView || !documentIsReviewed"
+      v-if="!publicView || !isDocumentReviewed"
       :id="annotation.id"
       ref="contentEditable"
       :class="[
@@ -71,6 +71,7 @@ export default {
       "isAnnotationInEditMode",
       "pageAtIndex",
       "getTextFromEntities",
+      "isDocumentReviewed",
     ]),
     ...mapGetters("display", ["bboxToRect"]),
     ...mapGetters("selection", ["isValueArray"]),
@@ -82,7 +83,6 @@ export default {
       "newAcceptedAnnotations",
       "selectedEntities",
       "showActionError",
-      "documentIsReviewed",
     ]),
     annotationText() {
       if (this.isAnnotationBeingEdited) {
@@ -156,7 +156,7 @@ export default {
       this.$refs.contentEditable.textContent = text;
     },
     handleEditAnnotation(event) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (event) {
         event.preventDefault();
@@ -164,7 +164,7 @@ export default {
 
       if (
         !this.publicView &&
-        !this.documentIsReviewed &&
+        !this.isDocumentReviewed &&
         !this.isAnnotationBeingEdited &&
         !this.isLoading
       ) {
@@ -228,7 +228,7 @@ export default {
       event.preventDefault();
     },
     saveAnnotationChanges(event) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (event) {
         event.preventDefault();

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -168,12 +168,12 @@ export default {
       "documentId",
       "showActionError",
       "missingAnnotations",
-      "documentIsReviewed",
     ]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "annotationIsNotFound",
+      "isDocumentReviewed",
     ]),
     ...mapGetters("selection", ["isValueArray"]),
     defaultSpan() {
@@ -426,7 +426,7 @@ export default {
       );
     },
     handleSaveChanges(decline) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (
         this.showAcceptButton() ||

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -2,7 +2,7 @@
   <div class="action-buttons">
     <!-- mark all empty labels as missing -->
     <div
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       class="missing-decline-button-container all-missing"
       @mouseenter="mouseenterAnnotationSet('missing')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -19,7 +19,7 @@
 
     <!-- accept all pending annotations -->
     <div
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       class="accept-all"
       @mouseenter="mouseenterAnnotationSet('accept')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -40,20 +40,23 @@
 <script>
 /* Component for showing actions for each Annotation Set */
 
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "AnnotationSetActionButtons",
   props: {
     numberOfEmptyLabelsInAnnotationSet: {
       type: Number,
+      default: 0,
     },
     numberOfPendingAnnotationsInAnnotationSet: {
       type: Number,
+      default: 0,
     },
   },
   computed: {
-    ...mapState("document", ["publicView", "documentIsReviewed"]),
+    ...mapState("document", ["publicView"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
   methods: {
     mouseenterAnnotationSet(type) {

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -110,10 +110,12 @@ export default {
       "categorizeModalIsActive",
       "splittingSuggestions",
       "publicView",
-      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
-    ...mapGetters("document", ["categorizationIsConfirmed"]),
+    ...mapGetters("document", [
+      "categorizationIsConfirmed",
+      "isDocumentReviewed",
+    ]),
 
     singleCategoryInProject() {
       // if only 1 category in the project, we don't enable the dropdown
@@ -185,7 +187,7 @@ export default {
           (!category || (category && !this.splittingSuggestions)) &&
           !this.categorizationIsConfirmed &&
           !this.publicView &&
-          !this.documentIsReviewed;
+          !this.isDocumentReviewed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -17,7 +17,7 @@
       <CategorizeModal
         v-if="
           !publicView &&
-          !documentIsReviewed &&
+          !isDocumentReviewed &&
           !waitingForSplittingConfirmation(selectedDocument)
         "
       />
@@ -25,7 +25,7 @@
     </div>
 
     <div v-else :class="['annotation-set-list']">
-      <CategorizeModal v-if="!publicView || !documentIsReviewed" />
+      <CategorizeModal v-if="!publicView || !isDocumentReviewed" />
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -148,7 +148,6 @@ export default {
       "labels",
       "selectedDocument",
       "splittingSuggestions",
-      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", [
@@ -158,6 +157,7 @@ export default {
       "waitingForSplittingConfirmation",
       "annotationSetsToShowInList",
       "annotationSetsInTable",
+      "isDocumentReviewed",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -231,7 +231,7 @@ export default {
 
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       // get out of edit mode and navigation
       if (event.key === "Escape") {

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="empty-annotation">
     <span
-      v-if="!publicView && !documentIsReviewed"
+      v-if="!publicView && !isDocumentReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
@@ -76,6 +76,7 @@ export default {
       "isAnnotationInEditMode",
       "getTextFromEntities",
       "annotationIsNotFound",
+      "isDocumentReviewed",
     ]),
     ...mapGetters("selection", ["isValueArray"]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
@@ -84,7 +85,6 @@ export default {
       "publicView",
       "selectedEntities",
       "showActionError",
-      "documentIsReviewed",
     ]),
   },
   watch: {
@@ -159,14 +159,14 @@ export default {
     handleEditEmptyAnnotation() {
       if (
         this.publicView ||
-        this.documentIsReviewed ||
+        this.isDocumentReviewed ||
         this.annotationIsNotFound(this.annotationSet, this.label)
       )
         return;
 
       if (
         !this.publicView &&
-        !this.documentIsReviewed &&
+        !this.isDocumentReviewed &&
         !this.isLoading &&
         this.elementSelected !== this.emptyAnnotationId()
       ) {
@@ -221,7 +221,7 @@ export default {
       }
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView || this.documentIsReviewed) return;
+      if (this.publicView || this.isDocumentReviewed) return;
 
       if (event) {
         event.preventDefault();