@teselagen/ove 0.5.12 → 0.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.12",
+  "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.9",
+    "@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/AlignmentTool/index.js

@@ -3,14 +3,10 @@ import React from "react";
 // import CutsiteFilter from "../CutsiteFilter";
 // import { Tabs, Tab, Button, InputGroup, Intent } from "@blueprintjs/core";
 
-export default class AlignmentTool extends React.Component {
-  // state={selectedTab: "virtualDigest"}
-  render() {
-    const { height = "100%" } = this.props;
-    return (
-      <div style={{ height, overflow: "auto", padding: 10 }}>
-        <div>Add an alignment file (.gb, .fasta, .ab)</div>
-      </div>
-    );
-  }
-}
+export default ({ height = "100%" }) => {
+  return (
+    <div style={{ height, overflow: "auto", padding: 10 }}>
+      <div>Add an alignment file (.gb, .fasta, .ab)</div>
+    </div>
+  );
+};

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) {