@teselagen/ove 0.0.13 → 0.0.15

package/src/helperComponents/withHover.js

@@ -0,0 +1,90 @@
+import classnames from "classnames";
+import { compose } from "redux";
+import { connect } from "react-redux";
+import React from "react";
+import { store } from "@risingstack/react-easy-state";
+import * as hoveredAnnotationActions from "../redux/hoveredAnnotation";
+import { withHandlers, branch } from "recompose";
+import { modifiableTypes } from "@teselagen/sequence-utils";
+
+export const HoveredIdContext = React.createContext({
+  hoveredId: "" // default value
+});
+
+export function withHoveredIdFromContext(Component) {
+  return function HoveredIdComponent(props) {
+    return (
+      <HoveredIdContext.Consumer>
+        {(contexts) => <Component {...props} {...contexts} />}
+      </HoveredIdContext.Consumer>
+    );
+  };
+}
+export const hoveredAnnEasyStore = store({
+  hoveredAnn: undefined,
+  selectedAnn: undefined
+});
+
+export default compose(
+  withHoveredIdFromContext,
+  branch(
+    ({ noRedux }) => !noRedux,
+    connect(function (
+      state,
+      {
+        id,
+        editorName = "StandaloneEditor",
+        className,
+        hoveredId: hoveredIdFromContext,
+        passHoveredId
+      }
+    ) {
+      if (!editorName) {
+        console.warn(
+          "please pass an editorName to the withHover() wrapped component"
+        );
+      }
+      const editorState = state.VectorEditor[editorName] || {};
+      const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext; //we can pass a hoveredId from context in order to still use the hover functionality without being connected to redux! see http://localhost:3344/#/SimpleCircularOrLinearView for an example
+      const isIdHashmap = typeof id === "object";
+
+      const hovered = !!(isIdHashmap ? id[hoveredId] : hoveredId === id);
+      const newClassName = classnames(className, "hoverHelper", {
+        veAnnotationHovered: hovered
+      });
+      const toReturn = {
+        hovered,
+        className: newClassName
+      };
+      if (hovered && passHoveredId) {
+        //only pass hoveredId if it is hovered
+        toReturn.hoveredId = hoveredId;
+      }
+      return toReturn;
+    },
+    hoveredAnnotationActions)
+  ),
+  withHandlers({
+    onMouseOver: (props) => (e) => {
+      const { editorName, id, hoveredAnnotationUpdate } = props;
+      const isIdHashmap = typeof id === "object";
+      const idToPass = isIdHashmap ? Object.keys(id)[0] : id;
+      const annot = props?.annotation || props?.label?.annotation;
+      if (modifiableTypes.includes(annot?.annotationTypePlural)) {
+        hoveredAnnEasyStore.hoveredAnn = annot;
+      }
+      //because the calling onHover can slow things down, we disable it if dragging or scrolling
+      if (window.__veDragging || window.__veScrolling) return;
+      e.stopPropagation(); //this is important otherwise hovering labels inside circular view label groups won't work
+      hoveredAnnotationUpdate &&
+        hoveredAnnotationUpdate(idToPass, { editorName });
+    },
+    onMouseLeave: (props) => (e) => {
+      hoveredAnnEasyStore.hoveredAnn = undefined;
+      const { editorName, hoveredAnnotationClear } = props;
+      e.stopPropagation();
+      if (window.__veDragging || window.__veScrolling) return;
+      hoveredAnnotationClear && hoveredAnnotationClear(true, { editorName });
+    }
+  })
+);

package/src/index.js

