Improve alignment view zoom scaling

CHANGELOG.md

@@ -6,13 +6,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### [v17.6.4](https://github.com/TeselaGen/openVectorEditor/compare/v17.3.12...v17.6.4)
 
-- Adjust font size for name in circular view [`#834`](https://github.com/TeselaGen/openVectorEditor/pull/834)
-- Tnr add zoom to linear view [`#828`](https://github.com/TeselaGen/openVectorEditor/pull/828)
 - Added rounded corners to amino acids [`#819`](https://github.com/TeselaGen/openVectorEditor/pull/819)
 - small selection color style fix https://github.com/TeselaGen/lims/issues/9038#event-6627607729 [`#9038`](https://github.com/TeselaGen/lims/issues/9038)
-- bumping new minor version w/ linear view zoom v1 [`8b406cd`](https://github.com/TeselaGen/openVectorEditor/commit/8b406cd95ea665f10b7b44e84403b6c0ef6f4d17)
-- making sequences track their default enzyme filter by default; improving setting of default global enzyme filter [`e353f3c`](https://github.com/TeselaGen/openVectorEditor/commit/e353f3c46b0fc1d67ef9f81b537f6ac675901d9f)
-- reverting persist enzyme filter UI changes [`2d81d4a`](https://github.com/TeselaGen/openVectorEditor/commit/2d81d4a556ba0dba8daa86f94420e635b347c9b8)
+- adding a coercion function to manage the alignment view zoom [`4e16ab4`](https://github.com/TeselaGen/openVectorEditor/commit/4e16ab440ecfe4f6344de3fe191a597b0da18a48)
+- improving sequence length toggle, increasing allowable linear view zoom size [`5c4594b`](https://github.com/TeselaGen/openVectorEditor/commit/5c4594b750c48288158c296231f30b168c36cc1b)
+- added linear view test cases [`813890a`](https://github.com/TeselaGen/openVectorEditor/commit/813890a0530ed8bd49a85b4cfee7834dc4b17155)
 
 #### [v17.3.12](https://github.com/TeselaGen/openVectorEditor/compare/v17.2.7...v17.3.12)
 

cypress/integration/alignment.spec.js

@@ -1,4 +1,15 @@
 describe("alignment", function () {
+ it("it should re-draw the labels of features/parts/primers when a feature is so long that the middle of the label does not fit into view", function () {
+ cy.visit("#/Alignment");
+ cy.get(".tg-alignment-visibility-toggle").click();
+ cy.contains("cds feature").should("not.exist");
+ cy.get(".bp3-popover .bp3-control:contains(Features)").click();
+ cy.contains("cds feature");
+ cy.get(".tg-alignment-visibility-toggle").click();
+ cy.contains("text", "long feat whose label should still appear").should(
+ "be.visible"
+ );
+ });
  it("it should show an unmapped warning", function () {
  cy.visit("#/Alignment");
  cy.get(".bp3-icon-warning-sign");

demo/src/exampleData/msaAlignment.json

@@ -21,8 +21,8 @@
  "id": "0bd61b29-d822-474f-86e1-877c476fb5dc",
  "features": [{
  "start": 10,
- "end": 50,
- "name": "cds feature",
+ "end": 500,
+ "name": "long feat whose label should still appear",
  "type": "CDS",
  "id": "5ac3f0a199aae6653c0e7d41",
  "forward": true,

src/AlignmentView/AlignmentVisibilityTool.js

@@ -19,6 +19,7 @@ export default pureNoFunc(function AlignmentVisibilityTool(props) {
  target={
  <Tooltip content="Visibility Options">
  <Button
+ className="tg-alignment-visibility-toggle"
  small
  rightIcon="caret-down"
  intent={Intent.PRIMARY}

src/AlignmentView/index.js

@@ -3,8 +3,6 @@ import React from "react";
 import { connect } from "react-redux";
 import {
  Button,
- Icon,
- Slider,
  Intent,
  Popover,
  InputGroup,
@@ -52,6 +50,9 @@ import { noop } from "lodash";
 import { massageTickSpacing } from "../utils/massageTickSpacing";
 import { getClientX, getClientY } from "../utils/editorUtils";
 
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+import { updateLabelsForInViewFeatures } from "../utils/updateLabelsForInViewFeatures";
+
 const nameDivWidth = 140;
 let charWidthInLinearViewDefault = 12;
 try {
@@ -67,6 +68,7 @@ try {
 }
 
 class AlignmentView extends React.Component {
+ bindOutsideChangeHelper = {};
  constructor(props) {
  super(props);
  window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
@@ -224,6 +226,9 @@ class AlignmentView extends React.Component {
  this.editorClicked = editorClicked.bind(this);
  this.editorDragStarted = editorDragStarted.bind(this);
  this.editorDragStopped = editorDragStopped.bind(this);
+ setTimeout(() => {
+ updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
+ }, 0);
  setTimeout(() => {
  this.setVerticalScrollRange();
  }, 500);
@@ -362,6 +367,7 @@ class AlignmentView extends React.Component {
  if (this.alignmentHolderTop) {
  this.alignmentHolderTop.scrollLeft = this.alignmentHolder.scrollLeft;
  }
+ updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
  };
  handleTopScroll = () => {
  this.alignmentHolder.scrollLeft = this.alignmentHolderTop.scrollLeft;
@@ -377,6 +383,7 @@ class AlignmentView extends React.Component {
  this.scrollAlignmentToPercent(newPercent);
  this.blockScroll = false;
  });
+ updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
  };
 
  setCharWidthInLinearView = ({ charWidthInLinearView }) => {
@@ -389,6 +396,13 @@ class AlignmentView extends React.Component {
  window.localStorage.getItem("charWidthInLinearViewDefault")
  );
  };
+
+ scrollToCaret = () => {
+ const el = window.document.querySelector(".veCaret"); //adding .veRowViewCaret breaks this for some reason
+ if (!el) return;
+ el.scrollIntoView({ inline: "center" });
+ };
+
  scrollAlignmentToPercent = (scrollPercentage) => {
  const scrollPercentageToUse = Math.min(Math.max(scrollPercentage, 0), 1);
 
@@ -1213,25 +1227,55 @@ class AlignmentView extends React.Component {
  )}
  {!isInPairwiseOverviewView && (
  <UncontrolledSliderWithPlusMinusBtns
- onRelease={(val) => {
- this.setCharWidthInLinearView({
- charWidthInLinearView: val
+ noWraparound
+ bindOutsideChangeHelper={this.bindOutsideChangeHelper}
+ onClick={() => {
+ setTimeout(this.scrollToCaret, 0);
+ }}
+ minCharWidth={this.getMinCharWidth()}
+ // onRelease={(zoomLvl) => {
+
+ // }}
+ // onRelease={(val) => {
+ // this.setCharWidthInLinearView({
+ // charWidthInLinearView: val
+ // });
+ // // this.blockScroll = true; //we block the scroll to prevent jumpiness and then manually update to the desired scroll percentage
+ // // const percentScrollage = this.easyStore.percentScrolled;
+ // // setTimeout(() => {
+ // // this.blockScroll = false;
+ // // this.scrollAlignmentToPercent(percentScrollage);
+ // // });
+ // }}
+ onChange={async (zoomLvl) => {
+ // if (!this.startSliderDrag) {
+
+ // }
+ // this.startSliderDrag = true
+
+ // zoomLvl is in the range of 0 to 10
+ const minCharWidth = this.getMinCharWidth();
+ const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+ const newCharWidth =
+ minCharWidth * Math.pow(scaleFactor, zoomLvl);
+ await this.setCharWidthInLinearView({
+ charWidthInLinearView: newCharWidth
  });
- this.blockScroll = true; //we block the scroll to prevent jumpiness and then manually update to the desired scroll percentage
- const percentScrollage = this.easyStore.percentScrolled;
- setTimeout(() => {
- this.blockScroll = false;
- this.scrollAlignmentToPercent(percentScrollage);
+ await this.scrollToCaret();
+ await updateLabelsForInViewFeatures({
+ rectElement: ".alignmentHolder"
  });
  }}
+ coerceInitialValue={coerceInitialValue}
  title="Adjust Zoom Level"
  style={{ paddingTop: "4px", width: 100 }}
  className="ove-slider"
  labelRenderer={false}
- stepSize={0.01}
  initialValue={charWidthInLinearView}
- max={14}
- min={this.getMinCharWidth()}
+ stepSize={0.05} //was 0.01
+ max={10}
+ min={0}
+ clickStepSize={0.5}
  />
  )}
  {!noVisibilityOptions && !isInPairwiseOverviewView && (
@@ -1467,6 +1511,11 @@ export default compose(
  name,
  { useChecked, checked } = {}
  ) => {
+ setTimeout(() => {
+ updateLabelsForInViewFeatures({
+ rectElement: ".alignmentHolder"
+ });
+ }, 0);
  updateAlignmentViewVisibility({
  ...alignment,
  alignmentAnnotationVisibility: {
@@ -1517,70 +1566,6 @@ export default compose(
  )
 )(AlignmentView);
 
-class UncontrolledSliderWithPlusMinusBtns extends React.Component {
- state = { value: 0 };
-
- static getDerivedStateFromProps(nextProps, prevState) {
- if (prevState.oldInitialValue !== nextProps.initialValue) {
- return {
- value: nextProps.initialValue, //set the state value if a new initial value comes in!
- oldInitialValue: nextProps.initialValue
- };
- } else {
- return null;
- }
- }
-
- render() {
- const { value } = this.state;
- const { title, initialValue, style, ...rest } = this.props;
-
- return (
- <div
- title={title}
- style={{ ...style, display: "flex", marginLeft: 15, marginRight: 20 }}
- >
- <Icon
- onClick={() => {
- const newVal = Math.max(
- this.state.value - (this.props.max - this.props.min) / 10,
- this.props.min
- );
- this.setState({
- value: newVal
- });
- this.props.onRelease(newVal);
- }}
- style={{ cursor: "pointer", marginRight: 5 }}
- intent={Intent.PRIMARY}
- icon="minus"
- />
- <Slider
- {...{ ...rest, value }}
- onChange={(value) => {
- this.setState({ value });
- }}
- />
- <Icon
- onClick={() => {
- const newVal = Math.min(
- this.state.value + (this.props.max - this.props.min) / 10,
- this.props.max
- );
- this.setState({
- value: newVal
- });
- this.props.onRelease(newVal);
- }}
- style={{ cursor: "pointer", marginLeft: 5 }}
- intent={Intent.PRIMARY}
- icon="plus"
- />
- </div>
- );
- }
-}
-
 //this view is shown if we detect pairwise alignments
 class PairwiseAlignmentView extends React.Component {
  state = {
@@ -1694,3 +1679,23 @@ const PerformantSelectionLayer = view(({ easyStore, ...rest }) => {
 const PerformantCaret = view(({ easyStore, ...rest }) => {
  return <Caret caretPosition={easyStore.caretPosition} {...rest} />;
 });
+
+function coerceInitialValue({ initialValue, minCharWidth }) {
+ //char width 12 = 10
+ //zoomLvl = 0 -> charWidth = minCharWidth
+ //zoomLvl = 10 -> charWidth = 12
+
+ // const scaleFactor = Math.pow(12 / initialCharWidth, 1 / 10);
+ // newCharWidth = initialCharWidth * Math.pow(scaleFactor, zoomLvl)
+ // 12 = initialCharWidth * Math.pow(scaleFactor, 10)
+ // 12/initialCharWidth = Math.pow(scaleFactor, 10)
+ // Math.pow(12/minCharWidth, 1/10) = scaleFactor
+
+ // newCharWidth/minCharWidth = * Math.pow(scaleFactor, zoomLvl)
+
+ const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+
+ const zoomLvl = Math.log(initialValue / minCharWidth) / Math.log(scaleFactor);
+
+ return zoomLvl;
+}