@teselagen/ove 0.0.14 → 0.0.15

package/src/redux/index.js

@@ -0,0 +1,196 @@
+import { merge } from "lodash";
+import * as createYourOwnEnzyme from "./createYourOwnEnzyme";
+import * as showGCContent from "./showGCContent";
+import * as annotationLabelVisibility from "./annotationLabelVisibility";
+import * as annotationsToSupport from "./annotationsToSupport";
+import * as annotationVisibility from "./annotationVisibility";
+import * as caretPosition from "./caretPosition";
+import * as copyOptions from "./copyOptions";
+import * as deletionLayers from "./deletionLayers";
+import * as digestTool from "./digestTool";
+import * as findTool from "./findTool";
+import * as toolBar from "./toolBar";
+import * as frameTranslations from "./frameTranslations";
+import * as hoveredAnnotation from "./hoveredAnnotation";
+import * as minimumOrfSize from "./minimumOrfSize";
+import * as alignments from "./alignments";
+import * as panelsShown from "./panelsShown";
+import * as propertiesTool from "./propertiesTool";
+import * as lastSavedId from "./lastSavedId";
+import * as readOnly from "./readOnly";
+import * as versionHistory from "./versionHistory";
+import * as replacementLayers from "./replacementLayers";
+import * as restrictionEnzymes from "./restrictionEnzymes";
+import * as selectedAnnotations from "./selectedAnnotations";
+import * as selectionLayer from "./selectionLayer";
+import * as sequenceDataHistory from "./sequenceDataHistory";
+import * as sequenceData from "./sequenceData";
+import * as useAdditionalOrfStartCodons from "./useAdditionalOrfStartCodons";
+import * as uppercaseSequenceMapFont from "./uppercaseSequenceMapFont";
+import * as charWidth from "./charWidth";
+import * as labelLineIntensity from "./labelLineIntensity";
+import * as labelSize from "./labelSize";
+import * as featureLengthsToHide from "./featureLengthsToHide";
+import * as primerLengthsToHide from "./primerLengthsToHide";
+import * as partLengthsToHide from "./partLengthsToHide";
+import * as selectedPartTags from "./selectedPartTags";
+import { combineReducers } from "redux";
+import createAction from "./utils/createMetaAction";
+export { default as vectorEditorMiddleware } from "./middleware";
+
+const subReducers = {
+  createYourOwnEnzyme,
+  annotationLabelVisibility,
+  annotationsToSupport,
+  annotationVisibility,
+  caretPosition,
+  copyOptions,
+  deletionLayers,
+  digestTool,
+  toolBar,
+  findTool,
+  frameTranslations,
+  hoveredAnnotation,
+  minimumOrfSize,
+  panelsShown,
+  propertiesTool,
+  lastSavedId,
+  readOnly,
+  versionHistory,
+  replacementLayers,
+  restrictionEnzymes,
+  selectedAnnotations,
+  selectionLayer,
+  sequenceDataHistory,
+  sequenceData,
+  useAdditionalOrfStartCodons,
+  charWidth,
+  uppercaseSequenceMapFont,
+  showGCContent,
+  labelLineIntensity,
+  labelSize,
+  partLengthsToHide,
+  primerLengthsToHide,
+  featureLengthsToHide,
+  selectedPartTags
+};
+
+const vectorEditorInitialize = createAction("VECTOR_EDITOR_UPDATE");
+const vectorEditorClear = createAction("VECTOR_EDITOR_CLEAR");
+
+//export the actions for use elsewhere
+export const actions = {
+  ...Object.keys(subReducers).reduce(
+    (acc, k) => ({
+      ...acc,
+      ...subReducers[k]
+    }),
+    {}
+  ),
+  ...alignments,
+  vectorEditorInitialize,
+  vectorEditorClear
+};
+
+const mergeDeepKeys = [];
+//define the reducer
+const reducers = {
+  ...Object.keys(subReducers).reduce((acc, k) => {
+    if (
+      subReducers[k].default &&
+      subReducers[k].default.__shouldUseMergedState
+    ) {
+      mergeDeepKeys.push(k);
+    }
+    return {
+      ...acc,
+      [k]: subReducers[k].default
+    };
+  }, {}),
+  instantiated: () => true
+};
+
+export const editorReducer = combineReducers(reducers);
+const customDeepMerge = (state = {}, newState = {}) => {
+  return {
+    ...state,
+    ...newState,
+    ...mergeDeepKeys.reduce((acc, key) => {
+      acc[key] = merge(state[key], newState[key]);
+      return acc;
+    }, {})
+  };
+};
+
+export default function reducerFactory(initialState = {}) {
+  // if (!initialState || !Object.keys(initialState).length) {
+  //   throw new Error(
+  //     "Please pass an initial state to the vector editor reducer like: {DemoEditor: {}}!"
+  //   );
+  // }
+  return function (state = initialState, action) {
+    let editorNames;
+    const newState = {};
+    if (action.meta && action.meta.editorName) {
+      editorNames = Array.isArray(action.meta.editorName)
+        ? action.meta.editorName
+        : [action.meta.editorName];
+    }
+    let stateToReturn;
+    if (editorNames) {
+      //we're dealing with an action specific to a given editor
+      editorNames.forEach(function (editorName) {
+        let currentState = state[editorName];
+        if (action.type === "VECTOR_EDITOR_UPDATE") {
+          //deep merge certain parts of the exisiting state with the new payload of props
+          //(if you want to do a clean wipe, use VECTOR_EDITOR_CLEAR)
+          currentState = customDeepMerge(state[editorName], action.payload);
+        }
+        if (action.type === "VECTOR_EDITOR_CLEAR") {
+          currentState = undefined;
+        }
+        newState[editorName] = editorReducer(currentState, action);
+      });
+      stateToReturn = {
+        ...state,
+        ...newState
+      };
+    } else {
+      //just a normal action
+      Object.keys(state).forEach(function (editorName) {
+        if (editorName === "__allEditorsOptions") return; //we deal with __allEditorsOptions below so don't pass it here
+        newState[editorName] = editorReducer(state[editorName], action);
+      });
+      stateToReturn = newState;
+    }
+    return {
+      ...stateToReturn,
+      //these are reducers that are not editor specific (aka shared across editor instances)
+      __allEditorsOptions: [
+        ["createYourOwnEnzyme", createYourOwnEnzyme],
+        ["uppercaseSequenceMapFont", uppercaseSequenceMapFont],
+        ["showGCContent", showGCContent],
+        ["labelLineIntensity", labelLineIntensity],
+        ["labelSize", labelSize],
+        ["alignments", alignments]
+      ].reduce((acc, [key, val]) => {
+        acc[key] = val.default(
+          !state.__allEditorsOptions
+            ? undefined
+            : state.__allEditorsOptions[key],
+          action
+        );
+        return acc;
+      }, {})
+    };
+  };
+}
+
+// export const getBlankEditor = (state) => (state.blankEditor)
+export const getEditorByName = (state, editorName) => state[editorName];
+
+// export default connect((state, ownProps) => {
+//   return {
+//     toggled: state.VectorEditor[ownProps.editorName].annotationVisibility.features
+//   }
+// })()

