@teselagen/ove 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -13,10 +13,10 @@
     "node": "16.20.2"
   },
   "dependencies": {
-    "@teselagen/sequence-utils": "0.3.17",
+    "@teselagen/sequence-utils": "0.3.18",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.3.58",
-    "@teselagen/file-utils": "0.3.11",
+    "@teselagen/ui": "0.3.75",
+    "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.10",
     "@blueprintjs/core": "3.52.0",

package/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%"
             }
           }}
         />

package/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) && {

package/src/LinearView/style.css

@@ -1,6 +1,6 @@
 .veLinearView .veRowItemWrapper {
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   overflow: auto;
 }
 

package/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}

package/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}

package/src/commands/index.js

@@ -358,8 +358,10 @@ const noSelection = ({ selectionLayer = {} }) =>
   !(selectionLayer.start > -1 && selectionLayer.end > -1) &&
   "Selection Required";
 
-const triggerClipboardCommand = type => {
-  const wrapper = document.querySelector(".veVectorInteractionWrapper");
+const triggerClipboardCommand = (type, props) => {
+  const wrapper = document.querySelector(
+    `.${props.editorName} .veVectorInteractionWrapper`
+  );
   if (!wrapper) {
     return window.toastr.info(`Cannot trigger a ${type} in the current view`);
   }
@@ -395,8 +397,8 @@ const editCommandDefs = {
       (props.readOnly && readOnlyDisabledTooltip) ||
       props.sequenceLength === 0,
     isHidden: props => props.readOnly || props.disableBpEditing,
-    handler: () => {
-      triggerClipboardCommand("cut");
+    handler: props => {
+      triggerClipboardCommand("cut", props);
     },
     hotkey: "mod+x"
   },
@@ -417,7 +419,7 @@ const editCommandDefs = {
   copy: {
     isDisabled: props => props.sequenceLength === 0,
 
-    handler: () => triggerClipboardCommand("copy"),
+    handler: props => triggerClipboardCommand("copy", props),
     hotkey: "mod+c"
   },
 
@@ -425,7 +427,7 @@ const editCommandDefs = {
     isDisabled: props => props.readOnly && readOnlyDisabledTooltip,
     isHidden: props => props.readOnly || props.disableBpEditing,
 
-    handler: () => triggerClipboardCommand("paste"),
+    handler: props => triggerClipboardCommand("paste", props),
     hotkey: "mod+v"
   },
 

package/src/style.css

@@ -1,13 +1,13 @@
 @font-face {
-  font-family: 'Menlo';
-  src: url('./Menlo.ttf');
+  font-family: "Menlo";
+  src: url("./Menlo.ttf");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 @font-face {
-  font-family: 'Monaco';
-  src: url('./Monaco.ttf');
+  font-family: "Monaco";
+  src: url("./Monaco.ttf");
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/src/withEditorInteractions/index.js

@@ -304,8 +304,8 @@ function VectorInteractionHOC(Component /* options */) {
         (this.sequenceDataToCopy || {}).textToCopy !== undefined
           ? this.sequenceDataToCopy.textToCopy
           : seqData.isProtein
-          ? seqData.proteinSequence
-          : seqData.sequence;
+            ? seqData.proteinSequence
+            : seqData.sequence;
 
       seqData.textToCopy = textToCopy;
 
@@ -431,12 +431,12 @@ function VectorInteractionHOC(Component /* options */) {
           isCaretAtEndOfSeq
             ? newSeqData.sequence.length
             : rangeToDelete.start > newSeqData.sequence.length
-            ? //we're deleting around the origin so set the cursor to the 0 position
-              0
-            : normalizePositionByRangeLength(
-                rangeToDelete.start,
-                newSeqData.sequence.length
-              )
+              ? //we're deleting around the origin so set the cursor to the 0 position
+                0
+              : normalizePositionByRangeLength(
+                  rangeToDelete.start,
+                  newSeqData.sequence.length
+                )
         );
         if (showToast) window.toastr.success("Sequence Deleted Successfully");
       }
@@ -516,8 +516,8 @@ function VectorInteractionHOC(Component /* options */) {
         event.metaKey
           ? annotation
           : event.altKey
-          ? annotation.bottomSnipPosition
-          : annotation.topSnipPosition
+            ? annotation.bottomSnipPosition
+            : annotation.topSnipPosition
       );
       annotationDeselectAll(undefined);
       annotationSelect(annotation);
@@ -939,39 +939,41 @@ function VectorInteractionHOC(Component /* options */) {
           ...(readOnly
             ? []
             : [
-                ...(parts && [
-                  "--",
-                  {
-                    text: "Make a Part from Feature",
-                    onClick: async () => {
-                      const { sequenceData, upsertPart } = this.props;
-                      if (
-                        some(sequenceData.parts, part => {
+                ...(parts
+                  ? [
+                      "--",
+                      {
+                        text: "Make a Part from Feature",
+                        onClick: async () => {
+                          const { sequenceData, upsertPart } = this.props;
                           if (
-                            part.start === annotation.start &&
-                            part.end === annotation.end
+                            some(sequenceData.parts, part => {
+                              if (
+                                part.start === annotation.start &&
+                                part.end === annotation.end
+                              ) {
+                                return true;
+                              }
+                            })
                           ) {
-                            return true;
+                            const doAction = await showConfirmationDialog({
+                              text: "A part already exists that matches this feature's range. Do you want to make one anyways?",
+                              confirmButtonText: "Create Part",
+                              canEscapeKeyCancel: true //this is false by default
+                            });
+                            if (!doAction) return; //early return
                           }
-                        })
-                      ) {
-                        const doAction = await showConfirmationDialog({
-                          text: "A part already exists that matches this feature's range. Do you want to make one anyways?",
-                          confirmButtonText: "Create Part",
-                          canEscapeKeyCancel: true //this is false by default
-                        });
-                        if (!doAction) return; //early return
+                          upsertPart({
+                            start: annotation.start,
+                            end: annotation.end,
+                            type: annotation.type,
+                            forward: annotation.forward,
+                            name: annotation.name
+                          });
+                        }
                       }
-                      upsertPart({
-                        start: annotation.start,
-                        end: annotation.end,
-                        type: annotation.type,
-                        forward: annotation.forward,
-                        name: annotation.name
-                      });
-                    }
-                  }
-                ]),
+                    ]
+                  : []),
                 {
                   text: "Merge With Another Feature",
                   onClick: () => {
@@ -1185,8 +1187,8 @@ function getGenbankFromSelection(selectedSeqData, sequenceData) {
       name: spansEntireSeq
         ? selectedSeqData.name
         : just1Feat
-        ? feats[0].name
-        : selectedSeqData.name + "_partial",
+          ? feats[0].name
+          : selectedSeqData.name + "_partial",
       circular: spansEntireSeq ? selectedSeqData.circular : false
     })
   };
@@ -1247,17 +1249,17 @@ const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
     caretPosition > -1
       ? caretPosition
       : selectionLayer.start > selectionLayer.end
-      ? maintainOriginSplit
-        ? newSeqData.size - selectionStartDistanceFromEnd
-        : 0
-      : selectionLayer.start;
+        ? maintainOriginSplit
+          ? newSeqData.size - selectionStartDistanceFromEnd
+          : 0
+        : selectionLayer.start;
   const newSelectionLayerEnd =
     newSelectionLayerStart +
     (seqDataToInsert.sequence
       ? seqDataToInsert.sequence.length - 1
       : seqDataToInsert.proteinSequence
-      ? seqDataToInsert.proteinSequence.length * 3 - 1
-      : 0);
+        ? seqDataToInsert.proteinSequence.length * 3 - 1
+        : 0);
   selectionLayerUpdate({
     start: newSelectionLayerStart,
     end: newSelectionLayerEnd % newSeqData.sequence.length