@teselagen/ove 0.7.30-beta.2 → 0.7.31

package/ove.css

@@ -10724,6 +10724,61 @@ li.bp3-menu-divider:last-child {
 .veLabelText {
   user-select: none;
 }
+.veLabels {
+  font-weight: lighter;
+}
+
+.labelTspan:hover {
+  fill: red !important;
+}
+
+.labelText {
+  cursor: pointer;
+}
+
+.veEditor .veAnnotationHovered:not(.topLevelLabelGroup) {
+  font-weight: bold;
+}
+.veEditor
+  .veAnnotationHovered:not(.topLevelLabelGroup):not(
+    .veCircularViewInternalLabelText
+  ) {
+  text-decoration: underline;
+}
+
+.veEditor .veAnnotationHovered.veCutsiteLabel {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.bp3-dark .veLabels .veAnnotationHovered:not(.topLevelLabelGroup) {
+  /* fill: white !important; */
+  font-weight: normal;
+}
+.bp3-dark .veLabels .veAnnotationHovered rect {
+  fill: rgb(64, 64, 92) !important;
+}
+
+.partWithSelectedTag {
+  font-size: 14px !important;
+  font-weight: 900;
+  text-decoration: underline;
+}
+.veCircularView .partWithSelectedTag.vePart .veLabelText {
+  /* stroke: #ac68cc; */
+  font-size: 15px !important;
+}
+.vePartLabel.partWithSelectedTag {
+  font-size: large !important;
+}
+
+.partWithSelectedTag path,
+path.partWithSelectedTag {
+  stroke-width: 1.5 !important;
+}
+/* .veLabelLine {
+  opacity: 0.1;
+} */
 .veRowView {
   overflow-x: visible;
 }
@@ -11197,61 +11252,6 @@ li.bp3-menu-divider:last-child {
 .simple-dialog .bp3-form-content {
   height: 40px;
 }
-.veLabels {
-  font-weight: lighter;
-}
-
-.labelTspan:hover {
-  fill: red !important;
-}
-
-.labelText {
-  cursor: pointer;
-}
-
-.veEditor .veAnnotationHovered:not(.topLevelLabelGroup) {
-  font-weight: bold;
-}
-.veEditor
-  .veAnnotationHovered:not(.topLevelLabelGroup):not(
-    .veCircularViewInternalLabelText
-  ) {
-  text-decoration: underline;
-}
-
-.veEditor .veAnnotationHovered.veCutsiteLabel {
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-.bp3-dark .veLabels .veAnnotationHovered:not(.topLevelLabelGroup) {
-  /* fill: white !important; */
-  font-weight: normal;
-}
-.bp3-dark .veLabels .veAnnotationHovered rect {
-  fill: rgb(64, 64, 92) !important;
-}
-
-.partWithSelectedTag {
-  font-size: 14px !important;
-  font-weight: 900;
-  text-decoration: underline;
-}
-.veCircularView .partWithSelectedTag.vePart .veLabelText {
-  /* stroke: #ac68cc; */
-  font-size: 15px !important;
-}
-.vePartLabel.partWithSelectedTag {
-  font-size: large !important;
-}
-
-.partWithSelectedTag path,
-path.partWithSelectedTag {
-  stroke-width: 1.5 !important;
-}
-/* .veLabelLine {
-  opacity: 0.1;
-} */
 .veCircularViewMiddleOfVectorText {
   display: flex;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.30-beta.2",
+  "version": "0.7.31",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -14,19 +14,19 @@
     "@blueprintjs/core": "3.54.0",
     "@hello-pangea/dnd": "16.2.0",
     "@risingstack/react-easy-state": "^6.3.0",
-    "@teselagen/bio-parsers": "0.4.29-beta.1",
+    "@teselagen/bio-parsers": "0.4.28",
     "@teselagen/file-utils": "0.3.20",
-    "@teselagen/range-utils": "0.3.14-beta.1",
+    "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
-    "@teselagen/sequence-utils": "0.3.32-beta.2",
-    "@teselagen/ui": "0.8.6-beta.27",
+    "@teselagen/sequence-utils": "0.3.32",
+    "@teselagen/ui": "0.9.4",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",
-    "color": "^5.0.0",
+    "clipboard": "^2.0.11",
+    "color": "^3.2.1",
     "combokeys": "^3.0.1",
     "copy-to-clipboard": "^3.3.1",
-    "cypress-real-events": "^1.13.0",
     "deep-equal": "^1.1.1",
     "dom-to-image": "^2.6.0",
     "downloadjs": "^1.4.7",
@@ -57,15 +57,11 @@
     "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",
-    "nanoid": "5.1.5"
-  },
-  "volta": {
-    "node": "18.18.0",
-    "yarn": "1.22.21"
+    "validate.io-nonnegative-integer-array": "^1.0.1"
   },
   "license": "MIT"
 }

package/selectors/orfsSelector.d.ts

@@ -7,7 +7,7 @@ declare const _default: ((state: any) => {
     forward: any;
     annotationTypePlural: string;
     isOrf: boolean;
-    id: string;
+    id: any;
 }[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any) => {
     start: number;
     end: number;
@@ -17,7 +17,7 @@ declare const _default: ((state: any) => {
     forward: any;
     annotationTypePlural: string;
     isOrf: boolean;
-    id: string;
+    id: any;
 }[], {
     clearCache: () => void;
 }> & {

package/selectors/translationsSelector.d.ts

@@ -7,7 +7,7 @@ declare const _default: ((state: any) => any) & import('reselect').OutputSelecto
     forward: any;
     annotationTypePlural: string;
     isOrf: boolean;
-    id: string;
+    id: any;
 }[], args_4: any, args_5: any, args_6: any[], args_7: any, args_8: any, args_9: any, args_10: any, args_11: any, args_12: any) => any, {
     clearCache: () => void;
 }> & {

package/src/AlignmentView/index.js

@@ -15,9 +15,6 @@ import { connect } from "react-redux";
 import {
   Button,
   Intent,
-  Popover,
-  Menu,
-  MenuItem,
   Tooltip,
   Icon,
   Spinner,
@@ -90,6 +87,7 @@ try {
 
 export const AlignmentView = props => {
   const {
+    dimensions,
     alignmentType,
     alignmentRunUpdate,
     alignmentName: _alignmentName,
@@ -103,13 +101,11 @@ export const AlignmentView = props => {
     sequenceLength,
     shouldAutosave,
     store,
-    height,
+    height: _height,
     minimapLaneHeight,
     minimapLaneSpacing,
     isInPairwiseOverviewView,
     noVisibilityOptions,
-    updateAlignmentSortOrder,
-    alignmentSortOrder,
     handleBackButtonClicked,
     allowTrimming,
     additionalSelectionLayerRightClickedOptions,
@@ -121,6 +117,10 @@ export const AlignmentView = props => {
     style,
     unmappedSeqs
   } = props;
+  let height = _height;
+  if (dimensions && dimensions.height) {
+    height = dimensions.height;
+  }
 
   const {
     alignmentId,
@@ -616,7 +616,6 @@ export const AlignmentView = props => {
     } else {
       i = _i;
     }
-
     const track = alignmentTracks?.[i];
     if (!track) return null;
     const {
@@ -636,7 +635,7 @@ export const AlignmentView = props => {
     });
     const linearViewWidth =
       (alignmentData || sequenceData).sequence.length * charWidth;
-    const name = sequenceData.name || sequenceData.id;
+    const name = alignmentData.name || sequenceData.name || sequenceData.id;
 
     const tickSpacing = massageTickSpacing(Math.ceil(120 / charWidth));
 
@@ -1261,7 +1260,7 @@ export const AlignmentView = props => {
                             await navigator.clipboard.writeText(seqDataToCopy);
                           };
 
-                          const getAllAlignmentsFastaText = async () => {
+                          const copyAllAlignmentsFastaText = async () => {
                             await navigator.clipboard.writeText(
                               getAllAlignmentsFastaText()
                             );
@@ -1281,7 +1280,7 @@ export const AlignmentView = props => {
                                   "copyAllAlignmentsFastaClipboardHelper",
                                 hotkey: "cmd+c",
                                 onClick: () => {
-                                  getAllAlignmentsFastaText();
+                                  copyAllAlignmentsFastaText();
                                   window.toastr.success("Selection Copied");
                                 }
                               },
@@ -1289,8 +1288,8 @@ export const AlignmentView = props => {
                                 text: `Copy Selection of ${name} as Fasta`,
                                 className:
                                   "copySpecificAlignmentFastaClipboardHelper",
-                                onClick: () => {
-                                  copySpecificAlignmentFasta();
+                                onClick: e => {
+                                  copySpecificAlignmentFasta(e);
                                   window.toastr.success(
                                     "Selection Copied As Fasta"
                                   );
@@ -1410,7 +1409,6 @@ export const AlignmentView = props => {
       updateLabelsForInViewFeatures();
     }
   };
-
   return (
     <PinchHelper {...pinchHandler}>
       <ResizeSensor onResize={handleResize}>
@@ -1581,37 +1579,6 @@ export const AlignmentView = props => {
                     {...alignmentVisibilityToolOptions}
                   />
                 )}
-                {updateAlignmentSortOrder && !isInPairwiseOverviewView && (
-                  <Popover
-                    minimal
-                    content={
-                      <Menu>
-                        <MenuItem
-                          active={true || alignmentSortOrder}
-                          onClick={() => {
-                            updateAlignmentSortOrder("Position");
-                          }}
-                          text="Position"
-                        />
-                        <MenuItem
-                          active={false || alignmentSortOrder}
-                          onClick={() => {
-                            updateAlignmentSortOrder("Alphabetical");
-                          }}
-                          text="Alphabetical"
-                        />
-                      </Menu>
-                    }
-                    target={
-                      <Button
-                        small
-                        text="Sort Order"
-                        rightIcon="caret-down"
-                        icon="sort"
-                      />
-                    }
-                  />
-                )}
                 {additionalTopEl}
                 {saveMessage && (
                   <div

package/src/AutoAnnotate.js

@@ -4,7 +4,7 @@
 import { unparse } from "papaparse";
 import pluralize from "pluralize";
 import { SubmissionError, reduxForm } from "redux-form";
-import { nanoid } from "nanoid";
+import shortid from "shortid";
 import CreateAnnotationsPage from "./CreateAnnotationsPage";
 import { formName } from "./constants";
 import { AutoAnnotateBpMatchingDialog } from "./AutoAnnotateBpMatchingDialog";
@@ -33,7 +33,7 @@ import {
 } from "@teselagen/ui";
 import { startCase } from "lodash-es";
 import withEditorProps from "./withEditorProps";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Colors, Tab, Tabs } from "@blueprintjs/core";
 import { typeField } from "./helperComponents/PropertiesDialog/typeField";
 
@@ -403,7 +403,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
               if (ann.matchType === "protein") {
                 ann.sequence = convertProteinSeqToDNAIupac(ann.sequence);
               }
-              const id = nanoid();
+              const id = shortid();
               annotationsToCheckById[id] = {
                 ...ann,
                 sequence: ann.isRegex
@@ -428,7 +428,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                     ...annotationsToCheckById[a.id],
                     ...a,
                     forward: a.strand !== -1,
-                    id: nanoid()
+                    id: shortid()
                   };
                   toRet.color =
                     toRet.color || getFeatureToColorMap()[toRet.type];

package/src/CircularView/Labels/index.js

@@ -8,11 +8,19 @@ import { avoidOverlapWith } from "../drawAnnotations";
 
 const fontWidthToFontSize = 1.75;
 
-const getTextLength = text => {
-  let len = (text || "Unlabeled").length;
+export const getTextLengthWithCollapseSpace = (text, collapseWhiteSpace = true) => {
+  let displayText = text || "Unlabeled";
+  if (collapseWhiteSpace) {
+    displayText = displayText.replaceAll(
+      /\s+/g,
+      " "
+    );
+  }
+  let len = displayText.length;
   // eslint-disable-next-line no-control-regex
   const nonEnInputReg = /[^\x00-\xff]+/g;
-  const nonEnStrings = (text || "Unlabeled").match(nonEnInputReg) || [];
+  const nonEnStrings =
+  displayText.match(nonEnInputReg) || [];
   nonEnStrings.forEach(str => (len += str.length * 0.5));
   return len;
 };
@@ -58,7 +66,7 @@ function Labels({
         _annotationCenterAngle + (rotationRadians || 0);
       return {
         ...label,
-        width: getTextLength(label.text) * fontWidth,
+        width: getTextLengthWithCollapseSpace(label.text) * fontWidth,
         //three points define the label:
         innerPoint: {
           ...polarToSpecialCartesian(
@@ -214,42 +222,26 @@ const DrawLabelGroup = withHover(function ({
 }) {
   let { text = "Unlabeled" } = label;
 
-  const textLength = getTextLength(text);
   let groupLabelXStart;
   //Add the number of unshown labels
   if (label.labelAndSublabels && label.labelAndSublabels.length > 1) {
-    // if (label.x > 0) {
     text = "+" + (label.labelAndSublabels.length - 1) + "," + text;
-    // } else {
-    //   text += ', +' + (label.labelAndSublabels.length - 1)
-    // }
   }
 
-  const labelLength = textLength * fontWidth;
-  const maxLabelLength = labelAndSublabels.reduce(function (
-    currentLength,
-    { text = "Unlabeled" }
-  ) {
-    const _textLength = getTextLength(text);
-    if (_textLength > currentLength) {
-      return _textLength;
-    }
-    return currentLength;
-  }, 0);
+  const labelLength = getTextLengthWithCollapseSpace(text) * fontWidth;
 
-  const maxLabelWidth = maxLabelLength * fontWidth;
   const labelOnLeft = label.angle > Math.PI;
   let labelXStart = label.x - (labelOnLeft ? labelLength : 0);
+  const maxDistance =
+    (outerRadius + 90) * Math.max(1, circularViewWidthVsHeightRatio);
   if (condenseOverflowingXLabels) {
     const distancePastBoundary =
       Math.abs(label.x + (labelOnLeft ? -labelLength : labelLength)) -
-      (outerRadius + 90) * Math.max(1, circularViewWidthVsHeightRatio);
-    // Math.max(outerRadius (circularViewWidthVsHeightRatio / 2 + 80));
+      maxDistance;
+
     if (distancePastBoundary > 0) {
       const numberOfCharsToChop =
         Math.ceil(distancePastBoundary / fontWidth) + 2;
-      //   if (numberOfCharsToChop > text.length) numberOfCharsToChop = text.length
-      //label overflows the boundaries!
       text = text.slice(0, -numberOfCharsToChop) + "..";
       groupLabelXStart =
         labelXStart +
@@ -261,17 +253,58 @@ const DrawLabelGroup = withHover(function ({
   const textYStart = label.y + dy / 2;
 
   //if label xStart or label xEnd don't fit within the canvas, we need to shorten the label..
-
   let content;
   const labelClass = ` veLabelText veLabel veCircularViewLabelText clickable ${label.color} `;
 
   if ((multipleLabels || groupLabelXStart !== undefined) && hovered) {
+    // Calculate the maximum label length for hovered status
+    const maxLabelLength = labelAndSublabels.reduce(function (
+      currentLength,
+      { text = "Unlabeled" }
+    ) {
+      const _textLength = getTextLengthWithCollapseSpace(text);
+      if (_textLength > currentLength) {
+        return _textLength;
+      }
+      return currentLength;
+    }, 0);
+    const maxLabelWidth = maxLabelLength * fontWidth;
+
+    labelXStart = label.x - (labelOnLeft ? maxLabelWidth : 0);
+    let distancePastBoundary =  Math.abs(label.x + (labelOnLeft ? -maxLabelWidth : maxLabelWidth)) - maxDistance;
+    let lableRectWidth = maxLabelWidth - 14;
+
+    if (maxLabelWidth > maxDistance * 2) {
+      labelXStart = -maxDistance;
+      lableRectWidth = maxDistance * 2 - 24;
+      distancePastBoundary = maxLabelWidth - maxDistance * 2;
+    } else if (distancePastBoundary > 0) {
+      labelXStart += (labelOnLeft ? distancePastBoundary : -distancePastBoundary);
+      distancePastBoundary = 0;
+    }
+
     //HOVERED: DRAW MULTIPLE LABELS IN A RECTANGLE
     window.isLabelGroupOpen = true;
     let hoveredLabel;
-    if (groupLabelXStart !== undefined) {
-      labelXStart = groupLabelXStart;
+
+    let truncatedLabelAndSublabels;
+    if (distancePastBoundary > 0) {
+      truncatedLabelAndSublabels = labelAndSublabels.map(lable => {
+        const labelWidth = getTextLengthWithCollapseSpace(lable.text) * fontWidth;
+        const truncatedText =
+          labelWidth >= lableRectWidth
+            ? lable.text.slice(
+                0,
+                -Math.ceil((labelWidth - lableRectWidth) / fontWidth) - 2
+              ) + ".."
+            : lable.text;
+        return {
+          ...lable,
+          text: truncatedText
+        };
+      });
     }
+
     labelAndSublabels.some(function (label) {
       if (label.id === hoveredId) {
         hoveredLabel = label;
@@ -317,7 +350,7 @@ const DrawLabelGroup = withHover(function ({
             // zIndex={10}
             x={labelXStart - 4}
             y={labelYStart - dy / 2}
-            width={maxLabelWidth + 24}
+            width={lableRectWidth + 24}
             height={labelGroupHeight + 4}
             fill="white"
             stroke="black"
@@ -331,24 +364,26 @@ const DrawLabelGroup = withHover(function ({
               fontStyle: label.fontStyle
             }}
           >
-            {labelAndSublabels.map(function (label, index) {
-              return (
-                <DrawGroupInnerLabel
-                  isSubLabel
-                  noRedux={noRedux}
-                  editorName={editorName}
-                  logHover
-                  key={"labelItem" + index}
-                  className={
-                    (label.className || "") +
-                    labelClass +
-                    " veDrawGroupInnerLabel"
-                  }
-                  id={label.id}
-                  {...{ labelXStart, label, fontWidth, index, dy }}
-                />
-              );
-            })}
+            {(truncatedLabelAndSublabels || labelAndSublabels).map(
+              function (label, index) {
+                return (
+                  <DrawGroupInnerLabel
+                    isSubLabel
+                    noRedux={noRedux}
+                    editorName={editorName}
+                    logHover
+                    key={"labelItem" + index}
+                    className={
+                      (label.className || "") +
+                      labelClass +
+                      " veDrawGroupInnerLabel"
+                    }
+                    id={label.id}
+                    {...{ labelXStart, label, fontWidth, index, dy }}
+                  />
+                );
+              }
+            )}
           </text>
         </g>
       </PutMyParentOnTop>
@@ -364,7 +399,7 @@ const DrawLabelGroup = withHover(function ({
         data-title={label.title || label.text}
         {...avoidOverlapWith}
         x={labelXStart}
-        textLength={getTextLength(text) * fontWidth}
+        textLength={getTextLengthWithCollapseSpace(text) * fontWidth}
         lengthAdjust="spacing"
         className={
           labelClass + label.className + (hovered ? " veAnnotationHovered" : "")
@@ -438,7 +473,7 @@ const DrawGroupInnerLabel = withHover(
         data-title={label.title}
         {...avoidOverlapWith}
         x={labelXStart}
-        textLength={getTextLength(label.text) * fontWidth}
+        textLength={getTextLengthWithCollapseSpace(label.text) * fontWidth}
         lengthAdjust="spacing"
         onClick={label.onClick}
         onDoubleClick={e => {

package/src/CreateAnnotationsPage.js

@@ -1,5 +1,6 @@
 import { compose } from "redux";
 import pluralize from "pluralize";
+
 import { formName } from "./constants";
 import { typeField } from "./helperComponents/PropertiesDialog/typeField";
 import {
@@ -8,7 +9,7 @@ import {
   withSelectTableRecords,
   withSelectedEntities
 } from "@teselagen/ui";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { hideDialog } from "./GlobalDialogUtils";
 import { startCase } from "lodash-es";
 import { tidyUpAnnotation } from "@teselagen/sequence-utils";

package/src/GlobalDialogUtils.js

@@ -1,4 +1,4 @@
-import { nanoid } from "nanoid";
+import shortid from "shortid";
 
 import { cloneDeep, startCase } from "lodash-es";
 import { convertRangeTo1Based } from "@teselagen/range-utils";
@@ -36,7 +36,7 @@ export function showDialog({
   dialogHolder.CustomModalComponent = ModalComponent;
   dialogHolder.props = props;
   dialogHolder.overrideName = overrideName;
-  dialogHolder.setUniqKeyToForceRerender(nanoid());
+  dialogHolder.setUniqKeyToForceRerender(shortid());
 }
 export function hideDialog() {
   delete dialogHolder.dialogType;

package/src/RowItem/Labels.js

@@ -8,6 +8,7 @@ import { reduce, values, startCase, filter, clamp } from "lodash-es";
 import { getRangeLength } from "@teselagen/range-utils";
 import { doesLabelFitInAnnotation } from "./utils";
 import getAnnotationNameAndStartStopString from "../utils/getAnnotationNameAndStartStopString";
+import { getTextLengthWithCollapseSpace } from "../CircularView/Labels";
 
 const BUFFER_WIDTH = 6; //labels shouldn't be less than 6px from eachother on the same line
 
@@ -98,11 +99,11 @@ function Labels(props) {
       annotation = annotationRange;
     }
     const annotationLength =
-      (
+    getTextLengthWithCollapseSpace(
         annotation.name ||
-        (annotation.restrictionEnzyme && annotation.restrictionEnzyme.name) ||
-        ""
-      ).length * textWidth;
+          (annotation.restrictionEnzyme && annotation.restrictionEnzyme.name) ||
+          ""
+      ) * textWidth;
     let { xStart, width } = getXStartAndWidthOfRowAnnotation(
       annotationRange,
       bpsPerRow,

package/src/ToolBar/alignmentTool.js

@@ -10,7 +10,7 @@ import {
 import { reduxForm, FieldArray } from "redux-form";
 import { anyToJson } from "@teselagen/bio-parsers";
 import { flatMap } from "lodash-es";
-import { nanoid } from "nanoid";
+import uniqid from "shortid";
 import { cloneDeep } from "lodash-es";
 import classNames from "classnames";
 
@@ -155,7 +155,7 @@ class AlignmentTool extends React.Component {
     }
 
     hideModal();
-    const alignmentId = nanoid();
+    const alignmentId = uniqid();
     // const alignmentIdMismatches = uniqid();
     createNewAlignment({
       id: alignmentId,

package/src/helperComponents/MergeFeaturesDialog/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { nanoid } from "nanoid";
+import uuid from "shortid";
 
 import { reduxForm } from "redux-form";
 
@@ -58,7 +58,7 @@ class MergeFeaturesDialog extends React.Component {
             upsertFeature(
               {
                 ...feat1,
-                id: nanoid(),
+                id: uuid(),
                 start: start - 1,
                 end: end - 1,
                 name