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

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -75,6 +75,9 @@
           margin-top: 0px;
         }
         margin: 24px 16px 8px 16px;
+        &.hover-effect {
+          background-color: variables.$grey-lightest;
+        }
         .label-set-header {
           cursor: pointer;
           display: flex;

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -53,6 +53,7 @@
           :class="[
             'annotation-set-group',
             indexGroup === 0 && 'no-top-margin',
+            annotationSetHover && annotationSetHover.id === annotationSet.id && 'hover-effect',
             !isAccordionOpen(annotationSet) && 'annotation-set-collapsed',
           ]"
         >
@@ -199,7 +200,7 @@ export default {
   computed: {
     ...mapState("display", ["showAnnSetTable", "showBranding"]),
     ...mapState("edit", ["editMode"]),
-    ...mapState("selection", ["annotationSetSelection"]),
+    ...mapState("selection", ["annotationSetSelection", "annotationSetHover"]),
     ...mapState("document", [
       "annotationSets",
       "documentId",
@@ -272,9 +273,12 @@ export default {
         const newAnnotationSetsAccordion = {
           ...this.annotationSetsAccordion,
         };
-        newAnnotationSetsAccordion[
+        const isOpen = (newAnnotationSetsAccordion[
           newAnnotationSet.id || newAnnotationSet.label_set.id
-        ] = true;
+        ] =
+          !newAnnotationSetsAccordion[
+            newAnnotationSet.id || newAnnotationSet.label_set.id
+          ]);
         this.annotationSetsAccordion = newAnnotationSetsAccordion;
 
         // scroll to element

package/src/components/DocumentPage/DocumentPage.vue

@@ -74,13 +74,13 @@
               @mouseleave="onElementLeave"
             />
           </v-group>
-          <template v-for="annotationSet in pageAnnotationSets">
+          <template v-for="(annotationSet, index) in pageAnnotationSets">
             <v-group>
               <v-rect
-                :config="groupAnnotationRect(annotationSet)"
+                :config="groupAnnotationRect(annotationSet, index)"
                 @click="handleClickedAnnotationSet(annotationSet)"
-                @mouseenter="onElementEnter(null, null)"
-                @mouseleave="onElementLeave"
+                @mouseenter="onAnnotationSetEnter(annotationSet)"
+                @mouseleave="onAnnotationSetLeave"
               />
             </v-group>
           </template>
@@ -195,6 +195,7 @@ export default {
       "selectedEntities",
       "spanSelection",
       "isSelecting",
+      "annotationSetSelection",
     ]),
     ...mapState("display", [
       "scale",
@@ -504,6 +505,24 @@ export default {
       this.$store.dispatch("document/disableDocumentAnnotationSelected");
     },
 
+    onAnnotationSetEnter(annotationSet) {
+      if (
+        !this.categorizeModalIsActive &&
+        !this.publicView &&
+        !this.editMode &&
+        !this.isDocumentReviewed
+      ) {
+        this.$refs.stage.$el.style.cursor = "pointer";
+      }
+
+      this.$store.dispatch("selection/setAnnotationSetHover", annotationSet);
+    },
+
+    onAnnotationSetLeave() {
+      this.$refs.stage.$el.style.cursor = "inherit";
+      this.$store.dispatch("selection/setAnnotationSetHover", null);
+    },
+
     /**
      * Konva draws pages like this.
      */
@@ -598,16 +617,16 @@ export default {
         ...this.bboxToRect(this.page, bbox, focused ? 2 : 0),
       };
     },
-    groupAnnotationRect(annotationSet) {
+    groupAnnotationRect(annotationSet, index) {
       const box = this.annotationSetBoxForPageNumber(annotationSet);
       return {
-        fill: "#2f80ed",
+        fill: index % 2 !== 0 ? "#0377fc" : "#a7e7ff",
         globalCompositeOperation: "multiply",
         strokeWidth: 1,
         stroke: "black",
         name: "annotationSet",
         cornerRadius: 4,
-        opacity: 0.1,
+        opacity: 0.3,
         ...this.bboxToRect(this.page, box, 1),
       };
     },

package/src/store/selection.js

@@ -16,6 +16,7 @@ const state = {
   selectedEntities: [],
   spanLoading: false,
   annotationSetSelection: null,
+  annotationSetHover: null,
 };
 
 const getters = {
@@ -242,6 +243,9 @@ const actions = {
   setAnnotationSetSelection: ({ commit }, annotationSet) => {
     commit("SET_ANNOTATION_SET_SELECTED", annotationSet);
   },
+  setAnnotationSetHover: ({ commit }, annotationSet) => {
+    commit("SET_ANNOTATION_SET_HOVER", annotationSet);
+  },
 };
 
 const mutations = {
@@ -302,6 +306,9 @@ const mutations = {
   SET_ANNOTATION_SET_SELECTED: (state, annotationSet) => {
     state.annotationSetSelection = annotationSet;
   },
+  SET_ANNOTATION_SET_HOVER: (state, annotationSet) => {
+    state.annotationSetHover = annotationSet;
+  },
 };
 
 export default {