@@ -0,0 +1,60 @@
+import "@fontsource/ubuntu-mono";
+import { FocusStyleManager } from "@blueprintjs/core";
+import { showContextMenu } from "@teselagen/ui";
+import "./createVectorEditor";
+import "./style.css";
+export { getUserGroupLabel } from "./CutsiteFilter/AdditionalCutsiteInfoDialog";
+
+window.tgCreateMenu = showContextMenu;
+// window.tgCreateMenu = (menu, e, e2) => {
+//   (e||e2).stopPropagation()
+//   (e || e2)
+// } //add this to the window so people can easily override the default context menus
+
+FocusStyleManager.onlyShowFocusOnTabs();
+export { getGaps } from "./AlignmentView/getGaps";
+export { default as createVectorEditor } from "./createVectorEditor";
+export { default as withEditorProps, connectToEditor } from "./withEditorProps";
+export { default as withEditorInteractions } from "./withEditorInteractions";
+export { default as specialCutsiteFilterOptions } from "./constants/specialCutsiteFilterOptions";
+//export components
+export {
+  default as CircularView,
+  CircularView as CircularViewUnconnected
+} from "./CircularView";
+export { default as SimpleCircularOrLinearView } from "./SimpleCircularOrLinearView";
+export { default as RowView, RowView as RowViewUnconnected } from "./RowView";
+export { default as RowItem } from "./RowItem";
+export { default as Editor, Editor as EditorUnconnected } from "./Editor";
+export { ToolBar } from "./ToolBar";
+export {
+  default as CutsiteFilter,
+  CutsiteFilter as CutsiteFilterUnconnected
+} from "./CutsiteFilter";
+export {
+  default as LinearView,
+  LinearView as LinearViewUnconnected
+} from "./LinearView";
+export {
+  default as StatusBar,
+  StatusBar as StatusBarUnconnected
+} from "./StatusBar";
+export {
+  default as DigestTool,
+  DigestTool as DigestToolUnconnected
+} from "./DigestTool/DigestTool";
+export { default as withHover } from "./helperComponents/withHover";
+
+export {
+  default as vectorEditorReducer,
+  vectorEditorMiddleware,
+  actions
+} from "./redux";
+export { default as updateEditor } from "./updateEditor";
+export { default as addAlignment } from "./addAlignment";
+
+export { default as getRangeAnglesSpecial } from "./CircularView/getRangeAnglesSpecial";
+export { default as PositionAnnotationOnCircle } from "./CircularView/PositionAnnotationOnCircle";
+export { default as EnzymeViewer } from "./EnzymeViewer";
+export { default as AlignmentView } from "./AlignmentView";
+export { default as getOveHotkeyDefs } from "./commands/getOveHotkeyDefs";

package/src/redux/alignments.js

