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

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

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

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -15,13 +15,14 @@
   >
     <div class="annotations-width-slider">
       <b-slider
-        v-model="labelContainerWidth"
+        :value="labelWidth"
         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
@@ -243,7 +244,6 @@ export default {
       checkboxDefaultValue: checkboxValue,
       isCheckboxAvailable: false,
       isChecked: checkboxValue,
-      labelContainerWidth: 0,
     };
   },
   computed: {
@@ -319,12 +319,6 @@ export default {
     },
   },
   watch: {
-    labelWidth(width) {
-      this.labelContainerWidth = width;
-    },
-    labelContainerWidth(width) {
-      this.setLabelWidth(width);
-    },
     annotationId(newAnnotationId) {
       this.checkAnnotationSelection(newAnnotationId);
     },
@@ -389,7 +383,6 @@ export default {
   },
   mounted() {
     this.checkAnnotationSelection(this.annotationId);
-    this.labelContainerWidth = this.labelWidth;
   },
   methods: {
     ...mapActions("display", ["setLabelWidth"]),

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -15,7 +15,12 @@
           </h3>
           <div>
             <div v-if="labelSetsFilteredForAnnotationSetCreation.length === 0">
-              <p v-html="$t('no_multi_ann_labelset_model')" />
+              <p
+                v-html="
+                  `${$t('no_multi_ann_labelset_model')}
+              ${showBranding ? $t('no_multi_ann_labelset_model_link') : ''}`
+                "
+              />
             </div>
             <div v-else>
               <p>
@@ -68,7 +73,7 @@
  * This component shows a modal to choose a label set from the project
  */
 
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "CreateAnnotationSetModal",
@@ -78,6 +83,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("display", ["showBranding"]),
     ...mapGetters("document", [
       "numberOfLabelSetGroup",
       "labelSetsFilteredForAnnotationSetCreation",

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -105,10 +105,7 @@
             </div>
           </div>
 
-          <b-collapse
-            :model-value="isAccordionOpen(annotationSet)"
-            animation="slide"
-          >
+          <b-collapse :open="isAccordionOpen(annotationSet)">
             <div
               v-if="annotationSet.labels.length > 0"
               class="annotation-sets-list"
@@ -142,7 +139,11 @@
               >
               <!-- eslint-disable vue/no-v-html -->
               <span
-                v-if="isDocumentEditable && !isSearchingAnnotationList"
+                v-if="
+                  showBranding &&
+                  isDocumentEditable &&
+                  !isSearchingAnnotationList
+                "
                 v-html="$t('link_to_add_labels')"
               />
             </div>
@@ -192,7 +193,7 @@ export default {
   },
 
   computed: {
-    ...mapState("display", ["showAnnSetTable"]),
+    ...mapState("display", ["showAnnSetTable", "showBranding"]),
     ...mapState("document", [
       "annotationSets",
       "documentId",
@@ -403,11 +404,9 @@ export default {
     },
 
     createArray(className) {
-      if (this.$refs.annotationList) {
-        return Array.from(
-          this.$refs.annotationList.getElementsByClassName(className)
-        );
-      }
+      return Array.from(
+        this.$refs.annotationList.getElementsByClassName(className)
+      );
     },
 
     keyDownHandler(event) {

package/src/components/DocumentDashboard.vue

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

package/src/components/DocumentEdit/EditPages.vue

@@ -7,64 +7,60 @@
       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"
     >
-      <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-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>
             <div
-              :class="[
-                'splitting-lines',
-                splittingLines &&
-                  splittingLines[index].page === element.number &&
-                  'active-split',
-              ]"
-              @click="handleSplittingLines(element.number, 'manual')"
+              v-if="
+                splittingLines && splittingLines[index].page === page.number
+              "
+              class="lines active-split"
             >
-              <div class="scissors-icon">
-                <b-icon icon="scissors" class="is-small" />
-              </div>
-              <div
-                v-if="
+              <SplitZigZag
+                :color="
                   splittingLines &&
-                  splittingLines[index].page === element.number
+                  splittingLines[index].origin &&
+                  splittingLines[index].origin === 'AI' &&
+                  splitSuggestionsEnabled
+                    ? 'green'
+                    : 'dark'
                 "
-                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 v-else class="lines not-active-split">
+              <SplitLines />
             </div>
-          </div>
-          <div class="bottom-section">
-            <span class="page-number">{{ element.number }}</span>
           </div>
         </div>
-      </template>
+        <div class="bottom-section">
+          <span class="page-number">{{ page.number }}</span>
+        </div>
+      </div>
     </draggable>
   </div>
 </template>
@@ -79,6 +75,7 @@ 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 {
@@ -135,6 +132,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.editPages = this.pagesForPostprocess;
+  },
   methods: {
     deselect() {
       this.$store.dispatch("edit/setSelectedPages");

package/src/components/DocumentModals/DocumentErrorModal.vue

@@ -19,6 +19,7 @@
       </section>
       <footer class="modal-card-foot">
         <b-button
+          v-if="showBranding"
           type="is-primary"
           class="primary-button"
           @click="handleContactSupport"
@@ -31,6 +32,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import ErrorIcon from "../../assets/images/ErrorIcon";
 
 export default {
@@ -43,6 +45,9 @@ export default {
       isModalActive: true,
     };
   },
+  computed: {
+    ...mapState("display", ["showBranding"]),
+  },
   methods: {
     handleContactSupport() {
       const documentError = "Document error";

package/src/components/DocumentPage/DocumentPage.vue

@@ -86,7 +86,7 @@
                 (bbox) => bbox.page_index + 1 == page.number
               )"
             >
-              <v-group>
+              <v-group :key="'ann' + annotation.id + '-' + index">
                 <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>
+              <v-group :key="'ann' + annotation.id + '-checkbox'">
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="
@@ -303,13 +303,11 @@ export default {
     scale() {
       this.closePopups();
     },
-    async selectedEntities(newValue) {
+    selectedEntities(newValue) {
       if (!newValue) {
         this.$store.dispatch("selection/setSpanSelection", null);
         this.closePopups();
       }
-
-      await this.$store.dispatch("selection/getTextFromEntities", newValue);
     },
     page(newValue, oldValue) {
       if (newValue.image_url !== oldValue.image_url) {
@@ -439,6 +437,10 @@ export default {
           "selection/setSelectedEntities",
           this.newAnnotation
         );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          this.newAnnotation
+        );
       } else {
         this.$store.dispatch("selection/setSelectedEntities", null);
       }
@@ -458,6 +460,10 @@ export default {
           "selection/setSelectedEntities",
           normalizedEntities
         );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          normalizedEntities
+        );
       } else {
         this.$store.dispatch("selection/setSelectedEntities", null);
       }
@@ -503,6 +509,10 @@ export default {
           "selection/setSelectedEntities",
           this.newAnnotation
         );
+        this.$store.dispatch(
+          "selection/getTextFromEntities",
+          this.newAnnotation
+        );
       } else {
         this.$store.dispatch("selection/setSelectedEntities", null);
       }

package/src/components/DocumentPage/EditAnnotation.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div
     v-if="annotation && !hide"
@@ -24,19 +25,17 @@
           ]"
           type="is-text"
         >
-          <span class="input-text">
-            {{
-              selectedSet
-                ? `${selectedSet.label_set.name} ${
-                    selectedSet.id
-                      ? numberOfAnnotationSetGroup(selectedSet)
-                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                          "new"
-                        )})`
-                  }`
-                : $t("select_annotation_set")
-            }}</span
-          >
+          {{
+            selectedSet
+              ? `${selectedSet.label_set.name} ${
+                  selectedSet.id
+                    ? numberOfAnnotationSetGroup(selectedSet)
+                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                        "new"
+                      )})`
+                }`
+              : $t("select_annotation_set")
+          }}
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -73,6 +72,15 @@
       class="bottom-aligned"
       :close-delay="5000"
     >
+      <template #content>
+        <div
+          v-html="
+            `${$t('no_labels_available')} ${
+              showBranding ? $t('no_labels_available_link') : ''
+            }`
+          "
+        ></div>
+      </template>
       <b-dropdown
         v-if="selectedLabel"
         v-model="selectedLabel"
@@ -87,7 +95,7 @@
             :disabled="!labelsFiltered"
             type="is-text"
           >
-            <span class="input-text"> {{ selectedLabel.name }}</span>
+            {{ selectedLabel.name }}
             <span class="caret-icon">
               <b-icon icon="angle-down" size="is-small" class="caret" />
             </span>
@@ -175,6 +183,7 @@ export default {
       "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
     ]),
+    ...mapState("display", ["showBranding"]),
     ...mapGetters("display", ["bboxToRect"]),
     ...mapState("selection", ["selection", "spanSelection"]),
     top() {

package/src/components/DocumentPage/NewAnnotation.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="annotation-popup" :style="{ left: `${left}px`, top: `${top}px` }">
     <div v-if="!textFromEntities" class="popup-input">
@@ -26,19 +27,17 @@
           ]"
           type="is-text"
         >
-          <span class="input-text">
-            {{
-              selectedSet
-                ? `${selectedSet.label_set.name} ${
-                    selectedSet.id
-                      ? numberOfAnnotationSetGroup(selectedSet)
-                      : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                          "new"
-                        )})`
-                  }`
-                : $t("select_annotation_set")
-            }}</span
-          >
+          {{
+            selectedSet
+              ? `${selectedSet.label_set.name} ${
+                  selectedSet.id
+                    ? numberOfAnnotationSetGroup(selectedSet)
+                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                        "new"
+                      )})`
+                }`
+              : $t("select_annotation_set")
+          }}
           <span class="caret-icon">
             <b-icon icon="angle-down" size="is-small" class="caret" />
           </span>
@@ -73,9 +72,16 @@
       size="is-large"
       position="is-bottom"
       class="bottom-aligned"
+      :close-delay="5000"
     >
       <template #content>
-        <div ref="tooltipContent"></div>
+        <div
+          v-html="
+            `${$t('no_labels_available')} ${
+              showBranding ? $t('no_labels_available_link') : ''
+            }`
+          "
+        ></div>
       </template>
       <b-dropdown
         v-model="selectedLabel"
@@ -93,13 +99,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>
@@ -180,6 +186,7 @@ export default {
       "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
     ]),
