@teselagen/ove 0.8.18 → 0.8.20

package/index.umd.js

@@ -35432,6 +35432,15 @@ ${latestSubscriptionCallbackError.current.stack}
     return value < other;
   }
   __name(baseLt, "baseLt");
+  function mapValues$1(object2, iteratee) {
+    var result = {};
+    iteratee = baseIteratee(iteratee);
+    baseForOwn(object2, function(value, key, object3) {
+      baseAssignValue(result, key, iteratee(value, key, object3));
+    });
+    return result;
+  }
+  __name(mapValues$1, "mapValues$1");
   function baseExtremum(array, iteratee, comparator) {
     var index2 = -1, length = array.length;
     while (++index2 < length) {
@@ -40254,12 +40263,12 @@ ${latestSubscriptionCallbackError.current.stack}
   if (typeof window !== "undefined") {
     getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
   }
-  function each$2(arr, fn2) {
+  function each(arr, fn2) {
     for (var i2 = 0; i2 < arr.length; i2++) {
       fn2(arr[i2]);
     }
   }
-  __name(each$2, "each$2");
+  __name(each, "each");
   function isBorderBoxFn(elem) {
     return getComputedStyleX(elem, "boxSizing") === "border-box";
   }
@@ -40314,7 +40323,7 @@ ${latestSubscriptionCallbackError.current.stack}
   }
   __name(isWindow, "isWindow");
   var domUtils = {};
-  each$2(["Width", "Height"], function(name2) {
+  each(["Width", "Height"], function(name2) {
     domUtils["doc".concat(name2)] = function(refWin) {
       var d2 = refWin.document;
       return Math.max(
@@ -40410,7 +40419,7 @@ ${latestSubscriptionCallbackError.current.stack}
     return getComputedStyleX(el, name2);
   }
   __name(css, "css");
-  each$2(["width", "height"], function(name2) {
+  each(["width", "height"], function(name2) {
     var first = name2.charAt(0).toUpperCase() + name2.slice(1);
     domUtils["outer".concat(first)] = function(el, includeMargin) {
       return el && getWHIgnoreDisplay(el, name2, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
@@ -40461,7 +40470,7 @@ ${latestSubscriptionCallbackError.current.stack}
       }
     }, "offset"),
     isWindow,
-    each: each$2,
+    each,
     css,
     clone: /* @__PURE__ */ __name(function clone2(obj) {
       var ret = {};
@@ -104112,17 +104121,25 @@ ${latestSubscriptionCallbackError.current.stack}
     });
     if (!noTranslationData) {
       seqData.translations = flatMap(seqData.translations, (translation) => {
+        var _a2, _b2;
         if (noCdsTranslations && translation.translationType === "CDS Feature") {
           return [];
         }
-        if (!translation.aminoAcids && !seqData.noSequence) {
-          translation.aminoAcids = getAminoAcidDataForEachBaseOfDna(
+        const codonStart = ((_b2 = (_a2 = translation == null ? void 0 : translation.notes) == null ? void 0 : _a2.codon_start) == null ? void 0 : _b2[0]) - 1 || 0;
+        const expandedRange = expandOrContractRangeByLength(
+          translation,
+          -codonStart,
+          true,
+          seqData.sequence.length
+        );
+        if (!expandedRange.aminoAcids && !seqData.noSequence) {
+          expandedRange.aminoAcids = getAminoAcidDataForEachBaseOfDna(
             seqData.sequence,
-            translation.forward,
-            translation
+            expandedRange.forward,
+            expandedRange
           );
         }
-        return translation;
+        return expandedRange;
       });
     }
     if (annotationsAsObjects) {
@@ -113235,6 +113252,160 @@ ${latestSubscriptionCallbackError.current.stack}
     }
   }
   __name(calculateNebTm, "calculateNebTm");
+  const PRIMER3_PARAMS = {
+    saltMonovalent: 50,
+    // mM
+    saltDivalent: 1.5,
+    // mM
+    dntpConc: 0.6,
+    // mM
+    dnaConc: 50,
+    // nM
+    R: 1.987
+    // Gas constant (cal/K·mol)
+  };
+  const SANTA_LUCIA_NN = {
+    AA: { dH: -7.9, dS: -22.2 },
+    TT: { dH: -7.9, dS: -22.2 },
+    AT: { dH: -7.2, dS: -20.4 },
+    TA: { dH: -7.2, dS: -21.3 },
+    CA: { dH: -8.5, dS: -22.7 },
+    TG: { dH: -8.5, dS: -22.7 },
+    GT: { dH: -8.4, dS: -22.4 },
+    AC: { dH: -8.4, dS: -22.4 },
+    CT: { dH: -7.8, dS: -21 },
+    AG: { dH: -7.8, dS: -21 },
+    GA: { dH: -8.2, dS: -22.2 },
+    TC: { dH: -8.2, dS: -22.2 },
+    CG: { dH: -10.6, dS: -27.2 },
+    GC: { dH: -9.8, dS: -24.4 },
+    GG: { dH: -8, dS: -19.9 },
+    CC: { dH: -8, dS: -19.9 }
+  };
+  const SANTA_LUCIA_INIT = {
+    GC: { dH: 0.1, dS: -2.8 },
+    // initiation with terminal GC
+    AT: { dH: 2.3, dS: 4.1 }
+    // initiation with terminal AT
+  };
+  function getEffectiveMonovalentConc() {
+    let effectiveMono = PRIMER3_PARAMS.saltMonovalent;
+    {
+      const freeMg = Math.max(
+        0,
+        PRIMER3_PARAMS.saltDivalent - PRIMER3_PARAMS.dntpConc
+      );
+      effectiveMono += 120 * Math.sqrt(freeMg);
+    }
+    return effectiveMono;
+  }
+  __name(getEffectiveMonovalentConc, "getEffectiveMonovalentConc");
+  function applySaltCorrection(deltaS, nnPairs) {
+    const effectiveMono = getEffectiveMonovalentConc();
+    return deltaS + 0.368 * nnPairs * Math.log(effectiveMono / 1e3);
+  }
+  __name(applySaltCorrection, "applySaltCorrection");
+  function isValidSequence(sequence2) {
+    return /^[ATGCN]+$/.test(sequence2);
+  }
+  __name(isValidSequence, "isValidSequence");
+  function calculateSantaLuciaTm(sequence2) {
+    try {
+      sequence2 = sequence2 == null ? void 0 : sequence2.toUpperCase().trim();
+      if (!isValidSequence(sequence2)) {
+        throw new Error("Invalid sequence: contains non-DNA characters");
+      }
+      if (sequence2.length < 2) {
+        throw new Error("Sequence too short: minimum length is 2 bases");
+      }
+      let deltaH = 0;
+      let deltaS = 0;
+      for (let i2 = 0; i2 < sequence2.length - 1; i2++) {
+        const dinucleotide = sequence2.substring(i2, i2 + 2);
+        if (dinucleotide.includes("N")) {
+          continue;
+        }
+        const params = SANTA_LUCIA_NN[dinucleotide];
+        if (params) {
+          deltaH += params.dH;
+          deltaS += params.dS;
+        }
+      }
+      const firstBase = sequence2[0];
+      const lastBase = sequence2[sequence2.length - 1];
+      if (firstBase === "G" || firstBase === "C") {
+        deltaH += SANTA_LUCIA_INIT.GC.dH;
+        deltaS += SANTA_LUCIA_INIT.GC.dS;
+      } else {
+        deltaH += SANTA_LUCIA_INIT.AT.dH;
+        deltaS += SANTA_LUCIA_INIT.AT.dS;
+      }
+      if (lastBase === "G" || lastBase === "C") {
+        deltaH += SANTA_LUCIA_INIT.GC.dH;
+        deltaS += SANTA_LUCIA_INIT.GC.dS;
+      } else {
+        deltaH += SANTA_LUCIA_INIT.AT.dH;
+        deltaS += SANTA_LUCIA_INIT.AT.dS;
+      }
+      const nnPairs = sequence2.length - 1;
+      deltaS = applySaltCorrection(deltaS, nnPairs);
+      const C = PRIMER3_PARAMS.dnaConc * 1e-9;
+      const Tm = deltaH * 1e3 / (deltaS + PRIMER3_PARAMS.R * Math.log(C / 4));
+      return Tm - 273.15;
+    } catch (e2) {
+      return `Error calculating Tm for sequence ${sequence2}. ${e2}`;
+    }
+  }
+  __name(calculateSantaLuciaTm, "calculateSantaLuciaTm");
+  function calculateEndStability(sequence2) {
+    try {
+      sequence2 = sequence2 == null ? void 0 : sequence2.toUpperCase().trim();
+      if (!isValidSequence(sequence2)) {
+        throw new Error("Invalid sequence: contains non-DNA characters");
+      }
+      if (sequence2.length < 5) {
+        throw new Error(
+          "Sequence too short: minimum length is 5 bases for end stability calculation"
+        );
+      }
+      const last5Bases = sequence2.substring(sequence2.length - 5);
+      let deltaH = 0;
+      let deltaS = 0;
+      for (let i2 = 0; i2 < 4; i2++) {
+        const dinucleotide = last5Bases.substring(i2, i2 + 2);
+        if (dinucleotide.includes("N")) {
+          continue;
+        }
+        const params = SANTA_LUCIA_NN[dinucleotide];
+        if (params) {
+          deltaH += params.dH;
+          deltaS += params.dS;
+        }
+      }
+      const firstBase = last5Bases[0];
+      const lastBase = last5Bases[last5Bases.length - 1];
+      if (firstBase === "G" || firstBase === "C") {
+        deltaH += SANTA_LUCIA_INIT.GC.dH;
+        deltaS += SANTA_LUCIA_INIT.GC.dS;
+      } else {
+        deltaH += SANTA_LUCIA_INIT.AT.dH;
+        deltaS += SANTA_LUCIA_INIT.AT.dS;
+      }
+      if (lastBase === "G" || lastBase === "C") {
+        deltaH += SANTA_LUCIA_INIT.GC.dH;
+        deltaS += SANTA_LUCIA_INIT.GC.dS;
+      } else {
+        deltaH += SANTA_LUCIA_INIT.AT.dH;
+        deltaS += SANTA_LUCIA_INIT.AT.dS;
+      }
+      const T2 = 310.15;
+      const deltaG = deltaH - T2 * deltaS / 1e3;
+      return Math.round(Math.abs(deltaG) * 100) / 100;
+    } catch (e2) {
+      return `Error calculating end stability for sequence ${sequence2}. ${e2}`;
+    }
+  }
+  __name(calculateEndStability, "calculateEndStability");
   function convertAACaretPositionOrRangeToDna(rangeOrCaret) {
     if (typeof rangeOrCaret === "object" && rangeOrCaret !== null) {
       return convertAARangeToDnaRange(__spreadProps(__spreadValues({}, rangeOrCaret), {
@@ -125958,32 +126129,6 @@ ${seq.sequence}
     (state2) => state2.useAdditionalOrfStartCodons,
     findOrfsInPlasmid
   );
-  var forEach_1;
-  var hasRequiredForEach;
-  function requireForEach() {
-    if (hasRequiredForEach) return forEach_1;
-    hasRequiredForEach = 1;
-    var arrayEach2 = require_arrayEach(), baseEach2 = require_baseEach(), castFunction2 = require_castFunction(), isArray2 = requireIsArray();
-    function forEach2(collection, iteratee) {
-      var func = isArray2(collection) ? arrayEach2 : baseEach2;
-      return func(collection, castFunction2(iteratee));
-    }
-    __name(forEach2, "forEach");
-    forEach_1 = forEach2;
-    return forEach_1;
-  }
-  __name(requireForEach, "requireForEach");
-  var each$1;
-  var hasRequiredEach;
-  function requireEach() {
-    if (hasRequiredEach) return each$1;
-    hasRequiredEach = 1;
-    each$1 = requireForEach();
-    return each$1;
-  }
-  __name(requireEach, "requireEach");
-  var eachExports = requireEach();
-  const each = /* @__PURE__ */ getDefaultExportFromCjs(eachExports);
   function translationsRawSelector(sequenceData2) {
     return sequenceData2.translations;
   }
@@ -126150,14 +126295,22 @@ ${seq.sequence}
       },
       {}
     ));
-    each(translationsToPass, function(translation) {
-      translation.aminoAcids = getAminoAcidDataForEachBaseOfDna(
+    return mapValues$1(translationsToPass, (translation) => {
+      var _a2, _b2;
+      const codonStart = ((_b2 = (_a2 = translation == null ? void 0 : translation.notes) == null ? void 0 : _a2.codon_start) == null ? void 0 : _b2[0]) - 1 || 0;
+      const expandedRange = expandOrContractRangeByLength(
+        translation,
+        -codonStart,
+        true,
+        sequence2.length
+      );
+      expandedRange.aminoAcids = getAminoAcidDataForEachBaseOfDna(
         sequence2,
-        translation.forward,
-        translation
+        expandedRange.forward,
+        expandedRange
       );
+      return expandedRange;
     });
-    return translationsToPass;
   }
   __name(translationsSelector, "translationsSelector");
   const translationsSelector$1 = createSelector(
@@ -138033,6 +138186,21 @@ ${seq.sequence}
     );
   }
   __name(Orf, "Orf");
+  var forEach_1;
+  var hasRequiredForEach;
+  function requireForEach() {
+    if (hasRequiredForEach) return forEach_1;
+    hasRequiredForEach = 1;
+    var arrayEach2 = require_arrayEach(), baseEach2 = require_baseEach(), castFunction2 = require_castFunction(), isArray2 = requireIsArray();
+    function forEach2(collection, iteratee) {
+      var func = isArray2(collection) ? arrayEach2 : baseEach2;
+      return func(collection, castFunction2(iteratee));
+    }
+    __name(forEach2, "forEach");
+    forEach_1 = forEach2;
+    return forEach_1;
+  }
+  __name(requireForEach, "requireForEach");
   var forEachExports = requireForEach();
   const forEach = /* @__PURE__ */ getDefaultExportFromCjs(forEachExports);
   var lib = {};
@@ -144738,7 +144906,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.17";
+  const version = "0.8.19";
   const packageJson = {
     version
   };
@@ -150788,6 +150956,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
             RowItem$1,
             __spreadProps(__spreadValues({}, __spreadValues(__spreadProps(__spreadValues({}, rest), {
               editorName,
+              showAminoAcidUnitAsCodon,
               onScroll: /* @__PURE__ */ __name(() => {
                 this.easyStore.viewportWidth = width;
                 const row = this.linearView.querySelector(".veRowItemWrapper");
@@ -163835,7 +164004,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       /* , setMonovalentCationConc */
     ] = React.useState(0.05);
     const [tmType, setTmType] = useTmType();
-    let tm = (tmType === "neb_tm" ? calculateNebTm : calculateTm)(sequence2, {
+    let tm = (tmType === "neb_tm" ? calculateNebTm : tmType === "default" ? calculateSantaLuciaTm : calculateTm)(sequence2, {
       monovalentCationConc,
       primerConc
     });
@@ -163860,8 +164029,9 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           {
             label: "Choose Tm Type:",
             options: [
-              { value: "default", label: "Default Tm (Breslauer)" },
-              { value: "neb_tm", label: "NEB Tm (SantaLucia)" }
+              { value: "default", label: "Santa Lucia (Default)" },
+              { value: "breslauer", label: "Breslauer" },
+              { value: "neb_tm", label: "NEB Tm" }
             ],
             onChange: /* @__PURE__ */ __name((e2) => setTmType(e2.target.value), "onChange"),
             selectedValue: tmType
@@ -163875,7 +164045,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           }
         ), hasWarning, /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), "Try using the Default Tm"))
       },
-      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InnerWrapper, null, "Melting Temp: ", Number(tm) || 0, " "), hasWarning && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InnerWrapper, null, "Melting Temp: ", Number(tm) || 0, "°C"), hasWarning && /* @__PURE__ */ React.createElement(
         Icon,
         {
           style: { marginLeft: 5, marginRight: 5 },
@@ -164139,12 +164309,24 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       )), /* @__PURE__ */ React.createElement(
         MeltingTemp,
         {
-          InnerWrapper: InnerWrapperMeltingTemp,
+          InnerWrapper: TextInnerWrapper,
           sequence: bases
         }
-      ))
+      ), /* @__PURE__ */ React.createElement(TextInnerWrapper, null, "GC content: ", bases && calculatePercentGC(bases).toFixed(1), "%"), /* @__PURE__ */ React.createElement(TextInnerWrapper, null, "3' Stability: ", bases && calculateEndStability(bases), " kcal/mol"))
     );
   }, "RenderBases");
+  const TextInnerWrapper = /* @__PURE__ */ __name((p2) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "bp3-text-muted bp3-text-small",
+      style: {
+        marginBottom: 15,
+        marginTop: -5,
+        fontStyle: "italic"
+      }
+    },
+    p2.children
+  ), "TextInnerWrapper");
   const AddOrEditPrimerDialog = AddOrEditAnnotationDialog$1({
     formName: "AddOrEditPrimerDialog",
     getProps: /* @__PURE__ */ __name((props) => ({
@@ -164153,14 +164335,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       RenderBases
     }), "getProps")
   });
-  const InnerWrapperMeltingTemp = /* @__PURE__ */ __name((p2) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "bp3-text-muted bp3-text-small",
-      style: { marginBottom: 15, marginTop: -5, fontStyle: "italic" }
-    },
-    p2.children
-  ), "InnerWrapperMeltingTemp");
   const Dialogs = {
     RenameSequenceDialog,
     PrintDialog: PrintDialog$1,
@@ -164592,7 +164766,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           item: selection && selection.start > -1 ? /* @__PURE__ */ React.createElement("span", null, selection.start + 1, " - ", selection.end + 1) : /* @__PURE__ */ React.createElement("span", null, "1 - ", isProtein2 ? proteinSize : size2),
           title: "Region"
         }
-      )), /* @__PURE__ */ React.createElement("h5", null, isProtein2 ? "Amino Acid" : "Base Pair", " Frequencies"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Amino Acid"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
+      )), /* @__PURE__ */ React.createElement("h5", null, isProtein2 ? "Amino Acid" : "Base Pair", " Frequencies"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-table" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-row" }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, isProtein2 ? "Amino Acid" : "Base"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Count"), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, "Percentage")), frequencyEntries.map(([aa, data], idx) => {
         return /* @__PURE__ */ React.createElement("div", { className: `sidebar-row property-amino-acid-${idx}` }, /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, aa, " ", isProtein2 ? `(${aminoAcidShortNames[aa]})` : ""), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, data.count), /* @__PURE__ */ React.createElement("div", { className: "sidebar-cell" }, data.percentage.toFixed(1), "%"));
       })));
     } else {
@@ -165092,7 +165266,11 @@ ${seqDataToCopy}\r
     }, [alignmentTracks, id2, store2]);
     reactExports.useEffect(() => {
       const handleAlignmentCopy = /* @__PURE__ */ __name((event) => {
+        var _a3, _b2, _c2;
         if (event.key === "c" && !event.shiftKey && (event.metaKey === true || event.ctrlKey === true)) {
+          if (!((_a3 = document.activeElement) == null ? void 0 : _a3.classList.contains("alignmentView"))) {
+            return;
+          }
           const input = document.createElement("textarea");
           document.body.appendChild(input);
           const seqDataToCopy = getAllAlignmentsFastaText();
@@ -165106,6 +165284,8 @@ ${seqDataToCopy}\r
           }
           document.body.removeChild(input);
           event.preventDefault();
+          (_b2 = document.activeElement) == null ? void 0 : _b2.blur();
+          (_c2 = document.querySelector(".alignmentView")) == null ? void 0 : _c2.focus();
         }
       }, "handleAlignmentCopy");
       document.addEventListener("keydown", handleAlignmentCopy);
@@ -166264,6 +166444,7 @@ ${seqDataToCopy}\r
             position: "relative",
             overflowY: "auto"
           }, style2),
