@teselagen/ove 0.7.28 → 0.7.29

package/Minimap.js

@@ -1,515 +0,0 @@
-import React from "react";
-import Draggable from "react-draggable";
-import ReactList from "@teselagen/react-list";
-import Axis from "../RowItem/Axis";
-import getXStartAndWidthFromNonCircularRange from "../RowItem/getXStartAndWidthFromNonCircularRange";
-import { view } from "@risingstack/react-easy-state";
-import { flatMap, some, toNumber } from "lodash-es";
-import {
-  getOverlapOfNonCircularRanges,
-  invertRange,
-  isPositionWithinRange,
-  splitRangeIntoTwoPartsIfItIsCircular
-} from "@teselagen/range-utils";
-import { massageTickSpacing } from "../utils/massageTickSpacing";
-import { getClientX, getClientY } from "../utils/editorUtils";
-export default class Minimap extends React.Component {
-  shouldComponentUpdate(newProps) {
-    const { props } = this;
-    if (
-      [
-        "alignmentTracks",
-        "numBpsShownInLinearView",
-        "scrollAlignmentView",
-        "laneHeight",
-        "laneSpacing"
-      ].some(key => props[key] !== newProps[key])
-    )
-      return true;
-    return false;
-  }
-  handleMinimapClick = e => {
-    if (
-      this.isDragging ||
-      (e.target && e.target.classList.contains("minimapCaret"))
-    ) {
-      e.stopPropagation();
-      return;
-    }
-    const {
-      onMinimapScrollX,
-      dimensions: { width = 200 }
-    } = this.props;
-    const scrollHandleWidth = this.getScrollHandleWidth();
-    const percent =
-      (this.getXPositionOfClickInMinimap(e) - scrollHandleWidth / 2) /
-      (width - scrollHandleWidth);
-    onMinimapScrollX(percent);
-    this.scrollMinimapVertical({ e, force: true });
-  };
-  getSeqLen = () => {
-    const { alignmentTracks = [] } = this.props;
-    const [template] = alignmentTracks;
-    const seqLength = template.alignmentData.sequence.length;
-    return seqLength;
-  };
-  /**
-   * @returns current nucleotide char
-   * width, nucelotide char width scales with zooming
-   */
-  getCharWidth = () => {
-    const {
-      dimensions: { width = 200 }
-    } = this.props;
-    const seqLength = this.getSeqLen();
-    const charWidth = Math.min(16, width / seqLength);
-    return charWidth || 12;
-  };
-  /**
-   * @returns the width of the highlighted region of the minimap
-   */
-  getScrollHandleWidth = () => {
-    const { numBpsShownInLinearView, dimensions } = this.props;
-    const charWidth = this.getCharWidth();
-    const { width } = getXStartAndWidthFromNonCircularRange(
-      { start: 0, end: Math.max(numBpsShownInLinearView - 1, 0) },
-      charWidth
-    );
-    return Math.min(width, dimensions.width);
-  };
-  getXPositionOfClickInMinimap = e => {
-    const leftStart = this.minimap.getBoundingClientRect().left;
-    return Math.max(getClientX(e) - leftStart, 0);
-  };
-  getYPositionOfClickInMinimap = e => {
-    const topStart = this.minimap.getBoundingClientRect().top;
-    return Math.max(getClientY(e) + this.minimapTracks.scrollTop - topStart, 0);
-  };
-
-  scrollMinimapVertical = ({ e, force, initialDragYOffsetFromCenter }) => {
-    const clientY = getClientY(e) - (initialDragYOffsetFromCenter || 0);
-    try {
-      if (
-        !force &&
-        isPositionWithinRange(clientY, {
-          start: this.lastYPosition - 5,
-          end: this.lastYPosition + 5
-        })
-      ) {
-        // this.lastYPosition = clientY
-        return;
-      }
-      const lanes = document.querySelectorAll(".minimapLane");
-      some(lanes, lane => {
-        const rect = lane.getBoundingClientRect();
-        if (rect.top > clientY && rect.top - rect.height < clientY) {
-          const laneI = toNumber(lane.getAttribute("data-lane-index"));
-          let scrollToLane = laneI - 3;
-          if (laneI === lanes.length - 1) {
-            scrollToLane = laneI - 1;
-          } else if (laneI === lanes.length - 2) {
-            scrollToLane = laneI - 2;
-          }
-          this.props.scrollYToTrack(Math.max(scrollToLane, 0));
-          return true;
-        }
-        return false;
-      });
-      this.lastYPosition = clientY;
-    } catch (error) {
-      console.error(`error in scrollMinimapVertical:`, error);
-    }
-  };
-  handleDragStop = () => {
-    // this.hasSetDirection = false;
-    setTimeout(() => {
-      this.isDragging = false;
-    }, 150);
-  };
-  /**
-   * Handler for beginning to drag across the minimap
-   * Sets this.initialDragXOffsetFromCenter and Y for dragging
-   * @param {*} e - event
-   */
-  handleDragStart = e => {
-    const eventX = e.pageX;
-    const handleEl = window.document.querySelector(".verticalScrollDisplay");
-    if (!handleEl) return;
-    const { x, width } = handleEl.getBoundingClientRect();
-    const yellowScrollHandleXCenter = x + width / 2;
-    this.initialDragXOffsetFromCenter = eventX - yellowScrollHandleXCenter;
-    const eventY = e.pageY;
-
-    if (!handleEl) return;
-    const { y, height } = handleEl.getBoundingClientRect();
-    const yellowScrollHandleYCenter = y + height / 2;
-    this.initialDragYOffsetFromCenter = eventY - yellowScrollHandleYCenter;
-  };
-  /**
-   * Moves the highlighted region as we drag
-   * @param {*} e - event
-   */
-  handleDrag = e => {
-    const {
-      onMinimapScrollX,
-      dimensions: { width = 200 }
-    } = this.props;
-    this.isDragging = true; //needed to block erroneous click events from being triggered!
-
-    const scrollHandleWidth = this.getScrollHandleWidth();
-    const percent =
-      (this.getXPositionOfClickInMinimap(e) -
-        (this.initialDragXOffsetFromCenter || 0) -
-        scrollHandleWidth / 2) /
-      (width - scrollHandleWidth);
-    onMinimapScrollX(percent);
-    this.scrollMinimapVertical({
-      e,
-      initialDragYOffsetFromCenter: this.initialDragYOffsetFromCenter
-    });
-  };
-  /**
-   * @returns this.props.laneheight
-   */
-  itemSizeGetter = () => {
-    return this.props.laneHeight;
-  };
-  /**
-   * Renders a lane (one by one for each call)
-   * @param {*} i - lane info
-   */
-  renderItem = i => {
-    const {
-      alignmentTracks = [],
-      dimensions: { width = 200 },
-      laneHeight,
-      laneSpacing = 1
-    } = this.props;
-    const charWidth = this.getCharWidth();
-
-    const {
-      matchHighlightRanges: _matchHighlightRanges,
-      alignmentData: { trimmedRange } = {}
-    } = alignmentTracks[i];
-    const matchHighlightRanges = !trimmedRange
-      ? _matchHighlightRanges
-      : flatMap(_matchHighlightRanges, r => {
-          const overlap = getOverlapOfNonCircularRanges(r, trimmedRange);
-          if (!overlap) return [];
-          return { ...r, ...overlap };
-        });
-
-    //need to get the chunks that can be rendered
-    let redPath = ""; //draw these as just 1 path instead of a bunch of rectangles to improve browser performance
-    let bluePath = "";
-    // draw one grey rectangle then draw red/mismatching regions on top of it
-    const height = laneHeight - laneSpacing;
-    const y = 0;
-    const firstRange = getXStartAndWidthFromNonCircularRange(
-      matchHighlightRanges[0],
-      charWidth
-    );
-    const lastRange = getXStartAndWidthFromNonCircularRange(
-      matchHighlightRanges[matchHighlightRanges.length - 1],
-      charWidth
-    );
-    bluePath += `M${firstRange.xStart},${y} L${
-      lastRange.xStart + lastRange.width
-    },${y} L${lastRange.xStart + lastRange.width},${y + height} L${
-      firstRange.xStart
-    },${y + height}`;
-    matchHighlightRanges.forEach(range => {
-      const { xStart, width } = getXStartAndWidthFromNonCircularRange(
-        range,
-        charWidth
-      );
-      const toAdd = `M${xStart},${y} L${xStart + width},${y} L${
-        xStart + width
-      },${y + height} L${xStart},${y + height}`;
-      if (!range.isMatch) {
-        redPath += toAdd;
-      }
-    });
-    return (
-      <div
-        key={i + "-lane"}
-        className="minimapLane"
-        data-lane-index={i}
-        style={{ height: laneHeight, maxHeight: laneHeight }}
-      >
-        <svg
-          height={laneHeight}
-          width={width}
-          shapeRendering="geometricPrecision"
-        >
-          <path className="miniBluePath" d={bluePath} fill="#9abeff" />
-          <path className="miniRedPath" d={redPath} fill="red" />
-        </svg>
-      </div>
-    );
-  };
-  /**
-   * @returns minimap compoent
-   */
-  render() {
-    const {
-      alignmentTracks = [],
-      dimensions: { width = 200 },
-      laneHeight,
-      onSizeAdjust,
-      minSliderSize,
-      onMinimapScrollX,
-      easyStore,
-      selectionLayerComp
-    } = this.props;
-
-    const [template /* ...nonTemplates */] = alignmentTracks;
-    const seqLength = template.alignmentData.sequence.length;
-    const charWidth = this.getCharWidth();
-    const scrollHandleWidth = this.getScrollHandleWidth();
-    const minimapTracksPartialHeight = laneHeight * alignmentTracks.length;
-
-    return (
-      <div
-        ref={ref => (this.minimap = ref)}
-        className="alignmentMinimap"
-        style={{
-          position: "relative",
-          width,
-          display: "flex",
-          flexDirection: "column",
-          overflowX: "visible"
-        }}
-        onClick={this.handleMinimapClick}
-      >
-        {selectionLayerComp}
-        <div
-          ref={ref => {
-            if (ref) {
-              this.minimapTracks = ref;
-            }
-          }}
-          style={{
-            overflowY: minimapTracksPartialHeight > 190 ? "auto" : "hidden",
-            overflowX: "hidden",
-            position: "relative"
-          }}
-          className="alignmentMinimapTracks"
-        >
-          <YellowScrollHandle
-            width={width}
-            handleDragStart={this.handleDragStart}
-            handleDrag={this.handleDrag}
-            handleDragStop={this.handleDragStop}
-            onMinimapScrollX={onMinimapScrollX}
-            minSliderSize={minSliderSize}
-            onSizeAdjust={onSizeAdjust}
-            easyStore={easyStore} //we use react-easy-state here to prevent costly setStates from being called
-            scrollHandleWidth={scrollHandleWidth}
-            alignmentTracks={alignmentTracks}
-            laneHeight={laneHeight}
-            minimapTracksPartialHeight={minimapTracksPartialHeight}
-          />
-
-          <ReactList
-            itemsRenderer={(items, ref) => (
-              <div
-                style={{
-                  marginTop: -3
-                }}
-                ref={ref}
-              >
-                {items}
-              </div>
-            )}
-            type="uniform"
-            itemSizeGetter={this.itemSizeGetter}
-            itemRenderer={this.renderItem}
-            length={alignmentTracks.length}
-          />
-        </div>
-
-        <Axis
-          {...{
-            row: { start: 0, end: seqLength - 1 },
-            tickSpacing: massageTickSpacing(Math.floor(seqLength / 10)),
-            bpsPerRow: seqLength,
-            charWidth,
-            annotationHeight: 15,
-            sequenceLength: seqLength,
-            style: {
-              height: 17,
-              width: "100%"
-            }
-          }}
-        />
-      </div>
-    );
-  }
-}
-/**
- * Yellow Scroll handle
- * Responsible for designating the current viewing area
- * Also supports zoom/resizing using handles
- */
-const YellowScrollHandle = view(
-  class YellowScrollHandleInner extends React.Component {
-    render() {
-      const {
-        scrollHandleWidth,
-        width,
-        easyStore,
-        handleDrag,
-        handleDragStop,
-        minSliderSize,
-        laneHeight,
-        onSizeAdjust,
-        handleDragStart,
-        minimapTracksPartialHeight
-      } = this.props;
-      const { verticalVisibleRange, percentScrolled } = easyStore;
-      const xScroll = percentScrolled * (width - scrollHandleWidth);
-      return (
-        <Draggable
-          bounds="parent"
-          zIndex={105}
-          handle=".handle"
-          position={{ x: xScroll, y: 0 }}
-          axis="x"
-          // onStart={this.onStart}
-          onStop={handleDragStop}
-          onDrag={handleDrag}
-          onStart={handleDragStart}
-        >
-          <div
-            style={{
-              height: minimapTracksPartialHeight || 0,
-              // height: "100%",
-              border: "none",
-              top: "0px",
-              position: "absolute",
-              zIndex: "10"
-            }}
-          >
-            {/* left hand side drag handle */}
-            <Draggable
-              bounds={{
-                left: -xScroll,
-                right: scrollHandleWidth - minSliderSize
-              }}
-              zIndex={105}
-              position={{ x: 0, y: 0 }}
-              axis="x"
-              onStart={(e, { x }) => {
-                this.x = x;
-              }}
-              onStop={(e, { x }) => {
-                const deltaX = x - this.x;
-
-                const newSliderSize = scrollHandleWidth - deltaX;
-                //user is resizing to the left so we need to update the scroll percentage so the slider does not jump
-                const newScrollPercent = Math.min(
-                  1,
-                  (xScroll + deltaX) / (width - newSliderSize)
-                );
-                onSizeAdjust(newSliderSize, newScrollPercent);
-              }}
-            >
-              {/* caret component */}
-              <div
-                style={{
-                  height: minimapTracksPartialHeight || 0,
-                  // height: "100%",
-                  border: "none",
-                  cursor: "ew-resize",
-                  opacity: "1",
-                  top: "0px",
-                  position: "absolute",
-                  zIndex: "10",
-                  width: 2,
-                  background: "black"
-                }}
-                className="minimapCaret"
-              />
-            </Draggable>
-            {/* the actual handle component */}
-            <div
-              className="handle alignmentMinimapScrollHandle"
-              dataname="scrollGroup"
-              style={{
-                height: minimapTracksPartialHeight || 0,
-                border: "none",
-                cursor: "move",
-
-                zIndex: "10",
-                width: scrollHandleWidth,
-                background: "transparent"
-              }}
-            >
-              {/* this is the vertical scroll position display element */}
-              <div
-                className="verticalScrollDisplay"
-                style={{
-                  height:
-                    (verticalVisibleRange.end -
-                      verticalVisibleRange.start +
-                      1) *
-                    laneHeight,
-                  zIndex: "-10",
-                  background: "#fbfb2873",
-                  borderTop: "2px solid yellow",
-                  borderBottom: "2px solid yellow",
-                  position: "relative",
-                  top: verticalVisibleRange.start * laneHeight
-                }}
-              />
-            </div>
-            {/* right hand side drag handle */}
-            <Draggable
-              bounds={{
-                right: minSliderSize + width - xScroll,
-                left: minSliderSize
-              }}
-              zIndex={105}
-              position={{ x: scrollHandleWidth, y: 0 }}
-              axis="x"
-              onStart={(e, { x }) => {
-                this.x = x;
-              }}
-              onStop={(e, { x }) => {
-                const deltaX = this.x - x;
-                const newSliderSize = scrollHandleWidth - deltaX;
-                //user is resizing to the right so we need to update the scroll percentage so the slider does not jump
-                const newScrollPercent = xScroll / (width - newSliderSize);
-                onSizeAdjust(newSliderSize, newScrollPercent);
-              }}
-            >
-              <div
-                style={{
-                  height: minimapTracksPartialHeight || 0,
-                  // height: "100%",
-                  border: "none",
-                  cursor: "ew-resize",
-                  opacity: "1",
-                  top: "0px",
-                  // right: 0,
-                  position: "absolute",
-                  zIndex: "10",
-                  width: 2,
-                  background: "black"
-                }}
-                className="minimapCaret"
-              />
-            </Draggable>
-          </div>
-        </Draggable>
-      );
-    }
-  }
-);
-
-export function getTrimmedRangesToDisplay({ trimmedRange, seqLen }) {
-  if (!trimmedRange) return [];
-  const inverted = invertRange(trimmedRange, seqLen);
-  return splitRangeIntoTwoPartsIfItIsCircular(inverted, seqLen);
-}

