@teselagen/ove 0.5.13 → 0.5.14

package/index.umd.js

@@ -41069,25 +41069,16 @@ ${latestSubscriptionCallbackError.current.stack}
   var _cof = /* @__PURE__ */ __name(function(it) {
     return toString$3.call(it).slice(8, -1);
   }, "_cof");
-  var _iobject;
-  var hasRequired_iobject;
-  function require_iobject() {
-    if (hasRequired_iobject)
-      return _iobject;
-    hasRequired_iobject = 1;
-    var cof2 = _cof;
-    _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-      return cof2(it) == "String" ? it.split("") : Object(it);
-    };
-    return _iobject;
-  }
-  __name(require_iobject, "require_iobject");
+  var cof$2 = _cof;
+  var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+    return cof$2(it) == "String" ? it.split("") : Object(it);
+  };
   var _defined = /* @__PURE__ */ __name(function(it) {
     if (it == void 0)
       throw TypeError("Can't call method on  " + it);
     return it;
   }, "_defined");
-  var IObject = require_iobject();
+  var IObject = _iobject;
   var defined$2 = _defined;
   var _toIobject = /* @__PURE__ */ __name(function(it) {
     return IObject(defined$2(it));
@@ -41208,7 +41199,7 @@ ${latestSubscriptionCallbackError.current.stack}
     var gOPS2 = _objectGops;
     var pIE2 = require_objectPie();
     var toObject2 = _toObject;
-    var IObject2 = require_iobject();
+    var IObject2 = _iobject;
     var $assign = Object.assign;
     _objectAssign = !$assign || _fails(function() {
       var A2 = {};
@@ -108790,123 +108781,167 @@ ${latestSubscriptionCallbackError.current.stack}
     return proteinAlphabet[letter.toUpperCase()];
   }
   __name(getAminoAcidFromSequenceTriplet, "getAminoAcidFromSequenceTriplet");
-  function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optionalSubrangeRange, isProteinSequence) {
+  function getNextTriplet(index2, sequenceString, exonRange) {
+    let triplet = "";
+    let internalIndex;
+    const codonPositions = [];
+    const isBaseInExon = /* @__PURE__ */ __name((baseIndex) => exonRange.some(
+      (r2) => isPositionWithinRange(baseIndex, r2, sequenceString.length, true, false)
+    ), "isBaseInExon");
+    for (internalIndex = index2; internalIndex < sequenceString.length; internalIndex++) {
+      if (triplet.length === 3) {
+        break;
+      }
+      if (isBaseInExon(internalIndex)) {
+        triplet += sequenceString[internalIndex];
+        codonPositions.push(internalIndex);
+      }
+    }
+    return { triplet, basesRead: internalIndex - index2, codonPositions };
+  }
+  __name(getNextTriplet, "getNextTriplet");
+  function getTranslatedSequenceProperties(originalSequenceString, forward, optionalSubrangeRange, isProteinSequence) {
     const originalSequenceStringLength = isProteinSequence ? originalSequenceString.length * 3 : originalSequenceString.length;
     let sequenceString = originalSequenceString;
-    let startOffset = 0;
+    const translationRange = { start: 0, end: originalSequenceStringLength - 1 };
     if (optionalSubrangeRange) {
       sequenceString = getSequenceWithinRange(
         optionalSubrangeRange,
         originalSequenceString
       );
-      startOffset = optionalSubrangeRange.start;
+      translationRange.start = optionalSubrangeRange.start;
+      translationRange.end = optionalSubrangeRange.end;
     }
     const sequenceStringLength = isProteinSequence ? sequenceString.length * 3 : sequenceString.length;
-    const aminoAcidDataForEachBaseOfDNA = [];
-    let codonRange;
-    let revCompGapLength = 0;
-    let aminoAcidIndex = 0;
-    if (!forward) {
-      aminoAcidIndex = Math.floor((sequenceStringLength - 1) / 3);
-      revCompGapLength = sequenceStringLength % 3;
-      codonRange = translateRange(
-        {
-          start: 0,
-          end: revCompGapLength - 1
-        },
-        startOffset,
+    if (!isProteinSequence && !forward) {
+      sequenceString = getReverseComplementSequenceString(sequenceString);
+    }
+    const absoluteExonRange = !isProteinSequence && optionalSubrangeRange && optionalSubrangeRange.locations ? optionalSubrangeRange.locations : [translationRange];
+    const exonRange = absoluteExonRange.map((range2) => {
+      let outputRange = translateRange(
+        range2,
+        -translationRange.start,
         originalSequenceStringLength
       );
-      if (revCompGapLength > 0) {
-        for (let i2 = 0; i2 < revCompGapLength; i2++) {
-          aminoAcidDataForEachBaseOfDNA.push({
-            aminoAcid: getAminoAcidFromSequenceTriplet("xxx"),
-            //fake xxx triplet returns the ambiguous X amino acid
-            positionInCodon: revCompGapLength - i2 - 1,
-            aminoAcidIndex,
-            sequenceIndex: codonRange.start + i2,
-            codonRange,
-            fullCodon: false
-          });
-        }
-        aminoAcidIndex--;
+      if (!forward) {
+        outputRange = flipRelativeRange(
+          outputRange,
+          { start: 0, end: sequenceStringLength - 1 },
+          sequenceStringLength
+        );
       }
+      return outputRange;
+    });
+    return {
+      sequenceString,
+      translationRange,
+      sequenceStringLength,
+      originalSequenceStringLength,
+      exonRange
+    };
+  }
+  __name(getTranslatedSequenceProperties, "getTranslatedSequenceProperties");
+  function positionInCdsToPositionInMainSequence(index2, forward, translationRange, mainSequenceLength) {
+    let outputRange = translateRange(
+      { start: index2, end: index2 },
+      translationRange.start,
+      mainSequenceLength
+    );
+    if (!forward) {
+      outputRange = flipRelativeRange(
+        outputRange,
+        translationRange,
+        mainSequenceLength
+      );
     }
-    for (let index2 = 2 + revCompGapLength; index2 < sequenceStringLength; index2 += 3) {
+    return outputRange.start;
+  }
+  __name(positionInCdsToPositionInMainSequence, "positionInCdsToPositionInMainSequence");
+  function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optionalSubrangeRange, isProteinSequence) {
+    const {
+      sequenceString,
+      translationRange,
+      sequenceStringLength,
+      originalSequenceStringLength,
+      exonRange
+    } = getTranslatedSequenceProperties(
+      originalSequenceString,
+      forward,
+      optionalSubrangeRange,
+      isProteinSequence
+    );
+    const aminoAcidDataForEachBaseOfDNA = [];
+    for (let index2 = 0; index2 < sequenceStringLength; index2 += 3) {
       let aminoAcid;
+      const aminoAcidIndex = index2 / 3;
+      let codonPositionsInCDS;
+      let basesRead;
       if (isProteinSequence) {
-        aminoAcid = proteinAlphabet[sequenceString[(index2 - 2) / 3].toUpperCase()];
+        codonPositionsInCDS = [0, 1, 2].map((i2) => index2 + i2);
+        basesRead = 3;
+        aminoAcid = proteinAlphabet[sequenceString[index2 / 3].toUpperCase()];
       } else {
-        let triplet = sequenceString.slice(index2 - 2, index2 + 1);
-        if (!forward) {
-          triplet = getReverseComplementSequenceString(triplet);
-        }
-        aminoAcid = getAminoAcidFromSequenceTriplet(triplet);
-      }
-      codonRange = translateRange(
-        {
-          start: index2 - 2,
-          end: index2
-        },
-        startOffset,
-        originalSequenceStringLength
+        const {
+          triplet,
+          basesRead: _basesRead,
+          codonPositions
+        } = getNextTriplet(index2, sequenceString, exonRange);
+        basesRead = _basesRead;
+        codonPositionsInCDS = codonPositions;
+        aminoAcid = triplet.length === 3 ? getAminoAcidFromSequenceTriplet(triplet) : getAminoAcidFromSequenceTriplet("xxx");
+      }
+      const absoluteCodonPositions = codonPositionsInCDS.map(
+        (i2) => positionInCdsToPositionInMainSequence(
+          i2,
+          forward,
+          translationRange,
+          originalSequenceStringLength
+        )
       );
-      aminoAcidDataForEachBaseOfDNA.push({
-        aminoAcid,
-        //gap amino acid
-        positionInCodon: forward ? 0 : 2,
-        aminoAcidIndex,
-        sequenceIndex: codonRange.start,
-        codonRange,
-        fullCodon: true
-      });
-      aminoAcidDataForEachBaseOfDNA.push({
-        aminoAcid,
-        //gap amino acid
-        positionInCodon: 1,
-        aminoAcidIndex,
-        sequenceIndex: codonRange.start + 1,
-        codonRange,
-        fullCodon: true
-      });
-      aminoAcidDataForEachBaseOfDNA.push({
-        aminoAcid,
-        //gap amino acid
-        positionInCodon: forward ? 2 : 0,
-        aminoAcidIndex,
-        sequenceIndex: codonRange.start + 2,
-        codonRange,
-        fullCodon: true
-      });
-      if (forward) {
-        aminoAcidIndex++;
-      } else {
-        aminoAcidIndex--;
+      const codonRange = forward ? {
+        start: absoluteCodonPositions[0],
+        end: absoluteCodonPositions[codonPositionsInCDS.length - 1]
+      } : {
+        start: absoluteCodonPositions[codonPositionsInCDS.length - 1],
+        end: absoluteCodonPositions[0]
+      };
+      let positionInCodon = 0;
+      for (let i2 = 0; i2 < basesRead; i2++) {
+        const posInCds = i2 + index2;
+        if (codonPositionsInCDS.includes(posInCds)) {
+          aminoAcidDataForEachBaseOfDNA.push({
+            aminoAcid,
+            positionInCodon,
+            aminoAcidIndex,
+            sequenceIndex: absoluteCodonPositions[i2],
+            codonRange,
+            fullCodon: codonPositionsInCDS.length === 3
+          });
+          positionInCodon++;
+        } else {
+          aminoAcidDataForEachBaseOfDNA.push({
+            aminoAcid: null,
+            positionInCodon: null,
+            aminoAcidIndex: null,
+            sequenceIndex: positionInCdsToPositionInMainSequence(
+              posInCds,
+              forward,
+              translationRange,
+              originalSequenceStringLength
+            ),
+            codonRange: null,
+            fullCodon: null
+          });
+        }
       }
-    }
-    const lengthOfEndBpsNotCoveredByAminoAcids = sequenceStringLength - aminoAcidDataForEachBaseOfDNA.length;
-    codonRange = translateRange(
-      {
-        start: sequenceStringLength - lengthOfEndBpsNotCoveredByAminoAcids,
-        end: sequenceStringLength - 1
-      },
-      startOffset,
-      originalSequenceStringLength
-    );
-    for (let j2 = 0; j2 < lengthOfEndBpsNotCoveredByAminoAcids; j2++) {
-      aminoAcidDataForEachBaseOfDNA.push({
-        aminoAcid: getAminoAcidFromSequenceTriplet("xxx"),
-        //fake xxx triplet returns the gap amino acid
-        positionInCodon: j2,
-        aminoAcidIndex,
-        sequenceIndex: codonRange.start + j2,
-        fullCodon: false,
-        codonRange
-      });
+      index2 += basesRead - codonPositionsInCDS.length;
     }
     if (sequenceStringLength !== aminoAcidDataForEachBaseOfDNA.length) {
       throw new Error("something went wrong!");
     }
+    if (!forward) {
+      aminoAcidDataForEachBaseOfDNA.reverse();
+    }
     return aminoAcidDataForEachBaseOfDNA;
   }
   __name(getAminoAcidDataForEachBaseOfDna, "getAminoAcidDataForEachBaseOfDna");
@@ -147931,7 +147966,7 @@ double click --> edit`}`;
           fill: color2 || "gray"
         }
       )),
-      !isFiller && /* @__PURE__ */ React$2.createElement(
+      (!isFiller || isTruncatedEnd && isTruncatedStart) && /* @__PURE__ */ React$2.createElement(
         "text",
         {
           fontSize: 25,
@@ -148008,18 +148043,39 @@ double click --> edit`}`;
         subrangeStartRelativeToAnnotationStart,
         aminoAcids
       );
+      let prevAaSliver;
+      let nextAaSliver = aminoAcidsForSubrange[1];
+      const lastIndex = aminoAcidsForSubrange.length - 1;
       const translationSVG = aminoAcidsForSubrange.map(
         function(aminoAcidSliver, index2) {
-          const isEndFiller = index2 === 0 && aminoAcidSliver.positionInCodon === (annotation.forward ? 2 : 0);
-          let isTruncatedEnd = index2 === 0 && aminoAcidSliver.positionInCodon === 1;
-          let isTruncatedStart = index2 === aminoAcidsForSubrange.length - 1 && aminoAcidSliver.positionInCodon === 1;
+          if (aminoAcidSliver.positionInCodon === null) {
+            prevAaSliver = aminoAcidSliver;
+            nextAaSliver = aminoAcidsForSubrange[index2 + 2];
+            return /* @__PURE__ */ React$2.createElement(
+              "rect",
+              {
+                x: index2 * charWidth2,
+                y: height2 / 2 - height2 / 16,
+                width: charWidth2,
+                height: height2 / 8,
+                fill: "grey",
+                stroke: "black",
+                strokeWidth: 1
+              }
+            );
+          }
+          const isEndFiller = (index2 === 0 || (prevAaSliver == null ? void 0 : prevAaSliver.positionInCodon) === null) && aminoAcidSliver.positionInCodon === (annotation.forward ? 2 : 0);
+          const isStartFiller = (index2 === lastIndex || (nextAaSliver == null ? void 0 : nextAaSliver.positionInCodon) === null) && aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
+          let isTruncatedEnd = (index2 === 0 || (prevAaSliver == null ? void 0 : prevAaSliver.positionInCodon) === null) && aminoAcidSliver.positionInCodon === 1;
+          let isTruncatedStart = (index2 === lastIndex || (nextAaSliver == null ? void 0 : nextAaSliver.positionInCodon) === null) && aminoAcidSliver.positionInCodon === 1;
           if (!annotation.forward) {
             const holder = isTruncatedEnd;
             isTruncatedEnd = isTruncatedStart;
             isTruncatedStart = holder;
           }
-          const isStartFiller = index2 === aminoAcidsForSubrange.length - 1 && aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
           if (aminoAcidSliver.positionInCodon !== 1 && !isStartFiller && !isEndFiller) {
+            prevAaSliver = aminoAcidSliver;
+            nextAaSliver = aminoAcidsForSubrange[index2 + 2];
             return null;
           }
           const { gapsInside, gapsBefore } = getGaps(aminoAcidSliver.codonRange);
@@ -148036,10 +148092,12 @@ double click --> edit`}`;
           } else {
             color2 = aminoAcid.color;
           }
+          prevAaSliver = aminoAcidSliver;
+          nextAaSliver = aminoAcidsForSubrange[index2 + 2];
           return /* @__PURE__ */ React$2.createElement(
             AASliver$1,
             {
-              isFiller: isEndFiller || isStartFiller,
+              isFiller: isEndFiller || isStartFiller || isTruncatedEnd && isTruncatedStart,
               isTruncatedEnd,
               isTruncatedStart,
               onClick: function(event) {
@@ -150251,7 +150309,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(showFileDialog, "showFileDialog");
   const name = "@teselagen/ove";
-  const version = "0.5.12";
+  const version = "0.5.13";
   const main = "./src/index.js";
   const type = "module";
   const exports$1 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.24",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.4.10",
+    "@teselagen/ui": "0.4.11",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.18",

package/src/RowItem/Translations/AASliver.js

@@ -36,8 +36,8 @@ function AASliver(props) {
   path = isFiller
     ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
     : isTruncatedStart
-    ? // ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
-      `M ${roundedCorner / 3}, 0
+      ? // ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
+        `M ${roundedCorner / 3}, 0
                   L ${50 - roundedCorner / 3}, 0
                   Q 50 0 ${50 + roundedCorner * dirX1} ${roundedCorner * dirY1}
                   L ${60 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
@@ -59,9 +59,9 @@ function AASliver(props) {
                   L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
                   Q 0 0 ${roundedCorner / 3} 0
                   z`
-    : isTruncatedEnd
-    ? // ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
-      `M ${24 + roundedCorner / 3}, 0
+      : isTruncatedEnd
+        ? // ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
+          `M ${24 + roundedCorner / 3}, 0
                   L ${74 - roundedCorner / 3}, 0
                   Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
                   L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
@@ -83,7 +83,7 @@ function AASliver(props) {
                   L ${24 + roundedCorner * dirX2}, ${roundedCorner * dirY2}
                   Q 24 0 ${24 + roundedCorner / 3} 0
                   z`
-    : `M ${roundedCorner / 3}, 0
+        : `M ${roundedCorner / 3}, 0
                   L ${74 - roundedCorner / 3}, 0
                   Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
                   L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
@@ -130,10 +130,10 @@ function AASliver(props) {
               isFiller
                 ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
                 : isTruncatedStart
-                ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
-                : isTruncatedEnd
-                ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
-                : "0,0 74,0 85,50 74,100 0,100 16,50 0,0"
+                  ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
+                  : isTruncatedEnd
+                    ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
+                    : "0,0 74,0 85,50 74,100 0,100 16,50 0,0"
             }
             strokeWidth="5"
             fill={color || "gray"}
@@ -148,7 +148,8 @@ function AASliver(props) {
           />
         ))}
 
-      {!isFiller && (
+      {/* isTruncatedEnd && isTruncatedStart is the special case of a single base exon */}
+      {(!isFiller || (isTruncatedEnd && isTruncatedStart)) && (
         <text
           fontSize={25}
           stroke="black"

package/src/RowItem/Translations/Translation.js

@@ -57,31 +57,55 @@ class Translation extends React.Component {
     );
 
     //we then loop over all the amino acids in the sub range and draw them onto the row
+    let prevAaSliver;
+    let nextAaSliver = aminoAcidsForSubrange[1];
+    // The last index in the sequence
+    const lastIndex = aminoAcidsForSubrange.length - 1;
+
     const translationSVG = aminoAcidsForSubrange.map(
       function (aminoAcidSliver, index) {
+        if (aminoAcidSliver.positionInCodon === null) {
+          prevAaSliver = aminoAcidSliver;
+          nextAaSliver = aminoAcidsForSubrange[index + 2];
+          return (
+            <rect
+              x={index * charWidth}
+              y={height / 2 - height / 16}
+              width={charWidth}
+              height={height / 8}
+              fill="grey"
+              stroke="black"
+              strokeWidth={1}
+            ></rect>
+          );
+        }
         const isEndFiller =
-          index === 0 &&
+          (index === 0 || prevAaSliver?.positionInCodon === null) &&
           aminoAcidSliver.positionInCodon === (annotation.forward ? 2 : 0);
-        // const isStartFiller = false
+
+        const isStartFiller =
+          (index === lastIndex || nextAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
+
         let isTruncatedEnd =
-          index === 0 && aminoAcidSliver.positionInCodon === 1;
+          (index === 0 || prevAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === 1;
         let isTruncatedStart =
-          index === aminoAcidsForSubrange.length - 1 &&
+          (index === lastIndex || nextAaSliver?.positionInCodon === null) &&
           aminoAcidSliver.positionInCodon === 1;
+
         if (!annotation.forward) {
           const holder = isTruncatedEnd;
           isTruncatedEnd = isTruncatedStart;
           isTruncatedStart = holder;
         }
-        const isStartFiller =
-          index === aminoAcidsForSubrange.length - 1 &&
-          aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
-
         if (
           aminoAcidSliver.positionInCodon !== 1 &&
           !isStartFiller &&
           !isEndFiller
         ) {
+          prevAaSliver = aminoAcidSliver;
+          nextAaSliver = aminoAcidsForSubrange[index + 2];
           return null;
         }
         const { gapsInside, gapsBefore } = getGaps(aminoAcidSliver.codonRange);
@@ -103,9 +127,17 @@ class Translation extends React.Component {
         } else {
           color = aminoAcid.color;
         }
+        prevAaSliver = aminoAcidSliver;
+        nextAaSliver = aminoAcidsForSubrange[index + 2];
+
         return (
           <AASliver
-            isFiller={isEndFiller || isStartFiller}
+            // isTruncatedEnd && isTruncatedStart is the special case of a single base exon
+            isFiller={
+              isEndFiller ||
+              isStartFiller ||
+              (isTruncatedEnd && isTruncatedStart)
+            }
             isTruncatedEnd={isTruncatedEnd}
             isTruncatedStart={isTruncatedStart}
             onClick={function (event) {