+    ...mapState("display", ["showBranding"]),
     ...mapGetters("display", ["clientToBbox"]),
     ...mapState("selection", ["spanSelection", "selection"]),
     top() {
@@ -227,13 +234,12 @@ export default {
     textFromEntities() {
       if (!this.spanSelection) return;
 
-      // get array of all offset strings
-      let text = this.spanSelection.map((span) => {
-        return span.offset_string;
+      let text = "";
+      this.spanSelection.forEach((span) => {
+        text = `${text} ${span.offset_string}`;
       });
 
-      // join all the strings to become a single string of text
-      return text.join().split(",").join(" ");
+      return text.trim();
     },
   },
   watch: {
@@ -255,8 +261,6 @@ export default {
       // prevent click propagation when opening the popup
       document.body.addEventListener("click", this.clickOutside);
     }, 200);
-
-    this.setTooltipText();
   },
   destroyed() {
     document.body.removeEventListener("click", this.clickOutside);
@@ -343,10 +347,6 @@ export default {
         finish: this.chooseLabelSet,
       });
     },
-    setTooltipText() {
-      // Text set from innerHTML vs 'label' due to html tag in locales file string
-      this.$refs.tooltipContent.innerHTML = this.$t("no_labels_available");
-    },
   },
 };
 </script>

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -8,6 +8,17 @@
         <DocumentSetChooser
           v-if="!publicView && !recalculatingAnnotations && !editMode"
         />
