@konfuzio/document-validation-ui 0.1.51-dev.0 → 0.1.51-dev.2

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -1,67 +1,51 @@
 <template>
   <div class="label">
-    <div v-if="enableGroupingFeature && nonMultipleAnnotationsExtracted">
-      <div
-        :class="['label-group', !showAnnotationsGroup && 'keyboard-nav']"
-        @click.stop="toggleGroup"
-      >
-        <div class="label-group-left">
-          <b-icon
-            :icon="showAnnotationsGroup ? 'angle-up' : 'angle-down'"
-            class="is-small caret"
-          />
-          <div class="label-name">
-            <span>{{ `${label.name} (${label.annotations.length})` }}</span>
-          </div>
-        </div>
-        <div class="label-group-right">
-          <div v-if="!publicView" class="label-annotations-pending">
-            {{
-              `${
-                label.annotations.length - acceptedAnnotationsGroupCounter
-              } ${$t("annotations_pending")}`
-            }}
-          </div>
-          <div v-if="!publicView" class="label-annotations-accepted">
-            {{
-              `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
-            }}
-          </div>
+    <div
+      v-if="isGroup"
+      :class="['label-group', !showAnnotationsGroup && 'keyboard-nav']"
+      @click.stop="toggleGroup"
+    >
+      <div class="label-group-left">
+        <b-icon
+          :icon="showAnnotationsGroup ? 'angle-up' : 'angle-down'"
+          size="is-16"
+          class="caret"
+        />
+        <div class="label-name">
+          <span>{{ `${label.name} (${label.annotations.length})` }}</span>
         </div>
       </div>
-      <div
-        v-if="annotationSet && showAnnotationsGroup"
-        class="label-group-annotation-list"
-      >
-        <AnnotationRow
-          v-for="annotation in label.annotations"
-          :key="annotation.id"
-          :annotation="annotation"
-          :label="label"
-          :annotation-set="annotationSet"
-          :label-set="annotationSet.label_set"
-        />
+      <div class="label-group-right">
+        <div v-if="!publicView" class="label-annotations-pending">
+          {{
+            `${label.annotations.length - acceptedAnnotationsGroupCounter} ${$t(
+              "annotations_pending"
+            )}`
+          }}
+        </div>
+        <div v-if="!publicView" class="label-annotations-accepted">
+          {{
+            `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
+          }}
+        </div>
       </div>
     </div>
-    <div v-else-if="annotationSet && hasAnnotations">
+    <div
+      v-if="showAnnotationsGroup && annotationSet"
+      :class="isGroup && 'label-group-annotation-list'"
+    >
       <AnnotationRow
-        v-for="annotation in label.annotations"
-        :key="annotation.id"
+        v-for="(annotation, index) in hasAnnotations
+          ? label.annotations
+          : [singleAnnotation]"
+        :key="index"
         :annotation="annotation"
         :label="label"
         :annotation-set="annotationSet"
         :label-set="annotationSet.label_set"
       />
     </div>
-    <div v-else-if="annotationSet">
-      <AnnotationRow
-        :annotation="singleAnnotation"
-        :label="label"
-        :annotation-set="annotationSet"
-        :label-set="annotationSet.label_set"
-      />
-    </div>
-    <div v-else-if="labelSet">
+    <div v-else-if="showAnnotationsGroup && labelSet">
       <AnnotationRow :label="label" :label-set="labelSet" />
     </div>
   </div>
@@ -114,6 +98,9 @@ export default {
     hasAnnotations() {
       return this.label.annotations && this.label.annotations.length > 0;
     },
+    isGroup() {
+      return this.enableGroupingFeature && this.nonMultipleAnnotationsExtracted;
+    },
   },
   watch: {
     annotationId(newAnnotationId) {
@@ -155,14 +142,6 @@ export default {
 
         if (annotation) {
           this.showAnnotationsGroup = true;
-          // this.$store.dispatch("document/setSidebarAnnotationSelected", null);
-          // // run in next render because we need to open the group first
-          // this.$nextTick(() => {
-          //   this.$store.dispatch(
-          //     "document/setSidebarAnnotationSelected",
-          //     annotation
-          //   );
-          // });
         }
       }
     },
@@ -180,6 +159,10 @@ export default {
         this.acceptedAnnotationsGroupCounter =
           this.numberOfAcceptedAnnotationsInLabel(this.label);
       }
+      if (!this.isGroup) {
+        // if not a group then show by default
+        this.showAnnotationsGroup = true;
+      }
     },
     labelHasPendingAnnotations(hoveredSet) {
       if (!hoveredSet) return;

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="data-extraction-container">
     <div class="loading-container">
-      <AnnotationActionButtons
-        :is-loading="true"
-        :save-btn="false"
-        :cancel-btn="false"
-      />
+      <b-icon icon="spinner" class="fa-spin spinner-icon" />
     </div>
     <div class="data-extraction-text">
       <p class="title">
@@ -28,11 +24,9 @@
 </template>
 <script>
 import { mapState } from "vuex";
-import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "ExtractingData",
-  components: { AnnotationActionButtons },
   computed: {
     ...mapState("edit", ["redirectingUser"]),
   },

package/src/components/DocumentCategory.vue

@@ -10,7 +10,6 @@
         ? 'right-aligned full-height-tooltip'
         : 'left-aligned full-height-tooltip',
     ]"
