@konfuzio/document-validation-ui 0.1.34 → 0.1.35-dev.1

package/package.json

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

package/src/assets/scss/annotation_details.scss

@@ -56,6 +56,9 @@
       word-wrap: break-all;
       white-space: normal;
       width: 216px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
 
     .confidence {

package/src/assets/scss/document_annotations.scss

@@ -269,6 +269,7 @@
               width: 60%;
               display: flex;
               align-items: center;
+              padding-right: 12px;
 
               .notification {
                 background-color: transparent;
@@ -279,12 +280,17 @@
                 font-size: 14px;
                 line-height: 20px;
                 font-weight: 400;
+                padding: 0 8px;
 
                 .annotation,
                 .empty-annotation {
                   min-height: 36px;
                   display: flex;
                   align-items: center;
+
+                  .annotation-checkbox {
+                    margin-right: 0px;
+                  }
                 }
 
                 .loading-container {
@@ -311,7 +317,7 @@
               .annotation-value {
                 display: inline-block;
                 color: $text;
-                padding: 0 8px;
+                padding: 0;
                 border: none;
                 background-color: transparent;
                 inline-size: 100%;

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -1,5 +1,10 @@
 <template>
   <div :id="annotation.id" ref="annotation" class="annotation">
+    <b-checkbox
+      v-if="annotation.metadata && annotation.metadata.checkbox"
+      v-model="isChecked"
+      class="annotation-checkbox"
+    />
     <span
       :id="annotation.id"
       ref="contentEditable"
@@ -56,8 +61,16 @@ export default {
     },
   },
   data() {
+    const checkboxValue =
+      this.annotation &&
+      this.annotation.metadata &&
+      this.annotation.metadata.checkbox &&
+      this.annotation.metadata.checkbox.is_checked;
     return {
       isLoading: false,
+      checkboxDefaultValue: checkboxValue,
+      isCheckboxAvailable: false,
+      isChecked: checkboxValue,
     };
   },
   computed: {
@@ -91,9 +104,50 @@ export default {
       // span content changed, ex. from click on entity
       this.setText(this.span.offset_string);
     },
+    isChecked() {
+      if (this.isCheckboxAvailable) {
+        this.handleCheckboxChanged(this.isChecked);
+      } else {
+        if (this.isChecked !== this.checkboxDefaultValue) {
+          this.$buefy.dialog.confirm({
+            container: "#app .dv-ui-app-container",
+            canCancel: ["button"],
+            message: this.$t("edit_ann_content_warning"),
+            onConfirm: () => {
+              this.isCheckboxAvailable = true;
+              this.handleCheckboxChanged(this.isChecked);
+            },
+            onCancel: () => {
+              this.isChecked = !this.isChecked;
+            },
+          });
+        }
+      }
+    },
   },
 
   methods: {
+    handleCheckboxChanged(value) {
+      this.$store
+        .dispatch("document/updateAnnotation", {
+          updatedValues: {
+            metadata: {
+              checkbox: {
+                is_checked: value,
+              },
+            },
+          },
+          annotationId: this.annotation.id,
+          annotationSet: this.annotationSet,
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("edit_error"),
+          });
+        });
+    },
     setText(text) {
       this.$refs.contentEditable.textContent = text;
     },

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -1,135 +1,149 @@
 <template>
-  <b-tooltip
-    :animated="false"
-    :position="fromTable ? 'is-top' : 'is-bottom'"
-    :class="[!fromTable && 'left-aligned', 'annotation-details']"
-  >
-    <div :class="['label-icon', fromTable && 'is-small']">
-      <div
-        v-if="
-          (created(annotation) || edited(annotation)) &&
-          !isNegative(annotation) &&
-          !publicView
-        "
-      >
+  <div>
+    <b-tooltip
+      :animated="false"
+      :position="fromTable ? 'is-top' : 'is-bottom'"
+      :class="[!fromTable && 'left-aligned', 'annotation-details']"
+    >
+      <div :class="['label-icon', fromTable && 'is-small']">
         <div
-          :class="[
-            'annotation-details-icon',
-            animate ? 'animated-ripple' : '',
-            'user-icon',
-          ]"
-        >
-          <AcceptedUser />
-        </div>
-      </div>
-      <div
-        v-else-if="annotationIsNotFound(annotationSet, label) && !publicView"
-        :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
-      >
-        <NotFoundIcon />
-      </div>
-      <div
-        v-else-if="
-          notExtracted(annotation) || (isNegative(annotation) && !publicView)
-        "
-        :class="[
-          'annotation-details-icon',
-          animate ? 'animated-ripple' : '',
-          'question-icon',
-        ]"
-      >
-        <QuestionMark />
-      </div>
-      <div v-else>
-        <div
-          v-if="accepted(annotation) && !publicView"
-          :class="[
-            'annotation-details-icon success',
-            animate ? 'animated-ripple' : '',
-          ]"
+          v-if="
+            (created(annotation) || edited(annotation)) &&
+            !isNegative(annotation) &&
+            !publicView
+          "
         >
