@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/ove.css

@@ -9676,7 +9676,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ReactTable {
@@ -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.28",
+  "version": "0.7.30-beta.1",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -11,11 +11,11 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@teselagen/sequence-utils": "0.3.31",
-    "@teselagen/range-utils": "0.3.13",
-    "@teselagen/ui": "0.8.6",
+    "@teselagen/sequence-utils": "0.3.32-beta.1",
+    "@teselagen/range-utils": "0.3.14-beta.1",
+    "@teselagen/ui": "0.8.6-beta.24",
     "@teselagen/file-utils": "0.3.20",
-    "@teselagen/bio-parsers": "0.4.28",
+    "@teselagen/bio-parsers": "0.4.29-beta.1",
     "@blueprintjs/core": "3.54.0",
     "@hello-pangea/dnd": "16.2.0",
     "@risingstack/react-easy-state": "^6.3.0",
@@ -62,10 +62,6 @@
     "biomsa": "^0.2.4",
     "shortid": "2.2.16",
     "@use-gesture/react": "10.3.0",
-    "vite": "^5.2.11",
-    "@vitejs/plugin-react": "^4.3.0",
-    "vite-plugin-libcss": "^1.1.1",
-    "vite-tsconfig-paths": "^4.3.2",
     "@playwright/test": "^1.44.1"
   },
   "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/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/src/AutoAnnotate.js

@@ -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";
 

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/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/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/PropertiesDialog/TranslationProperties.js

@@ -45,7 +45,7 @@ class TranslationProperties extends React.Component {
       let aaString = "";
       for (let i = 0; i < translation.aminoAcids.length; i++) {
         // sometimes the `translation.aminoAcids[i].aminoAcid` is null
-        aaString += translation.aminoAcids[i].aminoAcid?.value || '';
+        aaString += translation.aminoAcids[i].aminoAcid?.value || "";
       }
       return {
         ...translation,

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/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
 );