@konfuzio/document-validation-ui 0.1.6-pre-release-1 → 0.1.6-pre-release-2

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -13,10 +13,10 @@
         <ScrollingPage
           v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
+          ref="scrollingPage"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
-          ref="scrollingPage"
           class="scrolling-page"
           @page-jump="onPageJump"
         />
@@ -27,6 +27,7 @@
     </div>
     <Toolbar v-if="showToolbar" />
     <ActionBar v-if="showActionBar" />
+    <MultiAnnotationTableOverlay v-if="showAnnSetTable" />
   </div>
 </template>
 <script>
@@ -35,12 +36,14 @@ import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
 import ActionBar from "./ActionBar";
+import MultiAnnotationTableOverlay from "./MultiAnnotationTableOverlay";
 
 export default {
   components: {
     ScrollingPage,
     Toolbar,
     ActionBar,
+    MultiAnnotationTableOverlay,
   },
   directives: {
     scroll,
@@ -60,6 +63,7 @@ export default {
       "recalculatingAnnotations",
       "selectedDocument",
       "loading",
+      "annotationSets",
     ]),
     ...mapState("edit", [
       "editMode",
@@ -71,6 +75,7 @@ export default {
       "documentActionBar",
       "pageChangedFromThumbnail",
       "currentPage",
+      "showAnnSetTable",
     ]),
     ...mapGetters("display", ["visiblePageRange"]),
 

package/src/components/DocumentTopBar/DocumentName.vue

@@ -21,7 +21,11 @@
     </span>
     <div
       v-if="
-        !publicView && showEditBtn && !editMode && !recalculatingAnnotations
+        !publicView &&
+        !documentIsReviewed &&
+        showEditBtn &&
+        !editMode &&
+        !recalculatingAnnotations
       "
       class="edit-btn btn"
       @click="handleEdit"
@@ -91,6 +95,7 @@ export default {
       "selectedDocument",
       "publicView",
       "recalculatingAnnotations",
+      "documentIsReviewed",
     ]),
     ...mapState("display", ["optimalResolution"]),
     ...mapState("edit", ["editMode"]),

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -5,21 +5,23 @@
       class="document-top-bar"
     >
       <div v-if="!recalculatingAnnotations" class="left-bar-components">
-        <DocumentCategory v-if="categories && !editMode && !publicView" />
+        <DocumentCategory
+          v-if="categories && !editMode && !publicView && !documentIsReviewed"
+        />
       </div>
 
       <DocumentName :data-file-name="selectedDocument.data_file_name" />
 
       <div v-if="!recalculatingAnnotations" class="right-bar-components">
         <div
-          v-if="!editMode && (!publicView || !selectedDocument.is_reviewed)"
+          v-if="!editMode && (!publicView || !documentIsReviewed)"
           class="keyboard-actions-info"
         >
           <KeyboardActionsDescription />
         </div>
 
         <div
-          v-if="!editMode && (publicView || selectedDocument.is_reviewed)"
+          v-if="!editMode && (publicView || documentIsReviewed)"
           class="read-only-info"
         >
           <b-tooltip
@@ -27,7 +29,7 @@
             position="is-bottom"
             class="right-aligned width-184"
           >
-            <span v-if="publicView && !selectedDocument.is_reviewed">
+            <span v-if="publicView && !documentIsReviewed">
               {{ $t("lite_mode") }}
             </span>
             <span v-else class="doc-reviewed">
@@ -36,15 +38,12 @@
             <b-icon
               :class="[
                 'info-icon is-small',
-                selectedDocument.is_reviewed && 'info-reviewed',
+                documentIsReviewed && 'info-reviewed',
               ]"
               icon="circle-info"
             />
             <template #content>
-              <div
-                v-if="!selectedDocument.is_reviewed"
-                class="read-only-details"
-              >
+              <div v-if="!documentIsReviewed" class="read-only-details">
                 {{ $t("limited_functionalities") }}
               </div>
               <div v-else class="read-only-details">
@@ -96,6 +95,7 @@ export default {
       "publicView",
       "loading",
       "recalculatingAnnotations",
+      "documentIsReviewed",
     ]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div
-      v-if="!editMode && !selectedDocument.is_reviewed && !publicView"
+      v-if="!editMode && !documentIsReviewed && !publicView"
       class="finish-review-button-container"
     >
       <b-tooltip
@@ -45,7 +45,7 @@
 
           <div v-else>
             <b-notification :closable="false" :class="['loading-background']">
-              <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+              <b-loading :active="isLoading" :is-full-page="false">
                 <b-icon
                   icon="spinner"
                   class="fa-spin loading-icon-size spinner"