-          <AcceptedCheckMark />
+          <div
+            :class="[
+              'annotation-details-icon',
+              animate ? 'animated-ripple' : '',
+              'user-icon',
+            ]"
+          >
+            <AcceptedUser />
+          </div>
         </div>
         <div
-          v-else
+          v-else-if="annotationIsNotFound(annotationSet, label) && !publicView"
           :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
         >
-          <CheckMark class="pending" />
-        </div>
-      </div>
-    </div>
-
-    <template #content>
-      <div class="label-details">
-        <div v-if="description" class="label-description">
-          <span>{{ description }}</span>
+          <NotFoundIcon />
         </div>
         <div
-          v-if="confidence(annotation) && !isNegative(annotation)"
-          :class="['confidence', publicView && 'tooltip-in-public-view']"
+          v-else-if="
+            notExtracted(annotation) || (isNegative(annotation) && !publicView)
+          "
+          :class="[
+            'annotation-details-icon',
+            animate ? 'animated-ripple' : '',
+            'question-icon',
+          ]"
         >
-          <span>{{ $t("confidence") }}</span
-          ><span
+          <QuestionMark />
+        </div>
+        <div v-else>
+          <div
+            v-if="accepted(annotation) && !publicView"
+            :class="[
+              'annotation-details-icon success',
+              animate ? 'animated-ripple' : '',
+            ]"
+          >
+            <AcceptedCheckMark />
+          </div>
+          <div
+            v-else
             :class="[
-              'value',
-              confidence(annotation) <= 0.2
-                ? 'red'
-                : confidence(annotation) <= 0.5
-                ? 'yellow'
-                : '',
+              'annotation-details-icon',
+              animate ? 'animated-ripple' : '',
             ]"
-            >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
           >
+            <CheckMark class="pending" />
+          </div>
         </div>
-        <div v-if="!publicView" class="revision">
-          <div class="detail-icons">
-            <div v-if="created(annotation) || edited(annotation)">
-              <div
-                :class="[
-                  'annotation-details-icon',
-                  animate ? 'animated-ripple' : '',
-                  'user-icon',
-                ]"
-              >
-                <AcceptedUser />
-              </div>
-            </div>
-            <div
-              v-else-if="notExtracted(annotation)"
+      </div>
+
+      <template #content>
+        <div class="label-details">
+          <div
+            v-if="
+              annotation && annotation.metadata && annotation.metadata.checkbox
+            "
+            class="label-description"
+          >
+            <b-icon size="is-small" icon="square-check" />
+            <span> {{ $t("checkbox_ann_details") }}</span>
+          </div>
+          <div v-if="description" class="label-description">
+            <span>{{ description }}</span>
+          </div>
+          <div
+            v-if="confidence(annotation) && !isNegative(annotation)"
+            :class="['confidence', publicView && 'tooltip-in-public-view']"
+          >
+            <span>{{ $t("confidence") }}</span
+            ><span
               :class="[