package/src/redux/labelLineIntensity.js

@@ -0,0 +1,25 @@
+import { createReducer } from "redux-act";
+
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const changeLabelLineIntensity = createAction(
+  "changeLabelLineIntensity"
+);
+
+const newVal = window.localStorage.getItem("labelLineIntensity");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    [changeLabelLineIntensity]: (state, payload) => {
+      localStorage.setItem("labelLineIntensity", payload);
+      return payload;
+    }
+  },
+  newVal ? parseFloat(newVal) : 0.1 //  0.1 (low) || 0.4 (med) || 0.7 (high) || 1.0 (full)
+);

package/src/redux/labelSize.js

@@ -0,0 +1,23 @@
+import { createReducer } from "redux-act";
+
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const changeLabelSize = createAction("changeLabelSize");
+
+const newVal = window.localStorage.getItem("labelSize");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    [changeLabelSize]: (state, payload) => {
+      localStorage.setItem("labelSize", payload);
+      return payload;
+    }
+  },
+  newVal ? parseInt(newVal) : 8 //  8 is 100% label size
+);

package/src/redux/lastSavedId.js

@@ -0,0 +1,20 @@
+//./caretPosition.js
+import { createReducer } from "redux-act";
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const lastSavedIdUpdate = createAction("lastSavedIdUpdate"); //NOTE!!:: second argument sanitizes actions so no payload is passed
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    [lastSavedIdUpdate]: (state, payload) => {
+      return payload;
+    }
+  },
+  null
+);

