@teselagen/ove 0.8.2 → 0.8.4

package/src/PropertySidePanel/index.js

@@ -0,0 +1,236 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import "./style.css";
+import {
+  calculateAminoAcidFrequency,
+  aminoAcidShortNames
+} from "./calculateAminoAcidFrequency";
+import { Button } from "@blueprintjs/core";
+
+export default ({ properties, setProperties, style }) => {
+  const sidebarRef = React.useRef(null);
+  const [mismatchesCount, setMismatchesCount] = React.useState(0);
+  const [mismatchesInRange, setMismatchesInRange] = React.useState(0);
+
+  const { track, isOpen, selection, isPairwise } = properties;
+
+  const getSequenceInRegion = useCallback(() => {
+    const seq = track?.alignmentData?.sequence ?? "";
+    if (!selection || selection.start === -1 || selection.end === -1) {
+      return seq;
+    }
+
+    const start = Math.max(0, selection.start);
+    const end = Math.min(seq.length - 1, selection.end);
+    if (start > end) return "";
+    return seq.slice(start, end + 1);
+  }, [track, selection]);
+
+  const mismatchKey = isPairwise ? "additionalSelectionLayers" : "mismatches";
+
+  const trackMismatches = useMemo(() => {
+    const tr = track?.[mismatchKey];
+    if (!Array.isArray(tr)) return [];
+    return isPairwise ? tr.filter(m => m?.color === "red") : tr;
+  }, [track, mismatchKey, isPairwise]);
+
+  useEffect(() => {
+    if (!isOpen || sidebarRef.current === null || !track) {
+      return;
+    }
+
+    sidebarRef.current.focus();
+    let mismatchCount = 0;
+
+    trackMismatches?.forEach(tm => {
+      if (tm === null || tm.start === null || tm.end === null) {
+        return;
+      }
+
+      const overlapStart = tm.start;
+      const overlapEnd = tm.end;
+      if (overlapEnd >= overlapStart) {
+        mismatchCount += overlapEnd - overlapStart + 1;
+      }
+    });
+
+    setMismatchesCount(mismatchCount);
+    setMismatchesInRange(mismatchCount);
+
+    if (selection && selection.start > -1 && selection.end > -1) {
+      let count = 0;
+
+      trackMismatches?.forEach(tm => {
+        if (tm === null || tm.start === null || tm.end === null) {
+          return;
+        }
+
+        const overlapStart = Math.max(tm.start, selection.start);
+        const overlapEnd = Math.min(tm.end, selection.end);
+        if (overlapEnd >= overlapStart) {
+          count += overlapEnd - overlapStart + 1;
+        }
+      });
+      setMismatchesInRange(count);
+    }
+  }, [isOpen, track, selection, trackMismatches]);
+
+  const aminoFreq = useMemo(() => {
+    const seq = getSequenceInRegion();
+    return calculateAminoAcidFrequency(
+      seq,
+      track?.sequenceData?.isProtein ?? false
+    );
+  }, [getSequenceInRegion, track]);
+
+  if (!isOpen) {
+    return null;
+  }
+  let trackInner;
+
+  if (track) {
+    const {
+      name,
+      isProtein,
+      proteinSize,
+      size,
+      molecularWeight,
+      isoPoint,
+      extinctionCoefficient
+    } = track.sequenceData;
+
+    const frequencyEntries = Object.entries(aminoFreq.frequencies);
+    trackInner = (
+      <>
+        <div
+          style={{
+            display: "flex",
+            padding: 4,
+            paddingTop: 11,
+            paddingBottom: 11,
+            width: "100%"
+          }}
+        ></div>
+        <h5>Track Properties</h5>
+
+        <div className="bp3-tab-panel">
+          <RowItem item={name} title="Name" />
+          <RowItem item={isProtein ? proteinSize : size} title="Length" />
+          <RowItem
+            item={molecularWeight?.toFixed(2)}
+            title="Molecular Weight"
+            units={isProtein ? "Da" : "g/mol"}
+          />
+          {name !== "Consensus" && isProtein && (
+            <>
+              <RowItem item={isoPoint} title="Isoelectric Point" />
+              <RowItem
+                item={extinctionCoefficient}
+                title="Extinction Coefficient"
+              />
+            </>
+          )}
+          <RowItem
+            item={`${mismatchesInRange}/${mismatchesCount}`}
+            title="Mismatches"
+          />
+          <RowItem
+            item={
+              selection && selection.start > -1 ? (
+                <span>
+                  {selection.start + 1} - {selection.end + 1}
+                </span>
+              ) : (
+                <span>1 - {isProtein ? proteinSize : size}</span>
+              )
+            }
+            title="Region"
+          />
+        </div>
+        <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">Count</div>
+            <div className="sidebar-cell">Percentage</div>
+          </div>
+          {frequencyEntries.map(([aa, data], idx) => {
+            return (
+              <div className={`sidebar-row property-amino-acid-${idx}`}>
+                <div className="sidebar-cell">
+                  {aa} {isProtein ? `(${aminoAcidShortNames[aa]})` : ""}
+                </div>
+                <div className="sidebar-cell">{data.count}</div>
+                <div className="sidebar-cell">
+                  {data.percentage.toFixed(1)}%
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </>
+    );
+  } else {
+    trackInner = (
+      <div
+        style={{
+          marginTop: 20,
+          fontStyle: "italic",
+          fontSize: 16
+        }}
+      >
+        Click on a track to view its properties
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={sidebarRef}
+      style={{
+        width: isOpen ? 350 : 0,
+        minWidth: isOpen ? 350 : 0,
+        maxWidth: isOpen ? 350 : 0,
+        paddingLeft: 20,
+        paddingRight: 20,
+        ...style
+      }}
+      className="ove-sidebar-container"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.key === "Escape") {
+          setProperties({ isOpen: false });
+        }
+      }}
+    >
+      <Button
+        style={{
+          position: "absolute",
+          top: 5,
+          right: 10,
+          zIndex: 1,
+          cursor: "pointer"
+        }}
+        minimal
+        intent="primary"
+        data-tip="Hide Track Properties"
+        icon="cross"
+        onClick={() => setProperties({ isOpen: false })}
+      ></Button>
+      {trackInner}
+    </div>
+  );
+};
+
+function RowItem({ item, title, units }) {
+  if (!item) return;
+
+  const propertyClass = title.split(" ").join("-").toLowerCase();
+  return (
+    <div className={`ve-flex-row property-${propertyClass}`}>
+      <div className="ve-column-left">{title}</div>
+      <div className="ve-column-right">
+        {item} {units ?? ""}
+      </div>
+    </div>
+  );
+}

package/src/PropertySidePanel/style.css

@@ -0,0 +1,39 @@
+.ove-sidebar-container {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0px 1px var(--reversed);
+  overflow-y: scroll;
+}
+
+.sidebar-table {
+  display: grid;
+  /* Define 3 columns with equal width */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px; /* Optional: adds a small gap between cells */
+  border: 1px solid #f1f1f1;
+  margin: 10px;
+  border-radius: 4px;
+}
+
+.sidebar-row {
+  display: contents; /* Makes children participate in the grid layout of the parent */
+}
+
+.sidebar-cell {
+  padding: 5px;
+  border: 1px solid #f1f1f1;
+  text-align: center;
+  /* Flexbox can be used within cells for content alignment if needed */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+h5 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: bold;
+  text-align: center;
+  padding: 5px 0;
+  border-bottom: 1px solid #f1f1f1;
+}

package/src/RowItem/Caret/index.js

@@ -16,7 +16,8 @@ function Caret({
   onRightClick,
   style,
   selectionMessage,
-  className = ""
+  className = "",
+  showAminoAcidUnitAsCodon
 }) {
   if (
     (row.start <= caretPosition && row.end + 1 >= caretPosition) ||
@@ -35,7 +36,12 @@ function Caret({
         }
         title={
           selectionMessage ||
-          getSelectionMessage({ caretPosition, isProtein, sequenceLength })
+          getSelectionMessage({
+            caretPosition,
+            isProtein,
+            sequenceLength,
+            showAminoAcidUnitAsCodon
+          })
         }
         className={classnames(
           {

package/src/RowItem/Labels.js

@@ -99,7 +99,7 @@ function Labels(props) {
       annotation = annotationRange;
     }
     const annotationLength =
-    getTextLengthWithCollapseSpace(
+      getTextLengthWithCollapseSpace(
         annotation.name ||
           (annotation.restrictionEnzyme && annotation.restrictionEnzyme.name) ||
           ""

package/src/RowItem/SelectionLayer/index.js

@@ -21,6 +21,7 @@ function SelectionLayer(props) {
     regions,
     leftMargin = 0,
     isProtein,
+    showAminoAcidUnitAsCodon,
     getGaps,
     hideTitle: topLevelHideTitle,
     customTitle: topLevelCustomTitle,
@@ -62,7 +63,8 @@ function SelectionLayer(props) {
                 selectionLayer,
                 customTitle: customTitle || topLevelCustomTitle,
                 sequenceLength,
-                isProtein
+                isProtein,
+                showAminoAcidUnitAsCodon
               });
         const onSelectionContextMenu = function (event) {
           selectionLayerRightClicked &&
@@ -107,6 +109,7 @@ function SelectionLayer(props) {
                     key={key + "caret1"}
                     {...{
                       isProtein,
+                      showAminoAcidUnitAsCodon,
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
                       onRightClick: onSelectionContextMenu,
@@ -130,6 +133,7 @@ function SelectionLayer(props) {
                     key={key + "caret2"}
                     {...{
                       isProtein,
+                      showAminoAcidUnitAsCodon,
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
                       onRightClick: onSelectionContextMenu,

package/src/RowItem/Sequence.js

@@ -3,7 +3,27 @@ import { times, map } from "lodash-es";
 import { view } from "@risingstack/react-easy-state";
 import { getVisibleStartEnd } from "../utils/getVisibleStartEnd";
 import { fudge2, realCharWidth } from "./constants";
-import dnaToColor, { getDnaColor } from "../constants/dnaToColor";
+import dnaToColor, {
+  getDnaColor,
+  getSerineThreonineColor,
+  getNegativeColor,
+  getPositiveColor,
+  getChargedColor,
+  getHydrophobicity,
+  getPolarColor,
+  getAliphaticColor,
+  getAromaticColor,
+  getColorScheme,
+  serineThreonineToColor,
+  hydrophobicityColor,
+  polarColors,
+  negativeColors,
+  positiveColors,
+  chargedColors,
+  aliphaticColors,
+  aromaticColors,
+  colorScheme
+} from "../constants/dnaToColor";
 import { hoveredAnnEasyStore } from "../helperComponents/withHover";
 import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
 import { partOverhangs } from "./partOverhangs";
@@ -13,6 +33,28 @@ import { isSafari } from "@teselagen/ui";
 const getChunk = (sequence, chunkSize, chunkNumber) =>
   sequence.slice(chunkSize * chunkNumber, chunkSize * (chunkNumber + 1));
 
+function renderColoredLayer(props, fudge, width, toColor) {
+  return (
+    <svg
+      style={{
+        left: props.startOffset * props.charWidth,
+        height: props.height,
+        width,
+        position: "absolute"
+      }}
+      className="rowViewTextContainer"
+      height={Math.max(0, Number(props.height))}
+    >
+      <ColoredSequence
+        {...props}
+        fudge={fudge}
+        totalWidth={width}
+        toColor={toColor}
+      />
+    </svg>
+  );
+}
+
 class Sequence extends React.Component {
   render() {
     const {
@@ -29,6 +71,15 @@ class Sequence extends React.Component {
       chunkSize = 100,
       scrollData,
       showDnaColors,
+      showSerineThreonine,
+      showHydrophobicity,
+      showPolar,
+      showNegative,
+      showPositive,
+      showCharged,
+      showAliphatic,
+      showAromatic,
+      showColorScheme,
       fivePrimeThreePrimeHints,
       alignmentData,
       sequenceLength,
@@ -79,6 +130,18 @@ class Sequence extends React.Component {
       }
     });
 
+    const colorLayers = [
+      { show: showSerineThreonine, toColor: "serineThreonine" },
+      { show: showHydrophobicity, toColor: "hydrophobicity" },
+      { show: showPolar, toColor: "polar" },
+      { show: showNegative, toColor: "negative" },
+      { show: showPositive, toColor: "positive" },
+      { show: showCharged, toColor: "charged" },
+      { show: showAliphatic, toColor: "aliphatic" },
+      { show: showAromatic, toColor: "aromatic" },
+      { show: showColorScheme, toColor: "colorScheme" }
+    ];
+
     const style = {
       position: "relative",
       height,
@@ -173,6 +236,10 @@ class Sequence extends React.Component {
             5'
           </div>
         )}
+        {colorLayers.map(
+          ({ show, toColor }) =>
+            show && renderColoredLayer(this.props, fudge, width, toColor)
+        )}
         {!hideBps && (
           <svg
             style={{
@@ -189,7 +256,8 @@ class Sequence extends React.Component {
                 {...{
                   ...this.props,
                   fudge,
-                  totalWidth: width
+                  totalWidth: width,
+                  toColor: "dnaColor"
                 }}
               />
             )}
@@ -226,20 +294,46 @@ class ColoredSequence extends React.Component {
       alignmentData,
       getGaps,
       fudge,
-      totalWidth
+      totalWidth,
+      toColor
     } = this.props;
     if (alignmentData) {
       sequence = sequence.replace(/^-+/g, "").replace(/-+$/g, "");
     }
+    const colorMap = {
+      dnaColor: dnaToColor,
+      serineThreonine: serineThreonineToColor,
+      hydrophobicity: hydrophobicityColor,
+      polar: polarColors,
+      negative: negativeColors,
+      positive: positiveColors,
+      charged: chargedColors,
+      aliphatic: aliphaticColors,
+      aromatic: aromaticColors,
+      colorScheme: colorScheme
+    };
+
+    const colorMethods = {
+      dnaColor: getDnaColor,
+      serineThreonine: getSerineThreonineColor,
+      hydrophobicity: getHydrophobicity,
+      polar: getPolarColor,
+      negative: getNegativeColor,
+      positive: getPositiveColor,
+      charged: getChargedColor,
+      aliphatic: getAliphaticColor,
+      aromatic: getAromaticColor,
+      colorScheme: getColorScheme
+    };
     //we use big paths instead of many individual rects to improve performance
-    const colorPaths = Object.values(dnaToColor).reduce((acc, color) => {
+    const colorPaths = Object.values(colorMap[toColor]).reduce((acc, color) => {
       acc[color] = "";
       return acc;
     }, {});
     const gapsBefore = getGaps ? getGaps({ start: 0, end: 0 }).gapsBefore : 0;
     sequence.split("").forEach((char, i) => {
       const width = Number(charWidth);
-      const color = getDnaColor(char, isReverse);
+      const color = colorMethods[toColor](char, isReverse);
       const x = (i + gapsBefore) * charWidth;
       const y = 0;
       colorPaths[color] =

package/src/RowItem/Translations/Translation.js

@@ -26,6 +26,7 @@ class Translation extends React.Component {
       annotationRange,
       height,
       showAminoAcidNumbers,
+      showAminoAcidUnitAsCodon,
       charWidth,
       aminoAcidNumbersHeight,
       onClick,
@@ -164,10 +165,10 @@ class Translation extends React.Component {
               aminoAcidSliver.aminoAcidIndex + 1
             } -- Hydrophobicity: ${aminoAcid.hydrophobicity} -- Mass: ${
               aminoAcid.mass
-            }\n 
+            }\n
 Part of ${annotation.translationType} Translation from BPs ${
               annotation.start + 1
-            } to ${annotation.end + 1} (${aminoAcids.length / 3} AAs)`}
+            } to ${annotation.end + 1} (${aminoAcids.length / 3} ${showAminoAcidUnitAsCodon ? "codons" : "AAs"})`}
             showAminoAcidNumbers={showAminoAcidNumbers}
             aminoAcidIndex={aminoAcidSliver.aminoAcidIndex}
             onDoubleClick={function (event) {

package/src/RowItem/Translations/index.js

@@ -7,6 +7,7 @@ function getExtraInnerCompProps(
   annotationRange,
   {
     showAminoAcidNumbers,
+    showAminoAcidUnitAsCodon,
     getGaps,
     isProtein,
     colorType,
@@ -20,6 +21,7 @@ function getExtraInnerCompProps(
 
   return {
     showAminoAcidNumbers,
+    showAminoAcidUnitAsCodon,
     getGaps,
     height: anotationHeightNoSpace,
     aminoAcidNumbersHeight,