@teselagen/ove 0.8.29 → 0.8.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.29",
+  "version": "0.8.30",
   "main": "./src/index.js",
   "type": "module",
   "repository": "https://github.com/TeselaGen/tg-oss",
@@ -19,8 +19,8 @@
     "@teselagen/file-utils": "0.3.23",
     "@teselagen/range-utils": "0.3.20",
     "@teselagen/react-list": "0.8.18",
-    "@teselagen/sequence-utils": "0.3.41",
-    "@teselagen/ui": "0.10.17",
+    "@teselagen/sequence-utils": "0.3.42",
+    "@teselagen/ui": "0.10.18",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/selectors/cutsitesSelector.d.ts

@@ -1,12 +1,4 @@
-declare const _default: ((state: any) => {
-    cutsitesByName: {};
-    cutsitesById: {};
-    cutsitesArray: never[];
-}) & import('reselect').OutputSelectorFields<(...args: any) => {
-    cutsitesByName: {};
-    cutsitesById: {};
-    cutsitesArray: never[];
-}, {
+declare const _default: ((state: any, ...params: any[]) => any) & import('reselect').OutputSelectorFields<(...args: readonly unknown[]) => any, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/selectors/filteredCutsitesSelector.d.ts

@@ -1,4 +1,8 @@
-declare const _default: ((state: any, ...params: any[]) => any) & import('reselect').OutputSelectorFields<(...args: readonly unknown[]) => any, {
+declare const _default: ((state: any) => {
+    cutsitesByName: {};
+}) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any) => {
+    cutsitesByName: {};
+}, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/src/Editor/index.js

@@ -361,6 +361,7 @@ export class Editor extends React.Component {
       hoveredId,
       isFullscreen,
       maxInsertSize,
+      getAcceptedInsertChars,
       showAminoAcidUnitAsCodon,
       maxAnnotationsToDisplay,
       minHeight = 400,
@@ -595,6 +596,7 @@ export class Editor extends React.Component {
           {...panelPropsToSpread}
           editorName={editorName}
           maxInsertSize={maxInsertSize}
+          getAcceptedInsertChars={getAcceptedInsertChars}
           showAminoAcidUnitAsCodon={showAminoAcidUnitAsCodon}
           isProtein={sequenceData.isProtein}
           onlyShowLabelsThatDoNotFit={onlyShowLabelsThatDoNotFit}

package/src/Editor/userDefinedHandlersAndOpts.js

@@ -51,6 +51,8 @@ export const userDefinedHandlersAndOpts = [
   "enzymeManageOverride",
   "enzymeGroupsOverride",
   "additionalEnzymes",
+  "getAcceptedInsertChars",
+  "maxInsertSize",
   "onDelete",
   "onCopy",
   "autoAnnotateFeatures",

package/src/GlobalDialog.js

@@ -41,12 +41,23 @@ const Dialogs = {
 export function GlobalDialog(props) {
   const { dialogOverrides = {}, editorName } = props;
   const [uniqKey, setUniqKeyToForceRerender] = useState();
+
   useEffect(() => {
     //on unmount, clear the global dialog state..
     return () => {
       hideDialog();
     };
   }, []);
+
+  useEffect(() => {
+    dialogHolder.setUniqKeyToForceRerender = setUniqKeyToForceRerender;
+
+    if (editorName) {
+      const slot = (dialogHolder[editorName] = dialogHolder[editorName] || {});
+      slot.setUniqKeyToForceRerender = setUniqKeyToForceRerender;
+    }
+  }, [editorName]);
+
   if (
     dialogHolder.editorName &&
     editorName &&
@@ -54,7 +65,6 @@ export function GlobalDialog(props) {
   ) {
     return null;
   }
-  dialogHolder.setUniqKeyToForceRerender = setUniqKeyToForceRerender;
   const Comp =
     dialogHolder.CustomModalComponent ||
     dialogOverrides[dialogHolder.overrideName] ||

package/src/GlobalDialogUtils.js

@@ -15,6 +15,8 @@ export function showDialog({
   if (!dialogHolder.dialogType && ModalComponent) {
     dialogHolder.dialogType = "TGCustomModal";
   }
+
+  dialogHolder.editorName = props?.editorName;
   // check if focused element in the dom is within a given editor and add an editor prop to the dialog
   if (document.activeElement && document.activeElement.closest(".veEditor")) {
     let editorName;
@@ -36,15 +38,25 @@ export function showDialog({
   dialogHolder.CustomModalComponent = ModalComponent;
   dialogHolder.props = props;
   dialogHolder.overrideName = overrideName;
-  dialogHolder.setUniqKeyToForceRerender(shortid());
+  if (dialogHolder.editorName && dialogHolder?.[dialogHolder.editorName]) {
+    dialogHolder?.[dialogHolder.editorName]?.setUniqKeyToForceRerender?.(
+      shortid()
+    );
+  } else {
+    dialogHolder?.setUniqKeyToForceRerender?.(shortid());
+  }
 }
 export function hideDialog() {
   delete dialogHolder.dialogType;
   delete dialogHolder.CustomModalComponent;
   delete dialogHolder.props;
   delete dialogHolder.overrideName;
+  if (dialogHolder.editorName && dialogHolder?.[dialogHolder.editorName]) {
+    dialogHolder?.[dialogHolder.editorName]?.setUniqKeyToForceRerender?.();
+  } else {
+    dialogHolder?.setUniqKeyToForceRerender?.();
+  }
   delete dialogHolder.editorName;
-  dialogHolder.setUniqKeyToForceRerender();
 }
 
 const typeToDialogType = {

package/src/RowItem/StackedAnnotations/PointedAnnotation.js

@@ -4,14 +4,101 @@ import withHover from "../../helperComponents/withHover";
 import getAnnotationNameAndStartStopString from "../../utils/getAnnotationNameAndStartStopString";
 
 import React, { useState } from "react";
-import { doesLabelFitInAnnotation } from "../utils";
+import { doesLabelFitInAnnotation, getAnnotationTextWidth } from "../utils";
 import { noop } from "lodash-es";
 import getAnnotationClassnames from "../../utils/getAnnotationClassnames";
-import { getStripedPattern } from "../../utils/editorUtils";
 import { ANNOTATION_LABEL_FONT_WIDTH } from "../constants";
+import { getStripedPattern } from "../../utils/editorUtils";
 import { partOverhangs } from "../partOverhangs";
 import { Tooltip } from "@blueprintjs/core";
 
+function getAnnotationTextOffset({
+  width,
+  nameToDisplay,
+  hasAPoint,
+  pointiness,
+  forward
+}) {
+  return (
+    width / 2 -
+    getAnnotationTextWidth(nameToDisplay) / 2 -
+    (hasAPoint
+      ? (pointiness / 2 + ANNOTATION_LABEL_FONT_WIDTH / 2) * (forward ? 1 : -1)
+      : 0)
+  );
+}
+
+function getAnnotationNameInfo({
+  name,
+  width,
+  hasAPoint,
+  pointiness,
+  forward,
+  charWidth,
+  truncateLabelsThatDoNotFit,
+  onlyShowLabelsThatDoNotFit,
+  annotation
+}) {
+  let nameToDisplay = name;
+  let textOffset = getAnnotationTextOffset({
+    width,
+    nameToDisplay,
+    hasAPoint,
+    pointiness,
+    forward
+  });
+  const widthAvailableForText = width - ANNOTATION_LABEL_FONT_WIDTH * 2;
+  if (
+    !doesLabelFitInAnnotation(name, { width }, charWidth) ||
+    (!onlyShowLabelsThatDoNotFit &&
+      ["parts", "features"].includes(annotation.annotationTypePlural))
+  ) {
+    if (truncateLabelsThatDoNotFit) {
+      // Binary search for max fitting substring
+      let left = 0;
+      let right = name.length;
+      let bestFit = "";
+
+      while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        const candidate = name.slice(0, mid);
+        const candidateWidth = getAnnotationTextWidth(candidate);
+
+        if (candidateWidth <= widthAvailableForText) {
+          if (candidate.length > bestFit.length) {
+            bestFit = candidate;
+          }
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+      if (bestFit.length < name.length) {
+        bestFit = bestFit.slice(0, -2) + "..";
+      }
+
+      nameToDisplay = bestFit;
+
+      if (nameToDisplay.length <= 3) {
+        textOffset = 0;
+        nameToDisplay = "";
+      } else {
+        textOffset = getAnnotationTextOffset({
+          width,
+          nameToDisplay,
+          hasAPoint,
+          pointiness,
+          forward
+        });
+      }
+    } else {
+      textOffset = 0;
+      nameToDisplay = "";
+    }
+  }
+  return { textOffset, nameToDisplay };
+}
+
 function PointedAnnotation(props) {
   const {
     className,
@@ -165,39 +252,19 @@ function PointedAnnotation(props) {
       Q ${pointiness},${height / 2} ${0},${0}
       z`;
   }
-  let nameToDisplay = name;
-  let textOffset =
-    width / 2 -
-    (name.length * 5) / 2 -
-    (hasAPoint ? (pointiness / 2) * (forward ? 1 : -1) : 0);
-  if (
-    !doesLabelFitInAnnotation(name, { width }, charWidth) ||
-    (!onlyShowLabelsThatDoNotFit &&
-      ["parts", "features"].includes(annotation.annotationTypePlural))
-  ) {
-    if (truncateLabelsThatDoNotFit) {
-      const fractionToDisplay =
-        width / (name.length * ANNOTATION_LABEL_FONT_WIDTH);
-      const numLetters = Math.floor(fractionToDisplay * name.length);
-      nameToDisplay = name.slice(0, numLetters);
-      if (nameToDisplay.length > 3) {
-        if (nameToDisplay.length !== name.length) {
-          nameToDisplay += "..";
-        }
 
-        textOffset =
-          width / 2 -
-          (nameToDisplay.length * 5) / 2 -
-          (hasAPoint ? (pointiness / 2) * (forward ? 1 : -1) : 0);
-      } else {
-        textOffset = 0;
-        nameToDisplay = "";
-      }
-    } else {
-      textOffset = 0;
-      nameToDisplay = "";
-    }
-  }
+  const { textOffset, nameToDisplay } = getAnnotationNameInfo({
+    name,
+    width,
+    hasAPoint,
+    pointiness,
+    forward,
+    charWidth,
+    truncateLabelsThatDoNotFit,
+    onlyShowLabelsThatDoNotFit,
+    annotation
+  });
+
   let _textColor = textColor;
   if (!textColor) {
     try {

package/src/RowItem/utils.js

@@ -1,14 +1,30 @@
 import { ANNOTATION_LABEL_FONT_WIDTH } from "./constants";
 import { getWidth } from "./getXStartAndWidthOfRowAnnotation";
 
+// Cache canvas context for text measurement
+let measureCanvas;
+export function getAnnotationTextWidth(
+  text,
+  fontSize = ANNOTATION_LABEL_FONT_WIDTH,
+  fontFamily = "monospace"
+) {
+  if (!measureCanvas) {
+    measureCanvas = document.createElement("canvas");
+  }
+  const ctx = measureCanvas.getContext("2d");
+  ctx.font = `${fontSize}px ${fontFamily}`;
+  return ctx.measureText(text).width;
+}
+
 export const doesLabelFitInAnnotation = (
   text = "",
   { range, width },
   charWidth
 ) => {
-  const textLength = text.length * ANNOTATION_LABEL_FONT_WIDTH;
-  const widthMinusOne =
-    (range ? getWidth(range, charWidth, 0) : width) - charWidth;
+  const textLength = getAnnotationTextWidth(text);
+  const widthMinusOne = range
+    ? getWidth(range, charWidth, 0) - ANNOTATION_LABEL_FONT_WIDTH * 2
+    : width - ANNOTATION_LABEL_FONT_WIDTH * 2;
   return widthMinusOne > textLength;
 };
 

package/src/commands/index.js

@@ -284,7 +284,7 @@ const fileCommandDefs = {
   },
   exportSequenceAsTeselagenJson: {
     name: "Download Teselagen JSON File",
-    handler: props => props.exportSequenceToFile("teselagenJson")
+    handler: props => props.exportSequenceToFile("teselagenJson", { getAcceptedInsertChars: props.getAcceptedInsertChars})
   },
 
   viewProperties: {

package/src/helperComponents/PropertiesDialog/OrfProperties.js

@@ -10,10 +10,9 @@ import { getRangeLength } from "@teselagen/range-utils";
 import { getOrfColor } from "../../constants/orfFrameToColorMap";
 import { connectToEditor } from "../../withEditorProps";
 import { compose } from "recompose";
-import selectors from "../../selectors";
 
 import getCommands from "../../commands";
-import { sizeSchema } from "./utils";
+import { sizeSchema, getMemoOrfs } from "./utils";
 import { orfsSubmenu } from "../../MenuBar/viewSubmenu";
 import { getVisFilter } from "./GenericAnnotationProperties";
 
@@ -107,7 +106,7 @@ export default compose(
       readOnly,
       annotationVisibility,
       useAdditionalOrfStartCodons,
-      orfs: selectors.orfsSelector(editorState),
+      orfs: getMemoOrfs(editorState),
       sequenceLength: sequence.length,
       sequenceData,
       minimumOrfSize

package/src/helperComponents/PropertiesDialog/TranslationProperties.js

@@ -14,6 +14,7 @@ import selectors from "../../selectors";
 import { getMassOfAaString } from "@teselagen/sequence-utils";
 import { translationsSubmenu } from "../../MenuBar/viewSubmenu";
 import { getVisFilter } from "./GenericAnnotationProperties";
+import { getMemoOrfs } from "./utils";
 
 class TranslationProperties extends React.Component {
   constructor(props) {
@@ -140,7 +141,7 @@ export default compose(
     return {
       readOnly,
       translations: selectors.translationsSelector(editorState),
-      orfs: selectors.orfsSelector(editorState),
+      orfs: getMemoOrfs(editorState),
       annotationVisibility,
       sequenceLength: (sequenceData.sequence || "").length,
       sequenceData

package/src/helperComponents/PropertiesDialog/utils.js

@@ -1,6 +1,8 @@
 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 => ({
   path: "size",
@@ -35,3 +37,30 @@ export const sizeSchema = isProtein => ({
     );
   }
 });
+
+export const getMemoOrfs = (() => {
+  let lastDeps;
+  let lastResult;
+  return (editorState) => {
+    const {
+      sequenceData,
+      minimumOrfSize,
+      useAdditionalOrfStartCodons
+    } = editorState;
+
+    const { sequence, circular } = sequenceData;
+
+    const deps = {
+      sequence,
+      circular,
+      minimumOrfSize,
+      useAdditionalOrfStartCodons
+    };
+    if (lastResult && isEqual(deps, lastDeps)) {
+      return lastResult;
+    }
+    lastResult = selectors.orfsSelector(editorState);
+    lastDeps = deps;
+    return lastResult;
+  };
+})();

package/src/selectors/cutsitesSelector.js

@@ -4,12 +4,55 @@ import sequenceSelector from "./sequenceSelector";
 import restrictionEnzymesSelector from "./restrictionEnzymesSelector";
 import cutsiteLabelColorSelector from "./cutsiteLabelColorSelector";
 import { createSelector } from "reselect";
+import { isEqual } from "lodash-es";
 
 import { flatMap as flatmap, map } from "lodash-es";
 import { getCutsitesFromSequence } from "@teselagen/sequence-utils";
 import { getLowerCaseObj } from "../utils/arrayUtils";
 
-function cutsitesSelector(sequence, circular, enzymeList, cutsiteLabelColors) {
+// [{ args: {sequence,circular,enzymeList,cutsiteLabelColors}, result }]
+const cutsitesCache = [];
+
+function getCachedResult(argsObj) {
+  const idx = cutsitesCache.findIndex(
+    entry =>
+      entry &&
+      isEqual(entry.args, argsObj)
+  );
+  if (idx === -1) return;
+  const hit = cutsitesCache[idx];
+  return hit.result;
+}
+
+function setCachedResult(
+  argsObj,
+  result,
+  cacheSize = 1
+) {
+  cutsitesCache.push({
+    args: argsObj,
+    result
+  });
+  //keep cache size manageable
+  if (cutsitesCache.length > cacheSize) cutsitesCache.shift();
+}
+
+function cutsitesSelector(
+  sequence,
+  circular,
+  enzymeList,
+  cutsiteLabelColors,
+  editorSize = 1
+) {
+  const cachedResult = getCachedResult({
+    sequence,
+    circular,
+    enzymeList,
+    cutsiteLabelColors
+  });
+  if (cachedResult) {
+    return cachedResult;
+  }
   //get the cutsites grouped by enzyme
   const cutsitesByName = getLowerCaseObj(
     getCutsitesFromSequence(sequence, circular, map(enzymeList))
@@ -45,11 +88,22 @@ function cutsitesSelector(sequence, circular, enzymeList, cutsiteLabelColors) {
   const cutsitesArray = flatmap(cutsitesByName, function (cutsitesForEnzyme) {
     return cutsitesForEnzyme;
   });
-  return {
+  const result = {
     cutsitesByName,
     cutsitesById,
     cutsitesArray
   };
+  setCachedResult(
+    {
+      sequence,
+      circular,
+      enzymeList,
+      cutsiteLabelColors
+    },
+    result,
+    editorSize
+  );
+  return result;
 }
 
 export default createSelector(
@@ -57,5 +111,6 @@ export default createSelector(
   circularSelector,
   restrictionEnzymesSelector,
   cutsiteLabelColorSelector,
+  editorState => editorState.editorSize,
   cutsitesSelector
 );

package/src/withEditorInteractions/createSequenceInputPopup.js

@@ -82,6 +82,7 @@ class SequenceInputNoHotkeys extends React.Component {
       caretPosition,
       sequenceData,
       maxInsertSize,
+      getAcceptedInsertChars,
       showAminoAcidUnitAsCodon
     } = this.props;
     const { charsToInsert, hasTempError } = this.state;
@@ -151,8 +152,9 @@ class SequenceInputNoHotkeys extends React.Component {
               e.target.value,
               {
                 ...sequenceData,
-                name: undefined
-              }
+                name: undefined,
+                getAcceptedInsertChars
+              },
             );
             if (warnings.length) {
               this.setState({

package/src/withEditorInteractions/index.js

@@ -212,7 +212,8 @@ function VectorInteractionHOC(Component /* options */) {
         onPaste,
         disableBpEditing,
         sequenceData,
-        maxInsertSize
+        maxInsertSize,
+        getAcceptedInsertChars
       } = this.props;
 
       if (disableBpEditing) {
@@ -260,7 +261,8 @@ function VectorInteractionHOC(Component /* options */) {
         topLevelSeqData: sequenceData,
         provideNewIdsForAnnotations: true,
         annotationsAsObjects: true,
-        noCdsTranslations: true
+        noCdsTranslations: true,
+        getAcceptedInsertChars
       });
       if (!seqDataToInsert.sequence.length)
         return window.toastr.warning("Sorry no valid base pairs to paste");
@@ -283,7 +285,8 @@ function VectorInteractionHOC(Component /* options */) {
         selectionLayer,
         copyOptions,
         disableBpEditing,
-        readOnly
+        readOnly,
+        getAcceptedInsertChars,
       } = this.props;
       const onCut = this.props.onCut || this.props.onCopy || noop;
       const seqData = tidyUpSequenceData(
@@ -308,7 +311,8 @@ function VectorInteractionHOC(Component /* options */) {
         {
           doNotRemoveInvalidChars: true,
           annotationsAsObjects: true,
-          includeProteinSequence: true
+          includeProteinSequence: true,
+          getAcceptedInsertChars
         }
       );
 
@@ -340,7 +344,8 @@ function VectorInteractionHOC(Component /* options */) {
           e,
           tidyUpSequenceData(seqData, {
             doNotRemoveInvalidChars: true,
-            annotationsAsObjects: true
+            annotationsAsObjects: true,
+            getAcceptedInsertChars
           }),
           this.props
         );
@@ -404,6 +409,7 @@ function VectorInteractionHOC(Component /* options */) {
         readOnly,
         disableBpEditing,
         maxInsertSize,
+        getAcceptedInsertChars,
         showAminoAcidUnitAsCodon
       } = this.props;
       const sequenceLength = sequenceData.sequence.length;
@@ -423,6 +429,7 @@ function VectorInteractionHOC(Component /* options */) {
           sequenceLength,
           caretPosition,
           maxInsertSize,
+          getAcceptedInsertChars,
           showAminoAcidUnitAsCodon,
           handleInsert: async seqDataToInsert => {
             await insertAndSelectHelper({

package/src/withEditorProps/index.js

@@ -39,6 +39,7 @@ import { createSelector, defaultMemoize } from "reselect";
 import domtoimage from "dom-to-image";
 import {
   hideDialog,
+  dialogHolder,
   showAddOrEditAnnotationDialog,
   showDialog
 } from "../GlobalDialogUtils";
@@ -141,7 +142,8 @@ export const handleSave =
       readOnly,
       alwaysAllowSave,
       sequenceData,
-      lastSavedIdUpdate
+      lastSavedIdUpdate,
+      getAcceptedInsertChars
     } = props;
     const saveHandler = opts.isSaveAs ? onSaveAs || onSave : onSave;
 
@@ -162,7 +164,8 @@ export const handleSave =
         opts,
         tidyUpSequenceData(sequenceData, {
           doNotRemoveInvalidChars: true,
-          annotationsAsObjects: true
+          annotationsAsObjects: true,
+          getAcceptedInsertChars
         }),
         props,
         updateLastSavedIdToCurrent
@@ -367,8 +370,8 @@ export default compose(
           options
         } = props.beforeSequenceInsertOrDelete
           ? (await props.beforeSequenceInsertOrDelete(
-              tidyUpSequenceData(_sequenceDataToInsert),
-              tidyUpSequenceData(_existingSequenceData),
+              tidyUpSequenceData(_sequenceDataToInsert, { getAcceptedInsertChars: props.getAcceptedInsertChars }),
+              tidyUpSequenceData(_existingSequenceData, { getAcceptedInsertChars: props.getAcceptedInsertChars }),
               _caretPositionOrRange,
               _options
             )) || {}
@@ -555,7 +558,11 @@ const getEditorState = createSelector(
   state => state.VectorEditor,
   (state, editorName) => editorName,
   (VectorEditor, editorName) => {
-    return VectorEditor[editorName];
+    const editorState = VectorEditor[editorName];
+    editorState && (editorState.editorSize =  Object.values(VectorEditor).filter(
+    editorItem => editorItem?.sequenceData
+  ).length);
+  return editorState;
   }
 );
 
@@ -595,6 +602,10 @@ function mapStateToProps(state, ownProps) {
         annotationTypePlural,
         sequenceLength
       );
+      if (dialogHolder.editorName) {
+        annotationToAdd =
+          dialogHolder.editorName === editorName ? annotationToAdd : undefined;
+      }
     }
   });
 
@@ -623,7 +634,7 @@ function mapStateToProps(state, ownProps) {
   const selectedCutsites = s.selectedCutsitesSelector(editorState);
   const allCutsites = s.cutsitesSelector(
     editorState,
-    ownProps.additionalEnzymes
+    ownProps.additionalEnzymes,
   );
 
   const { matchedSearchLayer, searchLayers, matchesTotal } =
@@ -887,13 +898,15 @@ export function getShowGCContent(state, ownProps) {
   return toRet;
 }
 
-function jsonToJson(incomingJson) {
+function jsonToJson(incomingJson, options) {
+  const {getAcceptedInsertChars} = options || {};
   return JSON.stringify(
     omit(
       cleanUpTeselagenJsonForExport(
         tidyUpSequenceData(incomingJson, {
           doNotRemoveInvalidChars: true,
-          annotationsAsObjects: false
+          annotationsAsObjects: false,
+          getAcceptedInsertChars
         })
       ),
       [