@teselagen/ove 0.7.29 → 0.7.30-beta.1

package/index.cjs.js

@@ -16010,6 +16010,7 @@ var itemSizeEstimator = /* @__PURE__ */ __name(function itemSizeEstimator2() {
   return 41.36;
 }, "itemSizeEstimator");
 var ReactTableDefaults = defaultProps$1;
+var VIRTUALIZE_CUTOFF_LENGTH = 200;
 var ReactTable = function(_Methods) {
   _inherits$8(ReactTable2, _Methods);
   function ReactTable2(props) {
@@ -16595,7 +16596,7 @@ var ReactTable = function(_Methods) {
                   minWidth: rowMinWidth + "px"
                 })
               }, tBodyProps.rest),
-              pageRows.length < 200 ? pageRows.map(function(d2, i) {
+              _this2.props.noVirtual || pageRows.length < VIRTUALIZE_CUTOFF_LENGTH ? pageRows.map(function(d2, i) {
                 return makePageRow(d2, i);
               }) : React.createElement(ReactList, {
                 type: "variable",
@@ -16699,7 +16700,7 @@ const getIdOrCodeOrIndex = /* @__PURE__ */ __name((record, rowIndex) => {
 const getSelectedRowsFromEntities = /* @__PURE__ */ __name((entities, idMap) => {
   if (!idMap) return [];
   return entities.reduce((acc, entity, i) => {
-    return idMap[getIdOrCodeOrIndex(entity, i)] ? acc.concat(i) : acc;
+    return idMap[getIdOrCodeOrIndex(entity, i)] ? acc.concat([i]) : acc;
   }, []);
 }, "getSelectedRowsFromEntities");
 const removeCleanRows = /* @__PURE__ */ __name((entities, cellValidation) => {
@@ -16818,9 +16819,9 @@ const stripNumberAtEnd = /* @__PURE__ */ __name((str) => {
   var _a2;
   return (_a2 = str == null ? void 0 : str.replace) == null ? void 0 : _a2.call(str, getNumberStrAtEnd(str), "");
 }, "stripNumberAtEnd");
-const getAllRows = /* @__PURE__ */ __name((e) => {
-  const el = e.target.querySelector(".data-table-container") ? e.target.querySelector(".data-table-container") : e.target.closest(".data-table-container");
-  const allRowEls = el.querySelectorAll(".rt-tr");
+const getAllRows = /* @__PURE__ */ __name((tableRef) => {
+  var _a2, _b2;
+  const allRowEls = (_b2 = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b2.querySelectorAll(".rt-tr");
   if (!allRowEls || !allRowEls.length) {
     return;
   }
@@ -17087,14 +17088,14 @@ const handleCopyRows = /* @__PURE__ */ __name((rowElsToCopy, { specificColumn, o
     handleCopyHelper(textToCopy, jsonToCopy, onFinishMsg || "Row Copied");
   }
 }, "handleCopyRows");
-const handleCopyColumn = /* @__PURE__ */ __name((e, cellWrapper, selectedRecords) => {
+const handleCopyColumn = /* @__PURE__ */ __name((tableRef, cellWrapper, selectedRecords) => {
   const specificColumn = cellWrapper.getAttribute("data-test");
-  let rowElsToCopy = getAllRows(e);
+  let rowElsToCopy = getAllRows(tableRef);
   if (!rowElsToCopy) return;
   if (selectedRecords) {
-    const ids2 = selectedRecords.map((e2) => {
+    const ids2 = selectedRecords.map((e) => {
       var _a2;
-      return (_a2 = getIdOrCodeOrIndex(e2)) == null ? void 0 : _a2.toString();
+      return (_a2 = getIdOrCodeOrIndex(e)) == null ? void 0 : _a2.toString();
     });
     rowElsToCopy = Array.from(rowElsToCopy).filter((rowEl) => {
       var _a2;
@@ -17127,9 +17128,9 @@ const isBottomRightCornerOfRectangle = /* @__PURE__ */ __name(({
   const isBottomRight = i === lastRowIndex && cellIndex === lastCellIndex;
   return isBottomRight;
 }, "isBottomRightCornerOfRectangle");
-const handleCopyTable = /* @__PURE__ */ __name((e, opts2) => {
+const handleCopyTable = /* @__PURE__ */ __name((tableRef, opts2) => {
   try {
-    const allRowEls = getAllRows(e);
+    const allRowEls = getAllRows(tableRef);
     if (!allRowEls) return;
     handleCopyRows(allRowEls, __spreadProps(__spreadValues({}, opts2), {
       onFinishMsg: "Table Copied"
@@ -17166,13 +17167,15 @@ const useTableEntities = /* @__PURE__ */ __name((tableFormName) => {
     },
     [dispatch, tableFormName]
   );
-  const { allOrderedEntities, selectedEntities } = reactRedux.useSelector((state2) => {
-    var _a2, _b2, _c, _d, _e, _f;
-    return {
-      allOrderedEntities: (_c = (_b2 = (_a2 = state2.form) == null ? void 0 : _a2[tableFormName]) == null ? void 0 : _b2.values) == null ? void 0 : _c.allOrderedEntities,
-      selectedEntities: (_f = (_e = (_d = state2.form) == null ? void 0 : _d[tableFormName]) == null ? void 0 : _e.values) == null ? void 0 : _f.reduxFormSelectedEntityIdMap
-    };
-  });
+  const { allOrderedEntities, selectedEntities } = reactRedux.useSelector(
+    (state2) => {
+      var _a2, _b2, _c, _d, _e, _f;
+      return {
+        allOrderedEntities: (_c = (_b2 = (_a2 = state2.form) == null ? void 0 : _a2[tableFormName]) == null ? void 0 : _b2.values) == null ? void 0 : _c.allOrderedEntities,
+        selectedEntities: (_f = (_e = (_d = state2.form) == null ? void 0 : _d[tableFormName]) == null ? void 0 : _e.values) == null ? void 0 : _f.reduxFormSelectedEntityIdMap
+      };
+    }
+  );
   return { selectTableEntities, allOrderedEntities, selectedEntities };
 }, "useTableEntities");
 const useDeepEqualMemo = /* @__PURE__ */ __name((value) => {
@@ -36957,7 +36960,7 @@ const multiViewColumn = __spreadProps(__spreadValues({}, viewColumn), {
     ));
   }, "render")
 });
-function convertSchema(schema2) {
+const convertSchema = /* @__PURE__ */ __name((schema2) => {
   let schemaToUse = schema2;
   if (!schemaToUse.fields && Array.isArray(schema2)) {
     schemaToUse = {
@@ -36966,35 +36969,26 @@ function convertSchema(schema2) {
   }
   schemaToUse = __spreadValues({}, schemaToUse);
   schemaToUse.fields = schemaToUse.fields.map((field, i) => {
-    let fieldToUse = field;
     if (typeof field === "string") {
-      fieldToUse = {
+      return {
         displayName: startCase(camelCase(field)),
         path: field,
         type: "string"
       };
-    } else if (!field.type) {
-      fieldToUse = __spreadProps(__spreadValues({}, field), {
-        type: "string"
-      });
-    }
-    if (!fieldToUse.displayName) {
-      fieldToUse = __spreadProps(__spreadValues({}, fieldToUse), {
-        displayName: startCase(camelCase(fieldToUse.path))
-      });
-    }
-    if (!fieldToUse.path) {
-      fieldToUse = __spreadProps(__spreadValues({}, fieldToUse), {
-        filterDisabled: true,
-        sortDisabled: true,
-        path: "fake-path" + i
-      });
+    } else {
+      const fieldToUse = __spreadValues({}, field);
+      fieldToUse.type = fieldToUse.type || "string";
+      fieldToUse.displayName = fieldToUse.displayName || startCase(camelCase(fieldToUse.path || ""));
+      if (!fieldToUse.path) {
+        fieldToUse.filterDisabled = true;
+        fieldToUse.sortDisabled = true;
+        fieldToUse.path = "fake-path" + i;
+      }
+      return fieldToUse;
     }
-    return fieldToUse;
   });
   return schemaToUse;
-}
-__name(convertSchema, "convertSchema");
+}, "convertSchema");
 const TableFormTrackerContext = React.createContext({
   formNames: [],
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -56029,6 +56023,7 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
   );
   const tableRef = React.useRef();
   const alreadySelected = React.useRef(false);
+  const [noVirtual, setNoVirtual] = React.useState(false);
   const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = React.useState(false);
   const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = React.useState({
     currentVersion: 0
@@ -56870,76 +56865,94 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
     updateEntitiesHelper,
     updateValidation
   ]);
-  const handleCopySelectedCells = React.useCallback(
-    (e) => {
-      if (isEmpty$1(selectedCells)) return;
-      const pathToIndex = getFieldPathToIndex(schema2);
-      const entityIdToEntity = getEntityIdToEntity(entities);
-      const selectionGrid = [];
-      let firstRowIndex;
-      let firstCellIndex;
-      Object.keys(selectedCells).forEach((key) => {
-        const [rowId, path2] = key.split(":");
-        const eInfo = entityIdToEntity[rowId];
-        if (eInfo) {
-          if (firstRowIndex === void 0 || eInfo.i < firstRowIndex) {
-            firstRowIndex = eInfo.i;
-          }
-          if (!selectionGrid[eInfo.i]) {
-            selectionGrid[eInfo.i] = [];
-          }
-          const cellIndex = pathToIndex[path2];
-          if (firstCellIndex === void 0 || cellIndex < firstCellIndex) {
-            firstCellIndex = cellIndex;
-          }
-          selectionGrid[eInfo.i][cellIndex] = true;
-        }
-      });
-      if (firstRowIndex === void 0) return;
-      const allRows = getAllRows(e);
-      let fullCellText = "";
-      const fullJson = [];
-      times(selectionGrid.length, (i) => {
-        const row = selectionGrid[i];
-        if (fullCellText) {
-          fullCellText += "\n";
+  const waitUntilAllRowsAreRendered = React.useCallback(() => {
+    return new Promise((resolve) => {
+      const interval = setInterval(() => {
+        var _a3, _b2;
+        const allRowEls = (_b2 = (_a3 = tableRef.current) == null ? void 0 : _a3.tableRef) == null ? void 0 : _b2.querySelectorAll(".rt-tr-group");
+        if ((allRowEls == null ? void 0 : allRowEls.length) === entities.length) {
+          clearInterval(interval);
+          resolve();
         }
-        if (!row) {
-          return;
-        } else {
-          const jsonRow = [];
-          let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
-          rowCopyText = rowCopyText.split("	");
-          times(row.length, (i2) => {
-            const cell = row[i2];
-            if (cell) {
-              fullCellText += rowCopyText[i2];
-              jsonRow.push(json[i2]);
-            }
-            if (i2 !== row.length - 1 && i2 >= firstCellIndex)
-              fullCellText += "	";
-          });
-          fullJson.push(jsonRow);
+      }, 50);
+    });
+  }, []);
+  const handleCopySelectedCells = React.useCallback(() => __async(exports, null, function* () {
+    if (isEmpty$1(selectedCells)) return;
+    if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+      setNoVirtual(true);
+      yield waitUntilAllRowsAreRendered();
+    }
+    const pathToIndex = getFieldPathToIndex(schema2);
+    const entityIdToEntity = getEntityIdToEntity(entities);
+    const selectionGrid = [];
+    let firstRowIndex;
+    let firstCellIndex;
+    Object.keys(selectedCells).forEach((key) => {
+      const [rowId, path2] = key.split(":");
+      const eInfo = entityIdToEntity[rowId];
+      if (eInfo) {
+        if (firstRowIndex === void 0 || eInfo.i < firstRowIndex) {
+          firstRowIndex = eInfo.i;
+        }
+        if (!selectionGrid[eInfo.i]) {
+          selectionGrid[eInfo.i] = [];
+        }
+        const cellIndex = pathToIndex[path2];
+        if (firstCellIndex === void 0 || cellIndex < firstCellIndex) {
+          firstCellIndex = cellIndex;
         }
-      });
-      if (!fullCellText) return window.toastr.warning("No text to copy");
-      handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
-    },
-    [entities, selectedCells, schema2]
-  );
+        selectionGrid[eInfo.i][cellIndex] = true;
+      }
+    });
+    if (firstRowIndex === void 0) return;
+    const allRows = getAllRows(tableRef);
+    let fullCellText = "";
+    const fullJson = [];
+    times(selectionGrid.length, (i) => {
+      const row = selectionGrid[i];
+      if (fullCellText) {
+        fullCellText += "\n";
+      }
+      if (!row) {
+        return;
+      } else {
+        const jsonRow = [];
+        let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
+        rowCopyText = rowCopyText.split("	");
+        times(row.length, (i2) => {
+          const cell = row[i2];
+          if (cell) {
+            fullCellText += rowCopyText[i2];
+            jsonRow.push(json[i2]);
+          }
+          if (i2 !== row.length - 1 && i2 >= firstCellIndex) fullCellText += "	";
+        });
+        fullJson.push(jsonRow);
+      }
+    });
+    if (!fullCellText) return window.toastr.warning("No text to copy");
+    handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
+    setNoVirtual(false);
+  }), [entities, selectedCells, schema2, waitUntilAllRowsAreRendered]);
   const handleCopySelectedRows = React.useCallback(
-    (selectedRecords, e) => {
-      const idToIndex = entities.reduce((acc, e2, i) => {
-        acc[e2.id || e2.code] = i;
+    (selectedRecords) => __async(exports, null, function* () {
+      if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+        setNoVirtual(true);
+        yield waitUntilAllRowsAreRendered();
+      }
+      const idToIndex = entities.reduce((acc, e, i) => {
+        acc[e.id || e.code] = i;
         return acc;
       }, {});
       const rowNumbersToCopy = selectedRecords.map((rec) => idToIndex[rec.id || rec.code] + 1).sort();
       if (!rowNumbersToCopy.length) return;
       rowNumbersToCopy.unshift(0);
       try {
-        const allRowEls = getAllRows(e);
+        const allRowEls = getAllRows(tableRef);
         if (!allRowEls) return;
         const rowEls = rowNumbersToCopy.map((i) => allRowEls[i]);
+        if (window.Cypress) window.Cypress.__copiedRowsLength = rowEls.length;
         handleCopyRows(rowEls, {
           onFinishMsg: "Selected rows copied"
         });
@@ -56947,8 +56960,9 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
         console.error(`error:`, error);
         window.toastr.error("Error copying rows.");
       }
-    },
-    [entities]
+      setNoVirtual(false);
+    }),
+    [entities, waitUntilAllRowsAreRendered]
   );
   const handleCopyHotkey = React.useCallback(
     (e) => {
@@ -57715,7 +57729,7 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
               {
                 key: "copyColumn",
                 onClick: /* @__PURE__ */ __name(() => {
-                  handleCopyColumn(e, cellWrapper);
+                  handleCopyColumn(tableRef, cellWrapper);
                 }, "onClick"),
                 text: "Column"
               }
@@ -57728,7 +57742,7 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
                 {
                   key: "copyColumnSelected",
                   onClick: /* @__PURE__ */ __name(() => {
-                    handleCopyColumn(e, cellWrapper, selectedRecords);
+                    handleCopyColumn(tableRef, cellWrapper, selectedRecords);
                   }, "onClick"),
                   text: "Column (Selected)"
                 }
@@ -57771,7 +57785,7 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
             {
               key: "copyFullTableRows",
               onClick: /* @__PURE__ */ __name(() => {
-                handleCopyTable(e);
+                handleCopyTable(tableRef);
               }, "onClick"),
               text: "Table"
             }
@@ -58308,6 +58322,7 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
       __spreadValues({
         data: filteredEnts,
         ref: tableRef,
+        noVirtual,
         className: classNames({
           isCellEditable,
           "tg-table-loading": isLoading,
@@ -58375,7 +58390,8 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
       resizePersist,
       resized,
       rowsToShow,
-      style2
+      style2,
+      noVirtual
     ]
   );
   return /* @__PURE__ */ React.createElement("div", { tabIndex: "1", onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, /* @__PURE__ */ React.createElement(
@@ -58658,8 +58674,8 @@ const DataTable = /* @__PURE__ */ __name((_u) => {
       ), /* @__PURE__ */ React.createElement(
         core.Button,
         {
-          onClick: /* @__PURE__ */ __name((e) => {
-            handleCopyTable(e, { isDownload: true });
+          onClick: /* @__PURE__ */ __name(() => {
+            handleCopyTable(tableRef, { isDownload: true });
           }, "onClick"),
           "data-tip": "Download Table as CSV",
           minimal: true,
@@ -77006,6 +77022,7 @@ const updateAmbiguousOrLiteral = createMetaAction(
   "updateAmbiguousOrLiteral"
 );
 const updateDnaOrAA = createMetaAction("updateDnaOrAA");
+const updateMismatchesAllowed = createMetaAction("updateMismatchesAllowed");
 const updateMatchNumber = createMetaAction("updateMatchNumber");
 const findTool = createMergedDefaultStateReducer(
   {
@@ -77037,6 +77054,12 @@ const findTool = createMergedDefaultStateReducer(
         dnaOrAA: payload
       });
     },
+    [updateMismatchesAllowed]: (state2, payload) => {
+      return __spreadProps(__spreadValues({}, state2), {
+        matchNumber: 0,
+        mismatchesAllowed: payload
+      });
+    },
     [updateSearchText]: (state2, payload) => {
       return __spreadProps(__spreadValues({}, state2), {
         matchNumber: 0,
@@ -77056,6 +77079,7 @@ const findTool = createMergedDefaultStateReducer(
     dnaOrAA: "DNA",
     ambiguousOrLiteral: "LITERAL",
     highlightAll: false,
+    mismatchesAllowed: 0,
     matchNumber: 0
   }
 );
@@ -77068,6 +77092,7 @@ const findTool$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   updateAmbiguousOrLiteral,
   updateDnaOrAA,
   updateMatchNumber,
+  updateMismatchesAllowed,
   updateSearchText
 }, Symbol.toStringTag, { value: "Module" }));
 const openToolbarItemUpdate = createMetaAction("openToolbarItemUpdate");
@@ -83903,6 +83928,36 @@ function addSizeIdName(frag, sequenceLength) {
   });
 }
 __name(addSizeIdName, "addSizeIdName");
+function findApproxMatches(searchSeq, targetSeq, maxMismatches, circular2 = false) {
+  const matches = [];
+  const lenA = searchSeq.length;
+  const lenB = targetSeq.length;
+  const targetSeqExtended = circular2 ? targetSeq + targetSeq.slice(0, lenA - 1) : targetSeq;
+  const limit = circular2 ? lenB : lenB - lenA + 1;
+  for (let i = 0; i < limit; i++) {
+    const window2 = targetSeqExtended.slice(i, i + lenA);
+    let mismatchCount = 0;
+    const mismatchPositions = [];
+    for (let j2 = 0; j2 < lenA; j2++) {
+      if (searchSeq[j2] !== window2[j2]) {
+        mismatchPositions.push(j2);
+        mismatchCount++;
+        if (mismatchCount > maxMismatches) break;
+      }
+    }
+    if (mismatchCount <= maxMismatches) {
+      matches.push({
+        index: i,
+        match: window2,
+        mismatchPositions,
+        numMismatches: mismatchPositions.length
+        // Keep for backwards compatibility
+      });
+    }
+  }
+  return matches;
+}
+__name(findApproxMatches, "findApproxMatches");
 var spliceString$1;
 var hasRequiredSpliceString;
 function requireSpliceString() {
@@ -106321,7 +106376,7 @@ function translationsRawSelector(sequenceData2) {
 }
 __name(translationsRawSelector, "translationsRawSelector");
 const translationsRawSelector$1 = createSelector(sequenceDataSelector, translationsRawSelector);
-function searchLayersSelector(sequence2, isCircular, isOpen, searchString, ambiguousOrLiteral, dnaOrAA, isProtein2, proteinSequence) {
+function searchLayersSelector(sequence2, isCircular, isOpen, searchString, ambiguousOrLiteral, dnaOrAA, isProtein2, proteinSequence, mismatchesAllowed) {
   if (!searchString || !isOpen) {
     return [];
   }
@@ -106349,6 +106404,26 @@ function searchLayersSelector(sequence2, isCircular, isOpen, searchString, ambig
       });
     });
   }
+  if (dnaOrAA === "DNA" && ambiguousOrLiteral === "LITERAL" && mismatchesAllowed > 0) {
+    const approxMatches = findApproxMatches(
+      searchString,
+      sequence2,
+      mismatchesAllowed,
+      isCircular
+    );
+    const matches2 = 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((a2, b3) => a2.start - b3.start);
+    return matches2.map((match) => __spreadProps(__spreadValues({}, match), {
+      className: "veSearchLayer"
+    }));
+  }
   const matches = findSequenceMatches(sequence2, searchString, {
     isCircular,
     isAmbiguous: ambiguousOrLiteral === "AMBIGUOUS",
@@ -106373,6 +106448,7 @@ const searchLayersSelector$1 = createSelector(
   (state2) => state2.findTool && state2.findTool.dnaOrAA,
   (state2) => state2.sequenceData.isProtein,
   (state2) => state2.sequenceData.proteinSequence,
+  (state2) => state2.findTool && state2.findTool.mismatchesAllowed,
   searchLayersSelector
 );
 const translationSearchMatchesSelector = createSelector(
@@ -117377,26 +117453,49 @@ function SelectionLayer$2(props) {
             )
           ];
         }
-        return [
-          /* @__PURE__ */ React.createElement(
+        const selectionElement = /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: _onClick,
+            title: selectionMessage,
+            onContextMenu: onSelectionContextMenu,
+            key,
+            className: classNameToPass + " veSelectionLayer veRowViewSelectionLayer notCaret " + (isTrueStart ? " isTrueStart " : "") + (isTrueEnd ? " isTrueEnd " : ""),
+            style: __spreadProps(__spreadValues({
+              width,
+              left: leftMargin + xStart
+            }, style2), {
+              background: color2 || topLevelColor,
+              height
+            })
+          }
+        );
+        let mismatchElements = [];
+        if (selectionLayer2.mismatchPositions && selectionLayer2.mismatchPositions.length > 0) {
+          const relativeToOverlap = selectionLayer2.mismatchPositions.filter((pos) => {
+            const absPos = pos + selectionLayer2.start;
+            return absPos >= overlap.start && absPos <= overlap.end;
+          }).map((pos) => {
+            return pos - (overlap.start - selectionLayer2.start);
+          });
+          mismatchElements = relativeToOverlap.map((pos, i) => /* @__PURE__ */ React.createElement(
             "div",
             {
-              onClick: _onClick,
-              title: selectionMessage,
-              onContextMenu: onSelectionContextMenu,
-              key,
-              className: classNameToPass + " veSelectionLayer veRowViewSelectionLayer notCaret " + (isTrueStart ? " isTrueStart " : "") + (isTrueEnd ? " isTrueEnd " : ""),
-              style: __spreadProps(__spreadValues({
-                width,
-                left: leftMargin + xStart
-              }, style2), {
-                background: color2 || topLevelColor,
-                height
-              })
+              key: `${key}-mismatch-${i}`,
+              className: "veSelectionLayer veMismatchLayer notCaret",
+              style: {
+                width: charWidth2,
+                left: leftMargin + xStart + pos * charWidth2,
+                top: 0,
+                height: height || "100%",
+                background: "red",
+                position: "absolute",
+                opacity: 0.5
+              }
             }
-          ),
-          ...caretSvgs
-        ];
+          ));
+        }
+        return [selectionElement, ...mismatchElements, ...caretSvgs];
       });
     } else {
       return null;
@@ -122269,7 +122368,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.7.28";
+const version = "0.7.29";
 const packageJson = {
   version
 };
@@ -149095,6 +149194,7 @@ const _FindBar = class _FindBar extends React.Component {
       annotationVisibilityShow: annotationVisibilityShow2,
       updateAmbiguousOrLiteral: updateAmbiguousOrLiteral2,
       updateDnaOrAA: updateDnaOrAA2,
+      updateMismatchesAllowed: updateMismatchesAllowed2,
       updateMatchNumber: _updateMatchNumber,
       selectionLayerUpdate: selectionLayerUpdate2,
       annotationSearchMatches,
@@ -149107,6 +149207,7 @@ const _FindBar = class _FindBar extends React.Component {
       ambiguousOrLiteral,
       matchesTotal = 0,
       matchNumber = 0,
+      mismatchesAllowed = 0,
       isInline
     } = findTool2;
     const updateMatchNumber2 = /* @__PURE__ */ __name((...args) => {
@@ -149146,6 +149247,30 @@ const _FindBar = class _FindBar extends React.Component {
           }, "onChange")
         }
       ), /* @__PURE__ */ React.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React.createElement("div", null, "Ambiguous substitutions:", /* @__PURE__ */ React.createElement("div", { style: { display: "flex", fontSize: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { marginRight: 20 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "DNA:"), /* @__PURE__ */ React.createElement("div", null, "M: AC"), /* @__PURE__ */ React.createElement("div", null, "R: AG"), /* @__PURE__ */ React.createElement("div", null, "W: AT"), /* @__PURE__ */ React.createElement("div", null, "S: CG"), /* @__PURE__ */ React.createElement("div", null, "Y: CT"), /* @__PURE__ */ React.createElement("div", null, "K: GT"), /* @__PURE__ */ React.createElement("div", null, "V: ACG"), /* @__PURE__ */ React.createElement("div", null, "H: ACT"), /* @__PURE__ */ React.createElement("div", null, "D: AGT"), /* @__PURE__ */ React.createElement("div", null, "B: CGT"), /* @__PURE__ */ React.createElement("div", null, "X: GATC"), /* @__PURE__ */ React.createElement("div", null, "N: GATC"), /* @__PURE__ */ React.createElement("div", null, "*: any")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 14, marginBottom: 4, marginTop: 5 } }, "AA:"), /* @__PURE__ */ React.createElement("div", null, "B: ND"), /* @__PURE__ */ React.createElement("div", null, "J: IL"), /* @__PURE__ */ React.createElement("div", null, "X: ACDEFGHIKLMNPQRSTVWY"), /* @__PURE__ */ React.createElement("div", null, "Z: QE"), /* @__PURE__ */ React.createElement("div", null, "*: any")))))),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: "mismatchesAllowed",
+          style: { marginTop: "8px", display: "flex", alignItems: "center" }
+        },
+        /* @__PURE__ */ React.createElement("label", { style: { marginRight: "8px" } }, "Mismatches Allowed:"),
+        /* @__PURE__ */ React.createElement(
+          core.NumericInput,
+          {
+            min: 0,
+            max: 10,
+            className: "tg-mismatches-allowed-input",
+            style: { width: "60px" },
+            value: mismatchesAllowed,
+            disabled: dnaOrAA !== "DNA" || ambiguousOrLiteral !== "LITERAL",
+            onValueChange: /* @__PURE__ */ __name((value) => {
+              const newValue = Math.max(0, parseInt(value, 10) || 0);
+              updateMismatchesAllowed2(newValue);
+            }, "onValueChange")
+          }
+        ),
+        /* @__PURE__ */ React.createElement(InfoHelper, { style: { marginLeft: 10 } }, /* @__PURE__ */ React.createElement("div", null, "Number of mismatches allowed when searching DNA sequences with literal matching.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), "Higher values may slow down search performance."))
+      ),
       /* @__PURE__ */ React.createElement(
         core.Switch,
         {