@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentPage/NewAnnotation.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="annotation-popup" :style="{ left: `${left}px`, top: `${top}px` }">
+    <input v-model="textFromEntities" class="popup-input" type="text" />
+    <b-dropdown
+      v-model="selectedSet"
+      aria-role="list"
+      :class="[
+        'no-padding-bottom',
+        setsList.length === 0 ? 'no-padding-top' : '',
+      ]"
+    >
+      <template #trigger>
+        <b-button
+          :class="['popup-input', selectedSet ? '' : 'not-selected']"
+          type="is-text"
+        >
+          {{
+            selectedSet
+              ? `${selectedSet.label_set.name} ${
+                  selectedSet.id
+                    ? numberOfAnnotationSetGroup(selectedSet)
+                    : `(${$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-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) : `(${$t("new")})`
+          }`
+        }}</span>
+      </b-dropdown-item>
+      <b-button
+        type="is-ghost"
+        :class="[
+          'add-ann-set',
+          'dropdown-item',
+          'no-icon-margin',
+          setsList.length > 0 ? 'has-border' : '',
+        ]"
+        icon-left="plus"
+        @click="openAnnotationSetCreation"
+      >
+        {{ $t("new_ann_set_title") }}
+      </b-button>
+    </b-dropdown>
+    <b-tooltip
+      :label="$t('no_labels_available')"
+      multilined
+      type="is-dark"
+      :active="selectedSet && (!labels || labels.length === 0)"
+      size="is-large"
+      position="is-bottom"
+    >
+      <b-dropdown
+        v-model="selectedLabel"
+        aria-role="list"
+        :disabled="!labels || labels.length === 0"
+        class="label-dropdown"
+      >
+        <template #trigger>
+          <b-button
+            :class="['popup-input', selectedLabel ? '' : 'not-selected']"
+            type="is-text"
+          >
+            {{
+              selectedLabel
+                ? selectedLabel.name
+                : labels && labels.length === 0
+                ? $t("no_labels_to_choose")
+                : $t("select_label")
+            }}
+            <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 labels"
+          :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"
+        :label="$t('cancel')"
+        :disabled="loading"
+        @click.prevent="close"
+      />
+      <b-button
+        type="is-primary"
+        class="popup-button"
+        :label="$t('save')"
+        :disabled="loading || !getTextFromEntities || !selectedLabel"
+        @click.prevent="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * This component is used to show a popup
+ * for creating a new annotation.
+ */
+const heightOfPopup = 192;
+const margin = 12;
+const widthOfPopup = 205;
+
+import { mapGetters, mapState } from "vuex";
+import { ChooseLabelSetModal } from "../DocumentAnnotations";
+
+export default {
+  props: {
+    newAnnotation: {
+      required: true,
+      type: Array,
+    },
+    containerWidth: {
+      type: Number,
+      required: true,
+    },
+    containerHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedLabel: null,
+      selectedSet: null,
+      labels: null,
+      loading: false,
+      isAnnSetModalShowing: false,
+      setsList: [],
+    };
+  },
+  computed: {
+    ...mapState("document", ["annotationSets", "documentId"]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "labelsFilteredForAnnotationCreation",
+      "getTextFromEntities",
+    ]),
+    top() {
+      const top = this.newAnnotation[0].entity.scaled.y - heightOfPopup; // subtract the height of the popup plus some margin
+
+      //check if the popup will not go off the container on the top
+      return this.newAnnotation[0].entity.scaled.y > heightOfPopup
+        ? top
+        : this.newAnnotation[0].entity.scaled.y +
+            this.newAnnotation[0].entity.scaled.height +
+            margin;
+    },
+    left() {
+      const left =
+        this.newAnnotation[0].entity.scaled.x +
+        this.newAnnotation[0].entity.scaled.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;
+      }
+    },
+    textFromEntities() {
+      return this.getTextFromEntities();
+    },
+  },
+  watch: {
+    selectedSet(newValue) {
+      this.selectedLabel = null;
+      this.labels = this.labelsFilteredForAnnotationCreation(newValue);
+    },
+  },
+  mounted() {
+    this.setsList = [...this.annotationSets];
+
+    setTimeout(() => {
+      // prevent click propagation when opening the popup
+      document.body.addEventListener("click", this.clickOutside);
+    }, 200);
+  },
+  destroyed() {
+    document.body.removeEventListener("click", this.clickOutside);
+  },
+  methods: {
+    close() {
+      this.$store.dispatch("document/setSelectedEntities", null);
+      this.$emit("close");
+    },
+    save() {
+      this.loading = true;
+      const span = this.newAnnotation.flatMap((ann) => {
+        return { ...ann.entity.original, offset_string: ann.content };
+      });
+
+      const annotationToCreate = {
+        document: this.documentId,
+        span: span,
+        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", 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;
+        });
+    },
+    disableLabelSetModalShowing() {
+      // timeout to stop propagation of click event
+      setTimeout(() => {
+        this.isAnnSetModalShowing = false;
+      }, 500);
+    },
+    chooseLabelSet(labelSet) {
+      this.disableLabelSetModalShowing();
+
+      const newSet = {
+        label_set: labelSet,
+        labels: labelSet.labels,
+        id: null,
+      };
+      this.setsList.push(newSet);
+      this.selectedSet = newSet;
+    },
+    openAnnotationSetCreation() {
+      this.isAnnSetModalShowing = true;
+
+      this.$buefy.modal.open({
+        parent: this.$parent,
+        component: ChooseLabelSetModal,
+        hasModalCard: true,
+        trapFocus: true,
+        canCancel: false,
+        onCancel: this.disableLabelSetModalShowing,
+        customClass: "invisible-parent-modal",
+        events: {
+          labelSet: this.chooseLabelSet,
+          close: this.disableLabelSetModalShowing,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/new_annotation.scss"></style>

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div
+      ref="scrollingDocument"
+      v-scroll.immediate="updateScrollBounds"
+      class="scrolling-document"
+    >
+      <div
+        v-if="
+          selectedDocument && scale && !loading && !recalculatingAnnotations
+        "
+      >
+        <ScrollingPage
+          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          :key="page.number"
+          :page="page"
+          :client-height="clientHeight"
+          :scroll-top="scrollTop"
+          class="scrolling-page"
+          @page-jump="onPageJump"
+        />
+      </div>
+      <div v-else class="loading-page">
+        <b-skeleton width="100%" height="1000px" />
+      </div>
+    </div>
+    <Toolbar v-if="showToolbar" />
+    <ActionBar v-if="showActionBar" />
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import scroll from "../../directives/scroll";
+import ScrollingPage from "./ScrollingPage";
+import Toolbar from "./DocumentToolbar";
+import ActionBar from "./ActionBar";
+
+export default {
+  components: {
+    ScrollingPage,
+    Toolbar,
+    ActionBar,
+  },
+  directives: {
+    scroll,
+  },
+
+  data() {
+    return {
+      scrollTop: 0,
+      clientHeight: 0,
+    };
+  },
+
+  computed: {
+    ...mapState("document", [
+      "recalculatingAnnotations",
+      "selectedDocument",
+      "loading",
+    ]),
+    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
+    ...mapState("display", ["scale", "documentActionBar"]),
+
+    pages() {
+      if (this.selectedDocument) {
+        return this.selectedDocument.pages;
+      } else {
+        return [];
+      }
+    },
+    showToolbar() {
+      return this.pages.length > 0 && this.scale && !this.documentActionBar;
+    },
+    showActionBar() {
+      return this.documentActionBar !== null;
+    },
+  },
+  watch: {
+    loading() {
+      this.scrollTop = 0;
+    },
+  },
+
+  methods: {
+    updateScrollBounds() {
+      const { scrollTop, clientHeight } = this.$refs.scrollingDocument;
+      this.scrollTop = scrollTop;
+      this.clientHeight = clientHeight;
+    },
+    /**
+     * Scrolls the ScrollingDocument to the offset specified by scrollTop
+     * (i.e., another page).
+     */
+    onPageJump(scrollTop) {
+      const actualScroll = scrollTop;
+      this.$refs.scrollingDocument.scrollTop =
+        // the 4 comes from the margin between pages
+        actualScroll - (this.$refs.scrollingDocument.offsetTop + 4);
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/scrolling_document.scss"
+></style>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <DocumentPage v-if="editMode" :page="page" />
+    <DummyPage
+      v-else-if="!loadedPage || !pageInVisibleRange(page)"
+      :width="page.size[0]"
+      :height="page.size[1]"
+    />
+    <DocumentPage v-else :page="loadedPage" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import DocumentPage from "../DocumentPage/DocumentPage";
+import DummyPage from "../DocumentPage/DummyPage";
+
+export default {
+  name: "ScrollingPage",
+
+  components: {
+    DocumentPage,
+    DummyPage,
+  },
+
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+    scrollTop: {
+      type: Number,
+      required: true,
+    },
+    clientHeight: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      elementTop: 0,
+      elementHeight: 0,
+      previousFocusedAnnotation: null,
+      previousY: null,
+      pageBeingLoaded: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
+    ...mapGetters("document", ["scrollDocumentToAnnotation"]),
+
+    loadedPage() {
+      let loadedPage = null;
+      if (this.page && this.pages) {
+        loadedPage = this.pages.find((p) => p.number === this.page.number);
+      }
+      if (!loadedPage && this.pageInVisibleRange(this.page)) {
+        if (!this.pageBeingLoaded) {
+          this.loadPage();
+        }
+      }
+      return loadedPage;
+    },
+
+    isElementFocused() {
+      const { elementTop, bottom, elementHeight, scrollTop, clientHeight } =
+        this;
+      if (!elementHeight) return;
+
+      const halfHeight = elementHeight / 2;
+      const halfScreen = clientHeight / 2;
+      const delta = elementHeight >= halfScreen ? halfScreen : halfHeight;
+      const threshold = scrollTop + delta;
+
+      return elementTop < threshold && bottom >= threshold;
+    },
+
+    bottom() {
+      return this.elementTop + this.elementHeight;
+    },
+
+    scrollBottom() {
+      return this.scrollTop + this.clientHeight;
+    },
+
+    ...mapState("display", ["scale", "currentPage"]),
+    ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
+    ...mapState("edit", ["editMode"]),
+  },
+
+  watch: {
+    scrollTop: "updateElementBounds",
+    clientHeight: "updateElementBounds",
+
+    /**
+     * Scroll to the focused annotation if it changes and it's on this page.
+     */
+    scrollDocumentToAnnotation(isToScroll) {
+      if (
+        isToScroll &&
+        this.documentAnnotationSelected.page === this.page.number
+      ) {
+        // We wait for the page to be focused before actually scrolling
+        // to the focused annotation.
+        this.$nextTick(() => {
+          // Scroll to the annotation
+          this.scrollTo(this.getYForBbox(this.documentAnnotationSelected.span));
+        });
+      }
+    },
+    isElementFocused(focused) {
+      if (!this.loading && focused) {
+        let pageNumber;
+
+        // TODO: have the same name for page.number in the edit mode so there's no need to do this validations
+        if (this.editMode) {
+          pageNumber = this.page.page_number;
+        } else {
+          pageNumber = this.page.number;
+        }
+        this.$store.dispatch("display/updateCurrentPage", pageNumber);
+      }
+    },
+    currentPage(number) {
+      if (
+        (this.page.number === number || this.page.page_number === number) &&
+        !this.isElementFocused
+      ) {
+        this.$emit("page-jump", this.elementTop);
+      }
+    },
+  },
+  mounted() {
+    this.updateElementBounds();
+  },
+
+  methods: {
+    loadPage() {
+      this.pageBeingLoaded = true;
+      this.$store
+        .dispatch("document/fetchDocumentPage", this.page.number)
+        .then(() => {
+          this.pageBeingLoaded = false;
+        });
+    },
+    pageInVisibleRange(page) {
+      let number;
+      if (this.editMode) {
+        number = page.page_number;
+      } else {
+        number = page.number;
+      }
+      return (
+        this.currentPage === number || this.visiblePageRange.includes(number)
+      );
+    },
+    updateElementBounds() {
+      const { offsetTop, offsetHeight } = this.$el;
+      this.elementTop = offsetTop;
+      this.elementHeight = offsetHeight;
+    },
+
+    /**
+     * Calculate the y-position of this bbox on the page
+     * from its top, the scale and the image scale (calculated
+     * from the page object).
+     */
+    getYForBbox(bbox) {
+      return this.bboxToRect(this.page, bbox).y;
+    },
+
+    /**
+     * Scroll to a relative position in the page. It gets added
+     * the page's element top and a padding margin.
+     */
+    scrollTo(y) {
+      this.$emit("page-jump", this.elementTop + y - 80);
+    },
+  },
+};
+</script>

package/src/components/DocumentPage/index.js

@@ -0,0 +1,5 @@
+export { default as DocumentPage } from "./DocumentPage";
+export { default as DummyPage } from "./DummyPage";
+export { default as ScrollingDocument } from "./ScrollingDocument";
+export { default as ScrollingPage } from "./ScrollingPage";
+export { default as ToolBar } from "./DocumentToolbar";

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="document-pages">
+    <div v-if="selectedDocument">
+      <div
+        v-for="page in selectedDocument.pages"
+        :key="page.id"
+        :class="[
+          'document-thumbnail',
+          currentPage == page.number && 'selected'
+        ]"
+        @click="changePage(page.number)"
+      >
+        <div class="image-section">
+          <div class="image-container">
+            <ServerImage
+              v-if="!loading && !recalculatingAnnotations"
+              :class="[
+                'img-thumbnail',
+                currentPage == page.number && 'selected'
+              ]"
+              :width="'40px'"
+              :image-url="`${page.thumbnail_url}?${selectedDocument.downloaded_at}`"
+            >
+              <LoadingThumbnail />
+            </ServerImage>
+            <LoadingThumbnail v-else />
+          </div>
+        </div>
+        <div class="number-thumbnail">
+          {{ page.number }}
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="document-thumbnail">
+        <div class="image-section">
+          <div class="image-container">
+            <LoadingThumbnail />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import ServerImage from "../../assets/images/ServerImage";
+import LoadingThumbnail from "./LoadingThumbnail.vue";
+
+/**
+ * This component creates a vertical list of the document pages
+ * with thumbnail pictures of it which are also clickable.
+ * It also creates a grid list of the pages in the toolbar modal
+ * to allow the user to rotate them.
+ */
+export default {
+  name: "DocumentThumbnails",
+  components: {
+    ServerImage,
+    LoadingThumbnail
+  },
+  computed: {
+    ...mapState("document", [
+      "selectedDocument",
+      "recalculatingAnnotations",
+      "loading"
+    ]),
+    ...mapState("display", ["currentPage"])
+  },
+  methods: {
+    /* Change page if not the currently open and not in modal */
+    changePage(pageNumber) {
+      if (
+        !this.loading &&
+        !this.recalculatingAnnotations &&
+        pageNumber != this.currentPage
+      ) {
+        this.$store.dispatch(
+          "display/updateCurrentPage",
+          parseInt(pageNumber, 10)
+        );
+      }
+    }
+  }
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_thumbnails.scss"
+></style>

package/src/components/DocumentThumbnails/LoadingThumbnail.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <b-skeleton
+      width="40px"
+      height="57px"
+    />
+  </div>
+</template>
+
+<script>
+/**
+ * This component shows a skeleton instead of the thumbnails
+ *  while some document data is still loading
+ */
+
+export default {
+  name: "LoadingThumbnail"
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_thumbnails.scss"
+></style>

package/src/components/DocumentThumbnails/index.js

@@ -0,0 +1 @@
+export { default as DocumentThumbnails } from "./DocumentThumbnails";