@@ -0,0 +1,373 @@
+import {
+  tidyUpSequenceData /* generateSequenceData */,
+  condensePairwiseAlignmentDifferences
+} from "@teselagen/sequence-utils";
+import { convertBasePosTraceToPerBpTrace } from "@teselagen/bio-parsers";
+import shortid from "shortid";
+
+import addDashesForMatchStartAndEndForTracks from "./utils/addDashesForMatchStartAndEndForTracks";
+
+import { /* createReducer, */ createAction } from "redux-act";
+import { omit } from "lodash";
+
+const alignmentAnnotationSettings = {
+  axis: true,
+  axisNumbers: true,
+  chromatogram: false,
+  dnaColors: false,
+  features: false,
+  parts: false,
+  reverseSequence: false,
+  sequence: true,
+  translations: true,
+  orfs: false,
+  orfTranslations: false,
+  cdsFeatureTranslations: false,
+  cutsites: false,
+  primers: false,
+  compactNames: false
+};
+
+const defaultVisibilities = {
+  alignmentAnnotationVisibility: alignmentAnnotationSettings,
+  pairwise_alignmentAnnotationVisibility: alignmentAnnotationSettings,
+  alignmentAnnotationLabelVisibility: {
+    features: false,
+    parts: false,
+    cutsites: false
+  },
+  pairwise_alignmentAnnotationLabelVisibility: {
+    features: false,
+    parts: false,
+    cutsites: false
+  }
+};
+const defaultVisibilityTypes = Object.keys(defaultVisibilities);
+
+try {
+  defaultVisibilityTypes.forEach((type) => {
+    const newVal = JSON.parse(window.localStorage.getItem(type));
+    if (newVal)
+      defaultVisibilities[type] = {
+        ...defaultVisibilities[type],
+        ...newVal
+      };
+  });
+} catch (e) {
+  console.error("error setting localstorage visibility config", e);
+}
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const upsertAlignmentRun = createAction("UPSERT_ALIGNMENT_RUN");
+export const removeAlignmentFromRedux = createAction(
+  "REMOVE_ALIGNMENT_FROM_REDUX"
+);
+export const updateAlignmentViewVisibility = createAction(
+  "UPDATE_ALIGNMENT_VIEW_VISIBILITY"
+);
+export const alignmentRunUpdate = createAction("ALIGNMENT_RUN_UPDATE");
+
+const highlightRangeProps = {
+  color: "red",
+  hideCarets: true,
+  ignoreGaps: true
+};
+function addHighlightedDifferences(alignmentTracks) {
+  return alignmentTracks.map((track) => {
+    if (track.isUnmapped) {
+      return track;
+    }
+    const sequenceData = tidyUpSequenceData(track.sequenceData);
+    const matchHighlightRanges = getRangeMatchesBetweenTemplateAndNonTemplate(
+      alignmentTracks[0].alignmentData.sequence,
+      track.alignmentData.sequence
+    );
+    // .filter by the user-specified mismatch overrides (initially [])
+    const mismatches = matchHighlightRanges.filter(({ isMatch }) => !isMatch);
+    return {
+      ...track,
+      sequenceData,
+      matchHighlightRanges,
+      additionalSelectionLayers: matchHighlightRanges
+        .filter(({ isMatch }) => !isMatch)
+        .map((range) => {
+          return { ...range, ...highlightRangeProps };
+        }),
+      mismatches
+    };
+  });
+}
+
+// alignmentTracks = addHighlightedDifferences(alignmentTracks);
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+
+export default (state = {}, { payload = {}, type }) => {
+  if (type === "ALIGNMENT_RUN_UPDATE") {
+    const { alignmentId } = payload;
+    const newState = {
+      ...state,
+      [alignmentId]: {
+        ...state[alignmentId],
+        ...payload
+      }
+    };
+    return newState;
+  }
+
+  if (type === "UPDATE_ALIGNMENT_VIEW_VISIBILITY") {
+    defaultVisibilityTypes.forEach((type) => {
+      if (
+        (type.startsWith("pairwise_") && payload.pairwiseAlignments) ||
+        (!type.startsWith("pairwise_") && !payload.pairwiseAlignments)
+      ) {
+        defaultVisibilities[type] = {
+          ...defaultVisibilities[type],
+          ...payload[type.replace("pairwise_", "")]
+        };
+
+        localStorage.setItem(
+          type,
+          JSON.stringify({
+            ...defaultVisibilities[type],
+            ...payload[type.replace("pairwise_", "")]
+          })
+        );
+      }
+    });
+    return {
+      ...state,
+      [payload.id]: { ...payload }
+    };
+  }
+  if (type === "UPSERT_ALIGNMENT_RUN") {
+    const { id } = payload;
+    const payloadToUse = {
+      stateTrackingId: state[id]?.stateTrackingId ? shortid() : "initialLoadId",
+      alignmentType: state[id]?.alignmentType,
+      ...payload,
+      //assign default visibilities
+      ...defaultVisibilityTypes.reduce((acc, type) => {
+        if (
+          (type.startsWith("pairwise_") && payload.pairwiseAlignments) ||
+          (!type.startsWith("pairwise_") && !payload.pairwiseAlignments)
+        ) {
+          acc[type.replace("pairwise_", "")] = {
+            ...defaultVisibilities[type],
+            ...payload[type.replace("pairwise_", "")]
+          };
+        }
+        return acc;
+      }, {})
+    };
+    if (payloadToUse.pairwiseAlignments) {
+      if (
+        payloadToUse.pairwiseAlignments[0][0].alignmentData.matchStart !==
+        undefined
+      ) {
+        payloadToUse.pairwiseAlignments = payloadToUse.pairwiseAlignments.map(
+          addDashesForMatchStartAndEndForTracks
+        );
+      }
+      const templateSeq = payloadToUse.pairwiseAlignments[0][0];
+      //we need to get all of the sequences in a single alignment (turning inserts into single BP red highlights)
+      const pairwiseOverviewAlignmentTracks = [
+        {
+          //add the template seq as the first track in the Pairwise Alignment Overview
+          ...templateSeq,
+          sequenceData: tidyUpSequenceData(templateSeq.sequenceData),
+          alignmentData: { sequence: templateSeq.sequenceData.sequence } //remove the gaps from the template sequence
+        }
+      ]; // start with just the template seq in there!
+
+      payloadToUse.pairwiseAlignments.forEach(([template, alignedSeq]) => {
+        const condensedSeq = condensePairwiseAlignmentDifferences(
+          template.alignmentData.sequence,
+          alignedSeq.alignmentData.sequence
+        );
+        let re = /r+/gi;
+        let match;
+        const additionalSelectionLayers = [];
+        while ((match = re.exec(condensedSeq)) != null) {
+          additionalSelectionLayers.push({
+            start: match.index,
+            end: match.index + match[0].length - 1,
+            ...highlightRangeProps
+          });
+        }
+        re = /g+/gi;
+        // let match;
+        while ((match = re.exec(condensedSeq)) != null) {
+          additionalSelectionLayers.push({
+            start: match.index,
+            end: match.index + match[0].length - 1,
+            ...highlightRangeProps,
+            color: "grey"
+          });
+        }
+
+        const alignedSeqMinusInserts = {
+          ...alignedSeq,
+          sequenceData: {
+            ...tidyUpSequenceData(alignedSeq.sequenceData),
+            sequence: template.sequenceData.sequence
+          },
+          additionalSelectionLayers,
+          alignmentData: {
+            sequence: condensedSeq
+          }
+        };
+        pairwiseOverviewAlignmentTracks.push(alignedSeqMinusInserts);
+      });
+      payloadToUse.pairwiseOverviewAlignmentTracks =
+        pairwiseOverviewAlignmentTracks;
+      payloadToUse.pairwiseAlignments = payloadToUse.pairwiseAlignments.map(
+        addHighlightedDifferences
+      );
+    }
+    if (payloadToUse.alignmentTracks) {
+      payloadToUse.alignmentTracks = addHighlightedDifferences(
+        payloadToUse.alignmentTracks
+      );
+    }
+    //check for issues
+    let hasError = checkForIssues(
+      payloadToUse.alignmentTracks,
+      payload.alignmentType
+    );
+    (payloadToUse.pairwiseAlignments || []).forEach((alignment) => {
+      const error = alignment;
+      if (error) {
+        hasError = error;
+      }
+    });
+    return {
+      ...state,
+      [payload.id]: {
+        ...payloadToUse,
+        hasError
+      }
+    };
+  }
+  if (type === "REMOVE_ALIGNMENT_FROM_REDUX") {
+    const { id } = payload;
+    state = omit(state, [id]);
+  }
+  return state;
+};
+
+//returns an array like so: [{start: 0, end: 4, isMatch: false}, {start,end,isMatch} ... etc]
+function getRangeMatchesBetweenTemplateAndNonTemplate(tempSeq, nonTempSeq) {
+  //assume all sequences are the same length (with gap characters "-" in some places)
+  //loop through all non template sequences and compare them with the template
+
+  const seqLength = nonTempSeq.length;
+  const ranges = [];
+  // const startIndex = "".match/[-]/ Math.max(0, .indexOf("-"));
+  const nonTempSeqWithoutLeadingDashes = nonTempSeq.replace(/^-+/g, "");
+  const nonTempSeqWithoutTrailingDashes = nonTempSeq.replace(/-+$/g, "");
+
+  const startIndex = seqLength - nonTempSeqWithoutLeadingDashes.length;
+  const endIndex =
+    seqLength - (seqLength - nonTempSeqWithoutTrailingDashes.length);
+  for (let index = startIndex; index < endIndex; index++) {
+    const isMatch =
+      tempSeq[index].toLowerCase() === nonTempSeq[index].toLowerCase();
+    const previousRange = ranges[ranges.length - 1];
+    if (previousRange) {
+      if (previousRange.isMatch === isMatch) {
+        previousRange.end++;
+      } else {
+        ranges.push({
+          start: index,
+          end: index,
+          isMatch
+        });
+      }
+    } else {
+      ranges.push({
+        start: startIndex,
+        end: startIndex,
+        isMatch
+      });
+    }
+  }
+  return ranges;
+}
+
+function checkForIssues(alignmentTracks, alignmentType) {
+  if (
+    !alignmentTracks ||
+    !alignmentTracks[0] ||
+    !alignmentTracks[0].alignmentData
+  ) {
+    return;
+  }
+
+  const alignmentTrackLength = alignmentTracks[0].alignmentData.sequence.length;
+  let hasError;
+  alignmentTracks.some((track) => {
+    if (track.alignmentData.sequence.length !== alignmentTrackLength) {
+      console.error("incorrect length", alignmentTracks);
+
+      return "incorrect length";
+    }
+    if (
+      track.chromatogramData &&
+      track.sequenceData.sequence.length !==
+        track.chromatogramData.baseCalls.length
+    ) {
+      console.error("incorrect chromatogram length", alignmentTracks);
+
+      return "incorrect chromatogram length";
+    }
+    if (track.chromatogramData && !track.chromatogramData.baseTraces) {
+      if (!track.chromatogramData.basePos) {
+        console.error("corrupted chromatogram data", alignmentTracks);
+        return "corrupted chromatogram data";
+      }
+      track.chromatogramData = convertBasePosTraceToPerBpTrace(
+        track.chromatogramData
+      );
+    }
+    if (
+      alignmentType !== "Parallel Part Creation" &&
+      track.sequenceData.sequence.length !==
+        track.alignmentData.sequence.replace(/-/g, "").length
+    ) {
+      console.error(
+        "sequence data length does not match alignment data w/o gaps"
+      );
+      console.error(
+        "track.sequenceData.sequence:",
+        track.sequenceData.sequence
+      );
+      console.error(
+        "track.sequenceData.sequence.length:",
+        track.sequenceData.sequence.length
+      );
+      console.error(
+        "track.alignmentData.sequence:",
+        track.alignmentData.sequence
+      );
+      console.error(
+        'track.alignmentData.sequence.replace(/-/g,""):',
+        track.alignmentData.sequence.replace(/-/g, "")
+      );
+      console.error(
+        'track.alignmentData.sequence.replace(/-/g,"").length:',
+        track.alignmentData.sequence.replace(/-/g, "").length
+      );
+      hasError = "sequence data length does not match alignment data w/o gaps";
+      return true;
+    }
+    return false;
+  });
+  if (hasError) {
+    return hasError;
+  }
+}

