@konfuzio/document-validation-ui 0.2.6-dev.1 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.2.6-dev.1",
+  "version": "0.2.6",
   "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
     "@babel/preset-env": "^7.26.9",
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^5.0.9",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
@@ -57,5 +57,9 @@
     "jest": "^29.2.6",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "2.8.1"
+  },
+  "overrides": {
+    "postcss": "8.4.31",
+    "webpack-dev-server": "5.2.1"
   }
 }

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

@@ -74,6 +74,16 @@
               @mouseleave="onElementLeave"
             />
           </v-group>
+          <template v-for="annotationSet in pageAnnotationSets">
+            <v-group>
+              <v-rect
+                :config="groupAnnotationRect(annotationSet)"
+                @click="handleClickedAnnotationSet(annotationSet)"
+                @mouseenter="onElementEnter(null, null)"
+                @mouseleave="onElementLeave"
+              />
+            </v-group>
+          </template>
           <template v-for="annotation in pageAnnotations">
             <template
               v-for="(bbox, index) in annotation.span.filter(
@@ -217,6 +227,7 @@ export default {
       "isDocumentReadyToBeReviewed",
       "isDocumentReviewed",
       "labelOfAnnotation",
+      "annotationSetBoxForPageNumber",
     ]),
     selectionPage() {
       return this.selection && this.selection.pageNumber;
@@ -275,6 +286,31 @@ export default {
       return annotations;
     },
 
+    pageAnnotationSets() {
+      const annotationSets = [];
+
+      if (this.getAnnotationsFiltered.annotationSets) {
+        this.getAnnotationsFiltered.annotationSets.forEach((annotationSet) => {
+          let samePage = false;
+          annotationSet.labels.forEach((label) => {
+            label.annotations.forEach((annotation) => {
+              if (
+                annotation.span.find(
+                  (span) => span.page_index + 1 === this.page.number
+                )
+              ) {
+                samePage = true;
+              }
+            });
+          });
+          if (samePage) {
+            annotationSets.push(annotationSet);
+          }
+        });
+      }
+      return annotationSets;
+    },
+
     selection() {
       return this.$store.getters["selection/getSelectionForPage"](
         this.page.number
@@ -372,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" ||
@@ -432,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 &&
@@ -551,7 +595,20 @@ export default {
         name: "annotation",
         draggable,
         cornerRadius: 2,
-        ...this.bboxToRect(this.page, bbox, focused),
+        ...this.bboxToRect(this.page, bbox, focused ? 2 : 0),
+      };
+    },
+    groupAnnotationRect(annotationSet) {
+      const box = this.annotationSetBoxForPageNumber(annotationSet);
+      return {
+        fill: "#2f80ed",
+        globalCompositeOperation: "multiply",
+        strokeWidth: 1,
+        stroke: "black",
+        name: "annotationSet",
+        cornerRadius: 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/display.js

@@ -153,7 +153,7 @@ const getters = {
     },
   bboxToRect:
     (state, getters) =>
-    (page, bbox, hasPadding = false) => {
+    (page, bbox, hasPadding = 0) => {
       const imageScale = getters.imageScale(page);
       if (bbox.x0 && bbox.y0) {
         const { x0, x1, y0, y1 } = bbox;
@@ -161,7 +161,7 @@ const getters = {
         const rect = {
           // left
           x: new BigNumber(x0)
-            .minus(hasPadding ? 1 : 0)
+            .minus(hasPadding)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
@@ -169,14 +169,14 @@ const getters = {
           // top
           y: pageHeight
             .minus(new BigNumber(y1))
-            .minus(hasPadding ? 1 : 0)
+            .minus(hasPadding)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)
             .toNumber(),
           width: new BigNumber(x1)
             .minus(x0)
-            .plus(hasPadding ? 2 : 0)
+            .plus(hasPadding * 2)
             .abs()
             .times(state.scale)
             .times(imageScale)
@@ -184,7 +184,7 @@ const getters = {
             .toNumber(),
           height: new BigNumber(y1)
             .minus(y0)
-            .plus(hasPadding ? 2 : 0)
+            .plus(hasPadding * 2)
             .times(state.scale)
             .times(imageScale)
             .div(PIXEL_RATIO)

package/src/store/document.js

@@ -278,6 +278,89 @@ const getters = {
     return foundAnnotationSet;
   },
 
+  /* Get annotation set box to cover all annotations */
+  annotationSetBoxForPageNumber: (state, getters) => (annotationSet) => {
+    let box = {
+      x0: null,
+      y0: null,
+      x1: null,
+      y1: null,
+    };
+    const annotationIdsOfAnnSet = [];
+    annotationSet.labels.forEach((label) => {
+      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
+    if (box.x0) {
+      state.annotations.forEach((annotation) => {
+        // don't check for annotations of the intended annotation set
+        if (!annotationIdsOfAnnSet.includes(annotation.id)) {
+          annotation.span.forEach((span) => {
+            if (
+              span.x0 >= box.x0 &&
+              span.x1 <= box.x1 &&
+              span.y0 >= box.y0 &&
+              span.y1 <= box.y1
+            ) {
+              box = {
+                x0: null,
+                y0: null,
+                x1: null,
+                y1: null,
+              };
+              return;
+            }
+          });
+        }
+        if (!box.x0) {
+          return;
+        }
+      });
+    }
+    return box;
+  },
+
   /* Get label for a given annotation */
   labelOfAnnotation: (state) => (annotationToFind) => {
     let foundLabel = null;

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 {