@teselagen/ove 0.7.29 → 0.7.30-beta.2

package/ove.css

@@ -10689,6 +10689,14 @@ li.bp3-menu-divider:last-child {
   top: -2px;
   position: absolute;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+}
+
+.veMismatchLayer {
+  z-index: 11; /* Ensure mismatch layers appear on top of normal selection layer */
 }
 
 .veCaret {
@@ -11847,9 +11855,14 @@ path.partWithSelectedTag {
   border-right-color: yellow !important;
 }
 .veSearchLayerActive {
-  stroke: red !important;
-  fill: red !important;
-  background: red !important;
+  stroke: green !important;
+  fill: green !important;
+  background: green !important;
+}
+.veMismatchedBase {
+  color: red !important;
+  font-weight: bold;
+  background-color: rgba(255, 0, 0, 0.3);
 }
 .notCaret.veSearchLayerBottomStrand:after {
   content: "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.29",
+  "version": "0.7.30-beta.2",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -11,19 +11,22 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@teselagen/sequence-utils": "0.3.31",
-    "@teselagen/range-utils": "0.3.13",
-    "@teselagen/ui": "0.8.6-beta.23",
-    "@teselagen/file-utils": "0.3.20",
-    "@teselagen/bio-parsers": "0.4.28",
     "@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/file-utils": "0.3.20",
+    "@teselagen/range-utils": "0.3.14-beta.1",
     "@teselagen/react-list": "0.8.18",
+    "@teselagen/sequence-utils": "0.3.32-beta.2",
+    "@teselagen/ui": "0.8.6-beta.27",
+    "@use-gesture/react": "10.3.0",
+    "biomsa": "^0.2.4",
     "classnames": "^2.3.2",
-    "color": "^3.2.1",
+    "color": "^5.0.0",
     "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",
@@ -58,11 +61,11 @@
     "to-regex-range": "5.0.1",
     "use-debounce": "^8.0.4",
     "validate.io-nonnegative-integer-array": "^1.0.1",
-    "cypress-real-events": "^1.13.0",
-    "biomsa": "^0.2.4",
-    "shortid": "2.2.16",
-    "@use-gesture/react": "10.3.0",
-    "@playwright/test": "^1.44.1"
+    "nanoid": "5.1.5"
+  },
+  "volta": {
+    "node": "18.18.0",
+    "yarn": "1.22.21"
   },
   "license": "MIT"
 }

package/redux/findTool.d.ts

@@ -4,6 +4,7 @@ export const toggleIsInline: import('redux-act').ComplexActionCreator1<any, any,
 export const updateSearchText: import('redux-act').ComplexActionCreator1<any, any, any>;
 export const updateAmbiguousOrLiteral: import('redux-act').ComplexActionCreator1<any, any, any>;
 export const updateDnaOrAA: import('redux-act').ComplexActionCreator1<any, any, any>;