-    :close-delay="tooltipCloseDelay"
   >
     <template #content>
       <div ref="tooltipContent"></div>
@@ -99,7 +98,6 @@ export default {
     return {
       categoryError: false,
       tooltipIsShown: false,
-      tooltipCloseDelay: 0,
       dropdownIsDisabled: false,
     };
   },
@@ -265,7 +263,6 @@ export default {
       if (this.categories) {
         // Text set from innerHTML vs 'label' due to html tag in locales file string
         let tooltipText;
-        let tooltipDelay = 0;
 
         if (this.documentCannotBeEdited(this.selectedDocument)) {
           tooltipText = this.$t("edit_not_available");
@@ -273,10 +270,8 @@ export default {
           tooltipText = this.$t("approved_annotations");
         } else if (this.projectHasSingleCategory) {
           tooltipText = this.$t("single_category_in_project");
-          tooltipDelay = 5000;
         }
 
-        this.tooltipCloseDelay = tooltipDelay;
         this.$refs.tooltipContent.innerHTML = tooltipText;
       }
     },

package/src/components/DocumentDashboard.vue

@@ -3,9 +3,18 @@
     <DocumentTopBar />
     <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-if="editMode" ref="editView" />
+      <Split>
+        <SplitArea :size="50" :min-size="350">
+          <ScrollingDocument
+            ref="scrollingDocument"
+            class="dashboard-document"
+          />
+        </SplitArea>
+        <SplitArea :size="50" style="overflow-y: hidden">
+          <DocumentAnnotations v-if="!editMode" ref="annotations" />
+          <DocumentEdit v-else ref="editView" />
+        </SplitArea>
+      </Split>
 
       <MultiAnnotationTableOverlay
         v-if="showAnnSetTable"

package/src/components/DocumentEdit/EditSidebar.vue

@@ -41,7 +41,7 @@
         />
       </div>
     </div>
-    <div class="split smart-split">
+    <div class="smart-split">
       <b-tooltip
         multilined
         :active="!documentHasProposedSplit(selectedDocument)"

package/src/components/DocumentPage/DocumentPage.vue

@@ -23,7 +23,8 @@
       v-if="
         editAnnotation &&
         editAnnotation.pageNumber &&
-        editAnnotation.pageNumber === currentPage
+        editAnnotation.pageNumber === currentPage &&
+        selection
       "
       :edit-annotation="editAnnotation"
       :page="page"

package/src/components/DocumentPage/EditAnnotation.vue

@@ -176,28 +176,34 @@ export default {
     ...mapGetters("display", ["bboxToRect"]),
     ...mapState("selection", ["selection", "spanSelection"]),
     top() {
-      const top = this.selection.start.y - heightOfPopup; // subtract the height of the popup plus some margin
+      if (this.selection && this.selection.start && this.selection.end) {
+        const top = this.selection.start.y - heightOfPopup; // subtract the height of the popup plus some margin
 
-      const height = this.selection.end.y - this.selection.start.y;
+        const height = this.selection.end.y - this.selection.start.y;
 
-      //check if the popup will not go off the container on the top
-      return this.selection.start.y > heightOfPopup
-        ? top - margin
-        : this.selection.start.y + height + margin;
+        //check if the popup will not go off the container on the top
+        return this.selection.start.y > heightOfPopup
+          ? top - margin
+          : this.selection.start.y + height + margin;
+      }
+      return 0;
     },
     left() {
-      const width = this.selection.end.x - this.selection.start.x;
+      if (this.selection && this.selection.start && this.selection.end) {
+        const width = this.selection.end.x - this.selection.start.x;
 
-      const left = this.selection.start.x + width / 2 - widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
+        const left = this.selection.start.x + width / 2 - widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
 
-      //check if the popup will not go off the container
-      if (left + widthOfPopup > this.containerWidth) {
-        // on the right side
-        return this.containerWidth - widthOfPopup;
-      } else {
-        // on the left side
-        return left > 0 ? left : 0;
+        //check if the popup will not go off the container
+        if (left + widthOfPopup > this.containerWidth) {
+          // on the right side
+          return this.containerWidth - widthOfPopup;
+        } else {
+          // on the left side
+          return left > 0 ? left : 0;
+        }
       }
+      return 0;
     },
     wasChanged() {
       return (

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -30,7 +30,6 @@
       </div>
     </div>
     <Toolbar v-if="showToolbar" />
-    <ActionBar v-if="showActionBar" />
   </div>
 </template>
 <script>
@@ -38,14 +37,12 @@ import { mapState, mapGetters } from "vuex";
 import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
-import ActionBar from "./ActionBar";
 import SearchBar from "./SearchBar";
 
 export default {
   components: {
     ScrollingPage,
     Toolbar,
-    ActionBar,
     SearchBar,
   },
   directives: {
@@ -74,7 +71,6 @@ export default {
     ]),
     ...mapState("display", [
       "scale",
-      "documentActionBar",
       "pageChangedFromThumbnail",
       "currentPage",
       "searchEnabled",
@@ -89,15 +85,7 @@ export default {
       }
     },
     showToolbar() {
-      return (
-        !this.loading &&
-        this.pages.length > 0 &&
-        this.scale &&
-        !this.documentActionBar
-      );
-    },
-    showActionBar() {
-      return this.documentActionBar !== null;
+      return !this.loading && this.pages.length > 0 && this.scale;
     },
   },
   watch: {

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -38,49 +38,51 @@
         </div>
       </div>
 
-      <div v-if="!recalculatingAnnotations" class="right-bar-components">
-        <div
-          v-if="!editMode && (!publicView || !isDocumentReviewed)"
-          class="keyboard-actions-info"
-        >
-          <KeyboardActionsDescription />
-        </div>
+      <div class="right-bar-components">
+        <div v-if="!recalculatingAnnotations" class="right-components">
+          <div
+            v-if="!editMode && (!publicView || !isDocumentReviewed)"
+            class="keyboard-actions-info"
+          >
+            <KeyboardActionsDescription />
+          </div>
 
-        <div
-          v-if="!editMode && (publicView || isDocumentReviewed)"
-          class="read-only-info"
-        >
-          <b-tooltip
-            :animated="false"
-            position="is-bottom"
-            class="right-aligned width-184"
+          <div
+            v-if="!editMode && (publicView || isDocumentReviewed)"
+            class="read-only-info"
           >
-            <span v-if="publicView">
-              {{ $t("lite_mode") }}
-            </span>
-            <span v-else class="doc-reviewed">
-              {{ $t("reviewed_mode") }}
-            </span>
-            <b-icon
-              :class="[
-                'info-icon is-small',
-                !publicView && isDocumentReviewed && 'info-reviewed',
-              ]"
-              icon="circle-info"
-            />
-            <template #content>
-              <div v-if="publicView" class="read-only-details">
-                {{ $t("limited_functionalities") }}
-              </div>
-              <div v-else class="read-only-details">
-                {{ $t("document_reviewed") }}
-              </div>
-            </template>
-          </b-tooltip>
-        </div>
+            <b-tooltip
+              :animated="false"
+              position="is-bottom"
+              class="right-aligned width-184"
+            >
+              <span v-if="publicView">
+                {{ $t("lite_mode") }}
+              </span>
+              <span v-else class="doc-reviewed">
+                {{ $t("reviewed_mode") }}
+              </span>
+              <b-icon
+                :class="[
+                  'info-icon is-small',
+                  !publicView && isDocumentReviewed && 'info-reviewed',
+                ]"
+                icon="circle-info"
+              />
+              <template #content>
+                <div v-if="publicView" class="read-only-details">
+                  {{ $t("limited_functionalities") }}
+                </div>
+                <div v-else class="read-only-details">
+                  {{ $t("document_reviewed") }}
+                </div>
+              </template>
+            </b-tooltip>
+          </div>
 
-        <div class="top-bar-buttons">
-          <DocumentTopBarButtons />
+          <div class="top-bar-buttons">
+            <DocumentTopBarButtons />
+          </div>
         </div>
       </div>
     </div>

package/src/icons.js

@@ -9,6 +9,9 @@ import {
   faSpinner,
   faPlus,
   faXmark,
+  faMagnifyingGlassMinus,
+  faBan,
+  faCircleCheck,
   faEllipsisVertical,
   faCircleInfo,
   faArrowRotateLeft,
@@ -35,6 +38,9 @@ library.add(
   faAngleDown,
   faSpinner,
   faXmark,
+  faMagnifyingGlassMinus,
+  faBan,
+  faCircleCheck,
   faSpinner,
   faPlus,
   faEllipsisVertical,

package/src/locales/de.json

@@ -114,7 +114,7 @@
   "drag_drop_columns_multi_ann": "Drag and Drop, um die Reihenfolge der Labels zu ändern",
   "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt.",
   "no_multi_ann_labelset_model": "Es gibt keine verfügbaren Label Sets, die mehrfach in diesem Dokument zu finden sind. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>diesem Link</a>.",
-  "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden. Einzelheiten dazu finden Sie unter <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>diesem Link</a>.",
+  "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden.",
   "approved_annotations": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind.",
   "restore": "Wiederherstellen",
   "disabled_finish_review": "Das Beenden der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder als fehlend markiert wurden.",
@@ -162,5 +162,6 @@
   "annotation_link": "Kopieren Sie den permanenten Link zu dieser Annotationen",
   "copied": "Kopiert",
   "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert.",
-  "document_section": "Dokumentabschnitt"
+  "document_section": "Dokumentabschnitt",
+  "label_size": "Spaltengröße:"
 }

package/src/locales/en.json

@@ -116,7 +116,7 @@
   "error_creating_multi_ann": "Not all annotation sets were created successfully.",
   "disabled_finish_review": "Finishing the document review is only possible after all annotations have been revised, whether they are accepted or marked as missing.",
   "no_multi_ann_labelset_model": "There are no available label sets that can be found multiple times in this document. For more details, you can visit <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>this link</a>.",
-  "single_category_in_project": "The current project has only one category. To be able to change it, the new one should be first added to the project. For details on how to do this, visit <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>this link</a>.",
+  "single_category_in_project": "The current project has only one category. To be able to change it, the new one should be first added to the project.",
   "approved_annotations": "It is not possible to change the current category since the document has approved or manually created annotations.",
   "restore": "Restore",
   "split_modal_title": "Split the document",
@@ -163,5 +163,6 @@
   "annotation_link": "Copy the permanent link to this annotation",
   "copied": "Copied",
   "checkbox_ann_details": "A checkbox will be extracted for this label.",
-  "document_section": "Document Section"
+  "document_section": "Document Section",
+  "label_size": "Column size:"
 }

package/src/locales/es.json

@@ -113,7 +113,7 @@
   "error_creating_multi_ann": "No todos los grupos de anotaciones fueron creados de manera exitosa.",
   "disabled_finish_review": "Solo es posible finalizar la revisión del documento si todas las anotaciones han sido revisadas, ya sea aceptadas o marcadas como faltantes.",
   "no_multi_ann_labelset_model": "En este documento no hay grupos de etiquetas múltiples disponibles. Para más información, haga clic en <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>este enlace</a>.",
-  "single_category_in_project": "Este proyecto solo tiene una categoría. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto. Para más información, visita <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>este enlace</a>.",
+  "single_category_in_project": "Este proyecto solo tiene una categoría. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto.",
   "approved_annotations": "No es posible cambiar la categoría ya que existen anotaciones aceptadas o creadas manualmente en este documento.",
   "restore": "Restaurar",
   "split_modal_title": "Dividir el documento",
@@ -162,5 +162,6 @@
   "annotation_link": "Copia el enlace permanente a esta anotación.",
   "copied": "Copiada",
   "checkbox_ann_details": "Se extraerá una casilla de verificación para esta etiqueta.",
-  "document_section": "Sección del documento"
+  "document_section": "Sección del documento",
+  "label_size": "Tamaño de columna:"
 }

package/src/main.js

@@ -6,6 +6,7 @@ import i18n from "./i18n";
 import store from "./store";
 import VueObserveVisibility from "vue-observe-visibility";
 import Icons from "./icons";
+import VueSplit from "vue-split-panel";
 
 Vue.component("VueFontawesome", Icons);
 Vue.component("App", App);
@@ -15,6 +16,7 @@ Vue.use(Buefy, {
   defaultIconComponent: "vue-fontawesome",
 });
 Vue.use(VueObserveVisibility);
+Vue.use(VueSplit);
 
 /**
  * Main entrypoint for the App

package/src/store/display.js

@@ -22,7 +22,6 @@ const state = {
   currentPage: 1,
   optimalResolution: true,
   interactionBlocked: false,
-  documentActionBar: null, // document action bar properties
   categorizeModalIsActive: false,
   pageChangedFromThumbnail: false,
   showAnnSetTable: null,
@@ -36,6 +35,8 @@ const state = {
   currentSearchResult: null,
   detailsUrl: null,
   pageError: null,
+  labelWidth: 40,
+  annotationWidth: 60,
 };
 
 const getters = {
@@ -290,12 +291,6 @@ const actions = {
   updateOptimalResolution({ commit }, width) {
     commit("SET_OPTIMAL_RESOLUTION", width >= MINIMUM_OPTIMIZED_APP_WIDTH);
   },
-  showDocumentActionBar({ commit }, { icon, text, action, show, loading }) {
-    commit(
-      "SET_DOCUMENT_ACTION_BAR",
-      show ? { icon, text, action, loading } : null
-    );
-  },
   showAnnSetTable({ commit }, tableSet) {
     commit("SET_ANN_SET_TABLE", tableSet);
   },
@@ -314,10 +309,13 @@ const actions = {
   setPageChangedFromThumbnail: ({ commit }, value) => {
     commit("SET_PAGE_CHANGED_FROM_THUMBNAIL", value);
   },
-
   setDetailsUrl: ({ commit }, value) => {
     commit("SET_DETAILS_URL", value);
   },
+  setLabelWidth: ({ commit }, value) => {
+    commit("SET_LABEL_WIDTH", value);
+    commit("SET_ANNOTATION_WIDTH", 100 - value);
+  },
 
   debounceSearch: debounce(({ commit, dispatch }, query) => {
     dispatch("search", query);
@@ -401,8 +399,12 @@ const mutations = {
     state.currentPage = currentPage;
   },
 
-  SET_DOCUMENT_ACTION_BAR: (state, actionBar) => {
-    state.documentActionBar = actionBar;
+  SET_LABEL_WIDTH: (state, labelWidth) => {
+    state.labelWidth = labelWidth;
+  },
+
+  SET_ANNOTATION_WIDTH: (state, annotationWidth) => {
+    state.annotationWidth = annotationWidth;
   },
 
   SET_SHOW_DOCUMENTS_NAVIGATION: (state, show) => {

package/src/store/document.js

@@ -1251,6 +1251,9 @@ const actions = {
           if (response.status === 200) {
             commit("UPDATE_ANNOTATION", response.data);
             commit("SET_NEW_ACCEPTED_ANNOTATIONS", null);
+            if (response.data && response.data.id) {
+              dispatch("setAnnotationId", response.data.id);
+            }
 
             resolve(true);
           }

package/src/components/DocumentPage/ActionBar.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="action-bar">
-    <div class="action-bar-elements">
-      <div v-if="documentActionBar.icon" class="action-icon">
-        <ActionIcon :icon="documentActionBar.icon" class="icon" />
-      </div>
-      <div v-if="documentActionBar.text" class="action-text">
-        {{ documentActionBar.text }}
-      </div>
-      <div v-if="documentActionBar.action" class="action-button">
-        <AnnotationActionButtons
-          :save-btn="documentActionBar.action !== null"
-          :is-loading="documentActionBar.loading"
-          :action-bar="true"
-          @save="handleSave()"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import AnnotationActionButtons from "../DocumentAnnotations/AnnotationActionButtons";
-import ActionIcon from "../../assets/images/ActionIcon";
-
-export default {
-  name: "ActionBar",
-  components: {
-    ActionIcon,
-    AnnotationActionButtons,
-  },
-  computed: {
-    ...mapState("display", ["documentActionBar"]),
-  },
-  methods: {
-    handleSave() {
-      this.documentActionBar.action();
-    },
-  },
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/document_action_bar.scss"
-></style>