@konfuzio/document-validation-ui 0.1.50-dev.0 → 0.1.50

package/package.json

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

package/src/assets/scss/document_category.scss

@@ -83,3 +83,8 @@
     }
   }
 }
+.loading-bar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

package/src/assets/scss/document_set_chooser.scss

@@ -17,3 +17,9 @@
     }
   }
 }
+.loading-bar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0 16px;
+}

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -51,17 +51,14 @@
           :key="indexGroup"
           :class="[
             'annotation-set-group',
-            !annotationSetsAccordion[indexGroup] === true &&
-              'annotation-set-collapsed',
+            !isAccordionOpen(annotationSet) && 'annotation-set-collapsed',
           ]"
         >
-          <div class="label-set-header" @click="toggleAccordion(indexGroup)">
+          <div class="label-set-header" @click="toggleAccordion(annotationSet)">
             <div class="label-set-name">
               <b-icon
                 :icon="
-                  annotationSetsAccordion[indexGroup]
-                    ? 'angle-up'
-                    : 'angle-down'
+                  isAccordionOpen(annotationSet) ? 'angle-up' : 'angle-down'
                 "
                 size="is-12"
               />
@@ -80,7 +77,7 @@
               class="labelset-action-buttons"
             >
               <AnnotationSetActionButtons
-                :is-placeholder="annotationSetsAccordion[indexGroup] === false"
+                :is-placeholder="!isAccordionOpen(annotationSet)"
                 :number-of-empty-labels-in-annotation-set="
                   emptyLabels(annotationSet).length
                 "
@@ -107,7 +104,7 @@
             </div>
           </div>
 
-          <b-collapse :open="annotationSetsAccordion[indexGroup] === true">
+          <b-collapse :open="isAccordionOpen(annotationSet)">
             <div v-if="annotationSet.labels.length > 0">
               <div v-for="label in annotationSet.labels" :key="label.id">
                 <div
@@ -242,11 +239,12 @@ export default {
       if (newAnnotationId) {
         const annotationSet = this.annotationSetOfAnnotation(newAnnotationId);
         if (annotationSet) {
-          const index = this.annotationSets.findIndex(
-            (annotationSetToFind) => annotationSetToFind.id === annotationSet.id
-          );
-          const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
-          newAnnotationSetsAccordion[index] = true;
+          const newAnnotationSetsAccordion = {
+            ...this.annotationSetsAccordion,
+          };
+          newAnnotationSetsAccordion[
+            annotationSet.id || annotationSet.label_set.id
+          ] = true;
           this.annotationSetsAccordion = newAnnotationSetsAccordion;
         }
       }
@@ -272,51 +270,38 @@ export default {
         annotationSet.labels.length === 0 && this.isSearchingAnnotationList
       );
     },