+export const updateMismatchesAllowed: import('redux-act').ComplexActionCreator1<any, any, any>;
 export const updateMatchNumber: import('redux-act').ComplexActionCreator1<any, any, any>;
 declare const _default: {
     (newState: {} | undefined, action: any): any;

package/selectors/orfsSelector.d.ts

@@ -7,7 +7,7 @@ declare const _default: ((state: any) => {
     forward: any;
     annotationTypePlural: string;
     isOrf: boolean;
-    id: any;
+    id: string;
 }[]) & 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: any;
+    id: string;
 }[], {
     clearCache: () => void;
 }> & {

package/selectors/searchLayersSelector.d.ts

@@ -1,4 +1,4 @@
-declare const _default: ((state: any) => any[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any, args_4: any, args_5: any, args_6: any, args_7: any) => any[], {
+declare const _default: ((state: any) => any[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any, args_4: any, args_5: any, args_6: any, args_7: any, args_8: any) => any[], {
     clearCache: () => void;
 }> & {
     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: any;
+    id: string;
 }[], 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/AutoAnnotate.js

@@ -4,7 +4,7 @@
 import { unparse } from "papaparse";
 import pluralize from "pluralize";
 import { SubmissionError, reduxForm } from "redux-form";
-import shortid from "shortid";
+import { nanoid } from "nanoid";
 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 { useEffect, useState } from "react";
+import React, { 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 = shortid();
+              const id = nanoid();
               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: shortid()
+                    id: nanoid()
                   };
                   toRet.color =
                     toRet.color || getFeatureToColorMap()[toRet.type];

package/src/CreateAnnotationsPage.js

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

package/src/Editor/style.css

@@ -89,9 +89,14 @@
   border-right-color: yellow !important;
 }
 .veSearchLayerActive {
-  stroke: red !important;
-  fill: red !important;
-  background: red !important;
+  stroke: green !important;
+  fill: green !important;
+  background: green !important;
+}
+.veMismatchedBase {
+  color: red !important;
+  font-weight: bold;
+  background-color: rgba(255, 0, 0, 0.3);
 }
 .notCaret.veSearchLayerBottomStrand:after {
   content: "";

package/src/FindBar/index.js

@@ -6,7 +6,8 @@ import {
   Popover,
   Position,
   TextArea,
-  Tooltip
+  Tooltip,
+  NumericInput
 } from "@blueprintjs/core";
 import withEditorProps from "../withEditorProps";
 import { MAX_MATCHES_DISPLAYED } from "../constants/findToolConstants";
@@ -50,6 +51,7 @@ export class FindBar extends React.Component {
       annotationVisibilityShow,
       updateAmbiguousOrLiteral,
       updateDnaOrAA,
+      updateMismatchesAllowed,
       updateMatchNumber: _updateMatchNumber,
       selectionLayerUpdate,
       annotationSearchMatches,
@@ -63,6 +65,7 @@ export class FindBar extends React.Component {
       ambiguousOrLiteral,
       matchesTotal = 0,
       matchNumber = 0,
+      mismatchesAllowed = 0,
       isInline
     } = findTool;
     const updateMatchNumber = (...args) => {
@@ -139,6 +142,33 @@ export class FindBar extends React.Component {
           </div>
         </InfoHelper>
       </div>,
+      <div
+        key="mismatchesAllowed"
+        style={{ marginTop: "8px", display: "flex", alignItems: "center" }}
+      >
+        <label style={{ marginRight: "8px" }}>Mismatches Allowed:</label>
+        <NumericInput
+          min={0}
+          max={10}
+          className={"tg-mismatches-allowed-input"}
+          style={{ width: "60px" }}
+          value={mismatchesAllowed}
+          disabled={dnaOrAA !== "DNA" || ambiguousOrLiteral !== "LITERAL"}
+          onValueChange={value => {
+            const newValue = Math.max(0, parseInt(value, 10) || 0);
+            updateMismatchesAllowed(newValue);
+          }}
+        />
+        <InfoHelper style={{ marginLeft: 10 }}>
+          <div>
+            Number of mismatches allowed when searching DNA sequences with
+            literal matching.
+            <br />
+            <br />
+            Higher values may slow down search performance.
+          </div>
+        </InfoHelper>
+      </div>,
       <Switch
         key="highlightall"
         checked={highlightAll}
@@ -152,6 +182,7 @@ export class FindBar extends React.Component {
           Highlight All
         </Tooltip>
       </Switch>,
+
       ...(isMobile()
         ? []
         : [

package/src/GlobalDialogUtils.js

@@ -1,4 +1,4 @@
-import shortid from "shortid";
+import { nanoid } from "nanoid";
 
 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(shortid());
+  dialogHolder.setUniqKeyToForceRerender(nanoid());
 }
 export function hideDialog() {
   delete dialogHolder.dialogType;

package/src/RowItem/SelectionLayer/index.js

@@ -149,7 +149,8 @@ function SelectionLayer(props) {
                 )
               ];
             }
-            return [
+            // Create base selection layer element
+            const selectionElement = (
               <div
                 onClick={_onClick}
                 title={selectionMessage}
@@ -168,9 +169,46 @@ function SelectionLayer(props) {
                   background: color || topLevelColor,
                   height
                 }}
-              />,
-              ...caretSvgs
-            ];
+              ></div>
+            );
+
+            // Generate mismatch sub-regions if mismatchPositions exist
+            let mismatchElements = [];
+            if (
+              selectionLayer.mismatchPositions &&
+              selectionLayer.mismatchPositions.length > 0
+            ) {
+              // Calculate relative mismatch positions within this overlap
+              const relativeToOverlap = selectionLayer.mismatchPositions
+                .filter(pos => {
+                  // Adjust position based on overlap's relation to the original selection layer
+                  const absPos = pos + selectionLayer.start;
+                  return absPos >= overlap.start && absPos <= overlap.end;
+                })
+                .map(pos => {
+                  // Convert to position relative to this overlap segment
+                  return pos - (overlap.start - selectionLayer.start);
+                });
+
+              // Create a red highlight for each mismatch position
+              mismatchElements = relativeToOverlap.map((pos, i) => (
+                <div
+                  key={`${key}-mismatch-${i}`}
+                  className="veSelectionLayer veMismatchLayer notCaret"
+                  style={{
+                    width: charWidth,
+                    left: leftMargin + xStart + pos * charWidth,
+                    top: 0,
+                    height: height || "100%",
+                    background: "red",
+                    position: "absolute",
+                    opacity: 0.5
+                  }}
+                ></div>
+              ));
+            }
+
+            return [selectionElement, ...mismatchElements, ...caretSvgs];
           });
         } else {
           return null;

package/src/RowItem/SelectionLayer/style.css

@@ -6,6 +6,14 @@
   top: -2px;
   position: absolute;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+}
+
+.veMismatchLayer {
+  z-index: 11; /* Ensure mismatch layers appear on top of normal selection layer */
 }
 
 .veCaret {

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 uniqid from "shortid";
+import { nanoid } from "nanoid";
 import { cloneDeep } from "lodash-es";
 import classNames from "classnames";
 
@@ -155,7 +155,7 @@ class AlignmentTool extends React.Component {
     }
 
     hideModal();
-    const alignmentId = uniqid();
+    const alignmentId = nanoid();
     // const alignmentIdMismatches = uniqid();
     createNewAlignment({
       id: alignmentId,

package/src/fileUtils.js

@@ -0,0 +1,103 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import { parse } from "papaparse";
+
+export const allowedCsvFileTypes = [".csv", ".txt", ".xlsx"];
+
+export const isZipFile = file => {
+  const type = file.mimetype || file.type;
+  return type === "application/zip" || type === "application/x-zip-compressed";
+};
+
+export const getExt = file => file.name.split(".").pop();
+export const isExcelFile = file => getExt(file) === "xlsx";
+export const isCsvFile = file => getExt(file) === "csv";
+export const isTextFile = file => ["text", "txt"].includes(getExt(file));
+
+const defaultCsvParserOptions = {
+  header: true,
+  skipEmptyLines: "greedy",
+  trimHeaders: true
+  // delimiter: ","
+};
+
+export const parseCsvFile = (csvFile, parserOptions = {}) => {
+  return new Promise((resolve, reject) => {
+    parse(csvFile.originFileObj, {
+      ...defaultCsvParserOptions,
+      complete: results => {
+        if (results && results.errors && results.errors.length) {
+          return reject("Error in csv: " + JSON.stringify(results.errors));
+        }
+        resolve(results);
+      },
+      error: error => {
+        reject(error);
+      },
+      ...parserOptions
+    });
+  });
+};
+
+export const parseCsvString = (csvString, parserOptions = {}) => {
+  return parse(csvString, { ...defaultCsvParserOptions, ...parserOptions });
+};
+
+export const cleanCommaSeparatedCell = cellData =>
+  (cellData || "")
+    .split(",")
+    .map(n => n.trim())
+    .filter(n => n);
+
+/**
+ * Because the csv rows might not have the same header keys in some cases (extended properties)
+ * this function will make sure that each row will have all headers so that the export
+ * does not drop fields
+ * @param {*} rows
+ */
+export const cleanCsvExport = rows => {
+  const allHeaders = [];
+  rows.forEach(row => {
+    Object.keys(row).forEach(header => {
+      if (!allHeaders.includes(header)) {
+        allHeaders.push(header);
+      }
+    });
+  });
+  rows.forEach(row => {
+    allHeaders.forEach(header => {
+      row[header] = row[header] || "";
+    });
+  });
+  return rows;
+};
+
+export const validateCSVRequiredHeaders = (
+  fields,
+  requiredHeaders,
+  filename
+) => {
+  const missingRequiredHeaders = requiredHeaders.filter(field => {
+    return !fields.includes(field);
+  });
+  if (missingRequiredHeaders.length) {
+    const name = filename ? `The file ${filename}` : "CSV file";
+    return `${name} is missing required headers. (${missingRequiredHeaders.join(
+      ", "
+    )})`;
+  }
+};
+
+export const validateCSVRow = (row, requiredHeaders, index) => {
+  const missingRequiredFields = requiredHeaders.filter(field => !row[field]);
+  if (missingRequiredFields.length) {
+    if (missingRequiredFields.length === 1) {
+      return `Row ${index + 1} is missing the required field "${
+        missingRequiredFields[0]
+      }"`;
+    } else {
+      return `Row ${
+        index + 1
+      } is missing these required fields: ${missingRequiredFields.join(", ")}`;
+    }
+  }
+};

package/src/helperComponents/MergeFeaturesDialog/index.js

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

package/src/redux/alignments.js

@@ -3,7 +3,7 @@ import {
   condensePairwiseAlignmentDifferences
 } from "@teselagen/sequence-utils";
 import { convertBasePosTraceToPerBpTrace } from "@teselagen/bio-parsers";
-import shortid from "shortid";
+import { nanoid } from "nanoid";
 
 import addDashesForMatchStartAndEndForTracks from "./utils/addDashesForMatchStartAndEndForTracks";
 
@@ -149,7 +149,7 @@ export default (state = {}, { payload = {}, type }) => {
   if (type === "UPSERT_ALIGNMENT_RUN") {
     const { id } = payload;
     const payloadToUse = {
-      stateTrackingId: state[id]?.stateTrackingId ? shortid() : "initialLoadId",
+      stateTrackingId: state[id]?.stateTrackingId ? nanoid() : "initialLoadId",
       alignmentType: state[id]?.alignmentType,
       ...payload,
       //assign default visibilities

package/src/redux/findTool.js

@@ -13,6 +13,7 @@ export const updateAmbiguousOrLiteral = createAction(
   "updateAmbiguousOrLiteral"
 );
 export const updateDnaOrAA = createAction("updateDnaOrAA");
+export const updateMismatchesAllowed = createAction("updateMismatchesAllowed");
 export const updateMatchNumber = createAction("updateMatchNumber");
 
 // ------------------------------------
@@ -53,6 +54,13 @@ export default createMergedDefaultStateReducer(
         dnaOrAA: payload
       };
     },
+    [updateMismatchesAllowed]: (state, payload) => {
+      return {
+        ...state,
+        matchNumber: 0,
+        mismatchesAllowed: payload
+      };
+    },
     [updateSearchText]: (state, payload) => {
       return {
         ...state,
@@ -74,6 +82,7 @@ export default createMergedDefaultStateReducer(
     dnaOrAA: "DNA",
     ambiguousOrLiteral: "LITERAL",
     highlightAll: false,
+    mismatchesAllowed: 0,
     matchNumber: 0
   }
 );

package/src/redux/sequenceData/index.js

@@ -1,6 +1,6 @@
 import deepEqual from "deep-equal";
 import { tidyUpSequenceData } from "@teselagen/sequence-utils";
-import uuid from "shortid";
+import { nanoid } from "nanoid";
 
 import createAction from "../utils/createMetaAction";
 import features from "./features";
@@ -75,7 +75,7 @@ export default function (state, action) {
     return {
       // ...cloneDeep(newState),
       ...newState,
-      stateTrackingId: newState.stateTrackingId ? uuid() : "initialLoadId"
+      stateTrackingId: newState.stateTrackingId ? nanoid() : "initialLoadId"
     };
   }
 }

package/src/redux/sequenceData/upsertDeleteActionGenerator.js

@@ -1,5 +1,5 @@
 import omit from "lodash/omit";
-import uuid from "shortid";
+import { nanoid } from "nanoid";
 
 // ------------------------------------
 // Reducer
@@ -10,7 +10,7 @@ export default function upsertDeleteActionGenerator(
 ) {
   return {
     [upsertAction]: (state, payload) => {
-      const idToUse = payload.id || uuid();
+      const idToUse = payload.id || nanoid();
       return {
         ...state,
         [idToUse]: { ...(state[idToUse] || {}), ...payload, id: idToUse }

package/src/selectors/cutsitesSelector.js

@@ -1,4 +1,4 @@
-import shortid from "shortid";
+import { nanoid } from "nanoid";
 import circularSelector from "./circularSelector";
 import sequenceSelector from "./sequenceSelector";
 import restrictionEnzymesSelector from "./restrictionEnzymesSelector";
@@ -20,7 +20,7 @@ function cutsitesSelector(sequence, circular, enzymeList, cutsiteLabelColors) {
     const cutsitesForEnzyme = cutsitesByName[enzymeName];
     cutsitesForEnzyme.forEach(function (cutsite) {
       const numberOfCuts = cutsitesByName[enzymeName].length;
-      const uniqueId = shortid();
+      const uniqueId = nanoid();
       cutsite.id = uniqueId;
       cutsite.numberOfCuts = numberOfCuts;
       cutsite.annotationType = "cutsite";

package/src/selectors/searchLayersSelector.js

@@ -1,4 +1,7 @@
-import { findSequenceMatches } from "@teselagen/sequence-utils";
+import {
+  findSequenceMatches,
+  findApproxMatches
+} from "@teselagen/sequence-utils";
 import sequenceSelector from "./sequenceSelector";
 import { createSelector } from "reselect";
 import circularSelector from "./circularSelector";
@@ -11,7 +14,8 @@ function searchLayersSelector(
   ambiguousOrLiteral,
   dnaOrAA,
   isProtein,
-  proteinSequence
+  proteinSequence,
+  mismatchesAllowed
 ) {
   if (!searchString || !isOpen) {
     return [];
@@ -40,6 +44,39 @@ function searchLayersSelector(
           end: end * 3 + 2
         }));
   }
+
+  // Use findApproxMatches when literal matching DNA with mismatches allowed
+  if (
+    dnaOrAA === "DNA" &&
+    ambiguousOrLiteral === "LITERAL" &&
+    mismatchesAllowed > 0
+  ) {
+    const approxMatches = findApproxMatches(
+      searchString,
+      sequence,
+      mismatchesAllowed,
+      isCircular
+    );
+    // Convert approximate matches to the format expected by the application
+    const matches = approxMatches
+      .map(match => ({
+        start: match.index,
+        end: match.index + match.match.length - 1,
+        matchedString: match.match,
+        mismatchPositions: match.mismatchPositions,
+        numMismatches: match.numMismatches,
+        isSearchLayer: true,
+        forward: true
+      }))
+      .sort((a, b) => a.start - b.start);
+
+    return matches.map(match => ({
+      ...match,
+      className: "veSearchLayer"
+    }));
+  }
+
+  // Use regular findSequenceMatches for all other cases
   const matches = findSequenceMatches(sequence, searchString, {
     isCircular,
     isAmbiguous: ambiguousOrLiteral === "AMBIGUOUS",
@@ -67,5 +104,6 @@ export default createSelector(
   state => state.findTool && state.findTool.dnaOrAA,
   state => state.sequenceData.isProtein,
   state => state.sequenceData.proteinSequence,
+  state => state.findTool && state.findTool.mismatchesAllowed,
   searchLayersSelector
 );