@konfuzio/document-validation-ui 0.1.45-dev.0 → 0.1.46-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.45-dev.0",
+  "version": "0.1.46-dev.0",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -4,7 +4,8 @@ let HTTP, FILE_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
 const FILE_URL = process.env.VUE_APP_IMAGE_URL;
 
-axios.defaults.withCredentials = true;
+axios.defaults.xsrfCookieName = "csrftoken";
+axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
 HTTP = axios.create({
   baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`,
@@ -34,9 +35,8 @@ const setLocale = (locale) => {
 const getInterceptorConfig = (config) => {
   if (authToken) {
     config.headers["Authorization"] = `Token ${authToken}`;
+    config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
   }
-  config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
-
   return config;
 };
 
@@ -67,11 +67,45 @@ const makeFileRequest = (fileUrl) => {
   });
 };
 
+const makeGetPaginatedRequest = (request, hasParams = false) => {
+  let returnResponse = [];
+  let toFinishLoop = false;
+
+  let separator = hasParams ? "&" : "?";
+  let loopRequest = `${request}${separator}limit=100`;
+
+  return new Promise(async (resolve, reject) => {
+    do {
+      try {
+        let response = await HTTP.get(loopRequest);
+        if (response && response.data) {
+          const data = response.data;
+          if (data.results) {
+            returnResponse = [...returnResponse, ...data.results];
+          }
+          if (data.next) {
+            loopRequest = data.next;
+          } else {
+            toFinishLoop = true;
+          }
+        } else {
+          reject("Error getting paginated results.");
+        }
+      } catch (error) {
+        reject(error);
+        console.log(error);
+      }
+    } while (!toFinishLoop);
+    resolve(returnResponse);
+  });
+};
+
 export default {
   HTTP,
   setApiUrl,
   setFileUrl,
   makeFileRequest,
+  makeGetPaginatedRequest,
   setAuthToken,
   setLocale,
   FILE_REQUEST,

package/src/assets/scss/document_set_chooser.scss

@@ -0,0 +1,19 @@
+@import "./imports.scss";
+.document-set-dropdown {
+  border-right: $component-border;
+
+  .dropdown-doc-set {
+    display: flex;
+    margin: 0 16px;
+    gap: 8px;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+
+    .dropdown-text {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}

package/src/assets/scss/theme.scss

@@ -262,6 +262,12 @@
       margin-left: 0;
     }
 
+    &.dropdown-full-width {
+      .dropdown-menu {
+        width: 100%;
+      }
+    }
+
     .dropdown-trigger {
       justify-content: space-between;
       width: 100%;

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -6,13 +6,7 @@
       :class="['left-aligned', 'annotation-details']"
     >
       <div :class="['label-icon']">
-        <div
-          v-if="
-            (created(annotation) || edited(annotation)) &&
-            !isNegative(annotation) &&
-            !publicView
-          "
-        >
+        <div v-if="(created(annotation) || edited(annotation)) && !publicView">
           <div
             :class="[
               'annotation-details-icon',
@@ -30,9 +24,7 @@
           <NotFoundIcon />
         </div>
         <div
-          v-else-if="
-            notExtracted(annotation) || (isNegative(annotation) && !publicView)
-          "
+          v-else-if="notExtracted(annotation) && !publicView"
           :class="[
             'annotation-details-icon',
             animate ? 'animated-ripple' : '',
@@ -78,7 +70,7 @@
             <span>{{ description }}</span>
           </div>
           <div
-            v-if="confidence(annotation) && !isNegative(annotation)"
+            v-if="confidence(annotation)"
             :class="['confidence', publicView && 'tooltip-in-public-view']"
           >
             <span>{{ $t("confidence") }}</span
@@ -193,7 +185,6 @@ export default {
       "created",
       "edited",
       "accepted",
-      "isNegative",
       "getUser",
       "annotationIsNotFound",
     ]),
@@ -220,10 +211,7 @@ export default {
   },
   methods: {
     getText() {
-      if (
-        this.notExtracted(this.annotation) ||
-        this.isNegative(this.annotation)
-      ) {
+      if (this.notExtracted(this.annotation)) {
         return this.$t("not_found_in_document");
       } else if (this.created(this.annotation)) {
         return this.getUser(this.annotation)

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -84,10 +84,7 @@
     </div>
     <div class="annotation-row-right">
       <div class="annotation-content">
-        <div
-          v-if="annotation && !isNegative(annotation)"
-          class="annotation-items"
-        >
+        <div v-if="annotation" class="annotation-items">
           <b-checkbox
             v-if="annotation.metadata && annotation.metadata.checkbox"
             v-model="isChecked"
@@ -251,12 +248,10 @@ export default {
       "isAnnotationInEditMode",
       "annotationIsNotFound",
       "isDocumentReviewed",
-      "isNegative",
     ]),
     defaultSpan() {
       if (
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         this.annotation.span &&
         this.annotation.span.length > 0
       ) {
@@ -274,7 +269,6 @@ export default {
     isAnnotation() {
       return (
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         this.isAnnotationInEditMode(
           this.currentAnnotationId(),
           this.editAnnotation.index
@@ -298,7 +292,6 @@ export default {
         this.hoveredAnnotationSet &&
         this.hoveredAnnotationSet.type == "accept" &&
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         this.hoveredNotCorrectAnnotations() === this.annotation.id
       );
     },
@@ -395,7 +388,6 @@ export default {
       if (
         newAnnotationId &&
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         this.annotation.id == newAnnotationId
       ) {
         this.isSelected = true;
@@ -421,12 +413,7 @@ export default {
     currentAnnotationId() {
       if ((!this.annotationSet && !this.labelSet) || !this.label) return;
 
-      if (
-        this.annotation &&
-        this.annotation.id &&
-        !this.isNegative(this.annotation)
-      )
-        return this.annotation.id;
+      if (this.annotation && this.annotation.id) return this.annotation.id;
 
       const setId = this.annotationSet
         ? this.annotationSet.id
@@ -461,12 +448,8 @@ export default {
         }
       );
       const found = labels.find((l) => l.id === this.label.id);
-      const negativeAnnotations = found.annotations.find((annotation) =>
-        this.isNegative(annotation)
-      );
 
-      if ((found && found.annotations.length === 0) || negativeAnnotations)
-        return found.id;
+      if (found && found.annotations.length === 0) return found.id;
       return null;
     },
     hoveredNotCorrectAnnotations() {
@@ -504,7 +487,6 @@ export default {
         !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         !this.annotation.is_correct &&
         this.hoveredAnnotation === this.annotation.id
       );
@@ -514,7 +496,6 @@ export default {
         !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         this.hoveredAnnotation === this.annotation.id
       );
     },
@@ -523,7 +504,7 @@ export default {
         !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
-        (!this.annotation || this.isNegative(this.annotation)) &&
+        !this.annotation &&
         !this.annotationIsNotFound(this.annotationSet, this.label)
       );
     },
@@ -578,7 +559,6 @@ export default {
       // Verify if we are editing a filled or empty annotation
       if (
         this.annotation &&
-        !this.isNegative(this.annotation) &&
         (this.showAcceptButton() ||
           this.showDeclineButton() ||
           this.isAnnotationInEditMode(
@@ -619,7 +599,7 @@ export default {
           this.saveAnnotationChanges(spans, decline);
         }
       } else if (
-        (!this.annotation || this.isNegative(this.annotation)) &&
+        !this.annotation &&
         this.isAnnotationInEditMode(this.currentAnnotationId())
       ) {
         this.saveEmptyAnnotationChanges();
@@ -632,7 +612,7 @@ export default {
         (item) =>
           item.annotation_set === this.annotationSet.id &&
           item.label === this.label.id &&
-          item.label_set === this.annotationSet.labelSet.id
+          item.label_set === this.labelSet.id
       );
 
       this.$store
@@ -716,18 +696,10 @@ export default {
         };
       }
       this.isLoading = true;
-      let negativeAnnotationId;
-
-      // check if the annotation to create comes from a negative annotation
-      // so we can create the new one and remove the negative one from the annotations array
-      if (this.isNegative(this.annotation)) {
-        negativeAnnotationId = this.annotation.id;
-      }
 
       this.$store
         .dispatch("document/createAnnotation", {
           annotation: annotationToCreate,
-          negativeAnnotationId: negativeAnnotationId,
         })
         .catch((error) => {
           this.$store.dispatch("document/createErrorMessage", {

package/src/components/DocumentPage/DocumentPage.vue

@@ -255,7 +255,6 @@ export default {
       "isDocumentReadyToBeReviewed",
       "isDocumentReviewed",
       "labelOfAnnotation",
-      "isNegative",
     ]),
     selectionPage() {
       return this.selection && this.selection.pageNumber;
@@ -305,8 +304,7 @@ export default {
           if (
             annotation.span.find(
               (span) => span.page_index + 1 === this.page.number
-            ) &&
-            !this.isNegative(annotation)
+            )
           ) {
             annotations.push(annotation);
           }

package/src/components/DocumentPage/EditAnnotation.vue

@@ -167,7 +167,6 @@ export default {
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
       "labelsFilteredForAnnotationCreation",
-      "isNegative",
     ]),
     ...mapGetters("display", ["bboxToRect"]),
     ...mapState("selection", ["selection", "spanSelection"]),
@@ -285,26 +284,9 @@ export default {
           annotationToCreate.label_set = this.selectedSet.label_set.id;
         }
 
-        // check if the selected label already has a negative annotation
-        let negativeAnnotationId;
-
-        if (
-          this.selectedLabel.annotations &&
-          this.selectedLabel.annotations.length > 0
-        ) {
-          const negativeAnnotation = this.selectedLabel.annotations.find(
-            (annotation) => this.isNegative(annotation)
-          );
-
-          if (negativeAnnotation) {
-            negativeAnnotationId = negativeAnnotation.id;
-          }
-        }
-
         this.$store
           .dispatch("document/createAnnotation", {
             annotation: annotationToCreate,
-            negativeAnnotationId: negativeAnnotationId,
           })
           .catch((error) => {
             this.$store.dispatch("document/createErrorMessage", {

package/src/components/DocumentPage/NewAnnotation.vue

@@ -169,7 +169,6 @@ export default {
       "numberOfAnnotationSetGroup",
       "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
-      "isNegative",
     ]),
     ...mapGetters("display", ["clientToBbox"]),
     ...mapState("selection", ["spanSelection", "selection"]),
@@ -294,27 +293,9 @@ export default {
       } else {
         annotationToCreate.label_set = this.selectedSet.label_set.id;
       }
-
-      // check if the selected label already has a negative annotation
-      let negativeAnnotationId;
-
-      if (
-        this.selectedLabel.annotations &&
-        this.selectedLabel.annotations.length > 0
-      ) {
-        const negativeAnnotation = this.selectedLabel.annotations.find(
-          (annotation) => this.isNegative(annotation)
-        );
-
-        if (negativeAnnotation) {
-          negativeAnnotationId = negativeAnnotation.id;
-        }
-      }
-
       this.$store
         .dispatch("document/createAnnotation", {
           annotation: annotationToCreate,
-          negativeAnnotationId: negativeAnnotationId,
         })
         .catch((error) => {
           this.$store.dispatch("document/createErrorMessage", {

package/src/components/DocumentTopBar/DocumentSetChooser.vue

@@ -0,0 +1,88 @@
+<template>
+  <b-dropdown
+    v-if="
+      documentSet && documentSet.documents && documentSet.documents.length > 1
+    "
+    v-model="selectedDocId"
+    class="document-set-dropdown dropdown-full-width"
+    aria-role="list"
+    scrollable
+  >
+    <template #trigger>
+      <div class="dropdown-doc-set">
+        <div class="dropdown-left">
+          <CategoryIcon />
+        </div>
+        <div class="dropdown-text">
+          <div class="top-part">
+            {{ $t("document_section") }}
+          </div>
+          <div class="bottom-part">
+            {{
+              `#${numberOfDocumentInSet(selectedDocument.id)} ${categoryName(
+                selectedDocument.category
+              )}`
+            }}
+          </div>
+        </div>
+        <div class="dropdown-right">
+          <b-icon icon="angle-down" size="is-small" class="caret" />
+        </div>
+      </div>
+    </template>
+
+    <b-dropdown-item
+      v-for="doc in documentSet.documents"
+      :key="doc.id"
+      aria-role="listitem"
+      class="list-item"
+      :value="doc.id"
+      @click="handleDocumentClick(doc)"
+    >
+      <span>
+        {{
+          `#${numberOfDocumentInSet(doc.id)} ${categoryName(doc.category)}`
+        }}</span
+      >
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import CategoryIcon from "../../assets/images/CategoryIconImg";
+
+export default {
+  name: "DocumentSetChooser",
+  components: {
+    CategoryIcon,
+  },
+  data() {
+    return {
+      selectedDocId: 0,
+    };
+  },
+  computed: {
+    ...mapGetters("document", ["numberOfDocumentInSet"]),
+    ...mapGetters("category", ["categoryName"]),
+    ...mapState("document", ["documentSet", "selectedDocument"]),
+  },
+  mounted() {
+    this.selectedDocId = this.selectedDocument.id;
+  },
+  methods: {
+    handleDocumentClick(document) {
+      this.$store.dispatch("document/changeCurrentDocument", {
+        document,
+        documentId: document.id,
+      });
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_set_chooser.scss"
+></style>

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -4,9 +4,9 @@
       v-if="selectedDocument && selectedDocument.pages.length > 0 && !loading"
       :class="['document-top-bar', editMode && 'edit-mode-top-bar']"
     >
-      <div v-if="!recalculatingAnnotations" class="left-bar-components">
-        <DocumentCategory
-          v-if="categories && !editMode && !publicView && !isDocumentReviewed"
+      <div class="left-bar-components">
+        <DocumentSetChooser
+          v-if="!publicView && !recalculatingAnnotations && !editMode"
         />
       </div>
 
@@ -91,7 +91,7 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import DocumentCategory from "../../components/DocumentCategory";
+import DocumentSetChooser from "./DocumentSetChooser";
 import DocumentName from "./DocumentName";
 import DocumentTopBarButtons from "./DocumentTopBarButtons";
 import KeyboardActionsDescription from "./KeyboardActionsDescription";
@@ -104,14 +104,13 @@ import KeyboardActionsDescription from "./KeyboardActionsDescription";
 export default {
   name: "DocumentTopBar",
   components: {
-    DocumentCategory,
+    DocumentSetChooser,
     DocumentName,
     DocumentTopBarButtons,
     KeyboardActionsDescription,
   },
   data() {
     return {
-      categoryError: false,
       previousDocument: null,
       nextDocument: null,
     };
@@ -123,7 +122,6 @@ export default {
       "loading",
       "recalculatingAnnotations",
     ]),
-    ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),
     ...mapState("project", ["documentsInProject"]),
     ...mapGetters("document", [
@@ -181,14 +179,9 @@ export default {
     navigateToDocument(document) {
       if (!document) return;
 
-      this.$store.dispatch("document/changeCurrentDocument", document.id);
-
-      if (this.editMode) {
-        // Reset edit mode when changing the document,
-        // in case the change was made from the arrows in the Edit Mode
-        // so that the user does not get stuck in this interface
-        this.$store.dispatch("edit/disableEditMode");
-      }
+      this.$store.dispatch("document/changeCurrentDocument", {
+        documentId: document.id,
+      });
     },
   },
 };

package/src/components/DocumentsList/DocumentsList.vue

@@ -110,7 +110,7 @@ export default {
   },
   methods: {
     changeDocument(documentId) {
-      this.$store.dispatch("document/changeCurrentDocument", documentId);
+      this.$store.dispatch("document/changeCurrentDocument", { documentId });
     },
     requestTrialAccess() {
       window.open("https://konfuzio.com", "_blank");

package/src/locales/de.json

@@ -161,5 +161,6 @@
   "annotation_deleted": "Diese Annotation wurde gelöscht.",
   "annotation_link": "Kopieren Sie den permanenten Link zu dieser Annotationen",
   "copied": "Kopiert",
-  "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert."
+  "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert.",
+  "document_section": "Dokumentabschnitt"
 }

package/src/locales/en.json

@@ -162,5 +162,6 @@
   "annotation_deleted": "This annotation has been deleted.",
   "annotation_link": "Copy the permanent link to this annotation",
   "copied": "Copied",
-  "checkbox_ann_details": "A checkbox will be extracted for this label."
+  "checkbox_ann_details": "A checkbox will be extracted for this label.",
+  "document_section": "Document Section"
 }

package/src/locales/es.json

@@ -161,5 +161,6 @@
   "annotation_deleted": "Esta anotación ha sido eliminada.",
   "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."
+  "checkbox_ann_details": "Se extraerá una casilla de verificación para esta etiqueta.",
+  "document_section": "Sección del documento"
 }

package/src/store/category.js

@@ -116,9 +116,9 @@ const actions = {
         if (
           poll &&
           rootState.project.documentsInProject.length !==
-          state.documentsAvailableToReview.length &&
+            state.documentsAvailableToReview.length &&
           state.documentsAvailableToReview.length + errors !==
-          rootState.project.documentsInProject.length
+            rootState.project.documentsInProject.length
         ) {
           if (count >= 10) return true;
 
@@ -136,7 +136,7 @@ const actions = {
     if (
       rootState.project.documentsInProject.length === 0 ||
       rootState.project.documentsInProject.length !==
-      state.documentsAvailableToReview.length
+        state.documentsAvailableToReview.length
     ) {
       let duration;
       if (count <= 5) {
@@ -153,7 +153,8 @@ const actions = {
   },
 
   fetchCategories: ({ commit }, projectId) => {
-    return HTTP.get(`categories/?limit=100&project=${projectId}`)
+    return myImports
+      .makeGetPaginatedRequest(`categories/?project=${projectId}`, true)
       .then(async (response) => {
         if (response.data && response.data.results) {
           commit("SET_CATEGORIES", response.data.results);