making fixes to large sequence axis rendering

ryan-stackwave · Feb 14, 2024 · 5471bff · 5471bff
1 parent d673792
commit 5471bff
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 35 deletions.
diff --git a/packages/ove/demo/src/EditorDemo/index.js b/packages/ove/demo/src/EditorDemo/index.js
@@ -31,10 +31,6 @@ import { useEffect, useState } from "react";
 import _chromData from "../../../scratch/ab1ParsedGFPvv50.json";
 import { convertBasePosTraceToPerBpTrace } from "@teselagen/bio-parsers";
 import { defaultToolList } from "../../../src/ToolBar";
-
-// import AddOrEditPrimerDialog from "../../../src/helperComponents/AddOrEditPrimerDialog";
-// import _chromData from "../../../scratch/B_reverse.json";
-// import example1Ab1 from "../../../scratch/example1.ab1.json";
 const chromData = convertBasePosTraceToPerBpTrace(_chromData);
 
 const MyCustomTab = connectToEditor(({ sequenceData = {} }) => {

diff --git a/packages/ove/demo/src/StandaloneDemo.js b/packages/ove/demo/src/StandaloneDemo.js
@@ -518,7 +518,6 @@ export default class StandaloneDemo extends React.Component {
               this.setState({ isDialogOpen: false });
               this.mountEditor();
             }}
-            backdropProps={{ style: { zIndex: 1050 } }}
             title="yooo"
             isOpen={isDialogOpen}
           >

diff --git a/packages/ove/demo/src/index.js b/packages/ove/demo/src/index.js
@@ -50,8 +50,7 @@ const Demo = () => {
       { name: "EnzymeViewer", url: "EnzymeViewer" },
       { name: "CircularView", url: "CircularView" },
       { name: "RowView", url: "RowView" },
-      { name: "LinearView", url: "LinearView" },
-      { name: "ToolBar", url: "ToolBar" }
+      { name: "LinearView", url: "LinearView" }
     ].map(({ url, name }) => {
       return (
         <div key={name} style={{ height: 20, marginLeft: 10 }}>

diff --git a/packages/ove/src/AlignmentView/Minimap.js b/packages/ove/src/AlignmentView/Minimap.js
@@ -279,8 +279,6 @@ export default class Minimap extends React.Component {
           display: "flex",
           flexDirection: "column",
           overflowX: "visible"
-
-          // overflowY: "hidden"
         }}
         onClick={this.handleMinimapClick}
       >
@@ -292,9 +290,7 @@ export default class Minimap extends React.Component {
             }
           }}
           style={{
-            // maxHeight: 350,
             overflowY: minimapTracksPartialHeight > 190 ? "auto" : "hidden",
-            // overflowY: "auto",
             overflowX: "hidden",
             position: "relative"
           }}
@@ -320,7 +316,6 @@ export default class Minimap extends React.Component {
               <div
                 style={{
                   marginTop: -3
-                  // paddingLeft: nameDivWidth
                 }}
                 ref={ref}
               >
@@ -336,15 +331,15 @@ export default class Minimap extends React.Component {
 
         <Axis
           {...{
-            row: { start: 0, end: seqLength },
+            row: { start: 0, end: seqLength - 1 },
             tickSpacing: massageTickSpacing(Math.floor(seqLength / 10)),
             bpsPerRow: seqLength,
             charWidth,
             annotationHeight: 15,
             sequenceLength: seqLength,
             style: {
-              // paddingLeft: nameDivWidth,
-              height: 17
+              height: 17,
+              width: "100%"
             }
           }}
         />

diff --git a/packages/ove/src/LinearView/index.js b/packages/ove/src/LinearView/index.js
@@ -214,6 +214,16 @@ class _LinearView extends React.Component {
         updateLabelsForInViewFeatures();
       }
     };
+    const tickSpacingToUse =
+      tickSpacing ||
+      (isLinViewZoomed
+        ? massageTickSpacing(Math.ceil(120 / this.charWidth))
+        : massageTickSpacing(
+            Math.floor(
+              (this.getMaxLength() / (sequenceData.isProtein ? 9 : 10)) *
+                Math.max(1, Math.log10(1 / this.charWidth))
+            )
+          ));
     return (
       <Draggable
         enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
@@ -291,7 +301,6 @@ class _LinearView extends React.Component {
           {!noWarnings && (
             <VeTopRightContainer>{this.paredDownMessages}</VeTopRightContainer>
           )}
-
           <PinchHelperToUse {...(linearZoomEnabled && pinchHandler)}>
             <RowItem
               {...{
@@ -326,13 +335,7 @@ class _LinearView extends React.Component {
                 bpsPerRow,
                 fullSequence: sequenceData.sequence,
                 emptyText: getEmptyText({ sequenceData, caretPosition }),
-                tickSpacing:
-                  tickSpacing ||
-                  (isLinViewZoomed
-                    ? massageTickSpacing(Math.ceil(120 / this.charWidth))
-                    : Math.floor(
-                        this.getMaxLength() / (sequenceData.isProtein ? 9 : 10)
-                      )),
+                tickSpacing: tickSpacingToUse,
                 annotationVisibility: {
                   ...rest.annotationVisibility,
                   ...((!isLinViewZoomed || this.charWidth < 5) && {

diff --git a/packages/ove/src/LinearView/style.css b/packages/ove/src/LinearView/style.css
@@ -1,6 +1,6 @@
 .veLinearView .veRowItemWrapper {
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   overflow: auto;
 }
 

diff --git a/packages/ove/src/RowItem/Axis.js b/packages/ove/src/RowItem/Axis.js
@@ -77,8 +77,6 @@ const Axis = function (props) {
   }
 
   const yStart = 0;
-  // const yEnd = annotationHeight / 3;
-
   const tickMarkSVG = [];
 
   tickMarkPositions.forEach(function ({ tickMarkPosition, xCenter }, i) {
@@ -101,7 +99,6 @@ const Axis = function (props) {
           row.start + tickMarkPosition,
           sequenceLength
         ) + (isProtein ? 0 : 1);
-
       const positionLength = position.toString().length * 4;
       const textInner = divideBy3(position + (isProtein ? 1 : 0), isProtein);
 
@@ -136,6 +133,7 @@ const Axis = function (props) {
     <svg
       className="veRowViewAxis veAxis"
       height={annotationHeight}
+      width={width}
       style={{ marginTop, overflow: "visible", display: "block", ...style }}
     >
       {tickMarkSVG}

diff --git a/packages/ove/src/RowItem/index.js b/packages/ove/src/RowItem/index.js
@@ -146,11 +146,12 @@ export default function RowItem(props) {
   } = annotationVisibility;
 
   const { sequence = "", cutsites = [] } = row;
-
-  const reverseSequence = getComplementSequenceString(
-    (alignmentData && alignmentData.sequence) || sequence,
-    isRna
-  );
+  const reverseSequence = showReverseSequence
+    ? getComplementSequenceString(
+        (alignmentData && alignmentData.sequence) || sequence,
+        isRna
+      )
+    : "";
   const getGaps = useMemo(() => {
     if (alignmentData) {
       const gapMap = getGapMap(alignmentData.sequence);
@@ -341,7 +342,6 @@ export default function RowItem(props) {
     },
     alignmentType
   };
-
   return (
     <div
       style={rowContainerStyle}

diff --git a/packages/sequence-utils/src/getComplementSequenceString.js b/packages/sequence-utils/src/getComplementSequenceString.js
@@ -1,9 +1,8 @@
 import DNAComplementMap from "./DNAComplementMap";
 import { merge } from "lodash";
 
-// ac.throw([ac.string,ac.bool],arguments);
 export default function getComplementSequenceString(sequence, isRna) {
-  // ac.throw([ac.string],arguments);
+  if (typeof sequence !== "string") return "";
   let complementSeqString = "";
   const complementMap = merge(
     DNAComplementMap,