@konfuzio/document-validation-ui 0.1.9-pre-release-1 → 0.1.9-pre-release-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.9-pre-release-1",
+  "version": "0.1.9-pre-release-2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -3,9 +3,10 @@
     :animated="false"
     :position="fromTable ? 'is-top' : 'is-bottom'"
     :class="[!fromTable && 'left-aligned', 'annotation-details']"
+    :active="!publicView"
   >
     <div :class="['label-icon', fromTable && 'is-small']">
-      <div v-if="created(annotation) || edited(annotation)">
+      <div v-if="(created(annotation) || edited(annotation)) && !publicView">
         <div
           v-if="accepted(annotation)"
           :class="[
@@ -28,13 +29,13 @@
         </div>
       </div>
       <div
-        v-else-if="annotationIsNotFound(annotationSet, label)"
+        v-else-if="annotationIsNotFound(annotationSet, label) && !publicView"
         :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
       >
         <NotFoundIcon />
       </div>
       <div
-        v-else-if="notExtracted(annotation)"
+        v-else-if="notExtracted(annotation) && !publicView"
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -45,7 +46,7 @@
       </div>
       <div v-else>
         <div
-          v-if="accepted(annotation)"
+          v-if="accepted(annotation) && !publicView"
           :class="[
             'annotation-details-icon success',
             animate ? 'animated-ripple' : '',
@@ -143,7 +144,7 @@
   </b-tooltip>
 </template>
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import CheckMark from "../../assets/images/CheckMark";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import QuestionMark from "../../assets/images/QuestionMark";
@@ -199,6 +200,7 @@ export default {
       "getUser",
       "annotationIsNotFound",
     ]),
+    ...mapState("document", ["publicView"]),
   },
   watch: {
     annotation(newAnnotation, oldAnnotation) {

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -235,24 +235,28 @@ export default {
       if (
         newSidebarAnnotationSelected &&
         this.annotation &&
-        this.annotation.id === newSidebarAnnotationSelected.id
+        this.annotation.id === newSidebarAnnotationSelected.annotation.id
       ) {
         clearTimeout(this.annotationAnimationTimeout);
 
-        const runAnimation = () => {
-          this.$el.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest",
-          });
-          this.isSelected = true;
-          // remove annotation selection after some time
-          this.annotationAnimationTimeout = setTimeout(() => {
-            this.$store.dispatch("document/setSidebarAnnotationSelected", null);
-            this.isSelected = false;
-          }, 1500);
-        };
-        runAnimation();
+        this.isSelected = true;
+        // remove annotation selection after some time
+        this.annotationAnimationTimeout = setTimeout(() => {
+          this.$store.dispatch("document/setSidebarAnnotationSelected", null);
+          this.isSelected = false;
+        }, 1500);
+
+        // Check if sidebarAnnotationSelected changed from a click or hover
+        if (newSidebarAnnotationSelected.trigger === "click") {
+          const runAnimation = () => {
+            this.$el.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+              inline: "nearest",
+            });
+          };
+          runAnimation();
+        }
       }
     },
     editAnnotation(newValue) {
@@ -373,6 +377,7 @@ export default {
     },
     showAcceptButton() {
       return (
+        !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
         !this.annotation.revised &&
@@ -381,6 +386,7 @@ export default {
     },
     showDeclineButton() {
       return (
+        !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
         this.hoveredAnnotation === this.annotation.id
@@ -388,6 +394,7 @@ export default {
     },
     showMissingButton() {
       return (
+        !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         !this.annotation &&
@@ -396,6 +403,7 @@ export default {
     },
     showRestoreButton() {
       return (
+        !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotationIsNotFound(this.annotationSet, this.label)

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -91,7 +91,10 @@
         </div>
 
         <div v-for="label in annotationSet.labels" :key="label.id">
-          <div class="labels">
+          <div
+            class="labels"
+            v-if="!(label.annotations.length === 0 && publicView)"
+          >
             <DocumentLabel
               :label="label"
               :annotation-set="annotationSet"

package/src/components/DocumentPage/DocumentPage.vue

@@ -68,8 +68,8 @@
                 v-if="!isAnnotationInEditMode(annotation.id)"
                 :key="'ann' + annotation.id + '-' + index"
                 :config="annotationRect(bbox, annotation.id)"
-                @click="handleClickedAnnotation(annotation)"
-                @mouseenter="onElementEnter"
+                @click="handleFocusedAnnotation(annotation, 'click')"
+                @mouseenter="handleFocusedAnnotation(annotation)"
                 @mouseleave="onElementLeave"
               />
             </template>
@@ -392,10 +392,16 @@ export default {
       });
     },
 
-    handleClickedAnnotation(annotation) {
-      this.closePopups(true);
+    handleFocusedAnnotation(annotation, trigger) {
       this.$store.dispatch("document/resetEditAnnotation");
-      this.$store.dispatch("document/setSidebarAnnotationSelected", annotation);
+      this.$store.dispatch("document/setSidebarAnnotationSelected", {
+        annotation,
+        trigger,
+      });
+
+      if (trigger && trigger === "click") {
+        this.closePopups(true);
+      }
     },
 
     handleClickedEntity(entity) {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -124,6 +124,9 @@ export default {
     zoomIn() {
       if (this.currentPercentage === this.maxPercentage) return;
 
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
+
       this.currentPercentage += this.defaultPercentage * 100;
       this.updateScale((this.defaultScale * this.currentPercentage) / 100);
     },
@@ -132,12 +135,18 @@ export default {
         return;
       }
 
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
+
       this.currentPercentage -= this.defaultPercentage * 100;
       this.updateScale((this.defaultScale * this.currentPercentage) / 100);
     },
     fitAuto() {
       if (this.currentPercentage === 50 || !this.defaultScale) return;
 
+      // exit edit mode of Annotation if changing zoom during editing
+      this.cancelAnnotationEditMode();
+
       // Always set to 50%
       this.updateScale(this.defaultScale * this.fitPercentage);
 
@@ -148,6 +157,11 @@ export default {
         this.$store.dispatch("display/updateScale", { scale });
       });
     },
+    cancelAnnotationEditMode() {
+      this.$store.dispatch("document/resetEditAnnotation");
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("selection/setSelectedEntities", null);
+    },
   },
 };
 </script>