@konfuzio/document-validation-ui 0.1.50 → 0.1.51-dev.1

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -1,162 +1,217 @@
 <template>
   <div class="action-buttons">
-    <!-- loading -->
+    <!-- link button -->
     <b-button
-      v-if="linkBtn"
+      v-if="showLink"
       id="annotation-link-btn"
       type="is-ghost"
-      class="link-button"
-      @click="copyAnnotationLink"
+      class="button-action is-button-icon"
+      @click.stop="link"
     >
-      <b-tooltip position="is-left" :label="$t('annotation_link')">
-        <b-icon size="is-20" icon="link" />
+      <b-tooltip
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('annotation_link')"
+      >
+        <b-icon icon="link" class="link-icon center-icon button-icon" />
       </b-tooltip>
     </b-button>
-    <div v-if="isLoading">
-      <b-notification :closable="false" class="loading-background">
-        <b-loading :active="isLoading" :is-full-page="false">
-          <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
-        </b-loading>
-      </b-notification>
-    </div>
 
-    <!-- save button -->
+    <!-- decline button -->
     <b-button
-      v-if="saveBtn && !isLoading && !publicView && !isDocumentReviewed"
-      :class="[
-        'annotation-save-btn text-btn',
-        actionBar && 'action-bar-save-btn',
-        actionBar ? 'tertiary-button' : 'primary-button',
-      ]"
-      type="is-primary"
-      @click.stop="save"
+      v-if="showDecline"
+      class="button-action is-button-icon decline-btn"
+      type="is-ghost"
+      @click.stop="decline"
     >
-      <span v-if="showText">{{ $t("save") }}</span>
-      <b-tooltip v-else position="is-left" :label="$t('save')">
-        <b-icon icon="floppy-disk" size="small" class="button-icon" />
+      <b-tooltip
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('decline')"
+      >
+        <b-icon icon="ban" class="decline-icon center-icon button-icon" />
       </b-tooltip>
     </b-button>
 
-    <!-- cancel button -->
+    <!-- accept button -->
     <b-button