+          tabIndex: 0,
           className: "alignmentView"
         },
         /* @__PURE__ */ React.createElement(

package/ove.css

@@ -11260,6 +11260,12 @@ path.partWithSelectedTag {
   height: 100% !important;
   overflow: hidden;
 }
+.alignmentView .veAlignmentSelectionLayer.veRowViewSelectionLayer {
+  background: gray;
+}
+.alignmentView:focus .veAlignmentSelectionLayer.veRowViewSelectionLayer {
+  background: #0099ff;
+}
 .alignmentView .veSelectionLayer {
   top: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.18",
+  "version": "0.8.20",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -18,7 +18,7 @@
     "@teselagen/file-utils": "0.3.20",
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
-    "@teselagen/sequence-utils": "0.3.35",
+    "@teselagen/sequence-utils": "0.3.36",
     "@teselagen/ui": "0.10.9",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",

package/selectors/translationsSelector.d.ts

@@ -1,4 +1,6 @@
-declare const _default: ((state: any) => any) & import('reselect').OutputSelectorFields<(args_0: any, args_1: unknown, args_2: any, args_3: {
+declare const _default: ((state: any) => {
+    [x: string]: any;
+}) & import('reselect').OutputSelectorFields<(args_0: any, args_1: unknown, args_2: any, args_3: {
     start: number;
     end: number;
     length: number;
@@ -8,7 +10,9 @@ declare const _default: ((state: any) => any) & import('reselect').OutputSelecto
     annotationTypePlural: string;
     isOrf: boolean;
     id: any;
-}[], args_4: any, args_5: any, args_6: any[], args_7: any, args_8: any, args_9: any, args_10: any, args_11: any, args_12: any) => any, {
+}[], args_4: any, args_5: any, args_6: any[], args_7: any, args_8: any, args_9: any, args_10: any, args_11: any, args_12: any) => {
+    [x: string]: any;
+}, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/src/AlignmentView/index.js

@@ -211,6 +211,9 @@ export const AlignmentView = props => {
         !event.shiftKey &&
         (event.metaKey === true || event.ctrlKey === true)
       ) {
+        if (!document.activeElement?.classList.contains("alignmentView")) {
+          return; //stop early if we're not focused on the alignment view
+        }
         const input = document.createElement("textarea");
         document.body.appendChild(input);
         const seqDataToCopy = getAllAlignmentsFastaText();
@@ -224,6 +227,8 @@ export const AlignmentView = props => {
         }
         document.body.removeChild(input);
         event.preventDefault();
+        document.activeElement?.blur();
+        document.querySelector(".alignmentView")?.focus();
       }
     };
 
@@ -1584,6 +1589,7 @@ export const AlignmentView = props => {
               ...style
               // borderTop: "1px solid black"
             }}
+            tabIndex={0}
             className="alignmentView"
           >
             <DragDropContext

package/src/AlignmentView/style.css

@@ -73,6 +73,12 @@
   height: 100% !important;
   overflow: hidden;
 }