+        <a
+          v-if="
+            showBranding &&
+            !(selectedDocument.documentSet !== null && documentSet === null)
+          "
+          class="app-info"
+          target="_blank"
+          href="https://konfuzio.com"
+        >
+          <span>{{ $t("powered_by") }}</span>
+        </a>
       </div>
 
       <div
@@ -121,12 +132,13 @@ export default {
   computed: {
     ...mapState("document", [
       "selectedDocument",
+      "documentSet",
       "publicView",
       "loading",
       "recalculatingAnnotations",
     ]),
     ...mapState("edit", ["editMode"]),
-    ...mapState("display", ["showDocumentsNavigation"]),
+    ...mapState("display", ["showDocumentsNavigation", "showBranding"]),
     ...mapGetters("document", [
       "isDocumentReviewed",
       "isDocumentReadyToBeReviewed",

package/src/components/DocumentsList/DocumentsList.vue

@@ -11,7 +11,7 @@
         </p>
       </div>
       <div class="documents-list-top-right">
-        <div class="action-box">
+        <div v-if="showBranding" class="action-box">
           <span>{{ $t("upload_documents") }}</span>
           <b-button
             class="action-button primary-button"
@@ -98,6 +98,7 @@ export default {
   computed: {
     ...mapState("document", ["selectedDocument"]),
     ...mapState("category", ["documentsAvailableToReview"]),
+    ...mapState("display", ["showBranding"]),
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", ["documentHadErrorDuringExtraction"]),
   },