-                'annotation-details-icon',
-                animate ? 'animated-ripple' : '',
-                'question-icon',
+                'value',
+                confidence(annotation) <= 0.2
+                  ? 'red'
+                  : confidence(annotation) <= 0.5
+                  ? 'yellow'
+                  : '',
               ]"
+              >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
             >
-              <QuestionMark />
-            </div>
-            <div v-else>
-              <div
-                v-if="accepted(annotation)"
-                :class="[
-                  'annotation-details-icon',
-                  animate ? 'animated-ripple' : '',
-                ]"
-              >
-                <AcceptedCheckMark />
+          </div>
+          <div v-if="!publicView" class="revision">
+            <div class="detail-icons">
+              <div v-if="created(annotation) || edited(annotation)">
+                <div
+                  :class="[
+                    'annotation-details-icon',
+                    animate ? 'animated-ripple' : '',
+                    'user-icon',
+                  ]"
+                >
+                  <AcceptedUser />
+                </div>
               </div>
               <div
-                v-else
+                v-else-if="notExtracted(annotation)"
                 :class="[
                   'annotation-details-icon',
                   animate ? 'animated-ripple' : '',
+                  'question-icon',
                 ]"
               >
-                <CheckMark />
+                <QuestionMark />
+              </div>
+              <div v-else>
+                <div
+                  v-if="accepted(annotation)"
+                  :class="[
+                    'annotation-details-icon',
+                    animate ? 'animated-ripple' : '',
+                  ]"
+                >
+                  <AcceptedCheckMark />
+                </div>
+                <div
+                  v-else
+                  :class="[
+                    'annotation-details-icon',
+                    animate ? 'animated-ripple' : '',
+                  ]"
+                >
+                  <CheckMark />
+                </div>
               </div>
+              {{ getText() }}
             </div>
-            {{ getText() }}
           </div>
         </div>
-      </div>
-    </template>
-  </b-tooltip>
+      </template>
+    </b-tooltip>
+  </div>
 </template>
 <script>
 import { mapGetters, mapState } from "vuex";

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -39,7 +39,11 @@
       </div>
 
       <div
-        v-if="showAnnotationTranslations"
+        v-if="
+          showAnnotationTranslations &&
+          annotation &&
+          annotation.translated_string
+        "
         :class="['annotation-translation', !isDocumentReviewed && 'pointer']"
         @click="editAnnotationTranslation(annotation.id)"
       >

package/src/components/DocumentPage/BoxSelection.vue

@@ -130,6 +130,7 @@ export default {
           this.selection.start,
           this.selection.end
         );