-
-    toggleAccordion(index) {
-      const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
-      newAnnotationSetsAccordion[index] = !newAnnotationSetsAccordion[index];
+    isAccordionOpen(annotationSet) {
+      return (
+        this.isSearchingAnnotationList ||
+        this.annotationSetsAccordion[
+          annotationSet.id || annotationSet.label_set.id
+        ] === true
+      );
+    },
+    toggleAccordion(annotationSet) {
+      const newAnnotationSetsAccordion = { ...this.annotationSetsAccordion };
+      newAnnotationSetsAccordion[
+        annotationSet.id || annotationSet.label_set.id
+      ] =
+        !newAnnotationSetsAccordion[
+          annotationSet.id || annotationSet.label_set.id
+        ];
       this.annotationSetsAccordion = newAnnotationSetsAccordion;
     },
     openAllAccordions() {
-      const newAnnotationSetsAccordion = [...this.annotationSetsAccordion];
-      newAnnotationSetsAccordion.forEach((_, index) => {
-        newAnnotationSetsAccordion[index] = true;
-      });
+      const newAnnotationSetsAccordion = { ...this.annotationSetsAccordion };
+      for (var key in newAnnotationSetsAccordion) {
+        newAnnotationSetsAccordion[key] = true;
+      }
       this.annotationSetsAccordion = newAnnotationSetsAccordion;
     },
     loadAccordions(newAnnotationSets, oldAnnotationSets = null) {
       if (newAnnotationSets) {
         const isFirstTime = this.annotationSetsAccordion === null;
-        const newAnnotationSetsAccordion = [];
+        const newAnnotationSetsAccordion = {};
         const annotationSetsOpened = [];
         const annotationSetsCreated = [];
 
-        if (!isFirstTime) {
-          // when annotation sets changed, restore old state
-          // and check if new ones were created to be open by default
-
-          this.annotationSetsAccordion.forEach((isOpen, index) => {
-            if (isOpen) {
-              annotationSetsOpened.push(oldAnnotationSets[index]);
-            }
-          });
-
-          newAnnotationSets.forEach((newAnnotationSet) => {
-            const existed = oldAnnotationSets.find(
-              (oldAnnotationSet) =>
-                oldAnnotationSet &&
-                newAnnotationSet &&
-                oldAnnotationSet.id &&
-                newAnnotationSet.id &&
-                oldAnnotationSet.id === newAnnotationSet.id
-            );
-            if (!existed && newAnnotationSet && newAnnotationSet.id !== null) {
-              annotationSetsCreated.push(newAnnotationSet);
-            }
-          });
-        }
-
         newAnnotationSets.forEach((newAnnotationSet, index) => {
           const wasOpen = annotationSetsOpened.find(
             (annotationSetOpened) =>
@@ -326,19 +311,25 @@ export default {
               newAnnotationSet.id === annotationSetOpened.id
           );
           if (isFirstTime && this.annotationSetId) {
-            newAnnotationSetsAccordion[index] =
-              newAnnotationSet.id == this.annotationSetId;
+            newAnnotationSetsAccordion[
+              newAnnotationSet.id || newAnnotationSet.label_set.id
+            ] = newAnnotationSet.id == this.annotationSetId;
           } else if (isFirstTime && this.annotationId) {
-            newAnnotationSetsAccordion[index] =
-              this.isAnnotationInAnnotationSet(
-                newAnnotationSet,
-                this.annotationId
-              );
+            newAnnotationSetsAccordion[
+              newAnnotationSet.id || newAnnotationSet.label_set.id
+            ] = this.isAnnotationInAnnotationSet(
+              newAnnotationSet,
+              this.annotationId
+            );
           } else if (isFirstTime && index === 0) {
             // open first one by default
-            newAnnotationSetsAccordion[index] = true;
+            newAnnotationSetsAccordion[
+              newAnnotationSet.id || newAnnotationSet.label_set.id
+            ] = true;
           } else if (wasOpen) {
-            newAnnotationSetsAccordion[index] = wasOpen !== undefined;
+            newAnnotationSetsAccordion[
+              newAnnotationSet.id || newAnnotationSet.label_set.id
+            ] = wasOpen !== undefined;
           } else {
             const wasCreated = annotationSetsCreated.find(
               (annotationSetCreated) =>
@@ -346,7 +337,9 @@ export default {
                 newAnnotationSet.id &&
                 newAnnotationSet.id === annotationSetCreated.id
             );
-            newAnnotationSetsAccordion[index] = wasCreated !== undefined;
+            newAnnotationSetsAccordion[
+              newAnnotationSet.id || newAnnotationSet.label_set.id
+            ] = wasCreated !== undefined;
           }
         });
         this.annotationSetsAccordion = newAnnotationSetsAccordion;

package/src/components/DocumentCategory.vue

@@ -1,5 +1,6 @@
 <template>
   <b-tooltip
+    v-if="categories"
     multilined
     :active="tooltipIsShown || dropdownIsDisabled"
     size="is-large"
@@ -67,6 +68,9 @@
       </b-dropdown-item>
     </b-dropdown>
   </b-tooltip>
+  <div v-else class="loading-bar">
+    <b-skeleton width="auto" height="100%" />
+  </div>
 </template>
 
 <script>
@@ -258,21 +262,23 @@ export default {
       this.$emit("category-change", this.page, category.id);
     },
     setTooltipText() {
-      // Text set from innerHTML vs 'label' due to html tag in locales file string
-      let tooltipText;
-      let tooltipDelay = 0;
+      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");
-      } else if (this.documentHasCorrectAnnotations) {
-        tooltipText = this.$t("approved_annotations");
-      } else if (this.projectHasSingleCategory) {
-        tooltipText = this.$t("single_category_in_project");
-        tooltipDelay = 5000;
-      }
+        if (this.documentCannotBeEdited(this.selectedDocument)) {
+          tooltipText = this.$t("edit_not_available");
+        } else if (this.documentHasCorrectAnnotations) {
+          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;
+        this.tooltipCloseDelay = tooltipDelay;
+        this.$refs.tooltipContent.innerHTML = tooltipText;
+      }
     },
   },
 };

package/src/components/DocumentEdit/RenameAndCategorize.vue

@@ -38,7 +38,9 @@
                   }"
                   :image-url="getImageUrl(page)"
                   class="page-thumbnail"
-                />
+                >
+                  <b-skeleton width="60px" height="60px" />
+                </ServerImage>
                 <div class="icon-container">
                   <div class="action-icon">
                     <EyeIcon />

package/src/components/DocumentTopBar/DocumentSetChooser.vue

@@ -1,7 +1,10 @@
 <template>
   <b-dropdown
     v-if="
-      documentSet && documentSet.documents && documentSet.documents.length > 1
+      documentSet &&
+      documentSet.documents &&
+      documentSet.documents.length > 1 &&
+      categories
     "
     v-model="selectedDocId"
     class="document-set-dropdown dropdown-full-width"
@@ -19,9 +22,9 @@
           </div>
           <div class="bottom-part">
             {{
-              `${numberOfDocumentInSet(selectedDocument.id)} ${categoryName(
+              `${categoryName(
                 selectedDocument.category
-              )}`
+              )} ${numberOfDocumentInSet(selectedDocument)}`
             }}
           </div>
         </div>
@@ -41,11 +44,17 @@
     >
       <span>
         {{
-          `${numberOfDocumentInSet(doc.id)} ${categoryName(doc.category)}`
+          `${categoryName(doc.category)} ${numberOfDocumentInSet(doc)}`
         }}</span
       >
     </b-dropdown-item>
   </b-dropdown>
+  <div
+    v-else-if="selectedDocument.documentSet !== null && documentSet === null"
+    class="loading-bar"
+  >
+    <b-skeleton width="100px" height="60%" />
+  </div>
 </template>
 
 <script>
@@ -66,16 +75,14 @@ export default {
     ...mapGetters("document", ["numberOfDocumentInSet"]),
     ...mapGetters("category", ["categoryName"]),
     ...mapState("document", ["documentSet", "selectedDocument"]),
+    ...mapState("category", ["categories"]),
   },
   mounted() {
     this.selectedDocId = this.selectedDocument.id;
   },
   methods: {
     handleDocumentClick(document) {
-      this.$store.dispatch("document/changeCurrentDocument", {
-        document,
-        documentId: document.id,
-      });
+      this.$store.dispatch("document/changeCurrentDocument", document.id);
     },
   },
 };

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -181,10 +181,7 @@ export default {
     },
     navigateToDocument(document) {
       if (!document) return;
-
-      this.$store.dispatch("document/changeCurrentDocument", {
-        documentId: document.id,
-      });
+      this.$store.dispatch("document/changeCurrentDocument", 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/store/category.js

@@ -13,9 +13,12 @@ const getters = {
    */
   categoryName: (state) => (categoryId) => {
     if (categoryId && state.categories) {
-      return state.categories.find(
+      const category = state.categories.find(
         (tempCategory) => tempCategory.id == categoryId
-      ).name;
+      );
+      if (category) {
+        return category.name;
+      }
     }
     return "";
   },
@@ -35,9 +38,12 @@ const getters = {
    */
   category: (state) => (categoryId) => {
     if (categoryId && state.categories) {
-      return state.categories.find(
+      const category = state.categories.find(
         (tempCategory) => tempCategory.id == categoryId
       );
+      if (category) {
+        return category;
+      }
     }
     return null;
   },

package/src/store/document.js

@@ -441,7 +441,7 @@ const getters = {
       if (
         !(
           (rootState.display.hideEmptyLabelSets || state.publicView) &&
-          annotationSet.id === null
+          annotationSet.labels.length === 0
         )
       ) {
         labels = [];
@@ -523,18 +523,25 @@ const getters = {
   /**
    * Checks the number of current document in the document set
    */
-  numberOfDocumentInSet: (state) => (documentId) => {
-    return "";
-    let index = -1;
+  numberOfDocumentInSet: (state) => (document) => {
+    let found = false;
+    let value = 0;
+    let index = 0;
     if (state.documentSet && state.documentSet.documents) {
-      state.documentSet.documents.forEach((docTemp, indexTemp) => {
-        if (docTemp.id == documentId) {
-          index = indexTemp;
-          return;
+      state.documentSet.documents.map((documentSetTemp) => {
+        if (
+          documentSetTemp.id !== document.id &&
+          documentSetTemp.category === document.category
+        ) {
+          found = true;
+          index++;
+        } else if (documentSetTemp.id === document.id) {
+          value = index;
         }
       });
+      return found ? `${value + 1}` : "";
     }
-    return index === -1 ? "" : `${index + 1}`;
+    return "";
   },
 
   /**
@@ -1054,105 +1061,96 @@ const actions = {
    * Actions that use HTTP requests always return the axios promise,
    * so they can be `await`ed (useful to set the `loading` status).
    */
-  fetchDocument: async (
-    { commit, state, dispatch, rootState, getters },
-    fetchedDocument = null
-  ) => {
-    let projectId = null;
-    let documentSetId = null;
-    let categoryId = null;
+  fetchDocument: async ({ commit, state, dispatch, rootState, getters }) => {
     let isRecalculatingAnnotations = false;
-
     const initialPage = 1;
 
     dispatch("startLoading");
     dispatch("display/updateCurrentPage", initialPage, {
       root: true,
     });
-    try {
-      if (!fetchedDocument) {
-        const response = await HTTP.get(`documents/${state.documentId}/`);
-        fetchedDocument = response.data;
-      }
-
-      const { labels, annotations, annotationSets } =
-        getters.processAnnotationSets(fetchedDocument.annotation_sets);
 
-      // load first page
-      if (fetchedDocument.pages.length > 0) {
-        dispatch("fetchDocumentPage", initialPage);
-      }
+    await HTTP.get(`documents/${state.documentId}/`)
+      .then((response) => {
+        if (response.data) {
+          const fetchedDocument = response.data;
+
+          const { labels, annotations, annotationSets } =
+            getters.processAnnotationSets(fetchedDocument.annotation_sets);
+
+          // load first page
+          // if (fetchedDocument.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", fetchedDocument);
+
+          // project
+          if (fetchedDocument.project) {
+            dispatch("project/setProjectId", fetchedDocument.project, {
+              root: true,
+            });
 
-      // set information on the store
-      commit("SET_ANNOTATION_SETS", annotationSets);
-      commit("SET_ANNOTATIONS", annotations);
-      commit("SET_LABELS", labels);
-      commit("SET_SELECTED_DOCUMENT", fetchedDocument);
+            dispatch(
+              "project/setShowAnnotationTranslations",
+              fetchedDocument.enable_translated_strings,
+              {
+                root: true,
+              }
+            );
+          }
 
-      if (fetchedDocument.project) {
-        projectId = fetchedDocument.project;
+          if (!state.publicView) {
+            dispatch("fetchMissingAnnotations");
 
-        dispatch("project/setProjectId", projectId, {
-          root: true,
-        });
+            dispatch("project/fetchCurrentUser", null, {
+              root: true,
+            });
 
-        dispatch(
-          "project/setShowAnnotationTranslations",
-          fetchedDocument.enable_translated_strings,
-          {
-            root: true,
+            if (fetchedDocument.project) {
+              dispatch("category/fetchCategories", fetchedDocument.project, {
+                root: true,
+              });
+            }
+            if (fetchedDocument.document_set) {
+              dispatch("fetchDocumentSet", fetchedDocument.document_set);
+            }
           }
-        );
-      }
-
-      if (getters.documentHasProposedSplit(fetchedDocument)) {
-        commit("SET_SPLITTING_SUGGESTIONS", fetchedDocument.proposed_split);
-      }
 
-      documentSetId = fetchedDocument.document_set;
-      categoryId = fetchedDocument.category;
-      isRecalculatingAnnotations = fetchedDocument.labeling_available !== 1;
-    } catch (error) {
-      console.log(error, "Could not fetch document details from the backend");
-      dispatch("display/setPageError", error.response.data.detail, {
-        root: true,
-      });
-      return;
-    }
-
-    if (!state.publicView) {
-      await dispatch("fetchMissingAnnotations");
+          if (getters.documentHasProposedSplit(fetchedDocument)) {
+            dispatch("setSplittingSuggestions", fetchedDocument.proposed_split);
+          }
 
-      await dispatch("project/fetchCurrentUser", null, {
-        root: true,
+          if (fetchedDocument.labeling_available !== 1) {
+            commit("SET_RECALCULATING_ANNOTATIONS", true);
+            dispatch("pollDocumentEndpoint");
+          }
+        }
+      })
+      .catch((error) => {
+        console.log(error, "Could not fetch document details from the backend");
+        dispatch("display/setPageError", error.response.data.detail, {
+          root: true,
+        });
+        return;
       });
 
-      // Check if we first open the document dashboard or the edit mode
-      if (
-        !state.selectedDocument.category ||
+    // Check if we first open the document dashboard or the edit mode
+    if (
+      !state.publicView &&
+      (!state.selectedDocument.category ||
         (!state.selectedDocument.category_is_revised &&
           !getters.documentHasCorrectAnnotations &&
-          state.missingAnnotations.length === 0)
-      ) {
-        dispatch("edit/enableEditMode", null, {
-          root: true,
-        });
-        dispatch("edit/setRenameAndCategorize", true, { root: true });
-      }
-
-      if (documentSetId) {
-        await dispatch("fetchDocumentSet", documentSetId);
-      }
-
-      if (projectId) {
-        await dispatch("category/fetchCategories", projectId, {
-          root: true,
-        });
-      }
-    }
-    if (isRecalculatingAnnotations) {
-      commit("SET_RECALCULATING_ANNOTATIONS", true);
-      dispatch("pollDocumentEndpoint");
+          state.missingAnnotations.length === 0))
+    ) {
+      dispatch("edit/enableEditMode", null, {
+        root: true,
+      });
+      dispatch("edit/setRenameAndCategorize", true, { root: true });
     }
     dispatch("endLoading");
   },
@@ -1226,11 +1224,11 @@ const actions = {
               }
             } else {
               commit("ADD_ANNOTATION", response.data);
-              if (response.data && response.data.id) {
-                dispatch("setAnnotationId", response.data.id);
-              }
             }
 
+            if (response.data && response.data.id) {
+              dispatch("setAnnotationId", response.data.id);
+            }
             resolve(response);
           }
         })
@@ -1506,7 +1504,7 @@ const actions = {
 
   changeCurrentDocument: (
     { commit, state, dispatch, rootState },
-    { document, documentId }
+    documentId
   ) => {
     // reset splitting suggestions
     if (state.splittingSuggestions) {
@@ -1526,9 +1524,6 @@ const actions = {
 
     if (getURLQueryParam("document") || getURLPath("d")) {
       navigateToNewDocumentURL(state.selectedDocument.id, documentId);
-    } else if (document) {
-      commit("SET_DOC_ID", document.id);
-      dispatch("fetchDocument", document);
     } else {
       commit("SET_DOC_ID", documentId);
       dispatch("fetchDocument");