@teselagen/ove 0.0.14 → 0.0.15

package/src/withEditorProps/index.js

@@ -0,0 +1,1010 @@
+import { getFeatureToColorMap } from "@teselagen/sequence-utils";
+import {
+  anyToJson,
+  jsonToGenbank,
+  jsonToFasta,
+  cleanUpTeselagenJsonForExport
+} from "@teselagen/bio-parsers";
+import FileSaver from "file-saver";
+
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { compose, withHandlers, withProps } from "recompose";
+import { getFormValues /* formValueSelector */ } from "redux-form";
+import { showConfirmationDialog } from "@teselagen/ui";
+import { some, map, keyBy, omit, isArray, noop } from "lodash";
+import {
+  tidyUpSequenceData,
+  getComplementSequenceAndAnnotations,
+  insertSequenceDataAtPositionOrRange,
+  getReverseComplementSequenceAndAnnotations,
+  rotateSequenceDataToPosition
+} from "@teselagen/sequence-utils";
+import { Intent } from "@blueprintjs/core";
+import {
+  convertRangeTo0Based,
+  getRangeLength,
+  invertRange,
+  normalizeRange
+} from "@teselagen/range-utils";
+import shortid from "shortid";
+
+import addMetaToActionCreators from "../redux/utils/addMetaToActionCreators";
+import { actions, editorReducer } from "../redux";
+import s from "../selectors";
+import { allTypes } from "../utils/annotationTypes";
+
+import { MAX_MATCHES_DISPLAYED } from "../constants/findToolConstants";
+import { createSelector, defaultMemoize } from "reselect";
+import domtoimage from "dom-to-image";
+import {
+  hideDialog,
+  showAddOrEditAnnotationDialog,
+  showDialog
+} from "../GlobalDialogUtils";
+import updateEditor from "../updateEditor";
+// import { getStartEndFromBases } from "../utils/editorUtils";
+
+const getUpperOrLowerSeq = defaultMemoize(
+  (uppercaseSequenceMapFont, sequence = "") =>
+    uppercaseSequenceMapFont === "uppercase"
+      ? sequence.toUpperCase()
+      : uppercaseSequenceMapFont === "lowercase"
+      ? sequence.toLowerCase()
+      : sequence
+);
+
+const getTypesToOmit = (annotationsToSupport) => {
+  const typesToOmit = {};
+  allTypes.forEach((type) => {
+    if (!annotationsToSupport[type]) typesToOmit[type] = false;
+  });
+  return typesToOmit;
+};
+
+const getVisibilities = createSelector(
+  (ed) => ed.annotationVisibility,
+  (ed) => ed.annotationLabelVisibility,
+  (ed) => ed.annotationsToSupport,
+  (annotationVisibility, annotationLabelVisibility, annotationsToSupport) => {
+    const typesToOmit = getTypesToOmit(annotationsToSupport);
+    const annotationVisibilityToUse = {
+      ...annotationVisibility,
+      ...typesToOmit
+    };
+    const annotationLabelVisibilityToUse = {
+      ...annotationLabelVisibility,
+      ...typesToOmit
+    };
+    return {
+      annotationVisibilityToUse,
+      annotationLabelVisibilityToUse,
+      typesToOmit
+    };
+  }
+);
+
+async function getSaveDialogEl() {
+  return new Promise((resolve) => {
+    showDialog({
+      dialogType: "PrintDialog",
+      props: {
+        dialogProps: {
+          title: "Generating Image to Save...",
+          isCloseButtonShown: false
+        },
+        addPaddingBottom: true,
+        hideLinearCircularToggle: true,
+        hidePrintButton: true
+      }
+    });
+
+    const id = setInterval(() => {
+      const componentToPrint = document.querySelector(".bp3-dialog");
+      if (componentToPrint) {
+        clearInterval(id);
+        resolve(componentToPrint);
+      }
+    }, 1000);
+  });
+}
+/**
+ * Function to generate a png
+ *
+ * @return {object} - Blob (png) | Error
+ */
+const generatePngFromPrintDialog = async (props) => {
+  const saveDialog = await getSaveDialogEl(props);
+
+  const printArea = saveDialog.querySelector(".bp3-dialog-body");
+
+  const result = await domtoimage
+    .toBlob(printArea)
+    .then((blob) => {
+      return blob;
+    })
+    .catch((error) => {
+      console.error(error);
+      return error;
+    });
+  hideDialog();
+  return result;
+};
+
+export const handleSave =
+  (props) =>
+  async (opts = {}) => {
+    const {
+      onSave,
+      onSaveAs,
+      generatePng,
+      readOnly,
+      alwaysAllowSave,
+      sequenceData,
+      lastSavedIdUpdate
+    } = props;
+    const saveHandler = opts.isSaveAs ? onSaveAs || onSave : onSave;
+
+    const updateLastSavedIdToCurrent = () => {
+      lastSavedIdUpdate(sequenceData.stateTrackingId);
+    };
+
+    // Optionally generate png
+    if (generatePng) {
+      opts.pngFile = await generatePngFromPrintDialog(props);
+    }
+
+    // TODO: pass additionalProps (blob or error) to the user
+    const promiseOrVal =
+      (!readOnly || alwaysAllowSave || opts.isSaveAs) &&
+      saveHandler &&
+      saveHandler(
+        opts,
+        tidyUpSequenceData(sequenceData, { annotationsAsObjects: true }),
+        props,
+        updateLastSavedIdToCurrent
+      );
+
+    if (promiseOrVal && promiseOrVal.then) {
+      return promiseOrVal.then(updateLastSavedIdToCurrent);
+    }
+  };
+
+export const handleInverse = (props) => () => {
+  const {
+    sequenceLength,
+    selectionLayer,
+    caretPosition,
+    selectionLayerUpdate,
+    caretPositionUpdate
+  } = props;
+
+  if (sequenceLength <= 0) {
+    return false;
+  }
+  if (selectionLayer.start > -1) {
+    if (getRangeLength(selectionLayer, sequenceLength) === sequenceLength) {
+      caretPositionUpdate(selectionLayer.start);
+    } else {
+      selectionLayerUpdate(invertRange(selectionLayer, sequenceLength));
+    }
+  } else {
+    if (caretPosition > -1) {
+      selectionLayerUpdate(
+        normalizeRange(
+          {
+            start: caretPosition,
+            end: caretPosition - 1
+          },
+          sequenceLength
+        )
+      );
+    } else {
+      selectionLayerUpdate({
+        start: 0,
+        end: sequenceLength - 1
+      });
+    }
+  }
+};
+
+export const updateCircular = (props) => async (isCircular) => {
+  const { _updateCircular, updateSequenceData, sequenceData } = props;
+  if (!isCircular && hasAnnotationThatSpansOrigin(sequenceData)) {
+    const doAction = await showConfirmationDialog({
+      intent: Intent.DANGER, //applied to the right most confirm button
+      confirmButtonText: "Truncate Annotations",
+      canEscapeKeyCancel: true, //this is false by default
+      text: "Careful! Origin spanning annotations will be truncated. Are you sure you want to make the sequence linear?"
+    });
+    if (!doAction) return; //stop early
+    updateSequenceData(truncateOriginSpanningAnnotations(sequenceData), {
+      batchUndoStart: true
+    });
+  }
+  _updateCircular(isCircular, { batchUndoEnd: true });
+};
+
+export const importSequenceFromFile =
+  (props) =>
+  async (file, opts = {}) => {
+    const { onImport } = props;
+    const result = await anyToJson(file, { acceptParts: true, ...opts });
+    // TODO maybe handle import errors/warnings better
+    const failed = !result[0].success;
+    const messages = result[0].messages;
+    if (isArray(messages)) {
+      messages.forEach((msg) => {
+        const type = msg.substr(0, 20).toLowerCase().includes("error")
+          ? failed
+            ? "error"
+            : "warning"
+          : "info";
+        window.toastr[type](msg);
+      });
+    }
+    if (failed) {
+      window.toastr.error(
+        "Error importing sequence(s). See console for more errors"
+      );
+      console.error(`Seq import results:`, result);
+    } else if (result.length > 1) {
+      showDialog({
+        dialogType: "MultipleSeqsDetectedOnImportDialog",
+        props: {
+          finishDisplayingSeq,
+          results: result
+        }
+      });
+    } else {
+      finishDisplayingSeq(result[0].parsedSequence);
+    }
+    async function finishDisplayingSeq(seqData) {
+      if (onImport) {
+        seqData = await onImport(seqData);
+      }
+
+      if (seqData) {
+        seqData.stateTrackingId = shortid();
+        updateEditor(
+          {
+            getState: () => ({ VectorEditor: { [props.editorName]: props } }),
+            dispatch: props.dispatch
+          },
+          props.editorName,
+          { sequenceData: seqData }
+        );
+        props.flipActiveTabFromLinearOrCircularIfNecessary(seqData.circular);
+
+        window.toastr.success("Sequence Imported");
+      }
+    }
+  };
+
+export const exportSequenceToFile = (props) => (format) => {
+  const { sequenceData } = props;
+  let convert, fileExt;
+
+  if (format === "genbank") {
+    convert = jsonToGenbank;
+    fileExt = "gb";
+  } else if (format === "genpept") {
+    convert = jsonToGenbank;
+    fileExt = "gp";
+  } else if (format === "teselagenJson") {
+    convert = jsonToJson;
+    fileExt = "json";
+  } else if (format === "fasta") {
+    convert = jsonToFasta;
+    fileExt = "fasta";
+  } else {
+    console.error(`Invalid export format: '${format}'`); // dev error
+    return;
+  }
+  const blob = new Blob([convert(sequenceData)], { type: "text/plain" });
+  const filename = `${sequenceData.name || "Untitled_Sequence"}.${fileExt}`;
+  FileSaver.saveAs(blob, filename);
+  window.toastr.success("File Downloaded Successfully");
+};
+
+/**
+ * This function basically connects the wrapped component with all of the state stored in a given editor instance
+ * and then some extra goodies like computed properties and namespace bound action handlers
+ */
+export default compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToActions,
+    (mapProps, dispatchProps, ownProps) => {
+      const toSpread = {};
+      if (mapProps.annotationToAdd) {
+        toSpread.original_selectionLayerUpdate =
+          dispatchProps.selectionLayerUpdate;
+        toSpread.selectionLayerUpdate = (sel) => {
+          dispatchProps.dispatch({
+            type: "@@redux-form/CHANGE",
+            meta: {
+              form: mapProps.annotationToAdd.formName,
+              field: "start",
+              touch: false,
+              persistentSubmitErrors: false
+            },
+            payload: sel.start + 1
+          });
+          dispatchProps.dispatch({
+            type: "@@redux-form/CHANGE",
+            meta: {
+              form: mapProps.annotationToAdd.formName,
+              field: "end",
+              touch: false,
+              persistentSubmitErrors: false
+            },
+            payload: sel.end + 1
+          });
+        };
+        toSpread.caretPositionUpdate = noop;
+      }
+      return { ...ownProps, ...mapProps, ...dispatchProps, ...toSpread };
+    }
+  ),
+  withHandlers({
+    wrappedInsertSequenceDataAtPositionOrRange: (props) => {
+      return (
+        _sequenceDataToInsert,
+        _existingSequenceData,
+        _caretPositionOrRange,
+        _options
+      ) => {
+        const {
+          sequenceDataToInsert,
+          existingSequenceData,
+          caretPositionOrRange,
+          options
+        } = props.beforeSequenceInsertOrDelete
+          ? props.beforeSequenceInsertOrDelete(
+              tidyUpSequenceData(_sequenceDataToInsert),
+              tidyUpSequenceData(_existingSequenceData),
+              _caretPositionOrRange,
+              _options
+            ) || {}
+          : {};
+        return [
+          insertSequenceDataAtPositionOrRange(
+            sequenceDataToInsert || _sequenceDataToInsert,
+            existingSequenceData || _existingSequenceData,
+            caretPositionOrRange || _caretPositionOrRange,
+            options || _options
+          ),
+          options || _options || {}
+        ];
+      };
+    },
+
+    upsertTranslation: (props) => {
+      return async (translationToUpsert) => {
+        if (!translationToUpsert) return;
+        const { _upsertTranslation, sequenceData } = props;
+        if (
+          !translationToUpsert.id &&
+          some(sequenceData.translations || [], (existingTranslation) => {
+            if (
+              //check if an identical existingTranslation exists already
+              existingTranslation.translationType === "User Created" &&
+              existingTranslation.start === translationToUpsert.start &&
+              existingTranslation.end === translationToUpsert.end &&
+              !!translationToUpsert.forward === !!existingTranslation.forward
+            ) {
+              return true;
+            }
+          })
+        ) {
+          const doAction = await showConfirmationDialog({
+            // intent: Intent.DANGER, //applied to the right most confirm button
+            confirmButtonText: "Create Translation",
+            canEscapeKeyCancel: true, //this is false by default
+            text: "This region has already been translated. Are you sure you want to make another translation for it?"
+          });
+          if (!doAction) return; //stop early
+        }
+        _upsertTranslation(translationToUpsert);
+      };
+    }
+  }),
+  withHandlers({
+    handleSave,
+    importSequenceFromFile,
+    exportSequenceToFile,
+    updateCircular,
+    //add additional "computed handlers here"
+    selectAll: (props) => () => {
+      const { sequenceLength, selectionLayerUpdate } = props;
+      sequenceLength > 0 &&
+        selectionLayerUpdate({
+          start: 0,
+          end: sequenceLength - 1
+        });
+    },
+    //handleNewPrimer handleNewFeature handleNewPart
+    ...["Part", "Feature", "Primer"].reduce((acc, key) => {
+      acc[`handleNew${key}`] = (props) => () => {
+        const { readOnly, selectionLayer, caretPosition, sequenceData } = props;
+
+        if (readOnly) {
+          window.toastr.warning(
+            `Sorry, Can't Create New ${key}s in Read-Only Mode`
+          );
+        } else {
+          const rangeToUse =
+            selectionLayer.start > -1
+              ? { ...selectionLayer, id: undefined }
+              : caretPosition > -1
+              ? {
+                  start: caretPosition,
+                  end: sequenceData.isProtein
+                    ? caretPosition + 2
+                    : caretPosition
+                }
+              : {
+                  start: 0,
+                  end: sequenceData.isProtein ? 2 : 0
+                };
+          showAddOrEditAnnotationDialog({
+            type: key.toLowerCase(),
+            annotation: {
+              ...rangeToUse,
+              forward: !(selectionLayer.forward === false)
+            }
+          });
+        }
+      };
+      return acc;
+    }, {}),
+
+    handleRotateToCaretPosition: (props) => () => {
+      const {
+        caretPosition,
+        readOnly,
+        sequenceData,
+        updateSequenceData,
+        caretPositionUpdate
+      } = props;
+      if (readOnly) {
+        return;
+      }
+      if (caretPosition < 0) return;
+      updateSequenceData(
+        rotateSequenceDataToPosition(sequenceData, caretPosition)
+      );
+      caretPositionUpdate(0);
+    },
+
+    handleReverseComplementSelection: (props) => () => {
+      const {
+        sequenceData,
+        updateSequenceData,
+        wrappedInsertSequenceDataAtPositionOrRange,
+        selectionLayer
+      } = props;
+      if (!(selectionLayer.start > -1)) {
+        return; //return early
+      }
+      const reversedSeqData = getReverseComplementSequenceAndAnnotations(
+        sequenceData,
+        {
+          range: selectionLayer
+        }
+      );
+      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+        reversedSeqData,
+        sequenceData,
+        selectionLayer,
+        {
+          maintainOriginSplit: true
+        }
+      );
+      updateSequenceData(newSeqData);
+    },
+
+    handleComplementSelection: (props) => () => {
+      const {
+        sequenceData,
+        updateSequenceData,
+        selectionLayer,
+        wrappedInsertSequenceDataAtPositionOrRange
+      } = props;
+      if (!(selectionLayer.start > -1)) {
+        return; //return early
+      }
+      const comp = getComplementSequenceAndAnnotations(sequenceData, {
+        range: selectionLayer
+      });
+      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+        comp,
+        sequenceData,
+        selectionLayer,
+        {
+          maintainOriginSplit: true
+        }
+      );
+      updateSequenceData(newSeqData);
+    },
+
+    handleReverseComplementSequence: (props) => () => {
+      const { sequenceData, updateSequenceData } = props;
+      updateSequenceData(
+        getReverseComplementSequenceAndAnnotations(sequenceData)
+      );
+      window.toastr.success("Reverse Complemented Sequence Successfully");
+    },
+
+    handleComplementSequence: (props) => () => {
+      const { sequenceData, updateSequenceData } = props;
+      updateSequenceData(getComplementSequenceAndAnnotations(sequenceData));
+      window.toastr.success("Complemented Sequence Successfully");
+    },
+    handleInverse
+  })
+);
+
+const getEditorState = createSelector(
+  (state) => state.VectorEditor,
+  (state, editorName) => editorName,
+  (VectorEditor, editorName) => {
+    return VectorEditor[editorName];
+  }
+);
+
+function mapStateToProps(state, ownProps) {
+  const {
+    editorName,
+    sequenceData: sequenceDataFromProps,
+    allowSeqDataOverride,
+    allowMultipleFeatureDirections
+  } = ownProps;
+  const editorState = getEditorState(state, editorName);
+  const meta = { editorName };
+  const { VectorEditor } = state;
+  const { __allEditorsOptions } = VectorEditor;
+  const { uppercaseSequenceMapFont } = __allEditorsOptions;
+
+  if (!editorState) {
+    return editorReducer({}, {});
+  }
+
+  const { findTool, annotationsToSupport = {} } = editorState;
+  const visibilities = getVisibilities(editorState);
+  let annotationToAdd;
+  [
+    ["AddOrEditFeatureDialog", "filteredFeatures", "features"],
+    ["AddOrEditPrimerDialog", "filteredPrimers", "primers"],
+    ["AddOrEditPartDialog", "filteredParts", "parts"]
+  ].forEach(([n, type, annotationTypePlural]) => {
+    const vals = getFormValues(n)(state);
+    if (vals) {
+      annotationToAdd = getAnnToAdd(vals, n, type, annotationTypePlural);
+    }
+  });
+
+  const toReturn = {
+    ...editorState,
+    meta,
+    annotationToAdd
+  };
+
+  if (sequenceDataFromProps && allowSeqDataOverride) {
+    //return early here because we don't want to override the sequenceData being passed in
+    //this is a little hacky but allows us to track selectionLayer/caretIndex using redux but on a sequence that isn't being stored alongside that info
+    return toReturn;
+  }
+
+  const filteredCutsites = s.filteredCutsitesSelector(
+    editorState,
+    ownProps.additionalEnzymes,
+    ownProps.enzymeGroupsOverride
+  );
+  const cutsites = filteredCutsites.cutsitesArray;
+  const filteredRestrictionEnzymes =
+    s.filteredRestrictionEnzymesSelector(editorState);
+  const isEnzymeFilterAnd = s.isEnzymeFilterAndSelector(editorState);
+  // const orfs = s.orfsSelector(editorState);
+  const selectedCutsites = s.selectedCutsitesSelector(editorState);
+  const allCutsites = s.cutsitesSelector(
+    editorState,
+    ownProps.additionalEnzymes
+  );
+  const sequenceLength = s.sequenceLengthSelector(editorState);
+
+  const { matchedSearchLayer, searchLayers, matchesTotal } =
+    getSearchLayersAndMatch(editorState);
+  const annotationSearchMatches = s.annotationSearchSelector(editorState);
+
+  const _sequenceDataToUse = getSequenceDataToUse(
+    editorState,
+    cutsites,
+    __allEditorsOptions
+  );
+
+  const [sequenceDataToUse, newSelection] = getSeqDataWithAnnToAdd(
+    _sequenceDataToUse,
+    annotationToAdd,
+    allowMultipleFeatureDirections
+  );
+
+  const f = getFindTool(findTool, matchesTotal);
+  return {
+    ...editorState,
+    meta,
+    annotationToAdd,
+    ...(newSelection && { selectionLayer: newSelection }),
+    selectedCutsites,
+    sequenceLength,
+    allCutsites,
+    filteredCutsites,
+    filteredRestrictionEnzymes,
+    isEnzymeFilterAnd,
+    annotationSearchMatches,
+    searchLayers,
+    matchedSearchLayer,
+    findTool: f,
+    annotationsToSupport,
+    annotationVisibility: visibilities.annotationVisibilityToUse,
+    typesToOmit: visibilities.typesToOmit,
+    annotationLabelVisibility: visibilities.annotationLabelVisibilityToUse,
+    sequenceData: sequenceDataToUse,
+    uppercaseSequenceMapFont,
+    showGCContent: getShowGCContent(state, ownProps)
+  };
+}
+
+export function mapDispatchToActions(dispatch, ownProps) {
+  const { editorName } = ownProps;
+
+  const { actionOverrides = fakeActionOverrides } = ownProps;
+  const actionsToPass = getCombinedActions(
+    editorName,
+    actions,
+    actionOverrides,
+    dispatch
+  );
+  const updateSel =
+    ownProps.selectionLayerUpdate || actionsToPass.selectionLayerUpdate;
+  const updateCar =
+    ownProps.caretPositionUpdate || actionsToPass.caretPositionUpdate;
+  return {
+    ...actionsToPass,
+    selectionLayerUpdate: ownProps.onSelectionOrCaretChanged
+      ? (selectionLayer) => {
+          ownProps.onSelectionOrCaretChanged({
+            selectionLayer,
+            caretPosition: -1
+          });
+          updateSel(selectionLayer);
+        }
+      : updateSel,
+    caretPositionUpdate: ownProps.onSelectionOrCaretChanged
+      ? (caretPosition) => {
+          ownProps.onSelectionOrCaretChanged({
+            caretPosition,
+            selectionLayer: { start: -1, end: -1 }
+          });
+          updateCar(caretPosition);
+        }
+      : updateCar,
+
+    dispatch
+  };
+}
+
+const defaultOverrides = {};
+export function fakeActionOverrides() {
+  return defaultOverrides;
+}
+
+export function getCombinedActions(
+  editorName,
+  actions,
+  actionOverrides,
+  dispatch
+) {
+  const meta = { editorName };
+
+  let metaActions = addMetaToActionCreators(actions, meta);
+  // let overrides = addMetaToActionCreators(actionOverrides(metaActions), meta);
+  const overrides = {};
+  metaActions = {
+    undo: () => {
+      window.toastr.success("Undo Successful");
+      return {
+        type: "VE_UNDO",
+        meta: {
+          editorName
+        }
+      };
+    },
+    redo: () => {
+      window.toastr.success("Redo Successful");
+      return {
+        type: "VE_REDO",
+        meta: {
+          editorName
+        }
+      };
+    },
+    ...metaActions,
+    ...overrides
+  };
+  //add meta to all action creators before passing them to the override function
+  // var metaActions = addMetaToActionCreators(actions, meta)
+  // let metaOverrides = addMetaToActionCreators(
+  //   actionOverrides(metaActions),
+  //   meta
+  // );
+
+  //rebind the actions with dispatch and meta
+  const actionsToPass = {
+    ...metaActions
+    // ...metaOverrides
+  };
+  return bindActionCreators(actionsToPass, dispatch);
+}
+
+function truncateOriginSpanningAnnotations(seqData) {
+  const {
+    features = [],
+    parts = [],
+    translations = [],
+    primers = [],
+    sequence
+  } = seqData;
+  return {
+    ...seqData,
+    features: truncateOriginSpanners(features, sequence.length),
+    parts: truncateOriginSpanners(parts, sequence.length),
+    translations: truncateOriginSpanners(translations, sequence.length),
+    primers: truncateOriginSpanners(primers, sequence.length)
+  };
+}
+
+function truncateOriginSpanners(annotations, sequenceLength) {
+  return map(annotations, (annotation) => {
+    const { start = 0, end = 0 } = annotation;
+    if (start > end) {
+      return {
+        ...annotation,
+        end: sequenceLength - 1
+      };
+    } else {
+      return annotation;
+    }
+  });
+}
+
+function hasAnnotationThatSpansOrigin({
+  features = [],
+  parts = [],
+  translations = [],
+  primers = []
+}) {
+  return (
+    doAnySpanOrigin(features) ||
+    doAnySpanOrigin(parts) ||
+    doAnySpanOrigin(translations) ||
+    doAnySpanOrigin(primers)
+  );
+}
+function doAnySpanOrigin(annotations) {
+  return some(annotations, ({ start = 0, end = 0 }) => {
+    if (start > end) return true;
+  });
+}
+
+export const connectToEditor = (fn) => {
+  return connect(
+    (state, ownProps, ...rest) => {
+      const editor = state.VectorEditor[ownProps.editorName] || {};
+      editor.sequenceData = editor.sequenceData || {};
+      editor.sequenceData.sequence = getUpperOrLowerSeq(
+        state.VectorEditor.__allEditorsOptions.uppercaseSequenceMapFont,
+        editor.sequenceData.sequence
+      );
+
+      return fn ? fn(editor, ownProps, ...rest, state) : {};
+    },
+    mapDispatchToActions
+    // function mergeProps(propsFromState, propsFromDispatch) {
+    //   return {
+    //     ...propsFromState,
+    //     ...propsFromDispatch
+    //   };
+    // }
+  );
+};
+
+//this is to enhance non-redux connected views like LinearView, or CircularView or RowView
+//so they can still render things like translations, ..etc
+
+//Currently only supporting translations
+export const withEditorPropsNoRedux = withProps((props) => {
+  const {
+    sequenceData,
+    sequenceDataWithRefSeqCdsFeatures,
+    annotationVisibility,
+    annotationVisibilityOverrides
+  } = props;
+  const translations = s.translationsSelector({
+    sequenceData: sequenceDataWithRefSeqCdsFeatures || sequenceData,
+    annotationVisibility: {
+      ...annotationVisibility,
+      ...annotationVisibilityOverrides
+    }
+  });
+  const toReturn = {
+    sequenceData: {
+      ...sequenceData,
+      translations
+    }
+  };
+  return toReturn;
+});
+
+export function getShowGCContent(state, ownProps) {
+  const showGCContent = state.VectorEditor.__allEditorsOptions.showGCContent;
+
+  const toRet =
+    showGCContent === null
+      ? ownProps.showGCContentByDefault //user hasn't yet set this option
+      : showGCContent;
+  return toRet;
+}
+
+function jsonToJson(incomingJson) {
+  return JSON.stringify(
+    omit(
+      cleanUpTeselagenJsonForExport(
+        tidyUpSequenceData(incomingJson, { annotationsAsObjects: false })
+      ),
+      [
+        "sequenceFragments",
+        "sequenceFeatures",
+        "cutsites",
+        "orfs",
+        "filteredParts",
+        "filteredFeatures",
+        "filteredPrimers"
+      ]
+    )
+  );
+}
+
+const getSearchLayersAndMatch = createSelector(
+  (ed) => ed.findTool,
+  s.searchLayersSelector,
+  (findTool, _searchLayers) => {
+    let searchLayers;
+    let matchedSearchLayer = { start: -1, end: -1 };
+    searchLayers = _searchLayers.map((item, index) => {
+      let itemToReturn = item;
+      if (index === findTool.matchNumber) {
+        itemToReturn = {
+          ...item,
+          className: item.className + " veSearchLayerActive"
+        };
+        matchedSearchLayer = itemToReturn;
+      }
+      return itemToReturn;
+    });
+    const matchesTotal = searchLayers.length;
+    if (
+      (!findTool.highlightAll && searchLayers[findTool.matchNumber]) ||
+      searchLayers.length > MAX_MATCHES_DISPLAYED
+    ) {
+      searchLayers = [searchLayers[findTool.matchNumber]];
+    }
+    return {
+      matchesTotal,
+      searchLayers,
+      matchedSearchLayer
+    };
+  }
+);
+const getSequenceDataToUse = createSelector(
+  (a, b, __allEditorsOptions) => __allEditorsOptions.uppercaseSequenceMapFont,
+  (ed) => ed.sequenceData,
+  (ed, cutsites) => cutsites,
+  s.translationsSelector,
+  s.filteredFeaturesSelector,
+  s.filteredPrimersSelector,
+  s.filteredPartsSelector,
+  s.orfsSelector,
+  (
+    uppercaseSequenceMapFont,
+    sequenceData,
+    cutsites,
+    translations,
+    filteredFeatures,
+    filteredPrimers,
+    filteredParts,
+    orfs
+  ) => {
+    return {
+      ...sequenceData,
+      sequence: getUpperOrLowerSeq(
+        uppercaseSequenceMapFont,
+        sequenceData.sequence
+      ),
+      filteredParts,
+      filteredFeatures,
+      filteredPrimers,
+      cutsites,
+      orfs,
+      translations
+    };
+  }
+);
+
+const getFindTool = createSelector(
+  (f) => f,
+  (f, m) => m,
+  (findTool, matchesTotal) => {
+    return {
+      ...findTool,
+      matchesTotal
+    };
+  }
+);
+
+const getAnnToAdd = defaultMemoize((vals, n, type, annotationTypePlural) => {
+  const annToAdd = {
+    color: getFeatureToColorMap({ includeHidden: true })[
+      vals.type || "primer_bind"
+    ], //we won't have the correct color yet so we set it here
+    ...vals,
+    formName: n,
+    type,
+    annotationTypePlural,
+    name: vals.name || "Untitled"
+  };
+  if (!vals.useLinkedOligo) {
+    delete annToAdd.bases;
+  }
+  return annToAdd;
+});
+const getSeqDataWithAnnToAdd = defaultMemoize(
+  (seqData, ann, allowMultipleFeatureDirections) => {
+    if (ann) {
+      const selectionLayer = convertRangeTo0Based(ann);
+      delete selectionLayer.color;
+      const id = ann.id || "tempId123";
+      const name = ann.name || "";
+      const anns = keyBy(seqData[ann.type], "id");
+      let toSpread = {};
+      if (
+        ann.annotationTypePlural === "features" &&
+        allowMultipleFeatureDirections &&
+        ann.arrowheadType !== undefined
+      ) {
+        toSpread = {
+          forward: ann.arrowheadType !== "BOTTOM",
+          arrowheadType: ann.arrowheadType
+        };
+      }
+      anns[id] = {
+        ...ann,
+        id,
+        name,
+        ...selectionLayer,
+        ...(ann.bases && {
+          // ...getStartEndFromBases({ ...ann, sequenceLength }),
+          fullSeq: seqData.sequence
+        }),
+        ...toSpread,
+        locations: ann.locations
+          ? ann.locations.map(convertRangeTo0Based)
+          : undefined
+      };
+
+      return [{ ...seqData, [ann.type]: anns }, selectionLayer];
+    }
+    return [seqData];
+  }
+);