@konfuzio/document-validation-ui 0.1.1

package/src/store/edit.js

@@ -0,0 +1,210 @@
+import myImports from "../api";
+
+const HTTP = myImports.HTTP;
+
+const state = {
+  editMode: false,
+  splitOverview: false,
+  isMultipleSelection: false,
+  documentPagesListForEditMode: [], // TODO: change name
+  selectedPages: [],
+  updatedDocument: [],
+};
+
+const actions = {
+  enableEditMode: ({ commit }) => {
+    commit("SET_EDIT_MODE", true);
+  },
+
+  disableEditMode: ({ commit }) => {
+    commit("SET_EDIT_MODE", false);
+    commit("SET_SPLIT_OVERVIEW", false);
+  },
+
+  setSplitOverview: ({ commit }, overview) => {
+    commit("SET_SPLIT_OVERVIEW", overview);
+  },
+
+  setDocumentPagesListForEditMode: ({ commit }, pages) => {
+    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", pages);
+  },
+
+  setUpdatedDocument: ({ commit }, updatedDocument) => {
+    commit("SET_UPDATED_DOCUMENT", updatedDocument);
+  },
+
+  setSelectedPages: ({ state, commit }, selectedPage) => {
+    if (!selectedPage) {
+      commit("SET_SELECTED_PAGES", []);
+      return;
+    }
+
+    const found = state.selectedPages.find(
+      (page) => page.id === selectedPage.id
+    );
+
+    if (found) {
+      const filtered = state.selectedPages.filter(
+        (page) => page.id !== selectedPage.id
+      );
+      commit("SET_SELECTED_PAGES", filtered);
+    } else if (state.isMultipleSelection) {
+      commit("ADD_SELECTED_PAGE", selectedPage);
+    } else {
+      commit("SET_SELECTED_PAGES", []);
+      commit("ADD_SELECTED_PAGE", selectedPage);
+    }
+  },
+
+  rotatePage: ({ state, commit }, { page, direction }) => {
+    if (state.documentPagesListForEditMode.find((p) => p.id === page[0].id)) {
+      const documentPagesListForEditMode =
+        state.documentPagesListForEditMode.map((p) => {
+          let rotatedAngle;
+          if (direction === "left") {
+            rotatedAngle = p.angle - 90;
+            if (p.id === page[0].id) {
+              if (rotatedAngle === -270) {
+                rotatedAngle = 90;
+              }
+              return {
+                ...p,
+                angle: rotatedAngle,
+              };
+            }
+            return p;
+          }
+          if (direction === "right") {
+            rotatedAngle = p.angle + 90;
+            if (p.id === page[0].id) {
+              if (rotatedAngle === 270) {
+                rotatedAngle = -90;
+              }
+              return {
+                ...p,
+                angle: rotatedAngle,
+              };
+            }
+            return p;
+          }
+        });
+
+      commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", documentPagesListForEditMode);
+    } else {
+      if (direction === "left") {
+        state.documentPagesListForEditMode.push({
+          id: page.id,
+          page_number: page.number,
+          angle: -90,
+          thumbnail_url: page.thumbnail_url,
+          updated_at: page.updated_at,
+        });
+      }
+
+      if (direction === "right") {
+        state.documentPagesListForEditMode.push({
+          id: page.id,
+          page_number: page.number,
+          angle: 90,
+          thumbnail_url: page.thumbnail_url,
+          updated_at: page.updated_at,
+        });
+      }
+    }
+  },
+
+  updateRotationToTheLeft: ({ state, commit }) => {
+    // updated the angles that will be sent to the backend
+    const array = state.documentPagesListForEditMode.map((p) => {
+      let rotatedAngle = p.angle - 90;
+      if (rotatedAngle === -270) {
+        rotatedAngle = 90;
+      }
+      return {
+        ...p,
+        angle: rotatedAngle,
+      };
+    });
+
+    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+  },
+
+  updateRotationToTheRight: ({ state, commit }) => {
+    // updated the angles that will be sent to the backend
+    const array = state.documentPagesListForEditMode.map((p) => {
+      let rotatedAngle = p.angle + 90;
+      if (rotatedAngle === 270) {
+        rotatedAngle = -90;
+      }
+      return {
+        ...p,
+        angle: rotatedAngle,
+      };
+    });
+
+    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+  },
+
+  editDocument: ({ rootState, dispatch }, editedDocument) => {
+    dispatch("document/startRecalculatingAnnotations", null, {
+      root: true,
+    });
+    return new Promise((resolve) => {
+      HTTP.post(
+        `/documents/${rootState.document.documentId}/postprocess/`,
+        editedDocument
+      )
+        .then(async (response) => {
+          if (response && response.status === 200) {
+            const newDocument = response.data[0];
+            const newId = newDocument.id;
+
+            await dispatch("document/setDocId", newId, {
+              root: true,
+            });
+            dispatch("document/pollDocumentEndpoint", null, {
+              root: true,
+            });
+            resolve(null);
+          } else {
+            resolve(response);
+          }
+        })
+        .catch((error) => {
+          resolve(error.response);
+          console.log(error);
+        });
+    });
+  },
+};
+
+const mutations = {
+  SET_EDIT_MODE: (state, option) => {
+    state.editMode = option;
+  },
+
+  SET_SPLIT_OVERVIEW: (state, overview) => {
+    state.splitOverview = overview;
+  },
+
+  SET_DOCUMENT_PAGES_FOR_EDIT_MODE: (state, pages) => {
+    state.documentPagesListForEditMode = pages;
+  },
+
+  SET_UPDATED_DOCUMENT: (state, updatedDocument) => {
+    state.updatedDocument = updatedDocument;
+  },
+  SET_SELECTED_PAGES: (state, selectedPages) => {
+    state.selectedPages = selectedPages;
+  },
+  ADD_SELECTED_PAGE: (state, selectedPage) => {
+    state.selectedPages.push(selectedPage);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+};

package/src/store/index.js

@@ -0,0 +1,22 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+import display from "./display";
+import document from "./document";
+import category from "./category";
+import project from "./project";
+import selection from "./selection";
+import edit from "./edit";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    display,
+    document,
+    category,
+    project,
+    selection,
+    edit
+  }
+});

