@teselagen/ove 0.5.13 → 0.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "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/GlobalDialogUtils.js

@@ -23,7 +23,10 @@ export function showDialog({
       ?.className.split(" ")
       .forEach(c => {
         if (!c.trim()) return;
-        if (!c.trim().includes("veEditor")) {
+        if (
+          !c.trim().includes("veEditor") &&
+          !c.trim().includes("previewModeFullscreen")
+        ) {
           editorName = c;
         }
       });

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

package/src/withEditorInteractions/index.js

@@ -202,7 +202,7 @@ function VectorInteractionHOC(Component /* options */) {
       });
     };
 
-    handlePaste = e => {
+    handlePaste = async e => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -248,7 +248,7 @@ function VectorInteractionHOC(Component /* options */) {
       if (!seqDataToInsert.sequence.length)
         return window.toastr.warning("Sorry no valid base pairs to paste");
 
-      insertAndSelectHelper({
+      await insertAndSelectHelper({
         seqDataToInsert,
         props: this.props
       });
@@ -344,7 +344,7 @@ function VectorInteractionHOC(Component /* options */) {
 
     handleCopy = this.handleCutOrCopy();
 
-    handleDnaInsert = ({ useEventPositioning }) => {
+    handleDnaInsert = async ({ useEventPositioning }) => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -371,8 +371,8 @@ function VectorInteractionHOC(Component /* options */) {
           selectionLayer,
           sequenceLength,
           caretPosition,
-          handleInsert: seqDataToInsert => {
-            insertAndSelectHelper({
+          handleInsert: async seqDataToInsert => {
+            await insertAndSelectHelper({
               props: this.props,
               seqDataToInsert
             });
@@ -383,7 +383,7 @@ function VectorInteractionHOC(Component /* options */) {
       }
     };
 
-    handleDnaDelete = (showToast = true) => {
+    handleDnaDelete = async (showToast = true) => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -424,11 +424,13 @@ function VectorInteractionHOC(Component /* options */) {
             isCaretAtEndOfSeq = true;
           }
         }
-        const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+        const [newSeqData, {abortSeqChange}] = await wrappedInsertSequenceDataAtPositionOrRange(
           {},
           sequenceData,
           rangeToDelete
         );
+        console.log(`z3`)
+        if (abortSeqChange) return 
         updateSequenceData(newSeqData);
         caretPositionUpdate(
           isCaretAtEndOfSeq
@@ -1197,7 +1199,7 @@ function getGenbankFromSelection(selectedSeqData, sequenceData) {
   };
 }
 
-const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
+const insertAndSelectHelper = async ({ seqDataToInsert, props }) => {
   const {
     updateSequenceData,
     wrappedInsertSequenceDataAtPositionOrRange,
@@ -1207,31 +1209,16 @@ const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
     selectionLayer,
     bpLimit
   } = props;
-
-  // sequenceData,
-  //             caretPosition,
-  //             selectionLayer
-
-  // updateSequenceData(
-  //   wrappedInsertSequenceDataAtPositionOrRange(
-  //     seqDataToInsert,
-  //     sequenceData,
-  //     caretPosition > -1 ? caretPosition : selectionLayer
-  //   )
-  // );
-
-  // const newSelectionLayerStart =
-  //   caretPosition > -1 ? caretPosition : (selectionLayer.start > selectionLayer.end ? 0 : selectionLayer.start);
-  // selectionLayerUpdate({
-  //   start: newSelectionLayerStart,
-  //   end: newSelectionLayerStart + seqDataToInsert.sequence.length - 1
-  // });
-  const [newSeqData, { maintainOriginSplit }] =
+  const [newSeqData, { maintainOriginSplit, abortSeqChange }] = await
     wrappedInsertSequenceDataAtPositionOrRange(
       seqDataToInsert,
       sequenceData,
       caretPosition > -1 ? caretPosition : selectionLayer
     );
+    console.log(`z4`)
+  if (abortSeqChange) {
+    throw new Error("abortSeqChange");
+  }
   if (bpLimit) {
     if (newSeqData.sequence.length > bpLimit) {
       window.toastr.error(

package/src/withEditorProps/index.js

@@ -354,7 +354,7 @@ export default compose(
   ),
   withHandlers({
     wrappedInsertSequenceDataAtPositionOrRange: props => {
-      return (
+      return async (
         _sequenceDataToInsert,
         _existingSequenceData,
         _caretPositionOrRange,
@@ -365,14 +365,15 @@ export default compose(
           existingSequenceData,
           caretPositionOrRange,
           options
-        } = props.beforeSequenceInsertOrDelete
-          ? props.beforeSequenceInsertOrDelete(
+        } =  (props.beforeSequenceInsertOrDelete
+          ? await props.beforeSequenceInsertOrDelete(
               tidyUpSequenceData(_sequenceDataToInsert),
               tidyUpSequenceData(_existingSequenceData),
               _caretPositionOrRange,
               _options
             ) || {}
-          : {};
+          : {});
+          console.log(`zoink2`)
         return [
           insertSequenceDataAtPositionOrRange(
             sequenceDataToInsert || _sequenceDataToInsert,
@@ -483,7 +484,7 @@ export default compose(
       caretPositionUpdate(0);
     },
 
-    handleReverseComplementSelection: props => () => {
+    handleReverseComplementSelection: props => async () => {
       const {
         sequenceData,
         updateSequenceData,
@@ -499,7 +500,7 @@ export default compose(
           range: selectionLayer
         }
       );
-      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+      const [newSeqData] = await wrappedInsertSequenceDataAtPositionOrRange(
         reversedSeqData,
         sequenceData,
         selectionLayer,
@@ -510,7 +511,7 @@ export default compose(
       updateSequenceData(newSeqData);
     },
 
-    handleComplementSelection: props => () => {
+    handleComplementSelection: props => async () => {
       const {
         sequenceData,
         updateSequenceData,
@@ -523,7 +524,7 @@ export default compose(
       const comp = getComplementSequenceAndAnnotations(sequenceData, {
         range: selectionLayer
       });
-      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+      const [newSeqData] = await wrappedInsertSequenceDataAtPositionOrRange(
         comp,
         sequenceData,
         selectionLayer,

package/style.css

@@ -9086,6 +9086,13 @@ button:not(:disabled):active {
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag {
+  /* background-color: red; */
+  border-radius: 4px;
+  width: fit-content;
+  color: white;
+  border: 2px solid white;
+}
 .tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
   color: white !important;
 }