@konfuzio/document-validation-ui 0.1.59 → 0.2.0-dev.2

package/src/store/selection.js

@@ -9,30 +9,24 @@ const state = {
     pageNumber: null,
     start: null,
     end: null,
-    custom: false, // if the box was created by user in document or it comes from an annotation
-    placeholderBox: null, // show a not editable placeholder box
   },
   isSelecting: false,
-  spanSelection: null,
-  elementSelected: null, // selected element id
-  selectedEntities: null,
+  spanSelection: [],
+  placeholderSelection: [],
+  selectedEntities: [],
+  spanLoading: false,
 };
 
 const getters = {
-  isElementSelected: (state) => {
-    return state.elementSelected;
-  },
-  isSelecting: (state) => {
-    return state.isSelecting;
-  },
   isSelectionValid: (state) => {
     /**
      * `endSelection` will reset everything in case of invalid selection.
      * Check the existence of `selection.end` before requesting the
      * content from the backend.
      * */
-    return state.selection && state.selection.end;
+    return state.selection && state.selection.end != null;
   },
+
   getSelectionForPage: (state) => (pageNumber) => {
     if (state.selection.pageNumber === pageNumber) {
       return state.selection;
@@ -52,19 +46,24 @@ const getters = {
         box.y1 >= entity.y1
     );
   },
+  spanSelectionsForPage: (state) => (page) => {
+    return state.spanSelection.filter(
+      (span) => page.number === span.page_index + 1
+    );
+  },
+  placeholderSelectionForPage: (state) => (page) => {
+    return state.placeholderSelection.filter(
+      (span) => page.number === span.page_index + 1
+    );
+  },
 };
 
 const actions = {
-  selectElement: ({ commit }, value) => {
-    commit("RESET_SELECTION");
-    commit("SET_SPAN_SELECTION", null);
-    commit("ELEMENT_SELECTED", value);
-  },
-
   disableSelection: ({ commit }) => {
-    commit("ELEMENT_SELECTED", null);
     commit("RESET_SELECTION");
-    commit("SET_SPAN_SELECTION", null);
+    commit("SET_SELECTED_ENTITIES", []);
+    commit("SET_SPAN_SELECTION", []);
+    commit("SET_PLACEHOLDER_SELECTION", []);
   },
 
   startSelection: ({ commit }, { pageNumber, start }) => {
@@ -81,8 +80,6 @@ const actions = {
     if (xDiff > 5 && yDiff > 5) {
       commit("MOVE_SELECTION", points);
     }
-
-    commit("SET_SELECTED_ENTITIES", null);
   },
 
   endSelection: ({ commit, state }, end) => {
@@ -113,78 +110,138 @@ const actions = {
     }
   },
 
-  setSelection: ({ commit }, { span, selection }) => {
-    commit("SET_SELECTION", selection);
-    commit("SET_SPAN_SELECTION", span);
-  },
-
   setSelectedEntities: ({ commit }, entities) => {
     commit("SET_SELECTED_ENTITIES", entities);
   },
 
-  getTextFromBboxes: ({ commit, rootState }, { box, entities }) => {
-    let span;
+  getTextFromBboxes: ({ commit, rootState }, span) => {
+    commit("SET_SPAN_LOADING", true);
+    return new Promise((resolve, reject) => {
+      HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
+        span,
+      })
+        .then((response) => {
+          if (response.data.span.length && response.data.span.length > 0) {
+            /**
+             * If we have a non-empty bboxes list, we assume there
+             * is text here on the backend, so we just set
+             * spanSelection to the response.
+             */
+            resolve(response.data.span);
+          } else {
+            /**
+             * Otherwise, we assume the backend can't identify text
+             * on this area, so we set our bbox into spanSelection
+             * ready to be passed back to the backend when creating
+             * an annotation on this empty area, adding the offset_string
+             * attribute, ready to be filled.
+             */
+            resolve(span);
+          }
+        })
+        .catch((error) => {
+          alert("Could not fetch the selected text from the backend");
+          reject(error);
+        })
+        .finally(() => {
+          commit("SET_SPAN_LOADING", false);
+        });
+    });
+  },
 
-    if (entities) {
-      span = box.flatMap((s) => {
-        return s.original;
+  entitySelection: ({ commit, dispatch, state }, { entities, selection }) => {
+    if (entities.length === 0) {
+      if (selection) {
+        dispatch("getTextFromBboxes", [selection]).then((spans) => {
+          commit("SET_SPAN_SELECTION", spans);
+        });
+      } else {
+        commit("RESET_SELECTION");
+        commit("SET_SPAN_SELECTION", []);
+      }
+      commit("SET_SELECTED_ENTITIES", []);
+    } else {
+      commit("SET_SELECTED_ENTITIES", entities);
+
+      dispatch("document/setAnnotationId", null, {
+        root: true,
+      });
+      let span;
+      if (entities) {
+        span = entities.flatMap((s) => {
+          return s.original;
+        });
+      } else {
+        span = [entities];
+      }
+      commit("SET_SPAN_SELECTION", span);
+      dispatch("getTextFromBboxes", span).then((spans) => {
+        commit("SET_SPAN_SELECTION", spans);
       });
+    }
+  },
+
+  entityClick: ({ commit, dispatch, state }, entity) => {
+    // Check if we are creating a new Annotation
+    // or if we are removing a previously selected entity
+    // or editing empty one
+    const found = state.selectedEntities.find(
+      (entityToFind) =>
+        entity.scaled.width === entityToFind.scaled.width &&
+        entity.original.offset_string === entityToFind.original.offset_string
+    );
+
+    let entities = state.selectedEntities;
+    if (found) {
+      entities = [
+        ...state.selectedEntities.filter(
+          (entityToFilter) =>
+            entityToFilter.scaled.width !== entity.scaled.width &&
+            entityToFilter.original.offset_string !==
+              entity.original.offset_string
+        ),
+      ];
     } else {
-      span = [box];
+      entities.push(entity);
     }
 
-    return HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
-      span,
-    })
-      .then((response) => {
-        if (response.data.span.length && response.data.span.length > 0) {
-          /**
-           * If we have a non-empty bboxes list, we assume there
-           * is text here on the backend, so we just set
-           * spanSelection to the response.
-           */
-          commit("SET_SPAN_SELECTION", response.data.span);
-        } else {
-          /**
-           * Otherwise, we assume the backend can't identify text
-           * on this area, so we set our bbox into spanSelection
-           * ready to be passed back to the backend when creating
-           * an annotation on this empty area, adding the offset_string
-           * attribute, ready to be filled.
-           */
-          commit("SET_SPAN_SELECTION", span);
-        }
-      })
-      .catch((error) => {
-        alert("Could not fetch the selected text from the backend");
+    if (entities.length === 0) {
+      commit("SET_SELECTED_ENTITIES", []);
+      commit("SET_SPAN_SELECTION", []);
+    } else {
+      commit("SET_SELECTED_ENTITIES", entities);
+
+      dispatch("document/setAnnotationId", null, {
+        root: true,
       });
-  },
 
-  getTextFromEntities: ({ commit, dispatch }, selectedEntities) => {
-    if (!selectedEntities) return;
+      let span;
 
-    return dispatch("getTextFromBboxes", {
-      box: selectedEntities,
-      entities: true,
-    });
+      if (entities) {
+        span = entities.flatMap((s) => {
+          return s.original;
+        });
+      } else {
+        span = [entities];
+      }
+      commit("SET_SPAN_SELECTION", span);
+    }
   },
 
   setSpanSelection: ({ commit }, span) => {
     commit("SET_SPAN_SELECTION", span);
   },
+  setPlaceholderSelection: ({ commit }, span) => {
+    commit("SET_PLACEHOLDER_SELECTION", span);
+  },
 };
 
 const mutations = {
-  ELEMENT_SELECTED: (state, value) => {
-    state.elementSelected = value;
-  },
   START_SELECTION: (state, { pageNumber, start }) => {
     state.selection.end = null;
-    state.isSelecting = true;
     state.selection.pageNumber = pageNumber;
-    state.selection.custom = true;
     state.selection.start = start;
-    state.selection.placeholderBox = null;
+    state.isSelecting = true;
   },
   MOVE_SELECTION: (state, points) => {
     const { start, end } = points;
@@ -200,20 +257,39 @@ const mutations = {
     state.isSelecting = false;
   },
   RESET_SELECTION: (state) => {
-    state.isSelecting = false;
     state.selection.pageNumber = null;
     state.selection.start = null;
     state.selection.end = null;
-    state.selection.placeholderBox = null;
   },
   SET_SPAN_SELECTION: (state, span) => {
-    state.spanSelection = span;
+    if (!span) {
+      state.spanSelection = [];
+    } else {
+      state.spanSelection = span;
+    }
   },
-  SET_SELECTION: (state, selection) => {
-    state.selection = selection;
+  ADD_SPAN_SELECTION: (state, span) => {
+    state.spanSelection.push(span);
+  },
+  SET_PLACEHOLDER_SELECTION: (state, span) => {
+    if (!span) {
+      state.placeholderSelection = [];
+    } else {
+      state.placeholderSelection = span;
+    }
+  },
+  ADD_PLACEHOLDER_SELECTION: (state, span) => {
+    state.placeholderSelection.push(span);
   },
   SET_SELECTED_ENTITIES: (state, entities) => {
-    state.selectedEntities = entities;
+    if (!entities) {
+      state.selectedEntities = [];
+    } else {
+      state.selectedEntities = entities;
+    }
+  },
+  SET_SPAN_LOADING: (state, loading) => {
+    state.spanLoading = loading;
   },
 };
 

package/src/assets/scss/imports.scss

@@ -1 +0,0 @@
-@import "./variables.scss";

package/src/components/DocumentPage/EditAnnotation.vue

@@ -1,372 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-  <div
-    v-if="annotation && !hide"
-    class="annotation-popup small"
-    :style="{ left: `${left}px`, top: `${top}px` }"
-  >
-    <b-dropdown
-      v-model="selectedSet"
-      aria-role="list"
-      :class="[
-        'annotation-dropdown',
-        'no-padding-bottom',
-        'dropdown-full-width',
-        setsList.length === 0 ? 'no-padding-top' : '',
-      ]"
-      scrollable
-    >
-      <template #trigger>
-        <b-button
-          :class="[
-            'popup-input',
-            selectedSet ? '' : 'not-selected',
-            'has-right-icon',
-          ]"
-          type="is-text"
-        >
-          {{
-            selectedSet
-              ? `${selectedSet.label_set.name} ${
-                  selectedSet.id
-                    ? numberOfAnnotationSetGroup(selectedSet)
-                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
-                        "new"
-                      )})`
-                }`
-              : $t("select_annotation_set")
-          }}
-          <span class="caret-icon">
-            <b-icon icon="angle-down" size="is-small" class="caret" />
-          </span>
-        </b-button>
-      </template>
-      <b-button
-        type="is-ghost"
-        :class="['add-ann-set', 'dropdown-item', 'no-icon-margin']"
-        icon-left="plus"
-        @click="openAnnotationSetCreation"
-      >
-        {{ $t("new_ann_set_title") }}
-      </b-button>
-      <b-dropdown-item
-        v-for="(set, index) in setsList"
-        :key="`${set.label_set.id}_${index}`"
-        aria-role="listitem"
-        :value="set"
-      >
-        <span>{{
-          `${set.label_set.name} ${
-            set.id
-              ? numberOfAnnotationSetGroup(set)
-              : `${numberOfLabelSetGroup(set.label_set)} (${$t("new")})`
-          }`
-        }}</span>
-      </b-dropdown-item>
-    </b-dropdown>
-    <b-tooltip
-      multilined
-      :active="selectedSet && (!labelsFiltered || labelsFiltered.length === 0)"
-      size="is-large"
-      position="is-bottom"
-      class="bottom-aligned"
-      :close-delay="5000"
-    >
-      <template #content>
-        <div
-          v-html="
-            `${$t('no_labels_available')} ${
-              showBranding ? $t('no_labels_available_link') : ''
-            }`
-          "
-        ></div>
-      </template>
-      <b-dropdown
-        v-if="selectedLabel"
-        v-model="selectedLabel"
-        aria-role="list"
-        :disabled="!labelsFiltered || labelsFiltered.length === 0"
-        scrollable
-        class="label-dropdown annotation-dropdown dropdown-full-width"
-      >
-        <template #trigger>
-          <b-button
-            class="popup-input has-right-icon"
-            :disabled="!labelsFiltered"
-            type="is-text"
-          >
-            {{ selectedLabel.name }}
-            <span class="caret-icon">
-              <b-icon icon="angle-down" size="is-small" class="caret" />
-            </span>
-          </b-button>
-        </template>
-        <b-dropdown-item
-          v-for="label in labelsFiltered"
-          :key="label.id"
-          aria-role="listitem"
-          :value="label"
-        >
-          <span>{{ label.name }}</span>
-        </b-dropdown-item>
-      </b-dropdown>
-    </b-tooltip>
-    <div class="annotation-buttons">
-      <b-button
-        type="is-text"
-        class="cancel-button popup-button primary-button"
-        :label="$t('hide')"
-        :disabled="loading"
-        @click.prevent="hide = true"
-      />
-      <b-button
-        type="is-primary"
-        class="popup-button primary-button"
-        :label="$t('save')"
-        :disabled="loading || !spanSelection || !selectedLabel || !wasChanged"
-        @click.prevent="save"
-      />
-    </div>
-  </div>
-</template>
-<script>
-/**
- * This component is used to show a popup
- * for editing an annotation.
- */
-const heightOfPopup = 142;
-const margin = 12;
-const widthOfPopup = 205;
-
-import { mapGetters, mapState } from "vuex";
-
-export default {
-  props: {
-    editAnnotation: {
-      required: true,
-      type: Object,
-    },
-    page: {
-      required: true,
-      type: Object,
-    },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
-    containerHeight: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      annotation: null,
-      selectedLabel: null,
-      selectedSet: null,
-      labelsFiltered: null,
-      loading: false,
-      isAnnSetModalShowing: false,
-      setsList: [],
-      hide: false,
-    };
-  },
-  computed: {
-    ...mapState("document", [
-      "annotationSets",
-      "annotations",
-      "labels",
-      "documentId",
-    ]),
-    ...mapGetters("document", [
-      "numberOfAnnotationSetGroup",
-      "numberOfLabelSetGroup",
-      "labelsFilteredForAnnotationCreation",
-    ]),
-    ...mapState("display", ["showBranding"]),
-    ...mapGetters("display", ["bboxToRect"]),
-    ...mapState("selection", ["selection", "spanSelection"]),
-    top() {
-      if (this.selection && this.selection.start && this.selection.end) {
-        const top = this.selection.start.y - heightOfPopup; // subtract the height of the popup plus some margin
-
-        const height = this.selection.end.y - this.selection.start.y;
-
-        //check if the popup will not go off the container on the top
-        return this.selection.start.y > heightOfPopup
-          ? top - margin
-          : this.selection.start.y + height + margin;
-      }
-      return 0;
-    },
-    left() {
-      if (this.selection && this.selection.start && this.selection.end) {
-        const width = this.selection.end.x - this.selection.start.x;
-
-        const left = this.selection.start.x + width / 2 - widthOfPopup / 2; // add the entity half width to be centered and then subtract half the width of the popup
-
-        //check if the popup will not go off the container
-        if (left + widthOfPopup > this.containerWidth) {
-          // on the right side
-          return this.containerWidth - widthOfPopup;
-        } else {
-          // on the left side
-          return left > 0 ? left : 0;
-        }
-      }
-      return 0;
-    },
-    wasChanged() {
-      return (
-        this.editAnnotation.annotationSet.id !== this.selectedSet.id ||
-        this.editAnnotation.label.id !== this.selectedLabel.id
-      );
-    },
-  },
-  watch: {
-    selectedSet(newValue) {
-      this.labelsFiltered = this.labelsFilteredForAnnotationCreation(newValue);
-    },
-    editAnnotation() {
-      this.hide = false;
-      this.loadInfo();
-    },
-  },
-  mounted() {
-    this.loadInfo();
-
-    setTimeout(() => {
-      // prevent click propagation when opening the popup
-      document.body.addEventListener("click", this.clickOutside);
-    }, 200);
-  },
-  destroyed() {
-    document.body.removeEventListener("click", this.clickOutside);
-  },
-  methods: {
-    orderedSetList(setsList) {
-      setsList.sort((a, b) => {
-        const nameA = a.label_set.name;
-        const nameB = b.label_set.name;
-        if (nameA < nameB) {
-          return -1;
-        }
-        if (nameA > nameB) {
-          return 1;
-        }
-
-        // names must be equal
-        return 0;
-      });
-      return setsList;
-    },
-    loadInfo() {
-      this.setsList = this.orderedSetList([...this.annotationSets]);
-
-      this.selectedSet = this.annotationSets.find(
-        (annSet) => annSet.id === this.editAnnotation.annotationSet.id
-      );
-
-      this.labelsFiltered = this.labelsFilteredForAnnotationCreation(
-        this.selectedSet
-      );
-
-      // if existing label is not able to be chosen we add it manually
-      if (!this.labelsFiltered.includes(this.editAnnotation.label)) {
-        this.labelsFiltered.push(this.editAnnotation.label);
-      }
-
-      this.selectedLabel = this.editAnnotation.label;
-
-      this.annotation = this.annotations.find(
-        (ann) => ann.id === this.editAnnotation.id
-      );
-    },
-    close() {
-      this.$store.dispatch("document/resetEditAnnotation");
-      this.$store.dispatch("selection/disableSelection");
-      this.$store.dispatch("selection/setSelectedEntities", null);
-      this.$emit("close");
-    },
-    async save() {
-      this.loading = true;
-
-      if (this.wasChanged) {
-        // first delete annotation, then create new one
-        await this.$store
-          .dispatch("document/deleteAnnotation", {
-            annotationId: this.annotation.id,
-          })
-          .catch((error) => {
-            this.$store.dispatch("document/createErrorMessage", {
-              error,
-              serverErrorMessage: this.$t("server_error"),
-              defaultErrorMessage: this.$t("edit_error"),
-            });
-          });
-
-        const spans = this.annotation.span;
-        spans[this.editAnnotation.index] = this.spanSelection;
-
-        const annotationToCreate = {
-          document: this.documentId,
-          span: spans,
-          label: this.selectedLabel.id,
-          is_correct: true,
-          revised: false,
-        };
-
-        if (this.selectedSet.id) {
-          annotationToCreate.annotation_set = this.selectedSet.id;
-        } else {
-          annotationToCreate.label_set = this.selectedSet.label_set.id;
-        }
-
-        this.$store
-          .dispatch("document/createAnnotation", {
-            annotation: annotationToCreate,
-          })
-          .catch((error) => {
-            this.$store.dispatch("document/createErrorMessage", {
-              error,
-              serverErrorMessage: this.$t("server_error"),
-              defaultErrorMessage: this.$t("error_creating_annotation"),
-            });
-          })
-          .finally(() => {
-            this.close();
-            this.loading = false;
-          });
-      } else {
-        this.close();
-      }
-    },
-    chooseLabelSet(labelSet) {
-      // check if there's already a new entry for that label set to be created
-      const existsIndex = this.setsList.findIndex((set) => {
-        return set.id === null && set.label_set.id === labelSet.id;
-      });
-
-      const newSet = {
-        label_set: labelSet,
-        labels: labelSet.labels,
-        id: null,
-      };
-      if (existsIndex >= 0) {
-        this.setsList[existsIndex] = newSet;
-      } else {
-        this.setsList.unshift(newSet);
-      }
-      this.selectedSet = newSet;
-    },
-    openAnnotationSetCreation() {
-      this.$store.dispatch("display/showChooseLabelSetModal", {
-        show: true,
-        finish: this.chooseLabelSet,
-      });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss" src="../../assets/scss/new_annotation.scss"></style>