package/src/store/project.js

@@ -0,0 +1,95 @@
+import myImports from "../api";
+const HTTP = myImports.HTTP;
+
+const state = {
+  projectId: null,
+  currentUser: null
+};
+
+const getters = {
+  /**
+   * Gets label sets for an annotation set creation
+   */
+  labelSetsFilteredForAnnotationSetCreation:
+    state => (labelsSet, annotationSets) => {
+      let returnLabels = [];
+      if (labelsSet) {
+        returnLabels = labelsSet.filter(labelSet => {
+          // check if label set has multiple and if not, if there's already an annotation set created
+          if (!labelSet.has_multiple_annotation_sets) {
+            const existingAnnotationSet = annotationSets.find(annSet => {
+              return annSet.id === labelSet.id;
+            });
+            return existingAnnotationSet;
+          } else {
+            return true;
+          }
+        });
+      }
+      return returnLabels;
+    }
+};
+
+const actions = {
+  setProjectId: ({ commit }, projectId) => {
+    commit("SET_PROJECT_ID", projectId);
+  },
+  // Get label details
+  fetchLabelSetDetails: ({ commit, state }, labelSetId) => {
+    return new Promise((resolve, reject) => {
+      HTTP.get(`label-sets/${labelSetId}/`)
+        .then(response => {
+          return resolve(response.data);
+        })
+        .catch(error => {
+          reject(error);
+          console.log(error);
+        });
+    });
+  },
+
+  // Get label sets from the project
+  fetchLabelSets: ({ state }) => {
+    return new Promise((resolve, reject) => {
+      HTTP.get(`label-sets/?project=${state.projectId}`)
+        .then(response => {
+          return resolve(response.data.results);
+        })
+        .catch(error => {
+          reject(error);
+          console.log(error);
+        });
+    });
+  },
+
+  fetchCurrentUser: ({ commit }) => {
+    return HTTP.get(`/auth/me/`)
+      .then(response => {
+        commit("SET_CURRENT_USER", response.data.username);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  },
+
+  setCurrentUser: ({ commit }, currentUser) => {
+    commit("SET_CURRENT_USER", currentUser);
+  }
+};
+
+const mutations = {
+  SET_PROJECT_ID: (state, projectId) => {
+    state.projectId = projectId;
+  },
+  SET_CURRENT_USER: (state, currentUser) => {
+    state.currentUser = currentUser;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+  getters
+};

package/src/store/selection.js

@@ -0,0 +1,179 @@
+import myImports from "../api";
+
+const HTTP = myImports.HTTP;
+
+const selectionPadding = 1;
+
+const state = {
+  selection: {
+    pageNumber: null,
+    start: null,
+    end: null,
+    custom: false, // if the box was created by user in document or it comes from an annotation
+  },
+  isSelecting: false,
+  spanSelection: null,
+  elementSelected: null, // selected element id
+};
+
+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;
+  },
+  getSelectionForPage: (state) => (pageNumber) => {
+    if (state.selection.pageNumber === pageNumber) {
+      return state.selection;
+    }
+    return null;
+  },
+  isValueArray: () => (value) => {
+    return Array.isArray(value);
+  },
+};
+
+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);
+  },
+
+  startSelection: ({ commit }, { pageNumber, start }) => {
+    commit("START_SELECTION", {
+      pageNumber,
+      start,
+    });
+  },
+
+  moveSelection: ({ commit, state, dispatch }, points) => {
+    // only apply when we have a large enough selection, otherwise we risk counting misclicks
+    const xDiff = Math.abs(state.selection.start.x - points.end.x);
+    const yDiff = Math.abs(state.selection.start.y - points.end.y);
+    if (xDiff > 5 && yDiff > 5) {
+      commit("MOVE_SELECTION", points);
+    }
+
+    dispatch("document/setSelectedEntities", null, { root: true });
+  },
+
+  endSelection: ({ commit, state }, end) => {
+    const xDiff = Math.abs(state.selection.start.x - end.x);
+    const yDiff = Math.abs(state.selection.start.y - end.y);
+    // if start and end points are the same, or if we have a selection smaller than 5x5,
+    // just reset
+    if (
+      (yDiff <= 5 && xDiff <= 5) ||
+      (state.selection.start.x === end.x && state.selection.start.y == end.y)
+    ) {
+      commit("RESET_SELECTION");
+    } else {
+      state.selection.start.x = state.selection.start.x - selectionPadding;
+      state.selection.start.y = state.selection.start.y - selectionPadding;
+
+      end.x = end.x + selectionPadding;
+      end.y = end.y + selectionPadding;
+
+      commit("END_SELECTION", end);
+    }
+  },
+
+  setSelection: ({ commit }, { span, selection }) => {
+    commit("SET_SELECTION", selection);
+    commit("SET_SPAN_SELECTION", span);
+  },
+
+  getTextFromBboxes: ({ commit, rootState }, box) => {
+    return HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
+      span: [box],
+    })
+      .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", box);
+        }
+      })
+      .catch((error) => {
+        alert("Could not fetch the selected text from the backend");
+      });
+  },
+  setSpanSelection: ({ commit }, span) => {
+    commit("SET_SPAN_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;
+  },
+  MOVE_SELECTION: (state, points) => {
+    state.isSelecting = true;
+    const { start, end } = points;
+    if (start) {
+      state.selection.start = start;
+    }
+    if (end) {
+      state.selection.end = end;
+    }
+  },
+  END_SELECTION: (state, end) => {
+    state.selection.end = end;
+    state.isSelecting = false;
+  },
+  RESET_SELECTION: (state) => {
+    state.isSelecting = false;
+    state.selection.pageNumber = null;
+    state.selection.start = null;
+    state.selection.end = null;
+  },
+  SET_SPAN_SELECTION: (state, span) => {
+    state.spanSelection = span;
+  },
+  SET_SELECTION: (state, selection) => {
+    state.selection = selection;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

package/src/utils/utils.js

@@ -0,0 +1,3 @@
+export default function sleep(duration) {
+  new Promise(resolve => setTimeout(resolve, duration));
+}

package/vue.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  runtimeCompiler: true,
+  pluginOptions: {
+    i18n: {
+      locale: "en",
+      fallbackLocale: "en",
+      localeDir: "locales",
+      enableInSFC: true,
+      includeLocales: false,
+      enableBridge: true,
+    },
+  },
+};