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

package/package.json

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

package/src/assets/scss/document_toolbar.scss

@@ -96,7 +96,8 @@
     }
 
     .download-file,
-    .search-icon {
+    .search-icon,
+    .doc-faq {
       color: variables.$toolbar-elements;
 
       .is-active {
@@ -108,5 +109,8 @@
         }
       }
     }
+    .doc-faq {
+      cursor: pointer;
+    }
   }
 }

package/src/assets/scss/theme.scss

@@ -600,6 +600,7 @@
       }
       &:before {
         border-bottom-color: variables.$text-color !important;
+        border-top-color: variables.$text-color !important;
       }
     }
 

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -441,7 +441,9 @@ export default {
             inline: "nearest",
           });
         };
-        runAnimation();
+        setTimeout(() => {
+          runAnimation();
+        }, 300);
       } else {
         this.isSelected = false;
       }

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -48,6 +48,7 @@
           v-for="(
             annotationSet, indexGroup
           ) in getAnnotationsFiltered.annotationSets"
+          :id="`annset_${annotationSet.id}`"
           :key="indexGroup"
           :class="[
             'annotation-set-group',
@@ -198,6 +199,7 @@ export default {
   computed: {
     ...mapState("display", ["showAnnSetTable", "showBranding"]),
     ...mapState("edit", ["editMode"]),
+    ...mapState("selection", ["annotationSetSelection"]),
     ...mapState("document", [
       "annotationSets",
       "documentId",
@@ -265,6 +267,27 @@ export default {
         }
       }
     },
+    annotationSetSelection(newAnnotationSet) {
+      if (newAnnotationSet) {
+        const newAnnotationSetsAccordion = {
+          ...this.annotationSetsAccordion,
+        };
+        newAnnotationSetsAccordion[
+          newAnnotationSet.id || newAnnotationSet.label_set.id
+        ] = true;
+        this.annotationSetsAccordion = newAnnotationSetsAccordion;
+
+        // scroll to element
+        const annotationSetElement = document.getElementById(
+          `annset_${newAnnotationSet.id}`
+        );
+        if (annotationSetElement) {
+          annotationSetElement.scrollIntoView({ behavior: "smooth" });
+        }
+
+        this.$store.dispatch("selection/setAnnotationSetSelection", null);
+      }
+    },
   },
   created() {
     window.addEventListener("keydown", this.keyDownHandler);

package/src/components/DocumentPage/DocumentPage.vue

@@ -76,7 +76,12 @@
           </v-group>
           <template v-for="annotationSet in pageAnnotationSets">
             <v-group>
-              <v-rect :config="groupAnnotationRect(annotationSet)" />
+              <v-rect
+                :config="groupAnnotationRect(annotationSet)"
+                @click="handleClickedAnnotationSet(annotationSet)"
+                @mouseenter="onElementEnter(null, null)"
+                @mouseleave="onElementLeave"
+              />
             </v-group>
           </template>
           <template v-for="annotation in pageAnnotations">
@@ -403,6 +408,7 @@ export default {
       if (
         event.target.name() === "entity" ||
         event.target.name() === "annotation" ||
+        event.target.name() === "annotationSet" ||
         event.target.name() === "multiAnnBoxSelection" ||
         event.target.name() === "multiAnnBoxTransformer" ||
         event.target.name() === "multiAnnButton" ||
@@ -463,6 +469,13 @@ export default {
       this.$store.dispatch("selection/entityClick", entity);
     },
 
+    handleClickedAnnotationSet(annotationSet) {
+      this.$store.dispatch(
+        "selection/setAnnotationSetSelection",
+        annotationSet
+      );
+    },
+
     onElementEnter(annotation = null, span = null) {
       if (
         !this.categorizeModalIsActive &&
@@ -590,12 +603,12 @@ export default {
       return {
         fill: "#2f80ed",
         globalCompositeOperation: "multiply",
-        strokeWidth: 0.2,
+        strokeWidth: 1,
         stroke: "black",
         name: "annotationSet",
         cornerRadius: 4,
-        opacity: 0.3,
-        ...this.bboxToRect(this.page, box, 4),
+        opacity: 0.1,
+        ...this.bboxToRect(this.page, box, 1),
       };
     },
     getAnnotationLabelPosition(annotation) {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -82,7 +82,36 @@
           {{ `${currentPercentage}%` }}
         </div>
       </div>
+      <div v-if="!publicView" class="toolbar-divider" />
+      <div v-if="!publicView && !editMode">
+        <b-tooltip
+          class="doc-faq"
+          position="is-top"
+          :label="$t('document_faq_title')"
+        >
+          <b-icon
+            size="is-small"
+            icon="question"
+            @click="isFaqModalActive = true"
+          />
+        </b-tooltip>
+      </div>
     </div>
+    <section class="faq-modal">
+      <b-modal v-model="isFaqModalActive" :width="500">
+        <section class="modal-card-body">
+          <div class="content">
+            <h3>{{ $t("document_faq_title") }}</h3>
+            <ul>
+              <li>
+                <p>{{ $t("document_faq_content") }}</p>
+              </li>
+            </ul>
+          </div>
+        </section>
+        <footer class="modal-card-foot"></footer>
+      </b-modal>
+    </section>
   </div>
 </template>
 
@@ -112,6 +141,7 @@ export default {
       toolbarModalOpen: true,
       editModeDisabled: false,
       tooltipInfo: null,
+      isFaqModalActive: false,
     };
   },
   computed: {
@@ -139,7 +169,9 @@ export default {
     },
     scale(newScale) {
       if (this.fitWidthScale > 0) {
-        this.currentPercentage = Math.round((newScale / this.fitWidthScale) * 100);
+        this.currentPercentage = Math.round(
+          (newScale / this.fitWidthScale) * 100
+        );
       } else {
         this.currentPercentage = Math.round(newScale * 100);
       }

package/src/icons.js

@@ -27,6 +27,7 @@ import {
   faCircleExclamation,
   faLink,
   faSquareCheck,
+  faQuestion,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -57,7 +58,8 @@ library.add(
   faFloppyDisk,
   faCircleExclamation,
   faLink,
-  faSquareCheck
+  faSquareCheck,
+  faQuestion
 );
 
 export default Icons;

package/src/locales/en.json

@@ -168,5 +168,7 @@
   "document_section": "Document Section",
   "label_size": "Column size:",
   "powered_by": "powered by Konfuzio",
-  "nav_label_anns": "Navigate through annotations"
+  "nav_label_anns": "Navigate through annotations",
+  "document_faq_title": "Document FAQ",
+  "document_faq_content": "Annotation Sets grouping only appear when there's no overlap between annotations."
 }

package/src/store/document.js

@@ -279,7 +279,7 @@ const getters = {
   },
 
   /* Get annotation set box to cover all annotations */
-  annotationSetBoxForPageNumber: (state) => (annotationSet) => {
+  annotationSetBoxForPageNumber: (state, getters) => (annotationSet) => {
     let box = {
       x0: null,
       y0: null,
@@ -288,23 +288,47 @@ const getters = {
     };
     const annotationIdsOfAnnSet = [];
     annotationSet.labels.forEach((label) => {
-      label.annotations.forEach((annotation) => {
-        annotationIdsOfAnnSet.push(annotation.id);
-        annotation.span.forEach((span) => {
-          if (!box.x0 || box.x0 > span.x0) {
-            box.x0 = span.x0;
-          }
-          if (!box.x1 || box.x1 < span.x1) {
-            box.x1 = span.x1;
-          }
-          if (!box.y0 || box.y0 > span.y0) {
-            box.y0 = span.y0;
-          }
-          if (!box.y1 || box.y1 < span.y1) {
-            box.y1 = span.y1;
-          }
+      if (getters.isLabelMultiFalseAndGroupOfAnns(label)) {
+        if (label.annotations && label.annotations[0]) {
+          const annotation = label.annotations[0];
+          annotation.span.forEach((span) => {
+            if (!box.x0 || box.x0 > span.x0) {
+              box.x0 = span.x0;
+            }
+            if (!box.x1 || box.x1 < span.x1) {
+              box.x1 = span.x1;
+            }
+            if (!box.y0 || box.y0 > span.y0) {
+              box.y0 = span.y0;
+            }
+            if (!box.y1 || box.y1 < span.y1) {
+              box.y1 = span.y1;
+            }
+          });
+        }
+        // add all annotations to not be checked
+        label.annotations.forEach((annotation) => {
+          annotationIdsOfAnnSet.push(annotation.id);
         });
-      });
+      } else {
+        label.annotations.forEach((annotation) => {
+          annotationIdsOfAnnSet.push(annotation.id);
+          annotation.span.forEach((span) => {
+            if (!box.x0 || box.x0 > span.x0) {
+              box.x0 = span.x0;
+            }
+            if (!box.x1 || box.x1 < span.x1) {
+              box.x1 = span.x1;
+            }
+            if (!box.y0 || box.y0 > span.y0) {
+              box.y0 = span.y0;
+            }
+            if (!box.y1 || box.y1 < span.y1) {
+              box.y1 = span.y1;
+            }
+          });
+        });
+      }
     });
 
     // check if doesn't cover any other annotation

package/src/store/selection.js

@@ -15,6 +15,7 @@ const state = {
   placeholderSelection: [],
   selectedEntities: [],
   spanLoading: false,
+  annotationSetSelection: null,
 };
 
 const getters = {
@@ -238,6 +239,9 @@ const actions = {
   setPlaceholderSelection: ({ commit }, span) => {
     commit("SET_PLACEHOLDER_SELECTION", span);
   },
+  setAnnotationSetSelection: ({ commit }, annotationSet) => {
+    commit("SET_ANNOTATION_SET_SELECTED", annotationSet);
+  },
 };
 
 const mutations = {
@@ -295,6 +299,9 @@ const mutations = {
   SET_SPAN_LOADING: (state, loading) => {
     state.spanLoading = loading;
   },
+  SET_ANNOTATION_SET_SELECTED: (state, annotationSet) => {
+    state.annotationSetSelection = annotationSet;
+  },
 };
 
 export default {