@konfuzio/document-validation-ui 0.1.59 → 0.2.0-dev.2

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,39 +1,33 @@
 <template>
-  <div class="empty-annotation">
+  <div v-if="!publicView && !isDocumentReviewed" class="empty-annotation">
     <span
-      v-if="!publicView && !isDocumentReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
         'annotation-value',
-        showActionError &&
-          editAnnotation &&
-          editAnnotation.id === emptyAnnotationId() &&
-          'error-editing',
-        !isEmptyAnnotationEditable() && !isMissingAnnotation && 'label-empty',
+        showActionError && isAnnotationBeingEdited() && 'error-editing',
         isAnnotationBeingEdited() && 'clicked-ann',
         isMissingAnnotation && 'missing-annotation',
         !isMissingAnnotation && 'keyboard-nav',
       ]"
-      :contenteditable="isEmptyAnnotationEditable()"
+      :contenteditable="isAnnotationBeingEdited()"
       @keypress.enter="saveEmptyAnnotationChanges"
       @click="handleEditEmptyAnnotation"
       @focus="handleEditEmptyAnnotation"
       ><!-- eslint-disable vue/no-v-html -->
       <span
         v-if="isFindingAnnotation"
+        class="label-empty-clicked"
         v-html="$t('draw_box_document', { label_name: label.name })"
       >
       </span>
       <span v-else-if="isMissingAnnotation" class="not-found-text">
         {{ $t("missing_from_document") }}
       </span>
-      <span
-        v-else-if="span && span.offset_string && isEmptyAnnotationEditable()"
-      >
+      <span v-else-if="span && span.offset_string">
         {{ span.offset_string }}
       </span>
-      <span v-else>
+      <span v-else class="label-empty">
         {{ $t("no_data_found") }}
       </span>
       <!--eslint-enable-->
@@ -42,7 +36,6 @@
 </template>
 <script>
 import { mapState, mapGetters } from "vuex";
-import { isElementArray } from "../../utils/utils";
 
 /**
  * This component is responsible for managing empty annotations (labels with no annotations).
@@ -80,7 +73,7 @@ export default {
   },
   computed: {
     ...mapGetters("document", ["isAnnotationInEditMode", "isDocumentReviewed"]),
-    ...mapState("selection", ["spanSelection", "elementSelected"]),
+    ...mapState("selection", ["spanSelection"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",
@@ -97,17 +90,17 @@ export default {
 
   watch: {
     span(newValue) {
-      if (this.elementSelected === this.emptyAnnotationId() && newValue) {
-        if (isElementArray(newValue))
-          newValue.map((span) => {
-            if (span.offset_string) {
-              span.offset_string =
-                this.$refs.emptyAnnotation.textContent.trim();
-              span.offset_string_original =
-                this.$refs.emptyAnnotation.textContent.trim();
-            }
-          });
-      }
+      // if (newValue) {
+      //   if (isElementArray(newValue))
+      //     newValue.map((span) => {
+      //       if (span.offset_string) {
+      //         span.offset_string =
+      //           this.$refs.emptyAnnotation.textContent.trim();
+      //         span.offset_string_original =
+      //           this.$refs.emptyAnnotation.textContent.trim();
+      //       }
+      //     });
+      // }
     },
     spanSelection(newValue) {
       if (!newValue) return;
@@ -123,59 +116,27 @@ export default {
   methods: {
     emptyAnnotationId() {
       if ((!this.annotationSet && !this.labelSet) || !this.label) return;
-
-      const id = this.annotationSet ? this.annotationSet.id : this.labelSet.id;
+      const id =
+        this.annotationSet && this.annotationSet.id != null
+          ? this.annotationSet.id
+          : this.labelSet.id;
       return `${id}_${this.label.id}`;
     },
     isAnnotationBeingEdited() {
       return this.isAnnotationInEditMode(this.emptyAnnotationId());
     },
     handleEditEmptyAnnotation() {
-      if (
-        this.publicView ||
-        this.isDocumentReviewed ||
-        this.isMissingAnnotation
-      )
-        return;
-
-      if (
-        !this.publicView &&
-        !this.isDocumentReviewed &&
-        this.elementSelected !== this.emptyAnnotationId()
-      ) {
-        this.$store.dispatch("selection/disableSelection");
-        this.$store.dispatch("selection/setSelectedEntities", null);
-        this.$store.dispatch(
-          "selection/selectElement",
-          this.emptyAnnotationId()
-        );
-        this.$store.dispatch("document/setEditAnnotation", {
-          id: this.emptyAnnotationId(),
-          index: this.spanIndex,
-          label: this.label,
-          labelSet: this.labelSet,
-          annotationSet: this.annotationSet,
-        });
-      }
-    },
-    isEmptyAnnotationEditable() {
-      if (
-        (this.spanSelection && this.spanSelection[this.spanIndex] === 0) ||
-        this.isMissingAnnotation
-      ) {
-        return false;
-      } else {
-        return (
-          this.elementSelected === this.emptyAnnotationId() &&
-          this.spanSelection &&
-          this.spanSelection[this.spanIndex] &&
-          this.spanSelection[this.spanIndex].offset_string != null
-        );
-      }
+      if (this.isMissingAnnotation) return;
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/setEditAnnotation", {
+        id: this.emptyAnnotationId(),
+        index: this.spanIndex,
+        label: this.label,
+        labelSet: this.labelSet,
+        annotationSet: this.annotationSet,
+      });
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView || this.isDocumentReviewed) return;
-
       if (event) {
         event.preventDefault();
       }

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: auto">
+        </pane>
+        <pane :size="50" class="document-sidebar">
           <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,
   },
@@ -136,7 +131,7 @@ export default {
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onDocumentResize);
   },
-  destroyed() {
+  unmounted() {
     if (this.$refs.scrollingDocument) {
       this.resizeObserver.unobserve(this.$refs.scrollingDocument.$el);
     }

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 {
@@ -133,7 +136,9 @@ export default {
     },
   },
   mounted() {
-    this.editPages = this.pagesForPostprocess;
+    if (this.pagesForPostprocess.length > 0) {
+      this.editPages = this.pagesForPostprocess;
+    }
   },
   methods: {
     deselect() {

package/src/components/DocumentEdit/EditSidebar.vue

@@ -59,11 +59,6 @@
           />
           <div class="switch-info">
             <span class="switch-text">{{ $t("smart_split") }}</span>
-            <span
-              v-if="documentHasProposedSplit(selectedDocument)"
-              class="new-badge"
-              >{{ newText }}</span
-            >
           </div>
         </b-field>
       </b-tooltip>
@@ -93,7 +88,6 @@ export default {
     return {
       buttonDisabled: true,
       tooltipInfo: null,
-      newText: this.$t("new"),
       switchStatus: true,
     };
   },
@@ -129,9 +123,6 @@ export default {
     this.$nextTick(() => {
       this.switchStatus = this.splitSuggestionsEnabled;
       this.tooltipInfo = this.$t("no_splitting_suggestions");
-      if (this.newText) {
-        this.newText = this.$t("new").toUpperCase();
-      }
     });
   },
   methods: {