+.alignmentView .veAlignmentSelectionLayer.veRowViewSelectionLayer {
+  background: gray;
+}
+.alignmentView:focus .veAlignmentSelectionLayer.veRowViewSelectionLayer {
+  background: #0099ff;
+}
 .alignmentView .veSelectionLayer {
   top: 0;
 }

package/src/LinearView/index.js

@@ -327,6 +327,7 @@ class _LinearView extends React.Component {
               {...{
                 ...rest,
                 editorName,
+                showAminoAcidUnitAsCodon,
                 onScroll: () => {
                   this.easyStore.viewportWidth = width;
                   const row =

package/src/PropertySidePanel/index.js

@@ -149,7 +149,9 @@ export default ({ properties, setProperties, style }) => {
         <h5>{isProtein ? "Amino Acid" : "Base Pair"} Frequencies</h5>
         <div className="sidebar-table">
           <div className="sidebar-row">
-            <div className="sidebar-cell">Amino Acid</div>
+            <div className="sidebar-cell">
+              {isProtein ? "Amino Acid" : "Base"}
+            </div>
             <div className="sidebar-cell">Count</div>
             <div className="sidebar-cell">Percentage</div>
           </div>

package/src/StatusBar/MeltingTemp.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { Button, Icon, Popover, RadioGroup } from "@blueprintjs/core";
 
-import { calculateTm, calculateNebTm } from "@teselagen/sequence-utils";
+import {
+  calculateTm,
+  calculateNebTm,
+  calculateSantaLuciaTm
+} from "@teselagen/sequence-utils";
 
 import { isNumber, isString } from "lodash-es";
 import { popoverOverflowModifiers } from "@teselagen/ui";
@@ -20,7 +24,13 @@ export default function MeltingTemp({
   const [monovalentCationConc /* , setMonovalentCationConc */] =
     React.useState(0.05);
   const [tmType, setTmType] = useTmType();
-  let tm = (tmType === "neb_tm" ? calculateNebTm : calculateTm)(sequence, {
+  let tm = (
+    tmType === "neb_tm"
+      ? calculateNebTm
+      : tmType === "default"
+        ? calculateSantaLuciaTm
+        : calculateTm
+  )(sequence, {
     monovalentCationConc,
     primerConc
   });
@@ -47,8 +57,9 @@ export default function MeltingTemp({
             <RadioGroup
               label="Choose Tm Type:"
               options={[
-                { value: "default", label: "Default Tm (Breslauer)" },
-                { value: "neb_tm", label: "NEB Tm (SantaLucia)" }
+                { value: "default", label: "Santa Lucia (Default)" },
+                { value: "breslauer", label: "Breslauer" },
+                { value: "neb_tm", label: "NEB Tm" }
               ]}
               onChange={e => setTmType(e.target.value)}
               selectedValue={tmType}
@@ -70,7 +81,7 @@ export default function MeltingTemp({
         }
       >
         <React.Fragment>
-          <InnerWrapper>Melting Temp: {Number(tm) || 0} </InnerWrapper>
+          <InnerWrapper>Melting Temp: {Number(tm) || 0}°C</InnerWrapper>
           {hasWarning && (
             <Icon
               style={{ marginLeft: 5, marginRight: 5 }}

package/src/helperComponents/AddOrEditPrimerDialog/index.js

@@ -8,7 +8,9 @@ import {
 } from "@teselagen/ui";
 import {
   filterSequenceString,
-  getReverseComplementSequenceString
+  getReverseComplementSequenceString,
+  calculatePercentGC,
+  calculateEndStability
 } from "@teselagen/sequence-utils";
 
 import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
@@ -294,15 +296,34 @@ const RenderBases = props => {
           </AdvancedOptions>
 
           <MeltingTemp
-            InnerWrapper={InnerWrapperMeltingTemp}
+            InnerWrapper={TextInnerWrapper}
             sequence={bases}
           ></MeltingTemp>
+          <TextInnerWrapper>
+            GC content: {bases && calculatePercentGC(bases).toFixed(1)}%
+          </TextInnerWrapper>
+          <TextInnerWrapper>
+            3' Stability: {bases && calculateEndStability(bases)} kcal/mol
+          </TextInnerWrapper>
         </div>
       )}
     </div>
   );
 };
 
+const TextInnerWrapper = p => (
+  <div
+    className="bp3-text-muted bp3-text-small"
+    style={{
+      marginBottom: 15,
+      marginTop: -5,
+      fontStyle: "italic"
+    }}
+  >
+    {p.children}
+  </div>
+);
+
 export default AddOrEditAnnotationDialog({
   formName: "AddOrEditPrimerDialog",
   getProps: props => ({
@@ -311,12 +332,3 @@ export default AddOrEditAnnotationDialog({
     RenderBases
   })
 });
-
-const InnerWrapperMeltingTemp = p => (
-  <div
-    className="bp3-text-muted bp3-text-small"
-    style={{ marginBottom: 15, marginTop: -5, fontStyle: "italic" }}
-  >
-    {p.children}
-  </div>
-);