@konfuzio/document-validation-ui 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "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

@@ -280,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 {
@@ -312,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/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>

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."
 }