@teselagen/ove 0.8.3 → 0.8.4

package/ove.css

@@ -8819,11 +8819,13 @@ span.bp3-popover-target{
 /*# sourceMappingURL=blueprint-icons.css.map */:root {
   --base1: #ffffff;
   --base2: #cdcdcd;
+  --reversed: #293742;
 }
 
 body.bp3-dark {
   --base1: #393a3a;
   --base2: #293742;
+  --reversed: #cdcdcd;
 }
 
 .bp3-dark .tg-card {
@@ -10066,6 +10068,19 @@ body:not(.drag-active)
   display: flex;
   flex-direction: column;
 }
+.th-dragging {
+  z-index: 999 !important;
+  cursor: grabbing !important;
+  opacity: 0.8;
+  background-color: #f5f8fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.bp3-dark .th-dragging {
+  background-color: #30404d;
+  box-shadow: 0 2px 8px rgba(250, 245, 245, 0.15);
+  outline: 1px solid #48aff0;
+}
 .dna-loader {
   display: inline-block;
   position: relative;
@@ -10884,10 +10899,9 @@ path.partWithSelectedTag {
   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 */
@@ -11175,6 +11189,12 @@ path.partWithSelectedTag {
 .alignmentViewTrackContainer {
   position: relative;
 }
+.alignmentViewTrackContainer.isTrackSelected {
+  background-color: #c0e2f5;
+}
+.bp3-dark .alignmentViewTrackContainer.isTrackSelected {
+  background-color: #2277a9;
+}
 .alignmentViewTrackContainer,
 .alignmentViewTrackContainer .veVectorInteractionWrapper,
 .alignmentViewTrackContainer .veVectorInteractionWrapper > div {
@@ -11255,6 +11275,11 @@ path.partWithSelectedTag {
 .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;
@@ -11269,6 +11294,22 @@ path.partWithSelectedTag {
   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;
+}
 .simple-dialog .dialog-buttons {
   display: flex;
   flex-direction: row;
@@ -11527,6 +11568,45 @@ path.partWithSelectedTag {
   justify-content: space-between;
   align-items: baseline;
 }
+.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;
+}
 .ta_link {
   cursor: pointer;
   color: blue;
@@ -11788,6 +11868,12 @@ path.partWithSelectedTag {
 .bp3-dark [data-tick-mark] {
   fill: #f5f8fa !important;
 }
+.bp3-dark .rowViewTextContainer *::selection {
+  fill: #f5f8fa !important;
+}
+.bp3-dark .veRowViewAxis *::selection {
+  fill: #f5f8fa !important;
+}
 /* .bp3-dark .veRowViewAxis text {
   stroke: #f5f8fa !important;
 } */
@@ -12073,8 +12159,8 @@ tspan.vePart {
   font-family: Menlo, Monaco, monospace;
   font-size: 10px;
 }
-.rowViewTextContainer text {
-  user-select: none;
+.rowViewTextContainer text::selection {
+  background: transparent;
 }
 .translationLayer text,
 .tg-prime-direction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
     "@teselagen/sequence-utils": "0.3.32",
-    "@teselagen/ui": "0.10.5",
+    "@teselagen/ui": "0.10.7",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/src/AlignmentView/AlignmentVisibilityTool.js

@@ -9,7 +9,10 @@ import {
 } from "@blueprintjs/core";
 import React from "react";
 import { map, startCase } from "lodash-es";
-import { pureNoFunc } from "@teselagen/ui";
+import { pureNoFunc, wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { showDialog } from "../GlobalDialogUtils";
+// import { fullSequenceTranslationMenu } from "../MenuBar/viewSubmenu";
 
 export default pureNoFunc(function AlignmentVisibilityTool(props) {
   return (
@@ -48,51 +51,137 @@ function VisibilityOptions({
   } else {
     annotationCountToUse = annotationsWithCounts[0];
   }
+
+  const subMenuElements = ["physicalProperties", "plot"];
+  const physicalPropertyElements = [
+    "hydrophobicity",
+    "polar",
+    "negative",
+    "positive",
+    "charged",
+    "aliphatic",
+    "aromatic"
+  ];
+  const plotElements = ["conservation", "properties"];
+
   return (
     <Menu
       style={{ padding: 10 }}
       className="alignmentAnnotationVisibilityToolInner"
     >
       {map(togglableAlignmentAnnotationSettings, (visible, annotationName) => {
-        return (
-          <MenuItem
-            icon={visible ? "tick" : ""}
-            onClick={e => {
-              e.stopPropagation();
-              if (annotationName === "axis") {
-                return alignmentAnnotationVisibilityToggle({
-                  axisNumbers: !visible,
-                  axis: !visible
-                });
+        if (
+          !physicalPropertyElements.includes(annotationName) &&
+          !plotElements.includes(annotationName)
+        ) {
+          return (
+            <MenuItem
+              icon={
+                visible && !subMenuElements.includes(annotationName)
+                  ? "tick"
+                  : ""
               }
-              if (annotationName === "cdsFeatureTranslations" && !visible) {
-                return alignmentAnnotationVisibilityToggle({
-                  cdsFeatureTranslations: !visible,
-                  translations: !visible
+              onClick={e => {
+                e.stopPropagation();
+                if (annotationName === "axis") {
+                  return alignmentAnnotationVisibilityToggle({
+                    axisNumbers: !visible,
+                    axis: !visible
+                  });
+                }
+                if (annotationName === "cdsFeatureTranslations" && !visible) {
+                  return alignmentAnnotationVisibilityToggle({
+                    cdsFeatureTranslations: !visible,
+                    translations: !visible
+                  });
+                }
+
+                alignmentAnnotationVisibilityToggle({
+                  [annotationName]: !visible
                 });
+              }}
+              text={
+                <>
+                  {startCase(annotationName)
+                    .replace("Cds", "CDS")
+                    .replace("Dna", "DNA")}
+                  {annotationName in annotationCountToUse ? (
+                    <Tag round style={{ marginLeft: 7 }}>
+                      {annotationCountToUse[annotationName]}
+                    </Tag>
+                  ) : (
+                    ""
+                  )}
+                </>
               }
-
-              alignmentAnnotationVisibilityToggle({
-                [annotationName]: !visible
-              });
-            }}
-            text={
-              <>
-                {startCase(annotationName)
-                  .replace("Cds", "CDS")
-                  .replace("Dna", "DNA")}
-                {annotationName in annotationCountToUse ? (
-                  <Tag round style={{ marginLeft: 7 }}>
-                    {annotationCountToUse[annotationName]}
-                  </Tag>
-                ) : (
-                  ""
-                )}
-              </>
-            }
-            key={annotationName}
-          ></MenuItem>
-        );
+              key={annotationName}
+            >
+              {annotationName === "physicalProperties"
+                ? map(
+                    togglableAlignmentAnnotationSettings,
+                    (_visible, _annotationName) => {
+                      if (physicalPropertyElements.includes(_annotationName)) {
+                        return (
+                          <MenuItem
+                            icon={_visible ? "tick" : ""}
+                            onClick={e => {
+                              e.stopPropagation();
+                              alignmentAnnotationVisibilityToggle({
+                                [_annotationName]: !_visible
+                              });
+                            }}
+                            text={<>{startCase(_annotationName)}</>}
+                            key={_annotationName}
+                          />
+                        );
+                      }
+                    }
+                  ).filter(Boolean)
+                : annotationName === "plot"
+                  ? map(
+                      togglableAlignmentAnnotationSettings,
+                      (_visible, _annotationName) => {
+                        if (plotElements.includes(_annotationName)) {
+                          return (
+                            <div style={{ position: "relative" }}>
+                              <MenuItem
+                                className={`plot-${_annotationName}`}
+                                icon={_visible ? "tick" : ""}
+                                onClick={e => {
+                                  e.stopPropagation();
+                                  alignmentAnnotationVisibilityToggle({
+                                    [_annotationName]: !_visible
+                                  });
+                                }}
+                                text={<>{startCase(_annotationName)}</>}
+                                key={_annotationName}
+                              />
+                              {_annotationName === "properties" ? (
+                                <Button
+                                  icon="info-sign"
+                                  style={{
+                                    position: "absolute",
+                                    top: 3,
+                                    right: 0
+                                  }}
+                                  onClick={() => {
+                                    showDialog({
+                                      ModalComponent: PropertyDialog
+                                    });
+                                  }}
+                                  minimal
+                                  small
+                                />
+                              ) : null}
+                            </div>
+                          );
+                        }
+                      }
+                    ).filter(Boolean)
+                  : null}
+            </MenuItem>
+          );
+        }
       })}
       {/* <MenuItem icon="" text={fullSequenceTranslationMenu.text}>
         {fullSequenceTranslationMenu.submenu.map(({ text, cmd }) => {
@@ -102,3 +191,18 @@ function VisibilityOptions({
     </Menu>
   );
 }
+
+const PropertyDialog = compose(
+  wrapDialog({
+    title: "Amino Acid Properties",
+    style: {
+      width: 600
+    }
+  })
+)(function () {
+  return (
+    <div style={{ width: "100%", padding: 10 }}>
+      <img src="/aaprops.svg" width={580} alt="Amino Acid Properties" />
+    </div>
+  );
+});

package/src/AlignmentView/LabileSitesLayer.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+/**
+ * Draws vertical lines at specified labile site position.
+ *
+ * @param {Object} props
+ * @param {number} leftMargin - Width of the name column.
+ * @param {number} charWidth - Width of each character in the alignment.
+ * @param {number} sequenceLength - Number of columns in the alignment.
+ * @param {number} numTracks - Number of alignment tracks (rows).
+ * @param {number[]} positionsToMark - Array of 0-based column indices to mark.
+ * @param {number} rowHeight - Height of each alignment row (default: 24).
+ */
+const LabileSitesLayer = ({ leftMargin, charWidth, positionsToMark = [] }) => {
+  return (
+    <div className="veLabileSites">
+      {positionsToMark?.map((pos, i) => {
+        const x = leftMargin + (pos - 1.2) * charWidth + charWidth / 2;
+        return (
+          <div
+            className="veAlignmentViewLabileSiteLine"
+            key={i}
+            style={{
+              left: x
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default LabileSitesLayer;

package/src/AlignmentView/Minimap.js

@@ -22,7 +22,8 @@ export default class Minimap extends React.Component {
         "numBpsShownInLinearView",
         "scrollAlignmentView",
         "laneHeight",
-        "laneSpacing"
+        "laneSpacing",
+        "isTrackSelected"
       ].some(key => props[key] !== newProps[key])
     )
       return true;
@@ -183,7 +184,8 @@ export default class Minimap extends React.Component {
       alignmentTracks = [],
       dimensions: { width = 200 },
       laneHeight,
-      laneSpacing = 1
+      laneSpacing = 1,
+      isTrackSelected = []
     } = this.props;
     const charWidth = this.getCharWidth();
 
@@ -233,7 +235,7 @@ export default class Minimap extends React.Component {
     return (
       <div
         key={i + "-lane"}
-        className="minimapLane"
+        className={`minimapLane ${isTrackSelected[i] ? "isTrackSelected" : ""}`}
         data-lane-index={i}
         style={{ height: laneHeight, maxHeight: laneHeight }}
       >

package/src/AlignmentView/PairwiseAlignmentView.js

@@ -1,68 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import { getPairwiseOverviewLinearViewOptions } from "./getPairwiseOverviewLinearViewOptions";
 import { AlignmentView } from "./index";
 
 //this view is shown if we detect pairwise alignments
-export class PairwiseAlignmentView extends React.Component {
-  state = {
-    currentPairwiseAlignmentIndex: undefined
-  };
-  render() {
-    const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = this.props;
-    const { currentPairwiseAlignmentIndex } = this.state;
-    if (currentPairwiseAlignmentIndex > -1) {
-      //we can render the AlignmentView directly
-      //get the alignmentTracks based on currentPairwiseAlignmentIndex
-      const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
+export function PairwiseAlignmentView(props) {
+  const [currentPairwiseAlignmentIndex, setCurrentPairwiseAlignmentIndex] =
+    useState(undefined);
+  const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = props;
 
-      const templateLength = alignmentTracks[0].alignmentData.sequence.length;
-      return (
-        <AlignmentView
-          {...{
-            ...this.props,
-            sequenceData: {
-              //pass fake seq data in so editor interactions work
-              sequence: Array.from(templateLength)
-                .map(() => "a")
-                .join("")
-            },
-            allowTrackRearrange: false,
-            alignmentTracks,
-            hasTemplate: true,
-            isPairwise: true,
-            currentPairwiseAlignmentIndex,
-            handleBackButtonClicked: () => {
-              this.setState({
-                currentPairwiseAlignmentIndex: undefined
-              });
-            }
-          }}
-        />
-      );
-    } else {
-      //we haven't yet selected an alignment to view
-      // render the AlignmentView zoomed out for each track in pairwiseOverviewAlignmentTracks
-      // when the view eye icon is hit (maybe next to the name?)
-      return (
-        <AlignmentView
-          {...{
-            ...this.props,
-            alignmentTracks: pairwiseOverviewAlignmentTracks,
-            allowTrackRearrange: false,
-            allowTrimming: false,
-            hasTemplate: true,
-            isPairwise: true,
-            isInPairwiseOverviewView: true,
-            isFullyZoomedOut: true,
-            noClickDragHandlers: true,
-            linearViewOptions: getPairwiseOverviewLinearViewOptions,
-            handleSelectTrack: trackIndex => {
-              //set currentPairwiseAlignmentIndex
-              this.setState({ currentPairwiseAlignmentIndex: trackIndex - 1 });
-            }
-          }}
-        />
-      );
-    }
+  if (currentPairwiseAlignmentIndex > -1) {
+    //we can render the AlignmentView directly
+    //get the alignmentTracks based on currentPairwiseAlignmentIndex
+    const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
+
+    const templateLength = alignmentTracks[0].alignmentData.sequence.length;
+    return (
+      <AlignmentView
+        {...{
+          ...props,
+          sequenceData: {
+            //pass fake seq data in so editor interactions work
+            sequence: Array.from(templateLength)
+              .map(() => "a")
+              .join("")
+          },
+          allowTrackRearrange: false,
+          alignmentTracks,
+          hasTemplate: true,
+          isPairwise: true,
+          currentPairwiseAlignmentIndex,
+          handleBackButtonClicked: () => {
+            setCurrentPairwiseAlignmentIndex(undefined);
+          }
+        }}
+      />
+    );
+  } else {
+    //we haven't yet selected an alignment to view
+    // render the AlignmentView zoomed out for each track in pairwiseOverviewAlignmentTracks
+    // when the view eye icon is hit (maybe next to the name?)
+    return (
+      <AlignmentView
+        {...{
+          ...props,
+          alignmentTracks: pairwiseOverviewAlignmentTracks,
+          allowTrackRearrange: false,
+          allowTrimming: false,
+          hasTemplate: true,
+          isPairwise: true,
+          isInPairwiseOverviewView: true,
+          isFullyZoomedOut: true,
+          noClickDragHandlers: true,
+          linearViewOptions: getPairwiseOverviewLinearViewOptions,
+          handleSelectTrack: trackIndex => {
+            setCurrentPairwiseAlignmentIndex(trackIndex - 1);
+          }
+        }}
+      />
+    );
   }
 }