package/src/redux/middleware.js

@@ -0,0 +1,112 @@
+//vectorEditorMiddleware
+//used to add undo/redo abilities to OVE
+
+// To Batch actions together use this api:
+// deleteFeature([id1, id2], {
+//   batchUndoStart: true
+// });
+// upsertFeature(
+// {
+//   ...feat1,
+//   id: uuid(),
+//   start: start - 1,
+//   end: end - 1,
+//   name
+// },
+// {
+//   batchUndoEnd: true
+// }
+// );
+
+export default (store) => (next) => (action) => {
+  if (action.meta && action.meta.disregardUndo) {
+    return next(action);
+  }
+  const disregardUndo = true;
+  if (action.type === "VE_UNDO" || action.type === "VE_REDO") {
+    const { VectorEditor } = store.getState();
+    const editorName = action.meta.editorName;
+    const editorState = VectorEditor[editorName];
+    const stack =
+      editorState.sequenceDataHistory[
+        action.type === "VE_UNDO" ? "past" : "future"
+      ] || [];
+    const stateToUse = stack[stack.length - 1];
+    store.dispatch({
+      type: action.type === "VE_UNDO" ? "VE_UNDO_META" : "VE_REDO_META",
+      payload: {
+        sequenceData: editorState.sequenceData,
+        selectionLayer: editorState.selectionLayer,
+        caretPosition: editorState.caretPosition
+      },
+      meta: { editorName, disregardUndo }
+    });
+    store.dispatch({
+      type: "SEQUENCE_DATA_UPDATE",
+      payload: stateToUse.sequenceData,
+      meta: { editorName, disregardUndo }
+    });
+    if (stateToUse.caretPosition > -1) {
+      store.dispatch({
+        type: "CARET_POSITION_UPDATE",
+        payload: stateToUse.caretPosition,
+        meta: { editorName, disregardUndo }
+      });
+    } else {
+      store.dispatch({
+        type: "SELECTION_LAYER_UPDATE",
+        payload: { ...stateToUse.selectionLayer, forceUpdate: Math.random() },
+        meta: { editorName, disregardUndo }
+      });
+    }
+    store.dispatch({
+      type: "VE_SEQUENCE_CHANGED", //used for external autosave functionality
+      payload: {
+        sequenceData: stateToUse.sequenceData,
+        editorName
+      },
+      meta: { editorName, disregardUndo: true }
+    });
+    return next(action);
+  } else {
+    //pass batchUndoStart, batchUndoMiddle and batchUndoEnd to group actions together
+    const { batchUndoEnd, batchUndoStart, batchUndoMiddle } = action.meta || {};
+    //get editor state(s)
+    const OldVectorEditor = store.getState().VectorEditor;
+    const result = next(action);
+    const NewVectorEditor = store.getState().VectorEditor;
+    Object.keys(NewVectorEditor).forEach((editorName) => {
+      const newEditorState = NewVectorEditor[editorName];
+      const oldEditorState = OldVectorEditor[editorName];
+      if (
+        oldEditorState &&
+        oldEditorState.sequenceData &&
+        oldEditorState.sequenceData !== newEditorState.sequenceData
+      ) {
+        const { sequenceData, selectionLayer, caretPosition } = oldEditorState;
+        !batchUndoEnd &&
+          !batchUndoMiddle &&
+          store.dispatch({
+            type: "ADD_TO_UNDO_STACK",
+            payload: {
+              selectionLayer,
+              sequenceData,
+              caretPosition
+            },
+            meta: { editorName, disregardUndo }
+          });
+        !batchUndoStart &&
+          !batchUndoMiddle &&
+          store.dispatch({
+            type: "VE_SEQUENCE_CHANGED", //used for external autosave functionality
+            payload: {
+              sequenceData: newEditorState.sequenceData,
+              editorName
+            },
+            meta: { editorName, disregardUndo: true }
+          });
+      }
+    });
+    return result;
+  }
+};

