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

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -341,7 +341,9 @@
               justify-content: space-between;
             }
 
-            &:hover,
+            &:hover {
+              background-color: $grey-hover !important;
+            }
             &.selected {
               background-color: $grey-lightest;
             }
@@ -435,10 +437,17 @@
   .action-buttons {
     display: flex;
     gap: 6px;
-
     button {
       height: 32px;
 
+      &.link-button {
+        color: $grey-blue;
+        padding: 8px;
+        .icon {
+          vertical-align: middle;
+        }
+      }
+
       &.annotation-save-btn {
         cursor: pointer;
         padding: 6px 14px 6px 14px;

package/src/assets/scss/theme.scss

@@ -644,6 +644,12 @@
       width: 24px;
     }
   }
+  .icon.is-20 {
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
 
   .icon.is-12 {
     svg {

package/src/components/App.vue

@@ -12,7 +12,11 @@ import * as Sentry from "@sentry/vue";
 import DocumentDashboard from "./DocumentDashboard";
 import ErrorPage from "./ErrorPage";
 import { DocumentsList } from "./DocumentsList";
-import { getURLQueryParam, getURLPath } from "../utils/utils";
+import {
+  getURLQueryParam,
+  getURLPath,
+  getURLValueFromHash,
+} from "../utils/utils";
 import { Integrations } from "@sentry/tracing";
 import API from "../api";
 
@@ -88,6 +92,18 @@ export default {
       required: false,
       default: false,
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    annotation: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    annotationSet: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
   computed: {
     ...mapState("display", ["pageError"]),
@@ -150,6 +166,24 @@ export default {
         return null;
       }
     },
+    annotationId() {
+      if (getURLValueFromHash("ann")) {
+        return getURLValueFromHash("ann");
+      } else if (this.annotation) {
+        return this.annotation;
+      } else {
+        return null;
+      }
+    },
+    annotationSetId() {
+      if (getURLValueFromHash("templ")) {
+        return getURLValueFromHash("templ");
+      } else if (this.annotationSet) {
+        return this.annotationSet;
+      } else {
+        return null;
+      }
+    },
   },
   created() {
     // Sentry config
@@ -195,6 +229,8 @@ export default {
       this.$store.dispatch("display/setReviewFilter", this.reviewFilter),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
+      this.$store.dispatch("document/setAnnotationId", this.annotationId),
+      this.$store.dispatch("document/setAnnotationSetId", this.annotationSetId),
       this.$store.dispatch(
         "project/setDocumentsListPath",
         this.documentsListPath

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="action-buttons">
     <!-- loading -->
+    <b-button
+      v-if="linkBtn"
+      type="is-ghost"
+      class="link-button"
+      @click="copyAnnotationLink"
+    >
+      <b-tooltip position="is-left" :label="$t('annotation_link')">
+        <b-icon size="is-20" icon="link" />
+      </b-tooltip>
+    </b-button>
     <div v-if="isLoading">
       <b-notification :closable="false" class="loading-background">
         <b-loading :active="isLoading" :is-full-page="false">
@@ -96,12 +106,17 @@
 import { mapGetters, mapState } from "vuex";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import { TEXT_BREAKPOINT_WIDTH } from "../../constants";
+import { setURLAnnotationHash } from "../../utils/utils";
 export default {
   name: "AnnotationActionButtons",
   components: {
     AcceptedCheckMark,
   },
   props: {
+    annotation: {
+      type: Object,
+      default: null,
+    },
     saveBtn: {
       type: Boolean,
     },
@@ -128,6 +143,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    linkBtn: {
+      type: Boolean,
+      required: false,
+    },
   },
   data() {
     return {
@@ -155,6 +174,17 @@ export default {
     window.removeEventListener("resize", this.resize);
   },
   methods: {
+    copyAnnotationLink(event) {
+      if (this.annotation) {
+        event.stopPropagation();
+        this.$store.dispatch("document/setAnnotationId", this.annotation.id);
+        navigator.clipboard.writeText(window.location.href);
+        this.$buefy.toast.open({
+          container: "#app .dv-ui-app-container",
+          message: this.$t("copied"),
+        });
+      }
+    },
     resize() {
       this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
     },

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -6,11 +6,11 @@
       hoverEmptyLabelRows && 'hovered-empty-labels',
       hoverPendingAnnotationRows && 'hovered-pending-annotations',
       annotationIsNotFound(annotationSet, label) && 'missing',
-      isAnnotationInEditMode(annotationId()) && 'editing',
+      isAnnotationInEditMode(currentAnnotationId()) && 'editing',
       publicView && 'clickable-cursor',
     ]"
     @click="onAnnotationClick"
-    @mouseover="hoveredAnnotation = annotationId()"
+    @mouseover="hoveredAnnotation = currentAnnotationId()"
     @mouseleave="hoveredAnnotation = null"
   >
     <div
@@ -35,7 +35,7 @@
           annotationIsNotFound(annotationSet, label) && 'not-found-text',
         ]"
       >
-        <span>{{ label.name }} </span>
+        <span @click="selectAnnotation">{{ label.name }} </span>
       </div>
 
       <div
@@ -103,7 +103,11 @@
           </div>
         </div>
         <div v-else>
-          <div v-if="spanSelection && isAnnotationInEditMode(annotationId())">
+          <div
+            v-if="
+              spanSelection && isAnnotationInEditMode(currentAnnotationId())
+            "
+          >
             <EmptyAnnotation
               v-for="(span, index) in spanSelection"
               :key="index"
@@ -130,12 +134,14 @@
       </div>
       <div class="buttons-container">
         <AnnotationActionButtons
+          :annotation="annotation"
           :cancel-btn="showCancelButton()"
           :accept-btn="showAcceptButton()"
           :decline-btn="showDeclineButton()"
           :show-missing-btn="showMissingButton()"
           :save-btn="showSaveButton()"
           :restore-btn="showRestoreButton()"
+          :link-btn="showLinkButton()"
           :is-loading="isLoading"
           @mark-as-missing="handleMissingAnnotation"
           @save="handleSaveChanges"
@@ -195,14 +201,14 @@ export default {
     return {
       isLoading: false,
       isSelected: false,
-      annotationAnimationTimeout: null,
+      // annotationAnimationTimeout: null,
       hoveredAnnotation: null,
     };
   },
   computed: {
     ...mapState("document", [
       "editAnnotation",
-      "sidebarAnnotationSelected",
+      "annotationId",
       "hoveredAnnotationSet",
       "enableGroupingFeature",
       "publicView",
@@ -239,7 +245,7 @@ export default {
       return (
         this.spanSelection &&
         isElementArray(this.spanSelection) &&
-        this.isAnnotationInEditMode(this.annotationId())
+        this.isAnnotationInEditMode(this.currentAnnotationId())
       );
     },
     isAnnotation() {
@@ -247,7 +253,7 @@ export default {
         this.annotation &&
         !this.isNegative(this.annotation) &&
         this.isAnnotationInEditMode(
-          this.annotationId(),
+          this.currentAnnotationId(),
           this.editAnnotation.index
         )
       );
@@ -283,41 +289,8 @@ export default {
     },
   },
   watch: {
-    sidebarAnnotationSelected(newSidebarAnnotationSelected) {
-      if (!newSidebarAnnotationSelected) return;
-
-      let annotationSelected;
-
-      if (newSidebarAnnotationSelected.annotation) {
-        annotationSelected = newSidebarAnnotationSelected.annotation;
-      } else {
-        annotationSelected = newSidebarAnnotationSelected;
-      }
-
-      if (
-        this.annotation &&
-        !this.isNegative(this.annotation) &&
-        this.annotation.id === annotationSelected.id
-      ) {
-        clearTimeout(this.annotationAnimationTimeout);
-
-        this.isSelected = true;
-        // remove annotation selection after some time
-        this.annotationAnimationTimeout = setTimeout(() => {
-          this.$store.dispatch("document/setSidebarAnnotationSelected", null);
-          this.isSelected = false;
-        }, 1200);
-
-        // Check if sidebarAnnotationSelected changed from a click or hover
-        const runAnimation = () => {
-          this.$el.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest",
-          });
-        };
-        runAnimation();
-      }
+    annotationId(newAnnotationId) {
+      this.checkAnnotationSelection(newAnnotationId);
     },
     editAnnotation(newValue) {
       if (!newValue) {
@@ -346,7 +319,7 @@ export default {
     selectedEntities(newValue) {
       if (!newValue) return;
 
-      if (this.isAnnotationInEditMode(this.annotationId())) {
+      if (this.isAnnotationInEditMode(this.currentAnnotationId())) {
         this.isLoading = true;
       }
     },
@@ -358,8 +331,38 @@ export default {
       }
     },
   },
+  mounted() {
+    this.checkAnnotationSelection(this.annotationId);
+  },
   methods: {
-    annotationId() {
+    checkAnnotationSelection(newAnnotationId) {
+      if (
+        newAnnotationId &&
+        this.annotation &&
+        !this.isNegative(this.annotation) &&
+        this.annotation.id == newAnnotationId
+      ) {
+        this.isSelected = true;
+        // remove annotation selection after some time
+        // this.annotationAnimationTimeout = setTimeout(() => {
+        //   this.$store.dispatch("document/setSidebarAnnotationSelected", null);
+        //   this.isSelected = false;
+        // }, 1200);
+
+        // Check if sidebarAnnotationSelected changed from a click or hover
+        const runAnimation = () => {
+          this.$el.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+          });
+        };
+        runAnimation();
+      } else {
+        this.isSelected = false;
+      }
+    },
+    currentAnnotationId() {
       if (!this.annotationSet || !this.label) return;
 
       if (
@@ -439,10 +442,17 @@ export default {
         return null;
       }
     },
+    showLinkButton() {
+      return (
+        !this.editAnnotation &&
+        this.annotation &&
+        this.hoveredAnnotation === this.annotation.id
+      );
+    },
     showAcceptButton() {
       return (
         !this.editAnnotation &&
-        !this.isAnnotationInEditMode(this.annotationId()) &&
+        !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
         !this.isNegative(this.annotation) &&
         !this.annotation.is_correct &&
@@ -452,7 +462,7 @@ export default {
     showDeclineButton() {
       return (
         !this.editAnnotation &&
-        !this.isAnnotationInEditMode(this.annotationId()) &&
+        !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotation &&
         !this.isNegative(this.annotation) &&
         this.hoveredAnnotation === this.annotation.id
@@ -462,7 +472,7 @@ export default {
       return (
         !this.editAnnotation &&
         this.hoveredAnnotation &&
-        !this.isAnnotationInEditMode(this.annotationId()) &&
+        !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         (!this.annotation || this.isNegative(this.annotation)) &&
         !this.annotationIsNotFound(this.annotationSet, this.label)
       );
@@ -471,13 +481,13 @@ export default {
       return (
         !this.editAnnotation &&
         this.hoveredAnnotation &&
-        !this.isAnnotationInEditMode(this.annotationId()) &&
+        !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotationIsNotFound(this.annotationSet, this.label)
       );
     },
     showCancelButton() {
       if (!this.editAnnotation || this.isLoading) return;
-      if (this.isAnnotationInEditMode(this.annotationId())) {
+      if (this.isAnnotationInEditMode(this.currentAnnotationId())) {
         return true;
       }
     },
@@ -488,10 +498,10 @@ export default {
       if (this.isAnnotation) {
         return true;
       } else {
-        if (!this.isAnnotationInEditMode(this.annotationId())) return;
+        if (!this.isAnnotationInEditMode(this.currentAnnotationId())) return;
 
         return (
-          this.elementSelected === this.annotationId() &&
+          this.elementSelected === this.currentAnnotationId() &&
           this.spanSelection &&
           Array.isArray(this.spanSelection)
         );
@@ -522,7 +532,7 @@ export default {
         (this.showAcceptButton() ||
           this.showDeclineButton() ||
           this.isAnnotationInEditMode(
-            this.annotationId(),
+            this.currentAnnotationId(),
             this.editAnnotation.index
           ))
       ) {
@@ -560,7 +570,7 @@ export default {
         }
       } else if (
         (!this.annotation || this.isNegative(this.annotation)) &&
-        this.isAnnotationInEditMode(this.annotationId())
+        this.isAnnotationInEditMode(this.currentAnnotationId())
       ) {
         this.saveEmptyAnnotationChanges();
       }
@@ -749,6 +759,12 @@ export default {
       this.$store.dispatch("display/enableSearch", true);
       this.$store.dispatch("display/setCurrentSearch", this.label.name);
     },
+    selectAnnotation(event) {
+      event.stopPropagation();
+      if (this.annotation) {
+        this.$store.dispatch("document/setAnnotationId", this.annotation.id);
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="document-annotations">
+  <div id="document-annotations" @click="cleanSelection">
     <!-- When extracting annotations after editing -->
     <div v-if="recalculatingAnnotations" class="extracting-data">
       <ExtractingData />
@@ -186,6 +186,8 @@ export default {
     ...mapState("document", [
       "annotationSets",
       "documentId",
+      "annotationId",
+      "annotationSetId",
       "recalculatingAnnotations",
       "publicView",
       "editAnnotation",
@@ -193,7 +195,6 @@ export default {
       "labels",
       "selectedDocument",
       "splittingSuggestions",
-      "sidebarAnnotationSelected",
     ]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
@@ -203,6 +204,7 @@ export default {
       "annotationSetsInTable",
       "isDocumentReviewed",
       "annotationSetOfAnnotation",
+      "isAnnotationInAnnotationSet",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -229,9 +231,9 @@ export default {
         oldAnnotationSets
       );
     },
-    sidebarAnnotationSelected(annotation) {
-      if (annotation) {
-        const annotationSet = this.annotationSetOfAnnotation(annotation);
+    annotationId(newAnnotationId) {
+      if (newAnnotationId) {
+        const annotationSet = this.annotationSetOfAnnotation(newAnnotationId);
         if (annotationSet) {
           const index = this.annotationSets.findIndex(
             (annotationSetToFind) => annotationSetToFind.id === annotationSet.id
@@ -303,7 +305,16 @@ export default {
               newAnnotationSet.id &&
               newAnnotationSet.id === annotationSetOpened.id
           );
-          if (isFirstTime && index === 0) {
+          if (isFirstTime && this.annotationSetId) {
+            newAnnotationSetsAccordion[index] =
+              newAnnotationSet.id == this.annotationSetId;
+          } else if (isFirstTime && this.annotationId) {
+            newAnnotationSetsAccordion[index] =
+              this.isAnnotationInAnnotationSet(
+                newAnnotationSet,
+                this.annotationId
+              );
+          } else if (isFirstTime && index === 0) {
             // open first one by default
             newAnnotationSetsAccordion[index] = true;
           } else if (wasOpen) {
@@ -647,6 +658,9 @@ export default {
         this.$store.dispatch("display/showAnnSetTable", tableSet);
       }
     },
+    cleanSelection() {
+      this.$store.dispatch("document/setAnnotationId", null);
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -86,7 +86,7 @@ export default {
   },
   computed: {
     ...mapState("document", [
-      "sidebarAnnotationSelected",
+      "annotationId",
       "enableGroupingFeature",
       "hoveredAnnotationSet",
       "publicView",
@@ -103,37 +103,8 @@ export default {
     },
   },
   watch: {
-    sidebarAnnotationSelected(newSidebarAnnotationSelected) {
-      // check if annotation is inside a label group and open it
-      if (
-        this.enableGroupingFeature &&
-        !this.showAnnotationsGroup &&
-        newSidebarAnnotationSelected
-      ) {
-        let annotationSelected;
-
-        if (newSidebarAnnotationSelected.annotation) {
-          annotationSelected = newSidebarAnnotationSelected.annotation;
-        } else {
-          annotationSelected = newSidebarAnnotationSelected;
-        }
-
-        const annotation = this.label.annotations.find(
-          (ann) => ann.id === annotationSelected.id
-        );
-
-        if (annotation) {
-          this.showAnnotationsGroup = true;
-          this.$store.dispatch("document/setSidebarAnnotationSelected", null);
-          // run in next render because we need to open the group first
-          this.$nextTick(() => {
-            this.$store.dispatch(
-              "document/setSidebarAnnotationSelected",
-              annotation
-            );
-          });
-        }
-      }
+    annotationId(newAnnotationId) {
+      this.checkAnnotationSelected(newAnnotationId);
     },
     hoveredAnnotationSet(newValue) {
       // Check if there are some unrevised Annotations within the group
@@ -148,6 +119,7 @@ export default {
   },
   mounted() {
     this.updateValues();
+    this.checkAnnotationSelected(this.annotationId);
 
     if (this.publicView) {
       this.showAnnotationsGroup = true;
@@ -157,6 +129,30 @@ export default {
     this.updateValues();
   },
   methods: {
+    checkAnnotationSelected(newAnnotationId) {
+      // check if annotation is inside a label group and open it
+      if (
+        this.enableGroupingFeature &&
+        !this.showAnnotationsGroup &&
+        newAnnotationId
+      ) {
+        const annotation = this.label.annotations.find(
+          (ann) => ann.id == newAnnotationId
+        );
+
+        if (annotation) {
+          this.showAnnotationsGroup = true;
+          // this.$store.dispatch("document/setSidebarAnnotationSelected", null);
+          // // run in next render because we need to open the group first
+          // this.$nextTick(() => {
+          //   this.$store.dispatch(
+          //     "document/setSidebarAnnotationSelected",
+          //     annotation
+          //   );
+          // });
+        }
+      }
+    },
     toggleGroup() {
       this.showAnnotationsGroup = !this.showAnnotationsGroup;
     },

package/src/components/DocumentDashboard.vue

@@ -34,6 +34,9 @@
     <div v-if="!optimalResolution" class="not-optimized">
       <NotOptimizedViewportModal />
     </div>
+    <div>
+      <AnnotationDeletedModal />
+    </div>
     <div v-if="!isMinimumWidth" class="not-supported">
       <div class="text">
         {{ $t("resolution_not_supported") }}
@@ -54,6 +57,7 @@ import {
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
+import AnnotationDeletedModal from "../components/DocumentModals/AnnotationDeletedModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
 import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
 
@@ -74,6 +78,7 @@ export default {
     DocumentErrorModal,
     MultiAnnotationTableOverlay,
     ChooseLabelSetModal,
+    AnnotationDeletedModal,
   },
   data() {
     return {

package/src/components/DocumentModals/AnnotationDeletedModal.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="viewport-modal">
+    <b-modal
+      v-model="isModalActive"
+      class="modal-text-center"
+      :width="500"
+      :can-cancel="false"
+    >
+      <section class="modal-card-body">
+        <div class="content">
+          <h3>{{ $t("annotation_deleted") }}</h3>
+        </div>
+      </section>
+      <footer class="modal-card-foot" style="padding-top: 0">
+        <b-button type="is-primary" class="primary-button" @click="closeModal">
+          {{ $t("ok") }}
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AnnotationDeletedModal",
+  data() {
+    return {
+      isModalActive: window.location.hash === "#deleted",
+    };
+  },
+  methods: {
+    closeModal() {
+      window.location.hash = "";
+      this.isModalActive = false;
+    },
+  },
+};
+</script>

package/src/components/DocumentPage/DocumentPage.vue

@@ -429,7 +429,7 @@ export default {
     },
 
     handleFocusedAnnotation(annotation) {
-      this.$store.dispatch("document/setSidebarAnnotationSelected", annotation);
+      this.$store.dispatch("document/setAnnotationId", annotation.id);
       this.closePopups(true);
     },