@teselagen/ove 0.8.3 → 0.8.4

package/src/RowItem/index.js

@@ -32,7 +32,7 @@ import { filter } from "lodash-es";
 import { defaultCharWidth } from "../constants/rowviewContants";
 import { CutsiteSelectionLayers } from "./CutsiteSelectionLayers";
 
-function filterRanges(ranges, extraProps = {}) {
+function filterRanges(ranges, isProteinAlignmentView, extraProps = {}) {
   if (!ranges) return ranges;
   if (extraProps.onlyForward) {
     ranges = filter(ranges, a => a.annotation.forward);
@@ -40,11 +40,39 @@ function filterRanges(ranges, extraProps = {}) {
   if (extraProps.onlyReverse) {
     ranges = filter(ranges, a => !a.annotation.forward);
   }
+
+  if (isProteinAlignmentView) {
+    ranges = map(ranges, range => {
+      const start = (range.start + 3) / 3 - 1;
+      const end = (range.end + 1) / 3 - 1;
+      return {
+        ...range,
+        start,
+        end,
+        annotation: {
+          ...range.annotation,
+          start,
+          end
+        }
+      };
+    });
+  }
   return ranges;
 }
-function getPropsForType(props, type, pluralType, extraProps) {
+function getPropsForType(
+  props,
+  isProteinAlignmentView,
+  type,
+  pluralType,
+  extraProps
+) {
   const upperPluralType = startCase(pluralType);
-  const annotationRanges = filterRanges(props.row[pluralType], extraProps);
+
+  const annotationRanges = filterRanges(
+    props.row[pluralType],
+    isProteinAlignmentView,
+    extraProps
+  );
 
   const toRet = {
     annotationColor: props[pluralType + "Color"],
@@ -126,7 +154,8 @@ export default function RowItem(props) {
     isLinearView,
     scalePct,
     setScalePct,
-    extraAnnotationProps = {}
+    extraAnnotationProps = {},
+    showAminoAcidUnitAsCodon
   } = props;
 
   const {
@@ -139,6 +168,15 @@ export default function RowItem(props) {
     // yellowAxis: showYellowAxis,
     aminoAcidNumbers: showAminoAcidNumbers,
     dnaColors: showDnaColors,
+    serineThreonine: showSerineThreonine,
+    hydrophobicity: showHydrophobicity,
+    polar: showPolar,
+    negative: showNegative,
+    positive: showPositive,
+    charged: showCharged,
+    aliphatic: showAliphatic,
+    aromatic: showAromatic,
+    colorScheme: showColorScheme,
     fivePrimeThreePrimeHints,
     reverseSequence: showReverseSequence,
     sequence: showSequence,
@@ -198,17 +236,22 @@ export default function RowItem(props) {
     width: width + "px"
   };
 
+  const isProteinAlignmentView = !!(props.isProtein && props.alignmentData);
+
   const annotationCommonProps = {
     noRedux,
     editorName,
     charWidth,
     bpsPerRow,
     getGaps,
-    isProtein,
+    isProtein: isProteinAlignmentView ? false : isProtein,
     readOnly,
     sequenceLength,
     isRowView,
-    row: { start: row.start, end: row.end }
+    row: {
+      start: row.start,
+      end: isProteinAlignmentView ? sequenceLength - 1 : row.end
+    }
   };
 
   const drawLabels = (type, noDraw, { filterOpts, ...extraProps } = {}) => {
@@ -226,6 +269,7 @@ export default function RowItem(props) {
             })
           )
         : [],
+      isProteinAlignmentView,
       filterOpts
     );
     if (!ranges.length) return null;
@@ -261,6 +305,13 @@ export default function RowItem(props) {
     ) {
       return null;
     }
+    const propsForType = getPropsForType(
+      props,
+      isProteinAlignmentView,
+      type,
+      pluralType,
+      extraProps
+    );
     const CompToUse = CompOverride || StackedAnnotations;
     return (
       <CompToUse
@@ -271,7 +322,7 @@ export default function RowItem(props) {
         containerClassName={camelCase("veRowView-" + pluralType + "Container")}
         alignmentType={alignmentType}
         {...annotationCommonProps}
-        {...getPropsForType(props, type, pluralType, extraProps)}
+        {...propsForType}
         {...otherExtraProps}
       />
     );
@@ -319,6 +370,7 @@ export default function RowItem(props) {
   const translationCommonProps = {
     CompOverride: Translations,
     showAminoAcidNumbers: showAminoAcidNumbers,
+    showAminoAcidUnitAsCodon: showAminoAcidUnitAsCodon,
     sequenceLength,
     aminoAcidNumbersHeight
   };
@@ -360,6 +412,7 @@ export default function RowItem(props) {
           // hideCarets
           regions={searchLayers}
           {...annotationCommonProps}
+          showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
           selectionLayerRightClicked={searchLayerRightClicked}
           row={
             alignmentData
@@ -381,6 +434,7 @@ export default function RowItem(props) {
             additionalSelectionLayers,
             selectionLayer
           })}
+          showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
         />
         {drawAnnotations("warning")}
         {drawAnnotations("assemblyPiece")}
@@ -426,6 +480,16 @@ export default function RowItem(props) {
               sequenceLength={sequenceLength}
               cutsites={cutsites} //pass this in order to get children cutsites to re-render
               showDnaColors={showDnaColors}
+              showSerineThreonine={showSerineThreonine}
+              showHydrophobicity={showHydrophobicity}
+              showPolar={showPolar}
+              showNegative={showNegative}
+              showPositive={showPositive}
+              showCharged={showCharged}
+              showAliphatic={showAliphatic}
+              showAromatic={showAromatic}
+              showColorScheme={showColorScheme}
+              showPhysicalProperties={isProteinAlignmentView}
               fivePrimeThreePrimeHints={fivePrimeThreePrimeHints}
               scrollData={scrollData}
               hideBps={charWidth < 7}
@@ -559,7 +623,8 @@ export default function RowItem(props) {
                   style={{
                     left: startOffset * charWidth,
                     height: sequenceHeight,
-                    position: "absolute"
+                    position: "absolute",
+                    userSelect: "none"
                   }}
                   onClick={function (event) {
                     replacementLayerClicked({
@@ -619,6 +684,7 @@ export default function RowItem(props) {
           <Caret
             caretPosition={caretPosition}
             isProtein={isProtein}
+            showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
             {...{ ...annotationCommonProps, ...{ getGaps: undefined } }}
             row={
               alignmentData

package/src/RowItem/style.css

@@ -73,10 +73,9 @@
   user-select: none;
 } 
 */
-
-/* .rowViewTextContainer {
-  user-select: none;
-}  */
+.alignmentTrackName {
+  user-select: none !important;
+}
 
 .veRowViewPrimaryProteinSequenceContainer {
   /* needs a z-index less than the selection layer so you can right click the selection above a sequence https://github.com/TeselaGen/openVectorEditor/issues/625 */

package/src/StatusBar/index.js

@@ -86,6 +86,7 @@ const ShowSelectionItem = compose(
   caretPosition = -1,
   sequenceLength = 0,
   isProtein,
+  showAminoAcidUnitAsCodon,
   sequenceData = { sequence: "" },
   showGCContent,
   GCDecimalDigits,
@@ -107,7 +108,7 @@ const ShowSelectionItem = compose(
           sequenceLength,
           sequenceData,
           showGCContent,
-
+          showAminoAcidUnitAsCodon,
           GCDecimalDigits,
           isProtein
         })}
@@ -136,11 +137,11 @@ const ShowLengthItem = connectToEditor(
   ({ sequenceData = { sequence: "" } }) => ({
     sequenceLength: sequenceData.sequence.length
   })
-)(({ isProtein, sequenceLength = 0 }) => (
+)(({ isProtein, sequenceLength = 0, showAminoAcidUnitAsCodon }) => (
   <StatusBarItem dataTest="veStatusBar-length">{`Length: ${divideBy3(
     sequenceLength,
     isProtein
-  )} ${isProtein ? "AAs" : "bps"}`}</StatusBarItem>
+  )} ${isProtein ? `${showAminoAcidUnitAsCodon ? "codons" : "AAs"}` : "bps"}`}</StatusBarItem>
 ));
 
 const ShowTypeItem = connectToEditor(({ sequenceData }) => ({
@@ -239,6 +240,7 @@ export function StatusBar({
   onSelectionOrCaretChanged,
   GCDecimalDigits = 1,
   isProtein,
+  showAminoAcidUnitAsCodon,
   beforeReadOnlyChange
 }) {
   return (
@@ -263,13 +265,18 @@ export function StatusBar({
         showAvailability={showAvailability}
       />
       <ShowSelectionItem
+        showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
         editorName={editorName}
         isProtein={isProtein}
         showGCContentByDefault={showGCContentByDefault}
         onSelectionOrCaretChanged={onSelectionOrCaretChanged}
         GCDecimalDigits={GCDecimalDigits}
       />
-      <ShowLengthItem isProtein={isProtein} editorName={editorName} />
+      <ShowLengthItem
+        isProtein={isProtein}
+        editorName={editorName}
+        showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
+      />
     </div>
   );
 }

package/src/constants/dnaToColor.js

@@ -15,3 +15,154 @@ export function getDnaColor(char, isReverse) {
     ] || "lightgrey"
   );
 }
+
+export const serineThreonineToColor = {
+  s: "#FF69B4",
+  t: "#FF69B4"
+};
+
+export const hydrophobicityColor = {
+  i: "#F84C52", // isoleucine
+  v: "#F84C52", // valine
+  l: "#F84C52", // leucine
+  f: "#F84C52", // phenylalanine
+  c: "#F84C52", // cysteine
+  m: "#C44C86", // methionine
+  a: "#C44C86", // alanine
+  g: "#8D4CBD", // glycine
+  t: "#8D4CBD", // threonine
+  s: "#8D4CBD", // serine
+  w: "#8D4CBD", // tryptophan
+  y: "#8D4CBD", // tyrosine
+  p: "#8D4CBD", // proline
+  h: "#544CF7", // histidine
+  q: "#544CF7", // glutamine
+  n: "#544CF7", // asparagine
+  e: "#544CF7", // glutamate
+  d: "#544CF7", // aspartate
+  k: "#4B4CFF", // lysine
+  r: "#4B4CFF" // arginine
+};
+
+const mainHighlighter = "#4B91B8";
+export const polarColors = {
+  s: mainHighlighter,
+  t: mainHighlighter,
+  n: mainHighlighter,
+  c: mainHighlighter,
+  q: mainHighlighter,
+  y: mainHighlighter
+};
+
+export const negativeColors = {
+  e: mainHighlighter,
+  d: mainHighlighter
+};
+export const positiveColors = {
+  k: mainHighlighter,
+  r: mainHighlighter,
+  h: mainHighlighter
+};
+
+export const chargedColors = {
+  ...negativeColors,
+  ...positiveColors
+};
+
+export const aliphaticColors = {
+  g: mainHighlighter,
+  a: mainHighlighter,
+  v: mainHighlighter,
+  l: mainHighlighter,
+  i: mainHighlighter,
+  p: mainHighlighter,
+  m: mainHighlighter
+};
+
+export const aromaticColors = {
+  f: mainHighlighter,
+  y: mainHighlighter,
+  w: mainHighlighter,
+  h: mainHighlighter
+};
+
+export const colorScheme = {
+  a: "#C8C8C8", // alanine
+  r: "#145AFF", // arginine
+  n: "#00DCDC", // asparagine
+  d: "#E60A0A", // aspartate
+  c: "#E6E600", // cysteine
+  q: "#00DCDC", // glutamine
+  e: "#E60A0A", // glutamate
+  g: "#EBEBEB", // glycine
+  h: "#8282D2", // histidine
+  i: "#0F820F", // isoleucine
+  l: "#0F820F", // leucine
+  k: "#145AFF", // lysine
+  m: "#E6E600", // methionine
+  f: "#3232AA", // phenylalanine
+  p: "#DC9682", // proline
+  s: "#FA9600", // serine
+  t: "#FA9600", // threonine
+  w: "#B45AB4", // tryptophan
+  y: "#3232AA", // tyrosine
+  v: "#0F820F", // valine
+  x: "#BEA06E"
+};
+
+function hexToRgba(hex) {
+  const alpha = 0.6;
+  // Remove '#' if present
+  if (hex === "transparent") return hex;
+  hex = hex.replace(/^#/, "");
+  // Parse r, g, b values
+  const bigint = parseInt(hex, 16);
+  let r, g, b;
+  if (hex.length === 6) {
+    r = (bigint >> 16) & 255;
+    g = (bigint >> 8) & 255;
+    b = bigint & 255;
+  } else {
+    // handle 3-digit hex
+    r = ((bigint >> 8) & 15) * 17;
+    g = ((bigint >> 4) & 15) * 17;
+    b = (bigint & 15) * 17;
+  }
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function getAliphaticColor(char) {
+  return hexToRgba(aliphaticColors[char.toLowerCase()] || "transparent");
+}
+
+export function getAromaticColor(char) {
+  return hexToRgba(aromaticColors[char.toLowerCase()] || "transparent");
+}
+
+export function getNegativeColor(char) {
+  return hexToRgba(negativeColors[char.toLowerCase()] || "transparent");
+}
+
+export function getPositiveColor(char) {
+  return hexToRgba(positiveColors[char.toLowerCase()] || "transparent");
+}
+
+export function getChargedColor(char) {
+  return hexToRgba(chargedColors[char.toLowerCase()] || "transparent");
+}
+
+export function getPolarColor(char) {
+  return hexToRgba(polarColors[char.toLowerCase()] || "transparent");
+}
+
+export function getSerineThreonineColor(char) {
+  return hexToRgba(serineThreonineToColor[char.toLowerCase()] || "transparent");
+}
+
+export function getHydrophobicity(char) {
+  return hexToRgba(hydrophobicityColor[char.toLowerCase()] || "transparent");
+}
+
+export function getColorScheme(char) {
+  return hexToRgba(colorScheme[char.toLowerCase()] || "transparent");
+}

package/src/helperComponents/PinchHelper/PinchHelper.js

@@ -17,7 +17,11 @@ export default function PinchHelper({ children, onPinch }) {
     }
   );
   return (
-    <div ref={target} className="tg-pinch-helper">
+    <div
+      ref={target}
+      style={{ overflowX: "hidden" }}
+      className="tg-pinch-helper"
+    >
       {children}
     </div>
   );

package/src/helperComponents/SelectDialog.js

@@ -68,7 +68,8 @@ export default compose(
         extraProps,
         isProtein,
         invalid,
-        handleSubmit
+        handleSubmit,
+        showAminoAcidUnitAsCodon
       } = this.props;
       const selectionLength = getRangeLength(
         {
@@ -132,7 +133,9 @@ export default compose(
               type="submit"
               intent={Intent.PRIMARY}
               text={`Select ${invalid ? 0 : selectionLength} ${
-                isProtein ? "AA" : "BP"
+                isProtein
+                  ? `${showAminoAcidUnitAsCodon ? "codon" : "AA"}`
+                  : "BP"
               }${selectionLength === 1 ? "" : "s"}`}
               disabled={invalid}
             />

package/src/style.css

@@ -16,8 +16,8 @@
   font-family: Menlo, Monaco, monospace;
   font-size: 10px;
 }
-.rowViewTextContainer text {
-  user-select: none;
+.rowViewTextContainer text::selection {
+  background: transparent;
 }
 .translationLayer text,
 .tg-prime-direction,

package/src/utils/editorUtils.js

@@ -19,7 +19,8 @@ export function getSelectionMessage({
   sequenceData,
   showGCContent, //these are only passed in for the status bar
   GCDecimalDigits, //these are only passed in for the status bar
-  isProtein
+  isProtein,
+  showAminoAcidUnitAsCodon
 }) {
   let _selectionLayer = selectionLayer;
   const isSelecting = selectionLayer.start > -1;
@@ -32,7 +33,8 @@ export function getSelectionMessage({
       ).toFixed(numDecimalDigits);
     const seqLen = divideBy3(length, isProtein);
     return `${customTitle || "Selecting"} ${seqLen} ${
-      (isProtein ? "AA" : "bp") + (seqLen === 1 ? "" : "s")
+      (isProtein ? `${showAminoAcidUnitAsCodon ? "codon" : "AA"}` : "bp") +
+      (seqLen === 1 ? "" : "s")
     } from ${divideBy3(_selectionLayer.start, isProtein) + 1} to ${divideBy3(
       _selectionLayer.end + 1,
       isProtein
@@ -48,7 +50,7 @@ export function getSelectionMessage({
     return (
       `Caret Between ` +
       (isProtein
-        ? `AAs ${divideBy3(insertBetween[0], true)} and ${divideBy3(
+        ? `${showAminoAcidUnitAsCodon ? "codons" : "AAs"} ${divideBy3(insertBetween[0], true)} and ${divideBy3(
             insertBetween[1] + 2,
             true
           )}`