@teselagen/ove 0.8.3 → 0.8.4

package/src/AlignmentView/style.css

@@ -11,6 +11,12 @@
 .alignmentViewTrackContainer {
   position: relative;
 }
+.alignmentViewTrackContainer.isTrackSelected {
+  background-color: #c0e2f5;
+}
+.bp3-dark .alignmentViewTrackContainer.isTrackSelected {
+  background-color: #2277a9;
+}
 .alignmentViewTrackContainer,
 .alignmentViewTrackContainer .veVectorInteractionWrapper,
 .alignmentViewTrackContainer .veVectorInteractionWrapper > div {
@@ -91,6 +97,11 @@
 .minimapLane.lane-hovered .miniBluePath {
   fill: rgb(169, 169, 245) !important;
 }
+.minimapLane.isTrackSelected .miniBluePath {
+  fill: rgb(137, 168, 255) !important;
+  stroke: rgb(0, 0, 0);
+  stroke-width: 0.5px;
+}
 
 .veAlignmentName {
   padding-top: 1px;
@@ -105,3 +116,19 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.veLabileSites {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 10;
+}
+
+.veAlignmentViewLabileSiteLine {
+  position: absolute;
+  height: 100%;
+  width: 4px;
+  background: #1585c5;
+  opacity: 0.5;
+  top: 0;
+}

package/src/BarPlot/index.js

@@ -0,0 +1,156 @@
+/**
+ * Minimal SVG BarPlot component
+ * @param {Object} props
+ * @param {number[]} props.data - Array of numbers to plot
+ * @param {number} [props.width=300]
+ * @param {number} [props.height=150]
+ * @param {string[]} [props.barColors]
+ */
+export function BarPlot({
+  data,
+  width = 300,
+  height = 30,
+  barColors,
+  className
+}) {
+  if (!data || data.length === 0) return null;
+  const maxVal = Math.max(...data);
+  const barWidth = width / data.length;
+
+  return (
+    <svg width={width} height={height} className={className}>
+      {data.map((val, i) => {
+        const barHeight = (val / maxVal) * (height - 2);
+        return (
+          <rect
+            data-tip={`${val?.toFixed(1)}%`}
+            key={i}
+            x={i * barWidth + 1}
+            y={height - barHeight}
+            width={barWidth - 2}
+            height={barHeight}
+            fill={barColors ? barColors[i % barColors.length] : "#3498db"}
+            rx={2}
+          />
+        );
+      })}
+      {/* 50% horizontal line */}
+      <line
+        x1={1}
+        y1={height - 0.5 * (height - 2)}
+        x2={width}
+        y2={height - 0.5 * (height - 2)}
+        stroke="white"
+        strokeDasharray="4,2"
+        strokeWidth={1}
+      />
+      <line
+        x1={0}
+        y1={height}
+        x2={width}
+        y2={height}
+        stroke="#333"
+        strokeWidth={1}
+      />
+    </svg>
+  );
+}
+
+export function AminoAcidCirclePlot({ data, width, className }) {
+  // width: total SVG width to fit all circles
+  const n = data.length;
+  if (n === 0) return null;
+
+  // Calculate spacing and radius so circles fit the width
+  const padding = 5; // space at each end
+  const availableWidth = width - 3 * padding;
+  const spacing = n > 1 ? availableWidth / (n - 1) : 0;
+  // Make radius as large as possible without overlap
+  const maxRadius = spacing / 2 - 2 > 0 ? spacing / 2 - 2 : 8;
+  const radius = Math.max(8, Math.min(maxRadius, 20));
+  const svgHeight = radius * 2 + 10;
+
+  return (
+    <svg width={width} height={svgHeight} className={className}>
+      {/* Circles */}
+      {data.map((d, idx) => (
+        <g key={idx}>
+          <circle
+            data-tip={d.group}
+            cx={idx * spacing + radius}
+            cy={radius + 2}
+            r={radius}
+            fill={d.color}
+            stroke="#333"
+            strokeWidth={1}
+          />
+        </g>
+      ))}
+    </svg>
+  );
+}
+
+/**
+ * Stacked SVG BarPlot component for multiple properties per bar
+ * @param {Object} props
+ * @param {number[][]} props.data - Array of arrays, each inner array is the values for that position
+ * @param {number} [props.width=300]
+ * @param {number} [props.height=30]
+ * @param {string[]} [props.barColors]
+ */
+export function StackedBarPlot({ data, width = 300, height = 30, barColors }) {
+  if (!data || data.length === 0) return null;
+
+  const _data = data.map(vals => Object.values(vals));
+  const legends = data.map(vals => Object.keys(vals));
+
+  // Find the max sum for stacking
+  const maxVal = Math.max(
+    ..._data.map(vals => vals.reduce((a, b) => a + b, 0))
+  );
+  const barWidth = width / _data.length;
+
+  return (
+    <svg width={width} height={height}>
+      {_data.map((vals, i) => {
+        let yOffset = height;
+        return vals.map((val, j) => {
+          const barHeight = (val / maxVal) * (height - 2);
+          yOffset -= barHeight;
+          return (
+            <rect
+              data-tip={legends[i][j]}
+              key={j}
+              x={i * barWidth + 1}
+              y={yOffset}
+              width={barWidth - 2}
+              height={barHeight}
+              fill={barColors ? barColors[j % barColors.length] : colorMap[j]}
+              rx={2}
+            />
+          );
+        });
+      })}
+      <line
+        x1={0}
+        y1={height}
+        x2={width}
+        y2={height}
+        stroke="#333"
+        strokeWidth={1}
+      />
+    </svg>
+  );
+}
+
+const colorMap = [
+  "#1f77b4", // blue
+  "#ff7f0e", // orange
+  "#2ca02c", // green
+  "#d62728", // red
+  "#9467bd", // purple
+  "#8c564b", // brown
+  "#e377c2", // pink
+  "#7f7f7f", // gray
+  "#bcbd22" // olive
+];

package/src/CircularView/Caret.js

@@ -15,7 +15,8 @@ function Caret({
   innerRadius,
   outerRadius,
   isProtein,
-  selectionMessage
+  selectionMessage,
+  showAminoAcidUnitAsCodon
 }) {
   const { startAngle, endAngle } = getRangeAngles(
     { start: caretPosition, end: caretPosition },
@@ -37,7 +38,12 @@ function Caret({
     >
       <title>
         {selectionMessage ||
-          getSelectionMessage({ caretPosition, isProtein, sequenceLength })}
+          getSelectionMessage({
+            caretPosition,
+            isProtein,
+            sequenceLength,
+            showAminoAcidUnitAsCodon
+          })}
       </title>
       <line
         strokeWidth="1.5px"

package/src/CircularView/SelectionLayer.js

@@ -21,7 +21,8 @@ function SelectionLayer({
   onRightClicked,
   onClick,
   index,
-  isProtein
+  isProtein,
+  showAminoAcidUnitAsCodon
 }) {
   const {
     color,
@@ -47,7 +48,8 @@ function SelectionLayer({
   const selectionMessage = getSelectionMessage({
     sequenceLength,
     selectionLayer,
-    isProtein
+    isProtein,
+    showAminoAcidUnitAsCodon
   });
   // let section2 = sector({
   //   center: [0, 0], //the center is always 0,0 for our annotations :) we rotate later!

package/src/CircularView/index.js

@@ -168,6 +168,7 @@ export function CircularView(props) {
     readOnly,
     hideName = false,
     editorName,
+    showAminoAcidUnitAsCodon,
     smartCircViewLabelRender,
     showCicularViewInternalLabels,
     withRotateCircularView: _withRotateCircularView,
@@ -600,6 +601,7 @@ export function CircularView(props) {
               key={"veCircularViewSelectionLayer" + index}
               {...{
                 index,
+                showAminoAcidUnitAsCodon,
                 isDraggable: true,
                 isProtein,
                 selectionLayer,
@@ -637,6 +639,7 @@ export function CircularView(props) {
           key="veCircularViewCaret"
           {...{
             caretPosition,
+            showAminoAcidUnitAsCodon,
             sequenceLength,
             isProtein,
             innerRadius,
@@ -651,8 +654,9 @@ export function CircularView(props) {
   if (radius < 150) radius = 150;
   const widthToUse = Math.max(Number(width) || 300);
   const heightToUse = Math.max(Number(height) || 300);
+  const proteinUnits = showAminoAcidUnitAsCodon ? "codons" : "AAs";
   const bpTitle = isProtein
-    ? `${Math.floor(sequenceLength / 3)} AAs`
+    ? `${Math.floor(sequenceLength / 3)} ${proteinUnits}`
     : `${sequenceLength} bps`;
   const nameEl = (
     <div

package/src/Editor/darkmode.css

@@ -65,6 +65,13 @@
   fill: #f5f8fa !important;
 }
 
+.bp3-dark .rowViewTextContainer *::selection {
+  fill: #f5f8fa !important;
+}
+.bp3-dark .veRowViewAxis *::selection {
+  fill: #f5f8fa !important;
+}
+
 /* .bp3-dark .veRowViewAxis text {
   stroke: #f5f8fa !important;
 } */

package/src/Editor/index.js

@@ -361,6 +361,7 @@ export class Editor extends React.Component {
       hoveredId,
       isFullscreen,
       maxInsertSize,
+      showAminoAcidUnitAsCodon,
       maxAnnotationsToDisplay,
       minHeight = 400,
       onlyShowLabelsThatDoNotFit = true,
@@ -594,6 +595,7 @@ export class Editor extends React.Component {
           {...panelPropsToSpread}
           editorName={editorName}
           maxInsertSize={maxInsertSize}
+          showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
           isProtein={sequenceData.isProtein}
           onlyShowLabelsThatDoNotFit={onlyShowLabelsThatDoNotFit}
           tabHeight={tabHeight}
@@ -961,6 +963,7 @@ export class Editor extends React.Component {
                 )
               }
               editorName={editorName}
+              showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
               {...StatusBarProps}
             />
           )}

package/src/Editor/userDefinedHandlersAndOpts.js

@@ -57,5 +57,6 @@ export const userDefinedHandlersAndOpts = [
   "onCreateNewFromSubsequence",
   "onPreviewModeFullscreenClose",
   "onPaste",
-  "menuFilter"
+  "menuFilter",
+  "showAminoAcidUnitAsCodon"
 ];

package/src/FindBar/index.js

@@ -269,9 +269,8 @@ export class FindBar extends React.Component {
                 minWidth: 300
               }
             : {
-                position: "fixed",
-                top: 120,
-                right: 25,
+                position: "relative",
+                top: 100,
                 padding: 10,
                 display: "flex",
                 alignItems: "start",

package/src/LinearView/SequenceName.js

@@ -1,13 +1,19 @@
 import React from "react";
 
-export function SequenceName({ sequenceName, sequenceLength, isProtein }) {
+export function SequenceName({
+  sequenceName,
+  sequenceLength,
+  isProtein,
+  showAminoAcidUnitAsCodon
+}) {
+  const proteinUnits = showAminoAcidUnitAsCodon ? "codons" : "AAs";
   return (
     <div key="sequenceNameText" className="sequenceNameText">
       <span>{sequenceName} </span>
       <br />
       <span>
         {isProtein
-          ? `${Math.floor(sequenceLength / 3)} AAs`
+          ? `${Math.floor(sequenceLength / 3)} ${proteinUnits}`
           : `${sequenceLength} bps`}
       </span>
     </div>

package/src/LinearView/index.js

@@ -28,6 +28,7 @@ import {
   editorDragStopped
 } from "../withEditorInteractions/clickAndDragUtils";
 import { store } from "@risingstack/react-easy-state";
+import { BarPlot, AminoAcidCirclePlot } from "../BarPlot";
 
 const defaultMarginWidth = 10;
 
@@ -173,6 +174,7 @@ class _LinearView extends React.Component {
       annotationVisibilityOverrides,
       isProtein,
       noWarnings,
+      showAminoAcidUnitAsCodon,
       ...rest
     } = this.props;
 
@@ -291,6 +293,7 @@ class _LinearView extends React.Component {
             <SequenceName
               {...{
                 isProtein,
+                showAminoAcidUnitAsCodon,
                 sequenceName,
                 sequenceLength: sequenceData.sequence
                   ? sequenceData.sequence.length
@@ -302,6 +305,24 @@ class _LinearView extends React.Component {
             <VeTopRightContainer>{this.paredDownMessages}</VeTopRightContainer>
           )}
           <PinchHelperToUse {...(linearZoomEnabled && pinchHandler)}>
+            {sequenceData.isProtein && sequenceData.name === "Consensus" && (
+              <>
+                {annotationVisibilityOverrides.conservation && (
+                  <BarPlot
+                    className="ve-linear-view-conservation-plot"
+                    data={sequenceData?.aminoAcidProperties?.frequencies}
+                    width={width}
+                  />
+                )}
+                {annotationVisibilityOverrides.properties && (
+                  <AminoAcidCirclePlot
+                    className="ve-linear-view-property-analysis-plot"
+                    data={sequenceData?.aminoAcidProperties?.propertyAnalysis}
+                    width={width}
+                  />
+                )}
+              </>
+            )}
             <RowItem
               {...{
                 ...rest,

package/src/PropertySidePanel/calculateAminoAcidFrequency.js

@@ -0,0 +1,77 @@
+/**
+ * Calculates detailed amino acid frequency, including counts and percentages for
+ * all 20 standard amino acids.
+ *
+ * @param {string} sequence The protein sequence.
+ * @returns {{
+ *   totalCount: number,
+ *   frequencies: Object<string, {count: number, percentage: number}>,
+ *   nonStandard: Object<string, number>
+ * }} A comprehensive analysis object.
+ */
+export function calculateAminoAcidFrequency(sequence, isProtein) {
+  // 1. Validate input
+  if (!sequence || typeof sequence !== "string") {
+    console.warn("Invalid or empty amino acid sequence provided.");
+  }
+
+  const standards = isProtein
+    ? "ACDEFGHIKLMNPQRSTVWY-".split("")
+    : "ATCG-".split("");
+  const frequencies = {};
+  standards.forEach(a => {
+    frequencies[a] = { count: 0, percentage: 0 };
+  });
+
+  const nonStandard = {}; // For gaps '-', 'X', 'B', 'Z', etc.
+  let totalCount = 0;
+
+  // 2. Iterate and count
+  for (const char of sequence.toUpperCase()) {
+    if (frequencies[char]) {
+      frequencies[char].count++;
+      totalCount++;
+    } else {
+      // It's a non-standard character (like a gap or 'X')
+      nonStandard[char] = (nonStandard[char] || 0) + 1;
+    }
+  }
+
+  // 3. Calculate percentages
+  if (totalCount > 0) {
+    for (const a of standards) {
+      frequencies[a].percentage = (frequencies[a].count / totalCount) * 100;
+    }
+  }
+
+  return {
+    totalStandards: totalCount, // Total count of elements
+    totalLength: sequence.length, // Total length including non-standard
+    frequencies,
+    nonStandard
+  };
+}
+
+export const aminoAcidShortNames = {
+  A: "Ala",
+  C: "Cys",
+  D: "Asp",
+  E: "Glu",
+  F: "Phe",
+  G: "Gly",
+  H: "His",
+  I: "Ile",
+  K: "Lys",
+  L: "Leu",
+  M: "Met",
+  N: "Asn",
+  P: "Pro",
+  Q: "Gln",
+  R: "Arg",
+  S: "Ser",
+  T: "Thr",
+  V: "Val",
+  W: "Trp",
+  Y: "Tyr",
+  "-": "Gaps"
+};