package/src/redux/minimumOrfSize.js

@@ -0,0 +1,24 @@
+//./caretPosition.js
+import { createReducer } from "redux-act";
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const minimumOrfSizeUpdate = createAction("minimumOrfSizeUpdate");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    [minimumOrfSizeUpdate]: (state, payload) => {
+      return payload;
+    }
+  },
+  300
+);
+
+export function getMinimumOrfSize(state) {
+  return state;
+}

package/src/redux/modalActions.js

@@ -0,0 +1,3 @@
+// ------------------------------------
+// Actions
+// ------------------------------------

package/src/redux/panelsShown.js

@@ -0,0 +1,273 @@
+import { map, flatMap } from "lodash";
+import { createReducer } from "redux-act";
+import createAction from "./utils/createMetaAction";
+import { removeItem } from "../utils/arrayUtils";
+import immer from "immer";
+
+//manages which tab panels are shown in the editor
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const panelsShownUpdate = createAction("PANELS_SHOWN_UPDATE");
+export const addPanelIfItDoesntAlreadyExist = createAction(
+  "addPanelIfItDoesntAlreadyExist"
+);
+export const togglePanelFullScreen = createAction("togglePanelFullScreen");
+export const collapsePanel = createAction("collapsePanel");
+export const closePanel = createAction("closePanel");
+export const _collapseSplitScreen = createAction("_collapseSplitScreen");
+export const setPanelAsActive = createAction("setPanelAsActive");
+export const flipActiveTabFromLinearOrCircularIfNecessary = createAction(
+  "flipActiveTabFromLinearOrCircularIfNecessary"
+);
+export const expandTabToSplitScreen = createAction("expandTabToSplitScreen");
+export const propertiesViewOpen = (unused, meta) => {
+  return setPanelAsActive("properties", meta);
+};
+export const createNewDigest = (unused, meta) => {
+  return (dispatch) => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          id: "digestTool",
+          name: "New Digest",
+          active: true,
+          canClose: true
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive("digestTool", meta));
+  };
+};
+export const createNewPCR = (unused, meta) => {
+  return (dispatch) => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          id: "pcrTool",
+          name: "New PCR",
+          active: true,
+          canClose: true
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive("pcrTool", meta));
+  };
+};
+
+export const createNewAlignment = (payload, meta) => {
+  return (dispatch) => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          type: "alignment",
+          name: "New Alignment",
+          active: true,
+          canClose: true,
+          ...payload
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive(payload.id, meta));
+  };
+};
+
+export const createNewMismatchesList = (payload, meta) => {
+  return (dispatch) => {
+    dispatch(
+      addPanelIfItDoesntAlreadyExist(
+        {
+          type: "mismatches",
+          name: "Mismatches",
+          active: true,
+          canClose: true,
+          ...payload
+        },
+        meta
+      )
+    );
+    dispatch(setPanelAsActive(payload.id, meta));
+  };
+};
+
+export const collapseSplitScreen = (activePanelId, meta) => {
+  return (dispatch) => {
+    dispatch(_collapseSplitScreen(activePanelId, meta));
+    activePanelId && dispatch(setPanelAsActive(activePanelId, meta));
+  };
+};
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createReducer(
+  {
+    [addPanelIfItDoesntAlreadyExist]: (state, panelToAdd) => {
+      if (
+        !state.some((panelGroup) => {
+          return panelGroup.some(({ id }) => {
+            return id === panelToAdd.id;
+          });
+        })
+      ) {
+        return state.map((panelGroup, index) => {
+          if (index === 0) return [panelToAdd, ...panelGroup];
+          return panelGroup;
+        });
+      }
+      return state;
+    },
+    [panelsShownUpdate]: (state, payload) => {
+      return payload.filter((group) => group.length); //filter out any empty groups
+    },
+    [flipActiveTabFromLinearOrCircularIfNecessary]: (state, setCircActive) => {
+      const newState = immer(state, (s) => {
+        s.forEach((g) => {
+          flipActiveForGroup(g, setCircActive);
+        });
+      });
+
+      return newState;
+    },
+    [closePanel]: (state, idToClose) => {
+      const newState = state.map((group) => {
+        let indexToClose;
+        group.forEach(({ id }, i) => {
+          if (id === idToClose) indexToClose = i;
+        });
+        if (indexToClose > -1) {
+          return removeItem(group, indexToClose).map((tab, i) => {
+            if (i === 0) return { ...tab, active: true };
+            else {
+              return tab;
+            }
+          });
+        }
+        return group;
+      });
+      return newState.filter((group) => group.length); //filter out any empty groups
+    },
+    [_collapseSplitScreen]: (state) => {
+      return [flatMap(state)];
+    },
+    [expandTabToSplitScreen]: (state, activePanelId) => {
+      let panelToMove;
+      return [
+        state[0]
+          .filter((panel) => {
+            if (panel.id === activePanelId) {
+              panelToMove = panel;
+              return false;
+            }
+            return true;
+          })
+          .map((panel, i) => {
+            return i === 0 ? { ...panel, active: true } : panel;
+          }),
+        [{ ...panelToMove, active: true }]
+      ];
+    },
+    [setPanelAsActive]: (state, panelId) => {
+      return map(state, (panelGroup) => {
+        const isPanelInGroup = panelGroup.some(({ id }) => {
+          return panelId === id;
+        });
+        return panelGroup.map((panel) => {
+          return {
+            ...panel,
+            active:
+              panelId === panel.id
+                ? true
+                : isPanelInGroup
+                ? false
+                : panel.active
+          };
+        });
+      });
+    },
+    [togglePanelFullScreen]: (state, panelId) => {
+      return map(state, (panelGroup) => {
+        const isPanelInGroup = panelGroup.some(({ id }) => {
+          return panelId === id;
+        });
+        return panelGroup.map((panel) => {
+          return {
+            ...panel,
+            active:
+              panelId === panel.id
+                ? true
+                : isPanelInGroup
+                ? false
+                : panel.active,
+            fullScreen:
+              panelId === panel.id
+                ? !panel.fullScreen
+                : isPanelInGroup
+                ? false
+                : panel.fullScreen
+          };
+        });
+      });
+    },
+    [collapsePanel]: (state, panelToCloseId) => {
+      return [
+        flatMap(state, (panelGroup) => {
+          return panelGroup;
+        }).map((panel) => {
+          if (panel.id === panelToCloseId) {
+            return {
+              ...panel,
+              active: false
+            };
+          }
+          return panel;
+        })
+      ];
+    }
+  },
+  [
+    [
+      {
+        id: "circular",
+        name: "Circular Map",
+        active: true
+        //   canClose: true
+      },
+      {
+        id: "rail",
+        name: "Linear Map",
+        active: false
+      }
+    ],
+    [
+      {
+        id: "sequence",
+        name: "Sequence Map",
+        active: true
+      },
+      {
+        id: "properties",
+        name: "Properties",
+        active: false
+      }
+    ]
+  ]
+);
+
+function flipActiveForGroup(group, setCircActive) {
+  const activeTab = group.find(({ active }) => active);
+  if (activeTab?.id === (setCircActive ? "rail" : "circular")) {
+    //we're on the wrong tab type so check if the other tab is in
+    const newTabToActivate = group.find(
+      ({ id }) => id === (setCircActive ? "circular" : "rail")
+    );
+    if (newTabToActivate) {
+      newTabToActivate.active = true;
+      activeTab.active = false;
+    }
+  }
+}

package/src/redux/partLengthsToHide.js

@@ -0,0 +1,23 @@
+import createMergedDefaultStateReducer from "./utils/createMergedDefaultStateReducer";
+import createAction from "./utils/createMetaAction";
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const updatePartLengthsToHide = createAction("updatePartLengthsToHide");
+export const togglePartLengthsToHide = createAction("togglePartLengthsToHide");
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createMergedDefaultStateReducer(
+  {
+    [updatePartLengthsToHide]: (state, payload) => {
+      return { ...state, ...payload };
+    },
+    [togglePartLengthsToHide]: (state) => {
+      return { ...state, enabled: !state["enabled"] };
+    }
+  },
+  { enabled: false, min: 0, max: 800 }
+);