@konfuzio/document-validation-ui 0.1.55-dev.0 → 0.1.55-dev.1

package/src/components/App.vue

@@ -20,6 +20,7 @@ import {
 import { Integrations } from "@sentry/tracing";
 import API from "../api";
 import { initKeycloak } from "../utils/keycloak";
+import { debounce } from "../utils/utils";
 
 export default {
   name: "App",
@@ -53,6 +54,24 @@ export default {
       default: "true",
     },
     // eslint-disable-next-line vue/prop-name-casing
+    show_missing_annotations: {
+      type: String,
+      required: false,
+      default: "true",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    show_feedback_needed_annotations: {
+      type: String,
+      required: false,
+      default: "true",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    show_accepted_annotations: {
+      type: String,
+      required: false,
+      default: "true",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
     sentry_dsn: {
       type: String,
       required: false,
@@ -176,6 +195,42 @@ export default {
         return this.show_documents_navigation === "true";
       }
     },
+    showMissingAnnotations() {
+      if (
+        window.location.hash === "#unrevised" ||
+        window.location.hash === "#possiblyIncorrect"
+      ) {
+        return false;
+      } else if (process.env.VUE_APP_SHOW_MISSING_ANNOTATIONS) {
+        return process.env.VUE_APP_SHOW_MISSING_ANNOTATIONS === "true";
+      } else {
+        return this.show_missing_annotations === "true";
+      }
+    },
+    showAcceptedAnnotations() {
+      if (
+        window.location.hash === "#unrevised" ||
+        window.location.hash === "#possiblyIncorrect"
+      ) {
+        return false;
+      } else if (process.env.VUE_APP_SHOW_ACCEPTED_ANNOTATIONS) {
+        return process.env.VUE_APP_SHOW_ACCEPTED_ANNOTATIONS === "true";
+      } else {
+        return this.show_accepted_annotations === "true";
+      }
+    },
+    showFeedbackNeededAnnotations() {
+      if (
+        window.location.hash === "#unrevised" ||
+        window.location.hash === "#possiblyIncorrect"
+      ) {
+        return true;
+      } else if (process.env.VUE_APP_SHOW_FEEDBACK_NEEDED_ANNOTATIONS) {
+        return process.env.VUE_APP_SHOW_FEEDBACK_NEEDED_ANNOTATIONS === "true";
+      } else {
+        return this.show_feedback_needed_annotations === "true";
+      }
+    },
     isPublicView() {
       if (
         this.userToken ||
@@ -330,6 +385,18 @@ export default {
         "display/showDocumentsNavigation",
         this.showDocumentsNavigation
       ),
+      this.$store.dispatch(
+        "document/showMissingAnnotations",
+        this.showMissingAnnotations
+      ),
+      this.$store.dispatch(
+        "document/showFeedbackNeededAnnotations",
+        this.showFeedbackNeededAnnotations
+      ),
+      this.$store.dispatch(
+        "document/showAcceptedAnnotations",
+        this.showAcceptedAnnotations
+      ),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
       this.$store.dispatch("document/setAnnotationId", this.annotationId),
@@ -342,20 +409,14 @@ export default {
       this.$store.dispatch("document/fetchDocument");
     });
 
-    // Add observer for class added to HTML tag when Buefy modals are mounted
-    // TODO: check defaultModalScroll property in Buefy constructor https://buefy.org/documentation/constructor-options
-    const htmlTag = document.documentElement;
-    const observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (mutation) {
-        if (mutation.attributeName === "class") {
-          const classToRemove = "is-clipped";
-          if (mutation.target.classList.contains(classToRemove)) {
-            htmlTag.classList.remove(classToRemove);
-          }
-        }
-      });
-    });
-    observer.observe(htmlTag, { attributes: true });
+    // Stop error resizeObserver
+    const _ = window.ResizeObserver;
+    window.ResizeObserver = class ResizeObserver extends _ {
+      constructor(callback) {
+        callback = debounce(callback, 20);
+        super(callback);
+      }
+    };
   },
 };
 </script>

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -205,9 +205,7 @@ export default {
   data() {
     return {
       tooltipDelay: 700,
-      showText:
-        window.innerWidth >
-        TEXT_BREAKPOINT_WIDTH(this.$i18n ? this.$i18n.locale : "en"),
+      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
     };
   },
   computed: {
@@ -232,8 +230,7 @@ export default {
   },
   methods: {
     resize() {
-      this.showText =
-        window.innerWidth > TEXT_BREAKPOINT_WIDTH(this.$i18n.locale);
+      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
     },
     search() {
       this.$emit("search");

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -15,14 +15,13 @@
   >
     <div class="annotations-width-slider">
       <b-slider
-        :value="labelWidth"
+        v-model="labelContainerWidth"
         type="is-move"
         :min="20"
         :max="80"
         :custom-formatter="(val) => `${$t('label_size')} ${val}%`"
         class="is-full-height show-hover show-line"
         :disabled="isAnnotationInEditMode()"
-        @input="setLabelWidth"
       />
     </div>
     <div
@@ -244,6 +243,7 @@ export default {
       checkboxDefaultValue: checkboxValue,
       isCheckboxAvailable: false,
       isChecked: checkboxValue,
+      labelContainerWidth: 0,
     };
   },
   computed: {
@@ -319,6 +319,12 @@ export default {
     },
   },
   watch: {
+    labelWidth(width) {
+      this.labelContainerWidth = width;
+    },
+    labelContainerWidth(width) {
+      this.setLabelWidth(width);
+    },
     annotationId(newAnnotationId) {
       this.checkAnnotationSelection(newAnnotationId);
     },
@@ -383,6 +389,7 @@ export default {
   },
   mounted() {
     this.checkAnnotationSelection(this.annotationId);
+    this.labelContainerWidth = this.labelWidth;
   },
   methods: {
     ...mapActions("display", ["setLabelWidth"]),
@@ -516,12 +523,14 @@ export default {
       return (
         !this.editAnnotation &&
         this.annotation &&
+        !this.isLoading &&
         this.hoveredAnnotation === this.annotation.id
       );
     },
     showAcceptButton() {
       return (
         !this.editAnnotation &&
+        !this.isLoading &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
         !this.annotation.is_correct &&
@@ -531,6 +540,7 @@ export default {
     showDeclineButton() {
       return (
         !this.editAnnotation &&
+        !this.isLoading &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
         this.hoveredAnnotation === this.annotation.id
@@ -539,6 +549,7 @@ export default {
     showMissingButton() {
       return (
         !this.editAnnotation &&
+        !this.isLoading &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         !this.annotation &&
@@ -710,6 +721,7 @@ export default {
           this.$store.dispatch("document/resetEditAnnotation");
           this.$store.dispatch("selection/disableSelection");
           this.$store.dispatch("selection/setSelectedEntities", null);
+          this.isLoading = false;
         });
     },
     saveEmptyAnnotationChanges() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -105,7 +105,10 @@
             </div>
           </div>
 
-          <b-collapse :open="isAccordionOpen(annotationSet)">
+          <b-collapse
+            :model-value="isAccordionOpen(annotationSet)"
+            animation="slide"
+          >
             <div
               v-if="annotationSet.labels.length > 0"
               class="annotation-sets-list"
@@ -232,12 +235,16 @@ export default {
         this.jumpToNextAnnotation = false;
       }
     },
-
     getAnnotationsFiltered(newFiltered, oldFiltered) {
-      this.loadAccordions(
-        newFiltered.annotationSets,
-        oldFiltered.annotationSets
-      );
+      // just load accordions again if the length was changed
+      if (
+        newFiltered.annotationSets.length !== oldFiltered.annotationSets.length
+      ) {
+        this.loadAccordions(
+          newFiltered.annotationSets,
+          oldFiltered.annotationSets
+        );
+      }
     },
     annotationId(newAnnotationId) {
       if (newAnnotationId) {
@@ -299,21 +306,13 @@ export default {
       }
       this.annotationSetsAccordion = newAnnotationSetsAccordion;
     },
-    loadAccordions(newAnnotationSets, oldAnnotationSets = null) {
+    loadAccordions(newAnnotationSets) {
       if (newAnnotationSets) {
         const isFirstTime = this.annotationSetsAccordion === null;
         const newAnnotationSetsAccordion = {};
-        const annotationSetsOpened = [];
         const annotationSetsCreated = [];
 
         newAnnotationSets.forEach((newAnnotationSet, index) => {
-          const wasOpen = annotationSetsOpened.find(
-            (annotationSetOpened) =>
-              annotationSetOpened &&
-              annotationSetOpened.id &&
-              newAnnotationSet.id &&
-              newAnnotationSet.id === annotationSetOpened.id
-          );
           if (isFirstTime && this.annotationSetId) {
             newAnnotationSetsAccordion[
               newAnnotationSet.id || newAnnotationSet.label_set.id
@@ -330,10 +329,6 @@ export default {
             newAnnotationSetsAccordion[
               newAnnotationSet.id || newAnnotationSet.label_set.id
             ] = true;
-          } else if (wasOpen) {
-            newAnnotationSetsAccordion[
-              newAnnotationSet.id || newAnnotationSet.label_set.id
-            ] = wasOpen !== undefined;
           } else {
             const wasCreated = annotationSetsCreated.find(
               (annotationSetCreated) =>
@@ -408,9 +403,11 @@ export default {
     },
 
     createArray(className) {
-      return Array.from(
-        this.$refs.annotationList.getElementsByClassName(className)
-      );
+      if (this.$refs.annotationList) {
+        return Array.from(
+          this.$refs.annotationList.getElementsByClassName(className)
+        );
+      }
     },
 
     keyDownHandler(event) {

package/src/components/DocumentDashboard.vue

@@ -3,24 +3,19 @@
     <DocumentTopBar />
     <div :class="['dashboard-viewer', renameAndCategorize ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
-      <Split>
-        <SplitArea :size="50" :min-size="350">
+      <splitpanes class="default-theme">
+        <pane :size="50" :min-size="10">
           <ScrollingDocument
             ref="scrollingDocument"
             class="dashboard-document"
           />
-        </SplitArea>
-        <SplitArea :size="50" style="overflow-y: hidden">
+        </pane>
+        <pane :size="50">
           <DocumentAnnotations v-if="!editMode" ref="annotations" />
           <DocumentEdit v-else ref="editView" />
-        </SplitArea>
-      </Split>
+        </pane>
+      </splitpanes>
 
-      <MultiAnnotationTableOverlay
-        v-if="showAnnSetTable"
-        :left="documentContainerLeftPadding"
-        :width="documentContainerWidth"
-      />
       <ChooseLabelSetModal
         v-if="showChooseLabelSetModal && showChooseLabelSetModal.show"
         :is-multiple-annotations="showChooseLabelSetModal.isMultipleAnnotations"
@@ -59,16 +54,15 @@ import { mapGetters, mapState } from "vuex";
 import { DocumentTopBar } from "./DocumentTopBar";
 import { ScrollingDocument } from "./DocumentPage";
 import { DocumentThumbnails } from "./DocumentThumbnails";
-import {
-  DocumentAnnotations,
-  MultiAnnotationTableOverlay,
-} from "./DocumentAnnotations";
+import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
 import AnnotationDeletedModal from "../components/DocumentModals/AnnotationDeletedModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
 import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -77,6 +71,8 @@ import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSe
 export default {
   name: "DocumentDashboard",
   components: {
+    Splitpanes,
+    Pane,
     DocumentTopBar,
     ScrollingDocument,
     DocumentThumbnails,
@@ -85,7 +81,6 @@ export default {
     ErrorMessage,
     NotOptimizedViewportModal,
     DocumentErrorModal,
-    MultiAnnotationTableOverlay,
     ChooseLabelSetModal,
     AnnotationDeletedModal,
   },

package/src/components/DocumentEdit/EditPages.vue

@@ -7,60 +7,64 @@
       v-model="editPages"
       class="document-grid"
       easing="cubic-bezier(0.37, 0, 0.63, 1)"
+      item-key="id"
+      :move="checkMove"
       @start="dragging = true"
       @end="handleDragEnd"
-      @move="checkMove"
     >
-      <div
-        v-for="(page, index) in editPages"
-        :key="page.id"
-        class="image-section"
-        tabindex="0"
-      >
-        <div class="top-section">
-          <EditPageThumbnail
-            :page="page"
-            :index="index"
-            :rotation="getRotation(page.id)"
-          />
-          <div
-            :class="[
-              'splitting-lines',
-              splittingLines &&
-                splittingLines[index].page === page.number &&
-                'active-split',
-            ]"
-            @click="handleSplittingLines(page.number, 'manual')"
-          >
-            <div class="scissors-icon">
-              <b-icon icon="scissors" class="is-small" />
-            </div>
+      <template #item="{ element, index }">
+        <div
+          :id="element.id"
+          :key="element.id"
+          class="image-section"
+          tabindex="0"
+        >
+          <div class="top-section">
+            <EditPageThumbnail
+              :page="element"
+              :index="index"
+              :rotation="getRotation(element.id)"
+            />
             <div
-              v-if="
-                splittingLines && splittingLines[index].page === page.number
-              "
-              class="lines active-split"
+              :class="[
+                'splitting-lines',
+                splittingLines &&
+                  splittingLines[index].page === element.number &&
+                  'active-split',
+              ]"
+              @click="handleSplittingLines(element.number, 'manual')"
             >
-              <SplitZigZag
-                :color="
+              <div class="scissors-icon">
+                <b-icon icon="scissors" class="is-small" />
+              </div>
+              <div
+                v-if="
                   splittingLines &&
-                  splittingLines[index].origin &&
-                  splittingLines[index].origin === 'AI' &&
-                  splitSuggestionsEnabled
-                    ? 'green'
-                    : 'dark'
+                  splittingLines[index].page === element.number
                 "
-              />
-            </div>
-            <div v-else class="lines not-active-split">
-              <SplitLines />
+                class="lines active-split"
+              >
+                <SplitZigZag
+                  :color="
+                    splittingLines &&
+                    splittingLines[index].origin &&
+                    splittingLines[index].origin === 'AI' &&
+                    splitSuggestionsEnabled
+                      ? 'green'
+                      : 'dark'
+                  "
+                />
+              </div>
+              <div v-else class="lines not-active-split">
+                <SplitLines />
+              </div>
             </div>
           </div>
+          <div class="bottom-section">
+            <span class="page-number">{{ element.number }}</span>
+          </div>
         </div>
-        <div class="bottom-section">
-          <span class="page-number">{{ page.number }}</span>
-        </div>
-      </div>
+      </template>
     </draggable>
   </div>
 </template>
@@ -75,7 +79,6 @@ import { mapState } from "vuex";
 import SplitLines from "../../assets/images/SplitLines";
 import SplitZigZag from "../../assets/images/SplitZigZag";
 import EditPageThumbnail from "./EditPageThumbnail";
-
 import draggable from "vuedraggable";
 
 export default {
@@ -132,9 +135,6 @@ export default {
       }
     },
   },
-  mounted() {
-    this.editPages = this.pagesForPostprocess;
-  },
   methods: {
     deselect() {
       this.$store.dispatch("edit/setSelectedPages");

package/src/components/DocumentPage/DocumentPage.vue

@@ -86,7 +86,7 @@
                 (bbox) => bbox.page_index + 1 == page.number
               )"
             >
-              <v-group :key="'ann' + annotation.id + '-' + index">
+              <v-group>
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="annotationRect(bbox, annotation.id)"
@@ -99,7 +99,7 @@
             <template
               v-if="annotation.metadata && annotation.metadata.checkbox"
             >
-              <v-group :key="'ann' + annotation.id + '-checkbox'">
+              <v-group>
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="

package/src/components/DocumentPage/EditAnnotation.vue

@@ -24,17 +24,19 @@
           ]"
           type="is-text"
         >
-          {{
-            selectedSet
-              ? `${selectedSet.label_set.name} ${
-                  selectedSet.id
-                    ? numberOfAnnotationSetGroup(selectedSet)
-                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                        "new"
-                      )})`
-                }`
-              : $t("select_annotation_set")
-          }}
+          <span class="input-text">
+            {{
+              selectedSet
+                ? `${selectedSet.label_set.name} ${
+                    selectedSet.id
+                      ? numberOfAnnotationSetGroup(selectedSet)
+                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                          "new"
+                        )})`
+                  }`
+                : $t("select_annotation_set")
+            }}</span
+          >
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -85,7 +87,7 @@
             :disabled="!labelsFiltered"
             type="is-text"
           >
-            {{ selectedLabel.name }}
+            <span class="input-text"> {{ selectedLabel.name }}</span>
             <span class="caret-icon">
               <b-icon icon="angle-down" size="is-small" class="caret" />
             </span>

package/src/components/DocumentPage/NewAnnotation.vue

@@ -26,17 +26,19 @@
           ]"
           type="is-text"
         >
-          {{
-            selectedSet
-              ? `${selectedSet.label_set.name} ${
-                  selectedSet.id
-                    ? numberOfAnnotationSetGroup(selectedSet)
-                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                        "new"
-                      )})`
-                }`
-              : $t("select_annotation_set")
-          }}
+          <span class="input-text">
+            {{
+              selectedSet
+                ? `${selectedSet.label_set.name} ${
+                    selectedSet.id
+                      ? numberOfAnnotationSetGroup(selectedSet)
+                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                          "new"
+                        )})`
+                  }`
+                : $t("select_annotation_set")
+            }}</span
+          >
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -71,7 +73,6 @@
       size="is-large"
       position="is-bottom"
       class="bottom-aligned"
-      :close-delay="5000"
     >
       <template #content>
         <div ref="tooltipContent"></div>
@@ -92,13 +93,13 @@
             ]"
             type="is-text"
           >
-            {{
+            <span class="input-text">{{
               selectedLabel
                 ? selectedLabel.name
                 : labels && labels.length === 0
                 ? $t("no_labels_to_choose")
                 : $t("select_label")
-            }}
+            }}</span>
             <span class="caret-icon">
               <b-icon icon="angle-down" size="is-small" class="caret" />
             </span>

package/src/constants.js

@@ -2,10 +2,4 @@ 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 = 950;
-export const TEXT_BREAKPOINT_WIDTH = (locale) => {
-  if (locale === "en") {
-    return 1350;
-  } else {
-    return 1800;
-  }
-};
+export const TEXT_BREAKPOINT_WIDTH = 1800;

package/src/i18n.js

@@ -1,7 +1,4 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-
-Vue.use(VueI18n);
+import { createI18n } from "vue-i18n";
 
 function loadLocaleMessages() {
   const locales = require.context(
@@ -20,7 +17,7 @@ function loadLocaleMessages() {
   return messages;
 }
 
-export default new VueI18n({
+export const i18n = createI18n({
   locale: process.env.VUE_APP_LOCALE || "en",
   fallbackLocale: "en",
   messages: loadLocaleMessages(),

package/src/locales/de.json

@@ -102,7 +102,7 @@
   "decline": "Ablehnen",
   "server_error": "Wir haben derzeit ein Serverproblem. Bitte versuchen Sie es später noch einmal oder",
   "get_support": "Hole dir Unterstützung",
-  "no_labels_available": "Das ausgewählte Annotations-Set enthält keine nicht ausgefüllten oder multiplen Labels. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/modules/labels/index.html#multiple' target='_blank'>diesem Link</a>.",
+  "no_labels_available": "Das ausgewählte Annotations-Set enthält keine nicht ausgefüllten oder multiplen Labels.",
   "new_ann_set_title": "Neues Annotations-Set",
   "new_ann_set_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus. Das neue Annotations-Set enthält dieselben Beschriftungen.",
   "select_label_set": "Wählen Sie das Label-Set-Modell aus",

package/src/locales/en.json

@@ -109,7 +109,7 @@
   "decline": "Decline",
   "server_error": "We are currently experiencing a server issue. Please try again later or",
   "get_support": "Get Support",
-  "no_labels_available": "There are no unfilled or multiple labels in the selected annotation set. For more details, you can visit <a href='https://help.konfuzio.com/modules/labels/index.html#multiple' target='_blank'>this link</a>.",
+  "no_labels_available": "There are no unfilled or multiple labels in the selected annotation set.",
   "new_multi_ann_title": "Create multiple annotations",
   "new_multi_ann_description": "Select a data model from the existing ones, then deselect the labels that don't exist in this document.",
   "drag_drop_columns_multi_ann": "Drag and drop to change the order of the labels",