-      v-if="cancelBtn && !isLoading && !isDocumentReviewed"
-      class="is-small annotation-cancel-btn"
-      icon-left="xmark"
-      @click.stop="cancel"
-    />
-
-    <div v-if="showHoverButton" class="accept-decline-container">
-      <b-button
-        v-if="declineBtn"
-        class="decline-btn"
-        :title="$t('decline')"
-        type="is-ghost"
-        @click.stop="decline"
+      v-if="showAccept"
+      :class="`button-action accept-btn ${
+        showText ? 'is-button-text' : 'is-button-icon'
+      }`"
+      :type="showText ? 'is-primary' : 'is-ghost'"
+      @click.stop="accept"
+    >
+      <span v-if="showText" class="button-text">{{ $t("accept") }}</span>
+      <b-tooltip
+        v-else
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('accept')"
       >
-        <b-icon icon="xmark" size="is-20" class="decline-icon" />
-      </b-button>
-      <b-button
-        v-if="acceptBtn"
-        class="accept-btn"
-        :title="$t('accept')"
-        type="is-ghost"
-        @click.stop="accept"
+        <b-icon
+          icon="circle-check"
+          class="accept-icon center-icon button-icon"
+        />
+      </b-tooltip>
+    </b-button>
+
+    <!-- search button -->
+    <b-button
+      v-if="showSearch"
+      type="is-ghost"
+      :class="`button-action ${
+        showText ? 'is-button-text-ghost' : 'is-button-icon'
+      }`"
+      @click.stop="search"
+    >
+      <span v-if="showText" class="button-text">{{
+        $t("search_in_document")
+      }}</span>
+      <b-tooltip
+        v-else
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('search_in_document')"
       >
-        <AcceptedCheckMark />
-      </b-button>
-    </div>
+        <b-icon icon="search" class="center-icon button-icon search-icon" />
+      </b-tooltip>
+    </b-button>
+
     <!-- missing button -->
-    <div
-      v-if="showMissingBtn && showHoverButton"
-      class="missing-button-container"
+    <b-button
+      v-if="showMissing"
+      type="is-ghost"
+      :class="`button-action ${
+        showText ? 'is-button-text-ghost' : 'is-button-icon'
+      }`"
+      @click.stop="markAsMissing"
     >
-      <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
-        <span v-if="showText">{{ $t("missing_annotation") }}</span>
-        <b-tooltip v-else position="is-left" :label="$t('missing_annotation')">
-          <b-icon icon="xmark" size="is-small" class="button-icon" />
-        </b-tooltip>
-      </b-button>
-      <b-button
-        type="is-ghost"
-        class="search-btn"
-        @click.stop="searchInDocument"
+      <span v-if="showText" class="button-text">{{
+        $t("missing_annotation")
+      }}</span>
+      <b-tooltip
+        v-else
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('missing_annotation')"
       >
-        <span v-if="showText">{{ $t("search_in_document") }}</span>
-        <b-tooltip v-else position="is-left" :label="$t('search_in_document')">
-          <b-icon icon="search" size="is-small" class="button-icon" />
-        </b-tooltip>
-      </b-button>
-    </div>
+        <b-icon
+          icon="magnifying-glass-minus"
+          class="center-icon button-icon missing-icon"
+        />
+      </b-tooltip>
+    </b-button>
+
+    <!-- save button -->
+    <b-button
+      v-if="showSave"
+      :class="`button-action ${showText ? 'is-button-text' : 'is-button-icon'}`"
+      :type="showText ? 'is-primary' : 'is-ghost'"
+      @click.stop="save"
+    >
+      <span v-if="showText" class="button-text">{{ $t("save") }}</span>
+      <b-tooltip
+        v-else
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('save')"
+      >
+        <b-icon icon="floppy-disk" class="button-icon center-icon save-icon" />
+      </b-tooltip>
+    </b-button>
 
     <!-- Restore not found annotations -->
     <b-button
-      v-if="restoreBtn && !isLoading && !publicView && !isDocumentReviewed"
-      class="restore-btn"
-      type="is-primary"
+      v-if="showRestore"
+      :class="`button-action restore-btn ${
+        showText ? 'is-button-text' : 'is-button-icon'
+      }`"
+      :type="showText ? 'is-primary' : 'is-ghost'"
       @click.stop="restore"
     >
-      <span v-if="showText">{{ $t("restore") }}</span>
-      <b-tooltip v-else position="is-left" :label="$t('restore')">
-        <b-icon icon="trash-arrow-up" size="is-small" class="button-icon" />
+      <span v-if="showText" class="button-text">{{ $t("restore") }}</span>
+      <b-tooltip
+        v-else
+        :delay="tooltipDelay"
+        position="is-left"
+        :label="$t('restore')"
+      >
+        <b-icon
+          icon="trash-arrow-up"
+          class="center-icon button-icon restore-icon"
+        />
       </b-tooltip>
     </b-button>
+
+    <!-- cancel button -->
+    <b-button
+      v-if="showCancel"
+      class="button-action is-button-icon"
+      :title="$t('cancel')"
+      type="is-ghost"
+      @click.stop="cancel"
+    >
+      <b-icon icon="xmark" class="cancel-icon center-icon button-icon" />
+    </b-button>
+
+    <!-- loading -->
+    <b-icon v-if="isLoading" icon="spinner" class="fa-spin spinner-icon" />
   </div>
 </template>
 <script>
 /* Component for showing actions for each annotation row */
 import { mapGetters, mapState } from "vuex";
-import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import { TEXT_BREAKPOINT_WIDTH } from "../../constants";
 export default {
   name: "AnnotationActionButtons",
-  components: {
-    AcceptedCheckMark,
-  },
   props: {
     annotation: {
       type: Object,
       default: null,
     },
-    saveBtn: {
+    label: {
+      type: Object,
+      default: null,
+    },
+    isLoading: {
       type: Boolean,
     },
-    cancelBtn: {
+    showSave: {
       type: Boolean,
     },
-    showMissingBtn: {
+    showCancel: {
       type: Boolean,
     },
-    isLoading: {
+    showMissing: {
       type: Boolean,
     },
-    acceptBtn: {
+    showAccept: {
       type: Boolean,
     },
-    declineBtn: {
+    showDecline: {
       type: Boolean,
     },
-    actionBar: {
+    showRestore: {
       type: Boolean,
-      required: false,
     },
-    restoreBtn: {
+    showLink: {
       type: Boolean,
-      required: false,
     },
-    linkBtn: {
+    showSearch: {
       type: Boolean,
-      required: false,
     },
   },
   data() {
     return {
+      tooltipDelay: 700,
       showText:
         window.innerWidth >
         TEXT_BREAKPOINT_WIDTH(this.$i18n ? this.$i18n.locale : "en"),
     };
   },
   computed: {
-    ...mapState("document", ["publicView", "missingAnnotations"]),
+    ...mapState("document", ["publicView"]),
     ...mapGetters("document", ["isDocumentReviewed"]),
     showHoverButton() {
       return (
@@ -176,21 +231,13 @@ 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(this.$i18n.locale);
     },
+    search() {
+      this.$emit("search");
+    },
     save() {
       this.$emit("save");
     },
@@ -209,8 +256,8 @@ export default {
     restore() {
       this.$emit("restore");
     },
-    searchInDocument() {
-      this.$emit("search-label-in-document");
+    link() {
+      this.$emit("link");
     },
   },
 };
@@ -219,5 +266,5 @@ export default {
 <style
   scoped
   lang="scss"
-  src="../../assets/scss/document_annotations.scss"
+  src="../../assets/scss/annotation_action_buttons.scss"
 ></style>

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -13,8 +13,21 @@
     @mouseover="hoveredAnnotation = currentAnnotationId()"
     @mouseleave="hoveredAnnotation = null"
   >
+    <div class="annotations-width-slider">
+      <b-slider
+        :value="labelWidth"
+        type="is-move"
+        :min="20"
+        :max="80"
+        :custom-formatter="(val) => `${$t('label_size')} ${val}%`"
+        class="is-full-height show-hover show-line"
+        :disabled="isAnnotationInEditMode()"
+        @input="setLabelWidth"
+      />
+    </div>
     <div
       class="annotation-row-left"
+      :style="`width:${labelWidth}%`"
       @mouseenter="onAnnotationHoverEnter(defaultSpan)"
       @mouseleave="onAnnotationHoverLeave"
     >
@@ -82,7 +95,8 @@
         </b-tooltip>
       </div>
     </div>
-    <div class="annotation-row-right">
+
+    <div class="annotation-row-right" :style="`width:${annotationWidth}%`">
       <div class="annotation-content">
         <div v-if="annotation" class="annotation-items">
           <b-checkbox
@@ -144,16 +158,22 @@
           />
         </div>
       </div>
-      <div class="buttons-container">
+      <div
+        v-if="showAnnotationActions()"
+        :class="`buttons-container ${
+          isAnnotationInEditMode(currentAnnotationId()) ? 'is-ann-editing' : ''
+        }`"
+      >
         <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()"
+          :show-cancel="showCancelButton()"
+          :show-accept="showAcceptButton()"
+          :show-decline="showDeclineButton()"
+          :show-missing="showMissingButton()"
+          :show-search="showMissingButton()"
+          :show-save="showSaveButton()"
+          :show-restore="showRestoreButton()"
+          :show-link="showLinkButton()"
           :is-loading="isLoading"
           @mark-as-missing="handleMissingAnnotation"
           @save="handleSaveChanges"
@@ -161,14 +181,15 @@
           @decline="handleSaveChanges(true)"
           @cancel="handleCancelButton"
           @restore="handleRestore"
-          @search-label-in-document="searchLabelInDocument"
+          @search="searchLabelInDocument"
+          @link="copyAnnotationLink"
         />
       </div>
     </div>
   </div>
 </template>
 <script>
-import { mapGetters, mapState } from "vuex";
+import { mapActions, mapGetters, mapState } from "vuex";
 import AnnotationDetails from "./AnnotationDetails";
 import AnnotationContent from "./AnnotationContent";
 import EmptyAnnotation from "./EmptyAnnotation";
@@ -243,6 +264,7 @@ export default {
       "elementSelected",
       "selectedEntities",
     ]),
+    ...mapState("display", ["labelWidth", "annotationWidth"]),
     ...mapState("project", ["showAnnotationTranslations"]),
     ...mapGetters("document", [
       "isAnnotationInEditMode",
@@ -363,6 +385,7 @@ export default {
     this.checkAnnotationSelection(this.annotationId);
   },
   methods: {
+    ...mapActions("display", ["setLabelWidth"]),
     handleCheckboxChanged(value) {
       this.$store
         .dispatch("document/updateAnnotation", {
@@ -475,6 +498,20 @@ export default {
         return null;
       }
     },
+    showAnnotationActions() {
+      return (
+        !this.publicView &&
+        !this.isDocumentReviewed &&
+        (this.isLoading ||
+          this.showLinkButton() ||
+          this.showAcceptButton() ||
+          this.showDeclineButton() ||
+          this.showMissingButton() ||
+          this.showCancelButton() ||
+          this.showSaveButton() ||
+          this.showRestoreButton())
+      );
+    },
     showLinkButton() {
       return (
         !this.editAnnotation &&
@@ -512,18 +549,19 @@ export default {
       return (
         !this.editAnnotation &&
         this.hoveredAnnotation &&
+        !this.isLoading &&
         !this.isAnnotationInEditMode(this.currentAnnotationId()) &&
         this.annotationIsNotFound(this.annotationSet, this.label)
       );
     },
     showCancelButton() {
-      if (!this.editAnnotation || this.isLoading) return;
-      if (this.isAnnotationInEditMode(this.currentAnnotationId())) {
-        return true;
+      if (!this.editAnnotation || this.isLoading) {
+        return false;
       }
+      return this.isAnnotationInEditMode(this.currentAnnotationId());
     },
     showSaveButton() {
-      if (!this.editAnnotation || this.isLoading) return;
+      if (!this.editAnnotation || this.isLoading) return false;
 
       // Check if it's an Annotation or Empty Annotation
       if (this.isAnnotation) {
@@ -590,7 +628,7 @@ export default {
         if (showAiWarning) {
           this.$buefy.dialog.confirm({
             container: "#app .dv-ui-app-container",
-            canCancel: "button",
+            canCancel: ["button"],
             message: this.$t("edit_ann_content_warning"),
             onConfirm: () => this.saveAnnotationChanges(spans, decline),
             onCancel: () => this.handleCancelButton(),
@@ -632,7 +670,9 @@ export default {
     saveAnnotationChanges(spans, isToDecline) {
       // This function deals with declining Annotations
       // or editing an Annotation or a part of it (if multi line)
-      this.isLoading = true;
+      setTimeout(() => {
+        this.isLoading = true;
+      }, 100);
 
       let updatedString; // what will be sent to the API
       let storeAction; // if it will be 'delete' or 'patch'
@@ -719,6 +759,7 @@ export default {
         this.$store.dispatch("selection/disableSelection");
         this.$store.dispatch("selection/setSelectedEntities", null);
       }
+      this.isLoading = false;
     },
     enableLoading(annotations) {
       if (annotations && this.annotation && !this.annotation.is_correct) {
@@ -778,8 +819,20 @@ export default {
       window.open(annotationDetailsUrl, "_blank");
     },
     searchLabelInDocument() {
-      this.$store.dispatch("display/enableSearch", true);
-      this.$store.dispatch("display/setCurrentSearch", this.label.name);
+      if (this.label) {
+        this.$store.dispatch("display/enableSearch", true);
+        this.$store.dispatch("display/setCurrentSearch", this.label.name);
+      }
+    },
+    copyAnnotationLink() {
+      if (this.annotation) {
+        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"),
+        });
+      }
     },
     selectAnnotation(event) {
       event.stopPropagation();

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -8,7 +8,7 @@
     >
       <b-button
         type="is-ghost"
-        class="missing-btn all-missing-btn"
+        class="button-action is-button-text-ghost"
         :disabled="numberOfEmptyLabelsInAnnotationSet === 0"
         @click="markAllAsMissing"
       >
@@ -25,8 +25,8 @@
       @mouseleave="mouseleaveAnnotationSet"
     >
       <b-button
-        type="is-primary"
-        class="accept-all-btn"
+        type="is-ghost"
+        class="button-action is-button-text-ghost accept-all-icon"
         :disabled="numberOfNotCorrectAnnotationsInAnnotationSet === 0"
         @click="acceptAllPending"
       >
@@ -95,5 +95,5 @@ export default {
 <style
   scoped
   lang="scss"
-  src="../../assets/scss/document_annotations.scss"
+  src="../../assets/scss/annotation_action_buttons.scss"
 ></style>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -28,7 +28,7 @@
       <EmptyState />
     </div>
 
-    <div v-else ref="annotationList" :class="['annotation-set-list']">
+    <div v-else ref="annotationList" class="annotation-set-list">
       <AnnotationFilters
         v-if="isDocumentEditable"
         @openAll="openAllAccordions"
@@ -43,7 +43,7 @@
       >
         <EmptyState :is-search="true" />
       </div>
-      <div v-if="annotationSetsAccordion">
+      <div v-if="annotationSetsAccordion" class="annotation-sets-accordions">
         <div
           v-for="(
             annotationSet, indexGroup
@@ -51,6 +51,7 @@
           :key="indexGroup"
           :class="[
             'annotation-set-group',
+            indexGroup === 0 && 'no-top-margin',
             !isAccordionOpen(annotationSet) && 'annotation-set-collapsed',
           ]"
         >
@@ -105,7 +106,10 @@
           </div>
 
           <b-collapse :open="isAccordionOpen(annotationSet)">
-            <div v-if="annotationSet.labels.length > 0">
+            <div
+              v-if="annotationSet.labels.length > 0"
+              class="annotation-sets-list"
+            >
               <div v-for="label in annotationSet.labels" :key="label.id">
                 <div
                   v-if="!(label.annotations.length === 0 && publicView)"