@teselagen/ove 0.0.13 → 0.0.15

package/src/AlignmentView/PairwiseAlignmentView.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { getPairwiseOverviewLinearViewOptions } from "./getPairwiseOverviewLinearViewOptions";
+import { AlignmentView } from "./index";
+
+//this view is shown if we detect pairwise alignments
+export class PairwiseAlignmentView extends React.Component {
+  state = {
+    currentPairwiseAlignmentIndex: undefined
+  };
+  render() {
+    const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = this.props;
+    const { currentPairwiseAlignmentIndex } = this.state;
+    if (currentPairwiseAlignmentIndex > -1) {
+      //we can render the AlignmentView directly
+      //get the alignmentTracks based on currentPairwiseAlignmentIndex
+      const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
+
+      const templateLength = alignmentTracks[0].alignmentData.sequence.length;
+      return (
+        <AlignmentView
+          {...{
+            ...this.props,
+            sequenceData: {
+              //pass fake seq data in so editor interactions work
+              sequence: Array.from(templateLength)
+                .map(() => "a")
+                .join("")
+            },
+            allowTrackRearrange: false,
+            alignmentTracks,
+            hasTemplate: true,
+            isPairwise: true,
+            currentPairwiseAlignmentIndex,
+            handleBackButtonClicked: () => {
+              this.setState({
+                currentPairwiseAlignmentIndex: undefined
+              });
+            }
+          }}
+        />
+      );
+    } else {
+      //we haven't yet selected an alignment to view
+      // render the AlignmentView zoomed out for each track in pairwiseOverviewAlignmentTracks
+      // when the view eye icon is hit (maybe next to the name?)
+      return (
+        <AlignmentView
+          {...{
+            ...this.props,
+            alignmentTracks: pairwiseOverviewAlignmentTracks,
+            allowTrackRearrange: false,
+            allowTrimming: false,
+            hasTemplate: true,
+            isPairwise: true,
+            isInPairwiseOverviewView: true,
+            isFullyZoomedOut: true,
+            noClickDragHandlers: true,
+            linearViewOptions: getPairwiseOverviewLinearViewOptions,
+            handleSelectTrack: (trackIndex) => {
+              //set currentPairwiseAlignmentIndex
+              this.setState({ currentPairwiseAlignmentIndex: trackIndex - 1 });
+            }
+          }}
+        />
+      );
+    }
+  }
+}

package/src/AlignmentView/PerformantSelectionLayer.js

@@ -0,0 +1,32 @@
+import React from "react";
+import SelectionLayer from "../RowItem/SelectionLayer";
+import { view } from "@risingstack/react-easy-state";
+
+export const PerformantSelectionLayer = view(({ easyStore, ...rest }) => {
+  const seqLen = rest.sequenceLength - 1;
+
+  return (
+    <SelectionLayer
+      regions={[
+        { ...easyStore.selectionLayer, ignoreGaps: true },
+        {
+          start: Math.floor(
+            (easyStore.percentScrolledPreZoom || easyStore.percentScrolled) *
+              seqLen
+          ),
+          end: Math.floor(
+            (easyStore.percentScrolledPreZoom || easyStore.percentScrolled) *
+              seqLen
+          ),
+          className: "zoomSelection",
+          ignoreGaps: true,
+          style: {
+            zIndex: -1,
+            opacity: 0
+          }
+        }
+      ]}
+      {...rest}
+    />
+  );
+});

package/src/AlignmentView/coerceInitialValue.js

@@ -0,0 +1,7 @@
+export function coerceInitialValue({ initialValue, minCharWidth }) {
+  const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+
+  const zoomLvl = Math.log(initialValue / minCharWidth) / Math.log(scaleFactor);
+
+  return zoomLvl;
+}

package/src/AlignmentView/getGapMap.js

@@ -0,0 +1,12 @@
+export function getGapMap(sequence) {
+  const gapMap = [0]; //a map of position to how many gaps come before that position [0,0,0,5,5,5,5,17,17,17, ]
+  sequence.split("").forEach((char) => {
+    if (char === "-") {
+      gapMap[Math.max(0, gapMap.length - 1)] =
+        (gapMap[Math.max(0, gapMap.length - 1)] || 0) + 1;
+    } else {
+      gapMap.push(gapMap[gapMap.length - 1] || 0);
+    }
+  });
+  return gapMap;
+}

package/src/AlignmentView/getGaps.js

@@ -0,0 +1,27 @@
+import { getGapMap } from "./getGapMap";
+
+/**
+ * this function is used to calculate the number of spaces that come before or inside a range
+ */
+export let getGaps = () => ({
+  gapsBefore: 0,
+  gapsInside: 0
+});
+getGaps = (rangeOrCaretPosition, sequence) => {
+  const gapMap = getGapMap(sequence);
+  if (typeof rangeOrCaretPosition !== "object") {
+    return {
+      gapsBefore: gapMap[Math.min(rangeOrCaretPosition, gapMap.length - 1)]
+    };
+  }
+  //otherwise it is a range!
+  const { start, end } = rangeOrCaretPosition;
+  const toReturn = {
+    gapsBefore: gapMap[start],
+    gapsInside:
+      gapMap[Math.min(end, gapMap.length - 1)] -
+      gapMap[Math.min(start, gapMap.length - 1)]
+  };
+
+  return toReturn;
+};

package/src/AlignmentView/getPairwiseOverviewLinearViewOptions.js

@@ -0,0 +1,38 @@
+export function getPairwiseOverviewLinearViewOptions({ isTemplate }) {
+  if (!isTemplate) {
+    return {
+      annotationVisibilityOverrides: {
+        features: false,
+        translations: false,
+        parts: false,
+        orfs: false,
+        orfTranslations: false,
+        cdsFeatureTranslations: false,
+        axis: false,
+        cutsites: false,
+        primers: false,
+        chromatogram: false,
+        sequence: false,
+        dnaColors: false,
+        reverseSequence: false,
+        axisNumbers: false
+      }
+    };
+  } else {
+    return {
+      // annotationVisibilityOverrides: {
+      //   features: false,
+      //   yellowAxis: false,
+      //   translations: false,
+      //   parts: false,
+      //   orfs: false,
+      //   orfTranslations: false,
+      //   axis: true,
+      //   cutsites: false,
+      //   primers: false,
+      //   reverseSequence: false,
+      //   axisNumbers: false
+      // }
+    };
+  }
+}

package/src/AlignmentView/getTrackFromEvent.js

@@ -0,0 +1,25 @@
+import { getClientX, getClientY } from "../utils/editorUtils";
+
+export function getTrackFromEvent(event, allTracks) {
+  const trackContainers = document.querySelectorAll(
+    ".alignmentViewTrackContainer"
+  );
+  let track;
+  trackContainers.forEach((t) => {
+    const mouseX = getClientX(event) + document.body.scrollLeft;
+    const mouseY = getClientY(event) + document.body.scrollTop;
+    if (
+      mouseX >= t.getBoundingClientRect().left &&
+      mouseX <=
+        t.getBoundingClientRect().left + t.getBoundingClientRect().width &&
+      mouseY >= t.getBoundingClientRect().top &&
+      mouseY <= t.getBoundingClientRect().top + t.getBoundingClientRect().height
+    ) {
+      const index = t.getAttribute("data-alignment-track-index");
+      track = allTracks[index];
+      track.index = index;
+      return true;
+    }
+  });
+  return track;
+}