package/Mismatches.js

@@ -1,134 +0,0 @@
-import React from "react";
-import { DataTable, withSelectedEntities } from "@teselagen/ui";
-
-class Mismatches extends React.Component {
-  UNSAFE_componentWillMount() {
-    const { alignmentData, mismatches } = this.props;
-    // const { alignmentId, alignments } = this.props;
-    const mismatchList = this.getMismatchList(alignmentData, mismatches);
-    // const mismatchListAll = this.getMismatchList(alignmentId, alignments);
-    const schema = {
-      fields: [{ path: "mismatches", type: "number" }]
-    };
-    this.setState({ mismatchList, schema });
-  }
-
-  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;
-  };
-
-  getMismatchList = (alignmentData, mismatches) => {
-    // getMismatchList = (alignmentId, alignments) => {
-    // let mismatchListAll = [];
-    // skip first sequence/ref seq, since there will be no mismatches
-    // for (let trackI = 1; trackI < alignments[alignmentId].alignmentTracks.length; trackI++) {
-    const mismatchList = [];
-    // const trackName = alignmentData.name;
-    // const editedTrackName = trackName.slice(trackName.indexOf("_") + 1);
-
-    let getGaps = () => ({
-      gapsBefore: 0,
-      gapsInside: 0
-    });
-    const gapMap = this.getGapMap(alignmentData.sequence);
-    getGaps = rangeOrCaretPosition => {
-      if (typeof rangeOrCaretPosition !== "object") {
-        return {
-          gapsBefore: gapMap[Math.min(rangeOrCaretPosition, gapMap.length - 1)]
-        };
-      }
-      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;
-    };
-
-    const gapsBeforeSequence = getGaps(0).gapsBefore;
-    for (let mismatchI = 0; mismatchI < mismatches.length; mismatchI++) {
-      const mismatchEnd = mismatches[mismatchI].end;
-      const mismatchStart = mismatches[mismatchI].start;
-      const mismatchDifference = mismatchEnd - mismatchStart;
-      // display 'position' as 1-based but store 'start' & 'end' as 0-based
-      if (mismatchDifference === 0) {
-        mismatchList.push({
-          mismatches: mismatchStart + 1 - gapsBeforeSequence,
-          start: mismatchStart - gapsBeforeSequence,
-          end: mismatchStart - gapsBeforeSequence
-        });
-      } else {
-        for (let innerI = 0; innerI <= mismatchDifference; innerI++) {
-          mismatchList.push({
-            mismatches: mismatchStart + innerI + 1 - gapsBeforeSequence,
-            start: mismatchStart + innerI - gapsBeforeSequence,
-            end: mismatchStart + innerI - gapsBeforeSequence
-          });
-        }
-      }
-    }
-    return mismatchList;
-  };
-
-  render() {
-    const { mismatchList, schema } = this.state;
-    let tableOfMismatches;
-    if (mismatchList.length === 0) {
-      tableOfMismatches = null;
-    } else {
-      tableOfMismatches = (
-        <DataTable
-          maxHeight={168}
-          formName={"mismatchesTable"}
-          isSimple
-          compact
-          noRouter
-          // onRowSelect={this.handleMismatchClick}
-          schema={schema}
-          entities={mismatchList}
-        />
-      );
-    }
-
-    return (
-      <div style={{ maxHeight: 180.8, overflowY: "scroll" }}>
-        {/* <div style={{ fontSize: 15, textAlign: "center" }}><b>Positions of Mismatches</b></div> */}
-        <div
-          style={{
-            // margin: 10,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center"
-          }}
-        >
-          <div style={{ width: 100, margin: 4 }}>
-            {/* <div style={{
-                                    paddingBottom: 10,
-                                    textOverflow: "ellipsis",
-                                    overflowY: "auto",
-                                    whiteSpace: "nowrap",
-                                    fontSize: 13,
-                                    textAlign: "center"
-                                }}>
-                                    <b>{mismatchList[0].name}</b>
-                                </div> */}
-            {tableOfMismatches}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default withSelectedEntities("mismatchesTable")(Mismatches);