@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="empty-annotation">
+    <span
+      v-if="!publicView"
+      :id="emptyAnnotationId()"
+      ref="emptyAnnotation"
+      :class="[
+        'annotation-value',
+        showActionError &&
+          editAnnotation &&
+          editAnnotation.id === emptyAnnotationId() &&
+          'error-editing',
+        isEmptyAnnotationEditable() ? '' : 'label-empty',
+        isAnnotationBeingEdited() && 'clicked',
+      ]"
+      :contenteditable="isEmptyAnnotationEditable()"
+      @keypress.enter="saveEmptyAnnotationChanges"
+      @click="handleEditEmptyAnnotation"
+      @focus="handleEditEmptyAnnotation"
+    >
+      <span v-if="span && span.offset_string && isEmptyAnnotationEditable()">
+        {{ span.offset_string }}
+      </span>
+      <span v-else>
+        {{ $t("no_data_found") }}
+      </span>
+    </span>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters } from "vuex";
+
+/**
+ * This component is responsible for managing empty annotations (labels with no annotations).
+ */
+export default {
+  name: "EmptyAnnotation",
+  props: {
+    label: {
+      required: true,
+    },
+    annotationSet: {
+      required: true,
+    },
+
+    span: {
+      required: false,
+    },
+    spanIndex: {
+      required: false,
+    },
+    saveChanges: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  computed: {
+    ...mapGetters("document", [
+      "isAnnotationInEditMode",
+      "getTextFromEntities",
+    ]),
+    ...mapGetters("selection", ["isValueArray"]),
+    ...mapState("selection", ["spanSelection", "elementSelected"]),
+    ...mapState("document", [
+      "editAnnotation",
+      "publicView",
+      "selectedEntities",
+      "showActionError",
+    ]),
+  },
+  watch: {
+    span(newValue) {
+      if (this.elementSelected === this.emptyAnnotationId() && newValue) {
+        if (this.isValueArray(newValue))
+          newValue.map((span) => {
+            if (span.offset_string) {
+              span.offset_string =
+                this.$refs.emptyAnnotation.textContent.trim();
+              span.offset_string_original =
+                this.$refs.emptyAnnotation.textContent.trim();
+
+              this.setText(span.offset_string);
+            }
+          });
+      }
+    },
+    editAnnotation(newAnnotation, oldAnnotation) {
+      // verify if new annotation in edit mode is not this one and if this
+      // one was selected before so we set the state to the previous one (like a cancel)
+      if (oldAnnotation && oldAnnotation.id === this.emptyAnnotationId()) {
+        this.cancelEmptyAnnotation(true);
+      }
+    },
+    selectedEntities(newValue) {
+      if (!newValue && this.isAnnotationBeingEdited(this.emptyAnnotationId())) {
+        this.setText(
+          this.$t("draw_box_document", { label_name: this.label.name })
+        );
+        return;
+      }
+
+      if (
+        newValue &&
+        this.editAnnotation &&
+        this.emptyAnnotationId() === this.editAnnotation.id
+      ) {
+        const text = this.getTextFromEntities();
+        this.setText(text);
+      }
+    },
+    spanSelection(newValue) {
+      if (!newValue) return;
+
+      const isSpanArray = Array.isArray(newValue);
+
+      // Check if the bbox is empty
+      if (
+        (isSpanArray && !newValue[0].offset_string) ||
+        (!isSpanArray && !newValue.offset_string)
+      ) {
+        this.$store.dispatch("document/resetEditAnnotation");
+        this.$store.dispatch("selection/disableSelection");
+      }
+    },
+  },
+  methods: {
+    emptyAnnotationId() {
+      if (!this.annotationSet || !this.label) return;
+
+      if (this.annotationSet.id) {
+        return `${this.annotationSet.id}_${this.label.id}`;
+      } else {
+        return `${this.annotationSet.label_set.id}_${this.label.id}`;
+      }
+    },
+    isAnnotationBeingEdited() {
+      return this.isAnnotationInEditMode(this.emptyAnnotationId());
+    },
+    handleEditEmptyAnnotation() {
+      if (this.publicView) return;
+
+      if (
+        !this.publicView &&
+        !this.isLoading &&
+        this.elementSelected !== this.emptyAnnotationId()
+      ) {
+        this.setText(
+          this.$t("draw_box_document", { label_name: this.label.name })
+        );
+        this.$store.dispatch(
+          "selection/selectElement",
+          this.emptyAnnotationId()
+        );
+        this.$store.dispatch("document/setEditAnnotation", {
+          id: this.emptyAnnotationId(),
+          index: this.spanIndex,
+          label: this.label.id,
+          labelSet: this.annotationSet.label_set.id,
+          annotationSet: this.annotationSet.id,
+        });
+      }
+    },
+    cancelEmptyAnnotation(wasOutsideClick = false) {
+      if (wasOutsideClick) {
+        this.setText(this.$t("no_data_found"));
+      } else {
+        this.$store.dispatch("selection/disableSelection");
+      }
+
+      this.isLoading = false;
+      this.$store.dispatch("document/setSelectedEntities", null);
+
+      if (this.$refs.emptyAnnotation) {
+        this.$refs.emptyAnnotation.blur();
+      }
+    },
+    isEmptyAnnotationEditable() {
+      if (this.selectedEntities && this.selectedEntities.length > 0) {
+        return (
+          this.elementSelected === this.emptyAnnotationId() && !this.isLoading
+        );
+      } else if (
+        this.spanSelection &&
+        this.spanSelection[this.spanIndex] === 0
+      ) {
+        return false;
+      } else {
+        return (
+          this.elementSelected === this.emptyAnnotationId() &&
+          this.spanSelection &&
+          this.spanSelection[this.spanIndex] &&
+          this.spanSelection[this.spanIndex].offset_string != null &&
+          !this.isLoading
+        );
+      }
+    },
+    saveEmptyAnnotationChanges(event) {
+      if (this.publicView) return;
+
+      if (event) {
+        event.preventDefault();
+      }
+
+      // API call handled in parent component - AnnotationRow
+      this.$emit("save-empty-annotation-changes");
+    },
+    setText(text) {
+      this.$refs.emptyAnnotation.innerHTML = text;
+    },
+  },
+};
+</script>
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/EmptyState.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="empty-container">
+    <EmptyStateImg />
+    <div class="empty-text">
+      <p class="title">
+        {{ $t("no_label_sets_found") }}
+      </p>
+      <p class="description">
+        {{ $t("no_label_sets_found_description") }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import EmptyStateImg from "../../assets/images/EmptyStateImg";
+export default {
+  name: "EmptyState",
+  components: { EmptyStateImg }
+};
+</script>
+<style scoped lang="scss" src="../../assets/scss/empty_state.scss"></style>

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="data-extraction-container">
+    <div class="loading-container">
+      <ActionButtons
+        :is-loading="true"
+        :save-btn="false"
+        :cancel-btn="false"
+      />
+    </div>
+    <div class="data-extraction-text">
+      <p class="title">
+        {{ $t("data_being_extracted") }}
+      </p>
+      <div class="description">
+        <p>{{ $t("analysing_document") }}</p>
+        <p>{{ $t("few_minutes") }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ActionButtons from "./ActionButtons";
+
+export default {
+  name: "ExtractingData",
+  components: { ActionButtons }
+};
+</script>
+<style scoped lang="scss" src="../../assets/scss/extracting_data.scss"></style>

package/src/components/DocumentAnnotations/LoadingAnnotations.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="annotations-skeleton">
+    <div class="label-set-name-skeleton">
+      <b-skeleton
+        width="20%"
+        height="8px"
+      />
+    </div>
+
+    <!-- Label rows -->
+    <div
+      v-for="n in numberOfLabelRows"
+      :key="n"
+    >
+      <LoadingLabels />
+    </div>
+  </div>
+</template>
+
+<script>
+import LoadingLabels from "./LoadingLabels";
+
+/**
+ * This component shows a skeleton instead of the label sets
+ *  while some document data is still loading
+ */
+
+export default {
+  name: "LoadingAnnotations",
+  components: { LoadingLabels },
+  data() {
+    return {
+      numberOfLabelRows: 7
+    };
+  }
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/LoadingLabels.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="label-properties-skeleton">
+    <div class="loading-left">
+      <div class="circle">
+        <b-skeleton
+          circle
+          width="16px"
+          height="16px"
+        />
+      </div>
+      <div class="label-skeleton">
+        <b-skeleton
+          width="70%"
+          height="8px"
+        />
+      </div>
+    </div>
+
+    <div class="loading-right">
+      <b-skeleton
+        width="80%"
+        height="8px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * This component shows a skeleton instead of the labels and annotations
+ *  while some document data is still loading
+ */
+
+export default {
+  name: "LoadingLabels"
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/RejectedLabels.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="rejected-label-container">
+    <p class="title">
+      {{ `${$t("rejected")} (${missingAnnotations.length})` }}
+    </p>
+    <section class="rejected-tag-container">
+      <b-taglist
+        v-for="missingAnnotation in missingAnnotations"
+        :key="missingAnnotation.id"
+      >
+        <b-tag
+          attached
+          closable
+          aria-close-label="Close tag"
+          :class="[
+            isLoading && closedTag === missingAnnotation.id && 'loading-active',
+          ]"
+          @close="removeRejectedLabel(missingAnnotation.id)"
+        >
+          <span
+            :class="[
+              'label-name',
+              isLoading && closedTag === missingAnnotation.id && 'loading',
+            ]"
+          >
+            {{ getLabelName(missingAnnotation.label) }}
+          </span>
+        </b-tag>
+        <div class="tag-loading-container">
+          <ActionButtons
+            :is-loading="isLoading && closedTag === missingAnnotation.id"
+          />
+        </div>
+      </b-taglist>
+    </section>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import ActionButtons from "./ActionButtons.vue";
+
+export default {
+  name: "RejectedLabels",
+  components: { ActionButtons },
+  props: {
+    missingAnnotations: {
+      default: null,
+      type: Array,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      closedTag: null,
+    };
+  },
+  computed: {
+    ...mapState("document", ["labels"]),
+  },
+  methods: {
+    removeRejectedLabel(id) {
+      this.isLoading = true;
+      this.closedTag = id;
+
+      this.$store
+        .dispatch("document/deleteMissingAnnotation", id)
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("edit_error"),
+          });
+        })
+        .finally(() => {
+          this.isLoading = false;
+          this.closedTag = null;
+        });
+    },
+    getLabelName(label) {
+      if (!this.labels) return;
+      const found = this.labels.find((l) => l.id === label);
+      if (found) {
+        return found.name;
+      }
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/index.js

@@ -0,0 +1,8 @@
+export { default as DocumentAnnotations } from "./DocumentAnnotations";
+export { default as AnnotationContent } from "./AnnotationContent";
+export { default as EmptyAnnotation } from "./EmptyAnnotation";
+export { default as DocumentLabel } from "./DocumentLabel";
+export { default as AnnotationDetails } from "./AnnotationDetails";
+export { default as RejectedLabels } from "./RejectedLabels";
+export { default as ChooseLabelSetModal } from "./ChooseLabelSetModal";
+export { default as AnnotationRow } from "./AnnotationRow";

package/src/components/DocumentCategory.vue

@@ -0,0 +1,156 @@
+<template>
+  <b-dropdown
+    :class="[
+      'category-chooser',
+      splitMode && 'split-mode',
+      selectedDocument.is_reviewed && 'disabled',
+    ]"
+    aria-role="list"
+    :disabled="selectedDocument.is_reviewed"
+  >
+    <template #trigger>
+      <div class="category-drop-down">
+        <div class="icon">
+          <CategoryIcon />
+        </div>
+        <div class="category-info">
+          <p v-if="!splitMode" class="category-title">
+            {{ $t("category") }}
+          </p>
+          <div class="category-name">
+            {{
+              !splitMode
+                ? categoryName(selectedDocument.category)
+                : categoryName(updatedDocument[index].category)
+            }}
+          </div>
+        </div>
+        <div :class="[!splitMode && 'caret-section']">
+          <b-icon
+            icon="angle-down"
+            size="is-small"
+            :class="['caret', splitMode && 'split-mode-caret']"
+          />
+        </div>
+      </div>
+    </template>
+
+    <b-dropdown-item
+      v-for="category in currentProjectCategories"
+      :key="category.id"
+      aria-role="listitem"
+      :disabled="handleOptionInDropdownDisabled(category)"
+      @click="handleChangeCategory(category)"
+    >
+      <span>{{ category.name }}</span>
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import CategoryIcon from "../assets/images/CategoryIconImg";
+
+export default {
+  name: "DocumentCategory",
+  components: {
+    CategoryIcon,
+  },
+  props: {
+    splitMode: {
+      type: Boolean,
+    },
+    page: {
+      type: Object,
+    },
+    index: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      currentProjectCategories: [],
+      categoryError: false,
+    };
+  },
+  computed: {
+    ...mapGetters("category", {
+      categoryName: "categoryName",
+    }),
+    ...mapState("document", ["selectedDocument"]),
+    ...mapState("category", ["categories"]),
+    ...mapState("edit", ["updatedDocument"]),
+  },
+  watch: {
+    categories(newValue) {
+      newValue.map((category) => {
+        if (category.project === this.selectedDocument.project) {
+          const found = this.currentProjectCategories.find(
+            (cat) => cat.id === category.id
+          );
+          if (found) return;
+
+          this.currentProjectCategories.push(category);
+        }
+      });
+    },
+  },
+  mounted() {
+    if (this.categories) {
+      this.categories.map((category) => {
+        if (category.project === this.selectedDocument.project) {
+          const found = this.currentProjectCategories.find(
+            (cat) => cat.id === category.id
+          );
+          if (found) return;
+
+          this.currentProjectCategories.push(category);
+        }
+      });
+    }
+  },
+  methods: {
+    // The current category name will change
+    // depending on if we are on edit mode or not
+    handleOptionInDropdownDisabled(category) {
+      if (!this.splitMode)
+        return category.id === this.selectedDocument.category;
+
+      return category.id === this.updatedDocument[this.index].category;
+    },
+
+    handleChangeCategory(category) {
+      // handling the category change will be different based on
+      // the dropdown being on the topbar or the split overview
+      const updatedCategory = {
+        category: category.id,
+      };
+
+      if (!this.splitMode) {
+        this.$store.dispatch("document/startRecalculatingAnnotations");
+
+        this.$store
+          .dispatch("document/updateDocument", updatedCategory)
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          })
+          .finally(() => {
+            this.$store.dispatch("document/endRecalculatingAnnotations");
+          });
+
+        return;
+      }
+
+      // Send the category ID to the split overview
+      // to update the new document category
+      this.$emit("category-change", this.page, category.id);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../assets/scss/document_category.scss"></style>