@teselagen/ove 0.8.35 → 0.8.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.35",
+  "version": "0.8.37",
   "main": "./src/index.js",
   "type": "module",
   "repository": "https://github.com/TeselaGen/tg-oss",
@@ -20,9 +20,8 @@
     "@teselagen/range-utils": "0.3.20",
     "@teselagen/react-list": "0.8.18",
     "@teselagen/sequence-utils": "0.3.42",
-    "@teselagen/ui": "0.10.19",
+    "@teselagen/ui": "0.10.20",
     "@use-gesture/react": "10.3.0",
-    "biomsa": "^0.2.4",
     "classnames": "^2.3.2",
     "clipboard": "^2.0.11",
     "color": "^3.2.1",
@@ -47,7 +46,6 @@
     "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "9.0.1",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-sizeme": "^2.6.12",
@@ -56,12 +54,16 @@
     "redux-act": "^1.8.0",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
-    "remark-gfm": "^4.0.0",
     "reselect": "^4.1.7",
     "shortid": "2.2.16",
     "tg-use-local-storage-state": "^16.0.3",
-    "to-regex-range": "5.0.1",
     "use-debounce": "^8.0.4",
     "validate.io-nonnegative-integer-array": "^1.0.1"
+  },
+  "devDependencies": {
+    "biomsa": "^0.2.4",
+    "react-markdown": "9.0.1",
+    "remark-gfm": "^4.0.0",
+    "to-regex-range": "5.0.1"
   }
 }

package/src/Editor/index.js

@@ -1,5 +1,4 @@
 import { debounce, find, get, some, isArray } from "lodash-es";