@@ -80,6 +80,7 @@ export default {
       "publicView",
       "finishedReview",
       "annotationSets",
+      "documentIsReviewed",
     ]),
     ...mapState("edit", ["editMode", "splitOverview", "updatedDocument"]),
   },
@@ -92,7 +93,7 @@ export default {
         this.finishDisabled = true;
       }
     },
-    publicView(newValue) {
+    documentIsReviewed(newValue) {
       if (newValue) {
         this.finishDisabled = true;
       }

package/src/components/DocumentTopBar/KeyboardActionsDescription.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="!publicView && !selectedDocument.is_reviewed && !editMode"
+    v-if="!publicView && !documentIsReviewed && !editMode"
     class="keyboard-actions-description"
   >
     <section class="b-tooltips">
@@ -65,7 +65,11 @@ export default {
   },
   computed: {
     ...mapState("edit", ["editMode"]),
-    ...mapState("document", ["selectedDocument", "publicView"]),
+    ...mapState("document", [
+      "selectedDocument",
+      "publicView",
+      "documentIsReviewed",
+    ]),
   },
 };
 </script>

package/src/components/DocumentsList/DocumentsList.vue

@@ -71,6 +71,11 @@
 import { mapGetters, mapState } from "vuex";
 import ServerImage from "../../assets/images/ServerImage";
 import ErrorIcon from "../../assets/images/ErrorIcon";
+import {
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../../utils/utils";
 
 /**
  * This component creates a horizontal list of documents
@@ -105,8 +110,12 @@ export default {
   },
   methods: {
     changeDocument(documentId) {
-      this.$store.dispatch("document/setDocId", documentId);
-      this.$store.dispatch("document/fetchDocument");
+      if (getURLQueryParam("document") || getURLPath("docs")) {
+        navigateToNewDocumentURL(this.selectedDocument.id, documentId);
+      } else {
+        this.$store.dispatch("document/setDocId", documentId);
+        this.$store.dispatch("document/fetchDocument");
+      }
     },
     requestTrialAccess() {
       window.open("https://konfuzio.com", "_blank");

package/src/locales/de.json

@@ -126,5 +126,9 @@
   "no": "Nein",
   "yes": "Ja",
   "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
-  "missing_from_document": "Fehlt im Dokument"
+  "missing_from_document": "Fehlt im Dokument",
+  "edit_label": "Edit label",
+  "delete_label": "Delete label",
+  "table": "Table",
+  "delete_table": "Delete table"
 }

package/src/locales/en.json

@@ -128,5 +128,9 @@
   "yes": "Yes",
   "prepare_document": "Prepare the document",
   "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
-  "missing_from_document": "Missing from the document"
+  "missing_from_document": "Missing from the document",
+  "edit_label": "Edit label",
+  "delete_label": "Delete label",
+  "table": "Table",
+  "delete_table": "Delete table"
 }

package/src/locales/es.json

@@ -125,5 +125,9 @@
   "no": "No",
   "yes": "Sí",
   "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
-  "missing_from_document": "Falta en el documento"
+  "missing_from_document": "Falta en el documento",
+  "edit_label": "Edit label",
+  "delete_label": "Delete label",
+  "table": "Table",
+  "delete_table": "Delete table"
 }

package/src/main.js

@@ -8,6 +8,8 @@ import { Integrations } from "@sentry/tracing";
 import i18n from "./i18n";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
+import VueObserveVisibility from "vue-observe-visibility";
+
 // internal icons
 import {
   faArrowUp,
@@ -55,6 +57,7 @@ Vue.use(Buefy, {
   defaultIconPack: "fas",
   defaultIconComponent: "vue-fontawesome",
 });
+Vue.use(VueObserveVisibility);
 
 // Sentry config
 if (process.env.NODE_ENV != "development") {

package/src/store/category.js

@@ -54,7 +54,7 @@ const actions = {
    */
   fetchDocumentList: ({ commit, rootState }, categoryId) => {
     return HTTP.get(
-      `documents/?category=${categoryId}&assignee=${rootState.project.currentUser}`
+      `documents/?category=${categoryId}&assignee=${rootState.project.currentUser}&limit=100`
     )
       .then((response) => {
         if (response.data.results) {

package/src/store/display.js

@@ -30,6 +30,7 @@ const state = {
   documentActionBar: null, // document action bar properties
   categorizeModalIsActive: false,
   pageChangedFromThumbnail: false,
+  showAnnSetTable: null,
 };
 
 const getters = {
@@ -60,6 +61,31 @@ const getters = {
   imageScale: (state) => (page) => {
     return new BigNumber(page.size[0]).div(page.original_size[0]).toNumber();
   },
+  bboxToPoint:
+    (state, getters) =>
+    (page, point, hasOffset = false) => {
+      const imageScale = getters.imageScale(page);
+      const { x, y } = point;
+      const pageHeight = new BigNumber(page.original_size[1]);
+      const newPoint = {
+        // left
+        x: new BigNumber(x)
+          .minus(hasOffset ? 1 : 0)
+          .times(state.scale)
+          .times(imageScale)
+          .div(PIXEL_RATIO)
+          .toNumber(),
+        // top
+        y: pageHeight
+          .minus(new BigNumber(y))
+          .minus(hasOffset ? 17.1 : 0)
+          .times(state.scale)
+          .times(imageScale)
+          .div(PIXEL_RATIO)
+          .toNumber(),
+      };
+      return newPoint;
+    },
   bboxToRect:
     (state, getters) =>
     (page, bbox, hasOffset = false) => {
@@ -207,6 +233,12 @@ const actions = {
       show ? { icon, text, action, loading } : null
     );
   },
+  showAnnSetTable({ commit }, tableSet) {
+    commit("SET_ANN_SET_TABLE", tableSet);
+  },
+  toggleAnnSetTable({ commit }, tableSet) {
+    commit("TOGGLE_ANN_SET_TABLE", tableSet);
+  },
   setCategorizeModalIsActive: ({ commit }, value) => {
     commit("SET_CATEGORIZE_MODAL_IS_ACTIVE", value);
   },
@@ -236,6 +268,18 @@ const mutations = {
     state.documentActionBar = actionBar;
   },
 
+  SET_ANN_SET_TABLE: (state, tableSet) => {
+    state.showAnnSetTable = tableSet;
+  },
+
+  TOGGLE_ANN_SET_TABLE: (state, tableSet) => {
+    if (state.showAnnSetTable) {
+      state.showAnnSetTable = null;
+    } else {
+      state.showAnnSetTable = tableSet;
+    }
+  },
+
   SET_CATEGORIZE_MODAL_IS_ACTIVE: (state, value) => {
     state.categorizeModalIsActive = value;
   },

package/src/store/document.js

@@ -3,6 +3,7 @@ import { sleep } from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 const documentPollDuration = 1000;
+export const table_reference_api = "api.v3.dvui.table";
 
 const state = {
   loading: true,
@@ -29,6 +30,7 @@ const state = {
   selectedEntities: null,
   serverError: false,
   splittingSuggestions: null,
+  documentIsReviewed: false,
 };
 
 const getters = {
@@ -158,6 +160,78 @@ const getters = {
     return state.annotationSets.find((annSet) => annSet.id === annotationSetId);
   },
 
+  /* Get annotation sets created in table */
+  annotationSetsInTable: (state) => () => {
+    const annotationSetsList = {};
+    state.annotationSets.forEach((annotationSet) => {
+      let addAnnotationSet = false;
+      if (annotationSet.labels) {
+        annotationSet.labels.forEach((label) => {
+          if (
+            label.annotations &&
+            label.annotations.find(
+              (annotation) =>
+                annotation.origin && annotation.origin === table_reference_api
+            )
+          ) {
+            addAnnotationSet = true;
+            return;
+          }
+        });
+      }
+      if (addAnnotationSet) {
+        // group by label set
+        if (annotationSetsList[`${annotationSet.label_set.id}`]) {
+          annotationSetsList[`${annotationSet.label_set.id}`].push(
+            annotationSet
+          );
+        } else {
+          annotationSetsList[`${annotationSet.label_set.id}`] = [annotationSet];
+        }
+      }
+    });
+    return annotationSetsList;
+  },
+
+  /* Get annotation sets without tables */
+  annotationSetsToShowInList: (state) => () => {
+    const annotationSetsList = [];
+    state.annotationSets.forEach((annotationSet) => {
+      let addAnnotationSet = true;
+      if (annotationSet.labels) {
+        annotationSet.labels.forEach((label) => {
+          if (
+            label.annotations &&
+            label.annotations.find(
+              (annotation) =>
+                annotation.origin && annotation.origin === table_reference_api
+            )
+          ) {
+            addAnnotationSet = false;
+            return;
+          }
+        });
+      }
+      if (addAnnotationSet) {
+        annotationSetsList.push(annotationSet);
+      }
+    });
+    return annotationSetsList;
+  },
+
+  /* Get annotations inside a list of annotation sets */
+  annotationsInAnnotationsSets: (state) => (annotationsSets) => {
+    const annotations = [];
+    annotationsSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((label) => {
+        label.annotations.forEach((annotation) => {
+          annotations.push(annotation);
+        });
+      });
+    });
+    return annotations;
+  },
+
   /* Process annotations and extract labels and sets */
   processAnnotationSets: (state, getters) => (annotationSets) => {
     // group annotations for sidebar
@@ -229,6 +303,7 @@ const getters = {
       });
       return found ? `${value + 1}` : "";
     }
+    return "";
   },
 
   /**
@@ -628,6 +703,9 @@ const actions = {
   setSplittingSuggestions: ({ commit }, value) => {
     commit("SET_SPLITTING_SUGGESTIONS", value);
   },
+  setDocumentIsReviewed: ({ commit }, value) => {
+    commit("SET_DOCUMENT_IS_REVIEWED", value);
+  },
 
   /**
    * Actions that use HTTP requests always return the axios promise,
@@ -658,11 +736,13 @@ const actions = {
           if (response.data.pages.length > 0) {
             dispatch("fetchDocumentPage", initialPage);
           }
+
           // set information on the store
           commit("SET_ANNOTATION_SETS", annotationSets);
           commit("SET_ANNOTATIONS", annotations);
           commit("SET_LABELS", labels);
           commit("SET_SELECTED_DOCUMENT", response.data);
+          commit("SET_DOCUMENT_IS_REVIEWED", response.data.is_reviewed);
           commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
           if (rootState.project.projectId) {
@@ -741,7 +821,7 @@ const actions = {
       id: annotation.id,
       span,
       page: span.page_index + 1,
-      labelName: label.name,
+      labelName: label ? label.name : "",
     };
     commit("SET_DOCUMENT_ANNOTATION_SELECTED", value);
   },
@@ -1077,11 +1157,21 @@ const mutations = {
           (existingAnnotation) => existingAnnotation.id === annotation.id
         );
         if (indexOfAnnotationAnnotationSets > -1) {
-          label.annotations.splice(
-            indexOfAnnotationAnnotationSets,
-            1,
-            annotation
-          );
+          // checks if an annotation label was changed and add it to the new label
+          if (annotation.label && annotation.label.id !== label.id) {
+            label.annotations.splice(indexOfAnnotationAnnotationSets, 1);
+
+            const labelToAdd = annotationSet.labels.find(
+              (labelToAdd) => labelToAdd.id === annotation.label.id
+            );
+            labelToAdd.annotations.push(annotation);
+          } else {
+            label.annotations.splice(
+              indexOfAnnotationAnnotationSets,
+              1,
+              annotation
+            );
+          }
           updatedAnnotation = true;
           return;
         }
@@ -1158,7 +1248,7 @@ const mutations = {
   },
   SET_SELECTED_DOCUMENT: (state, document) => {
     if (document.is_reviewed === true) {
-      state.publicView = true;
+      state.documentIsReviewed = true;
     }
     state.selectedDocument = document;
 
@@ -1228,6 +1318,9 @@ const mutations = {
   SET_SPLITTING_SUGGESTIONS: (state, array) => {
     state.splittingSuggestions = array;
   },
+  SET_DOCUMENT_IS_REVIEWED: (state, value) => {
+    state.documentIsReviewed = value;
+  },
 };
 
 export default {

package/src/store/edit.js

@@ -1,5 +1,9 @@
 import myImports from "../api";
-import { getURLQueryParam, navigateToNewDocumentURL } from "../utils/utils";
+import {
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 
@@ -164,7 +168,7 @@ const actions = {
             dispatch("document/setSplittingSuggestions", null, { root: true });
 
             if (newId !== oldId) {
-              if (getURLQueryParam("document")) {
+              if (getURLQueryParam("document") || getURLPath("docs")) {
                 navigateToNewDocumentURL(oldId, newId);
               } else {
                 await dispatch("document/setDocId", newId, {

package/src/utils/utils.js

@@ -5,12 +5,25 @@ export function sleep(duration) {
 export function getURLQueryParam(param) {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
+
   if (urlParams.has(param)) {
     return urlParams.get(param);
   }
   return undefined;
 }
 
+export function getURLPath(value) {
+  const path = window.location.pathname;
+
+  if (!path.includes(value)) return;
+
+  const id = path.split(value)[1].split("/")[1];
+
+  if (id === "") return;
+
+  return id;
+}
+
 export function navigateToNewDocumentURL(oldId, newId) {
   const url = window.location.href;
   const newUrl = url.replace(oldId, newId);