package/src/redux/annotationLabelVisibility.js

@@ -0,0 +1,53 @@
+//./caretPosition.js
+import createAction from "./utils/createMetaAction";
+import createMergedDefaultStateReducer from "./utils/createMergedDefaultStateReducer";
+
+const visibilityInitialValues = {
+  features: true,
+  parts: true,
+  primers: true,
+  cutsites: true,
+  assemblyPieces: true,
+  lineageAnnotations: true,
+  warnings: true
+};
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const annotationLabelVisibilityToggle = createAction(
+  "annotationLabelVisibilityToggle"
+);
+export const annotationLabelVisibilityShow = createAction(
+  "annotationLabelVisibilityShow"
+);
+export const annotationLabelVisibilityHide = createAction(
+  "annotationLabelVisibilityHide"
+);
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default createMergedDefaultStateReducer(
+  {
+    [annotationLabelVisibilityToggle]: (state, payload) => {
+      return {
+        ...state,
+        [payload]: !state[payload]
+      };
+    },
+    [annotationLabelVisibilityShow]: (state, payload) => {
+      return {
+        ...state,
+        [payload]: true
+      };
+    },
+    [annotationLabelVisibilityHide]: (state, payload) => {
+      return {
+        ...state,
+        [payload]: false
+      };
+    }
+  },
+  visibilityInitialValues
+);