+        this.$emit("selectEntities", this.entitiesOnSelection(box, this.page));
         this.$store.dispatch("selection/getTextFromBboxes", {
           box,
           entities: false,

package/src/components/DocumentPage/DocumentPage.vue

@@ -112,6 +112,29 @@
                 />
               </v-group>
             </template>
+            <template
+              v-if="annotation.metadata && annotation.metadata.checkbox"
+            >
+              <v-group :key="'ann' + annotation.id + '-checkbox'">
+                <v-rect
+                  v-if="!isAnnotationInEditMode(annotation.id)"
+                  :config="
+                    annotationRect(
+                      annotation.metadata.checkbox.bbox,
+                      annotation.id
+                    )
+                  "
+                  @click="handleFocusedAnnotation(annotation)"
+                  @mouseenter="
+                    onElementEnter(
+                      annotation,
+                      annotation.metadata.checkbox.bbox
+                    )
+                  "
+                  @mouseleave="onElementLeave"
+                />
+              </v-group>
+            </template>
           </template>
         </template>
       </v-layer>
@@ -152,6 +175,7 @@
         <box-selection
           :page="page"
           @createAnnotations="handleCreateAnnotationsFromSelection"
+          @selectEntities="handleEntitiesFromSelection"
         />
       </v-layer>
       <v-layer v-if="isMultiSelection">
@@ -465,7 +489,6 @@ export default {
       )
         return;
       this.newAnnotation = [];
-      // this.endSelection();
 
       const normalizedEntities = this.scaledEntities(entities, this.page);
       if (normalizedEntities) {
@@ -482,6 +505,25 @@ export default {
       }
     },
 
+    handleEntitiesFromSelection(entities) {
+      if (
+        this.categorizeModalIsActive ||
+        this.publicView ||
+        this.isDocumentReviewed
+      )
+        return;
+
+      const normalizedEntities = this.scaledEntities(entities, this.page);
+      if (normalizedEntities.length > 0) {
+        this.$store.dispatch(
+          "selection/setSelectedEntities",
+          normalizedEntities
+        );
+      } else {
+        this.$store.dispatch("selection/setSelectedEntities", null);
+      }
+    },
+
     handleClickedEntity(entity) {
       if (
         !entity ||
@@ -603,8 +645,8 @@ export default {
      */
     entityRect(entity) {
       let entityIsSelected = false;
-      if (this.newAnnotation && this.newAnnotation.length > 0) {
-        entityIsSelected = this.newAnnotation.find((selectedEntity) => {
+      if (this.selectedEntities && this.selectedEntities.length > 0) {
+        entityIsSelected = this.selectedEntities.find((selectedEntity) => {
           return (
             selectedEntity.original &&
             selectedEntity.original.offset_string ===

package/src/icons.js

@@ -23,6 +23,7 @@ import {
   faFloppyDisk,
   faCircleExclamation,
   faLink,
+  faSquareCheck,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -49,7 +50,8 @@ library.add(
   faTrashArrowUp,
   faFloppyDisk,
   faCircleExclamation,
-  faLink
+  faLink,
+  faSquareCheck
 );
 
 export default Icons;

package/src/locales/de.json

@@ -160,5 +160,6 @@
   "edit_ann_content_warning": "Wenn Sie den Text ändern, kann die KI diese Annotation nicht verwenden. Dadurch werden auch die Trainingsdaten ungültig. Versuchen Sie, die Auswahl zu verändern, um den Text zu erfassen,bevor Sie ihn manuell hinzufügen, oder drücken Sie OK, um trotzdem fortzufahren.",
   "annotation_deleted": "Diese Annotation wurde gelöscht.",
   "annotation_link": "Kopieren Sie den permanenten Link zu dieser Annotationen",
-  "copied": "Kopiert"
+  "copied": "Kopiert",
+  "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert."
 }

package/src/locales/en.json

@@ -158,8 +158,9 @@
   "human_feedback_needed": "Human Feedback needed",
   "label_missing_annotations": "Missing Annotations",
   "accepted_annotations": "Accepted Annotations",
-  "edit_ann_content_warning": "If you change the text, the AI cannot use this Annotation. You will also invalidate the training data. Try to change the selection to capture the text before adding it manually, or press OK to continue anyway.",
+  "edit_ann_content_warning": "If you change the content, the AI cannot use this Annotation. You will also invalidate the training data. Try to change the selection to capture the content before adding it manually, or press OK to continue anyway.",
   "annotation_deleted": "This annotation has been deleted.",
   "annotation_link": "Copy the permanent link to this annotation",
-  "copied": "Copied"
+  "copied": "Copied",
+  "checkbox_ann_details": "A checkbox will be extracted for this label."
 }

package/src/locales/es.json

@@ -160,5 +160,6 @@
   "edit_ann_content_warning": "Si cambia el texto, la IA no puede utilizar esta anotación. También invalidarás los datos del entrenamiento. Intente cambiar la selección para capturar el texto antes de agregarlo manualmente, o presione OK para continuar de todos modos.",
   "annotation_deleted": "Esta anotación ha sido eliminada.",
   "annotation_link": "Copia el enlace permanente a esta anotación.",
-  "copied": "Copiada"
+  "copied": "Copiada",
+  "checkbox_ann_details": "Se extraerá una casilla de verificación para esta etiqueta."
 }