-// import sizeMe from "react-sizeme";
 import { showContextMenu } from "@teselagen/ui";
 import {
   Button,

package/src/RowItem/utils.js

@@ -1,16 +1,48 @@
 import { ANNOTATION_LABEL_FONT_WIDTH } from "./constants";
 import { getWidth } from "./getXStartAndWidthOfRowAnnotation";
 
-// Cache canvas context for text measurement
+// Cache canvas context and computed font size for text measurement
 let measureCanvas;
-export function getAnnotationTextWidth(
-  text,
-  fontSize = ANNOTATION_LABEL_FONT_WIDTH,
-  fontFamily = "monospace"
-) {
+let cachedFontSize = null;
+
+/**
+ * Get the computed font size for the ve-monospace-font class
+ */
+function getVeMonospaceFontSize() {
+  if (cachedFontSize !== null) {
+    return cachedFontSize;
+  }
+
+  // Create a temporary element to measure the computed font size
+  const tempElement = document.createElement("div");
+  tempElement.className = "ve-monospace-font";
+  tempElement.style.position = "absolute";
+  tempElement.style.visibility = "hidden";
+  tempElement.style.pointerEvents = "none";
+  document.body.appendChild(tempElement);
+
+  try {
+    const computedStyle = window.getComputedStyle(tempElement);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    cachedFontSize = fontSize || ANNOTATION_LABEL_FONT_WIDTH; // fallback to 10px if parsing fails
+    return cachedFontSize;
+  } catch (error) {
+    console.warn(
+      "Failed to compute ve-monospace-font size, using fallback",
+      error
+    );
+    cachedFontSize = ANNOTATION_LABEL_FONT_WIDTH; // fallback
+    return cachedFontSize;
+  } finally {
+    document.body.removeChild(tempElement);
+  }
+}
+
+export function getAnnotationTextWidth(text, fontFamily = "monospace") {
   if (!measureCanvas) {
     measureCanvas = document.createElement("canvas");
   }
+  const fontSize = getVeMonospaceFontSize();
   const ctx = measureCanvas.getContext("2d");
   ctx.font = `${fontSize}px ${fontFamily}`;
   return ctx.measureText(text).width;
@@ -22,9 +54,10 @@ export const doesLabelFitInAnnotation = (
   charWidth
 ) => {
   const textLength = getAnnotationTextWidth(text);
+  const fontSize = getVeMonospaceFontSize();
   const widthMinusOne = range
-    ? getWidth(range, charWidth, 0) - ANNOTATION_LABEL_FONT_WIDTH * 2
-    : width - ANNOTATION_LABEL_FONT_WIDTH * 2;
+    ? getWidth(range, charWidth, 0) - fontSize * 2
+    : width - fontSize * 2;
   return widthMinusOne > textLength;
 };
 

package/src/StatusBar/index.js

@@ -227,7 +227,7 @@ export const EditAvailabilityItem = connectToEditor(
   ) : null;
 });
 
-export function StatusBar({
+function StatusBar({
   disableSetReadOnly,
   disableBpEditing,
   onSave,

package/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -11,6 +11,7 @@ import {
   removeDuplicatesIcon,
   useMemoDeepEqual
 } from "@teselagen/ui";
+import { convertDnaCaretPositionOrRangeToAA } from "@teselagen/sequence-utils";
 import { map, upperFirst, pick, startCase, isFunction } from "lodash-es";
 import {
   AnchorButton,
@@ -86,7 +87,10 @@ const genericAnnotationProperties = ({
 
     const annotationsToUse = React.useMemo(
       () =>
-        map(annotations, annotation => {
+        map(annotations, _annotation => {
+          const annotation = isProtein
+            ? convertDnaCaretPositionOrRangeToAA(_annotation)
+            : _annotation;
           return {
             ...annotation,
             ...(annotation.strand === undefined && {
@@ -95,7 +99,7 @@ const genericAnnotationProperties = ({
             size: getRangeLength(annotation, sequenceLength)
           };
         }),
-      [annotations, sequenceLength]
+      [annotations, sequenceLength, isProtein]
     );
 
     const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
@@ -180,7 +184,7 @@ const genericAnnotationProperties = ({
                   }
                 }
               ]),
-          sizeSchema(isProtein),
+          sizeSchema(),
           ...(withTags && allPartTags
             ? [
                 {

package/src/helperComponents/PropertiesDialog/OrfProperties.js

@@ -79,7 +79,7 @@ class OrfProperties extends React.Component {
                 displayName: "Size (aa)",
                 type: "number"
               },
-              sizeSchema(this.props.isProtein),
+              sizeSchema(),
               { path: "frame", type: "number" },
               { path: "strand", type: "number" }
             ]

package/src/helperComponents/PropertiesDialog/utils.js

@@ -1,22 +1,18 @@
 import React from "react";
 import { isEqual } from "lodash-es";
-import { convertDnaCaretPositionOrRangeToAA } from "@teselagen/sequence-utils";
 import { convertRangeTo1Based } from "@teselagen/range-utils";
 import selectors from "../../selectors";
 
-export const sizeSchema = isProtein => ({
+export const sizeSchema = () => ({
   path: "size",
   type: "number",
-  render: (val, _record) => {
-    const record = isProtein
-      ? convertDnaCaretPositionOrRangeToAA(_record)
-      : _record;
+  render: (val, record) => {
     const base1Range = convertRangeTo1Based(record);
     const hasJoinedLocations = record.locations && record.locations.length > 1;
 
     return (
       <span>
-        {isProtein ? Math.floor(val / 3) : val}{" "}
+        {val}{" "}
         <span style={{ fontSize: 10 }}>
           {hasJoinedLocations ? (
             record.locations.map((loc, i) => {
@@ -41,12 +37,9 @@ export const sizeSchema = isProtein => ({
 export const getMemoOrfs = (() => {
   let lastDeps;
   let lastResult;
-  return (editorState) => {
-    const {
-      sequenceData,
-      minimumOrfSize,
-      useAdditionalOrfStartCodons
-    } = editorState;
+  return editorState => {
+    const { sequenceData, minimumOrfSize, useAdditionalOrfStartCodons } =
+      editorState;
 
     const { sequence, circular } = sequenceData;
 

package/src/helperComponents/RemoveDuplicates/index.js

@@ -14,6 +14,7 @@ import { forEach, camelCase, startCase } from "lodash-es";
 import { sizeSchema } from "../PropertiesDialog/utils";
 import { getRangeLength } from "@teselagen/range-utils";
 import { useFormValue } from "../../utils/useFormValue";
+import { convertDnaCaretPositionOrRangeToAA } from "@teselagen/sequence-utils";
 
 const dialogFormName = "RemoveDuplicatesDialog";
 const dataTableFormName = "duplicatesToRemove";
@@ -33,6 +34,7 @@ const RemoveDuplicatesDialog = props => {
   const ignoreName = useFormValue(dialogFormName, "ignoreName");
   const ignoreStartAndEnd = useFormValue(dialogFormName, "ignoreStartAndEnd");
   const ignoreStrand = useFormValue(dialogFormName, "ignoreStrand");
+  const isProteinSeq = isProtein || sequenceData.isProtein;
 
   const recomputeDups = useCallback(
     values => {
@@ -42,19 +44,25 @@ const RemoveDuplicatesDialog = props => {
       const annotations = sequenceData[type];
       const newDups = [];
       const seqsHashByStartEndStrandName = {};
-      forEach(annotations, a => {
-        const hash = `${ignoreStartAndEnd ? "" : a.start}&${
-          ignoreStartAndEnd ? "" : a.end
-        }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`;
+      forEach(annotations, _annotation => {
+        const annotation = isProteinSeq
+          ? convertDnaCaretPositionOrRangeToAA(_annotation)
+          : _annotation;
+        const hash = `${ignoreStartAndEnd ? "" : annotation.start}&${
+          ignoreStartAndEnd ? "" : annotation.end
+        }&${ignoreStrand ? "" : annotation.strand}&${ignoreName ? "" : annotation.name}`;
         if (seqsHashByStartEndStrandName[hash]) {
-          newDups.push({ ...a, size: getRangeLength(a, sequenceLength) });
+          newDups.push({
+            ...annotation,
+            size: getRangeLength(annotation, sequenceLength)
+          });
         } else {
           seqsHashByStartEndStrandName[hash] = true;
         }
       });
       return newDups;
     },
-    [sequenceData, sequenceLength, type]
+    [sequenceData, sequenceLength, type, isProteinSeq]
   );
 
   const [dups, setDups] = useState(recomputeDups);
@@ -79,11 +87,11 @@ const RemoveDuplicatesDialog = props => {
       fields: [
         { path: "name", type: "string" },
         // ...(noType ? [] : [{ path: "type", type: "string" }]),
-        sizeSchema(isProtein),
+        sizeSchema(),
         { path: "strand", type: "string" }
       ]
     }),
-    [isProtein]
+    []
   );
 
   return (

package/src/index.js

@@ -28,10 +28,7 @@ export {
   default as LinearView,
   LinearView as LinearViewUnconnected
 } from "./LinearView";
-export {
-  default as StatusBar,
-  StatusBar as StatusBarUnconnected
-} from "./StatusBar";
+export { default as StatusBar } from "./StatusBar";
 export {
   default as DigestTool,
   DigestTool as DigestToolUnconnected