@teselagen/ove 0.7.29 → 0.7.30-beta.1

package/index.umd.js

@@ -43051,6 +43051,7 @@ ${latestSubscriptionCallbackError.current.stack}
     return 41.36;
   }, "itemSizeEstimator");
   var ReactTableDefaults = defaultProps$1;
+  var VIRTUALIZE_CUTOFF_LENGTH = 200;
   var ReactTable = function(_Methods) {
     _inherits$8(ReactTable2, _Methods);
     function ReactTable2(props) {
@@ -43636,7 +43637,7 @@ ${latestSubscriptionCallbackError.current.stack}
                     minWidth: rowMinWidth + "px"
                   })
                 }, tBodyProps.rest),
-                pageRows.length < 200 ? pageRows.map(function(d2, i2) {
+                _this2.props.noVirtual || pageRows.length < VIRTUALIZE_CUTOFF_LENGTH ? pageRows.map(function(d2, i2) {
                   return makePageRow(d2, i2);
                 }) : React.createElement(ReactList, {
                   type: "variable",
@@ -43740,7 +43741,7 @@ ${latestSubscriptionCallbackError.current.stack}
   const getSelectedRowsFromEntities = /* @__PURE__ */ __name((entities, idMap) => {
     if (!idMap) return [];
     return entities.reduce((acc, entity, i2) => {
-      return idMap[getIdOrCodeOrIndex(entity, i2)] ? acc.concat(i2) : acc;
+      return idMap[getIdOrCodeOrIndex(entity, i2)] ? acc.concat([i2]) : acc;
     }, []);
   }, "getSelectedRowsFromEntities");
   const removeCleanRows = /* @__PURE__ */ __name((entities, cellValidation) => {
@@ -43859,9 +43860,9 @@ ${latestSubscriptionCallbackError.current.stack}
     var _a2;
     return (_a2 = str == null ? void 0 : str.replace) == null ? void 0 : _a2.call(str, getNumberStrAtEnd(str), "");
   }, "stripNumberAtEnd");
-  const getAllRows = /* @__PURE__ */ __name((e2) => {
-    const el = e2.target.querySelector(".data-table-container") ? e2.target.querySelector(".data-table-container") : e2.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;
     }
@@ -44128,14 +44129,14 @@ ${latestSubscriptionCallbackError.current.stack}
       handleCopyHelper(textToCopy, jsonToCopy, onFinishMsg || "Row Copied");
     }
   }, "handleCopyRows");
-  const handleCopyColumn = /* @__PURE__ */ __name((e2, cellWrapper, selectedRecords) => {
+  const handleCopyColumn = /* @__PURE__ */ __name((tableRef, cellWrapper, selectedRecords) => {
     const specificColumn = cellWrapper.getAttribute("data-test");
-    let rowElsToCopy = getAllRows(e2);
+    let rowElsToCopy = getAllRows(tableRef);
     if (!rowElsToCopy) return;
     if (selectedRecords) {
-      const ids2 = selectedRecords.map((e22) => {
+      const ids2 = selectedRecords.map((e2) => {
         var _a2;
-        return (_a2 = getIdOrCodeOrIndex(e22)) == null ? void 0 : _a2.toString();
+        return (_a2 = getIdOrCodeOrIndex(e2)) == null ? void 0 : _a2.toString();
       });
       rowElsToCopy = Array.from(rowElsToCopy).filter((rowEl) => {
         var _a2;
@@ -44168,9 +44169,9 @@ ${latestSubscriptionCallbackError.current.stack}
     const isBottomRight = i2 === lastRowIndex && cellIndex === lastCellIndex;
     return isBottomRight;
   }, "isBottomRightCornerOfRectangle");
-  const handleCopyTable = /* @__PURE__ */ __name((e2, opts2) => {
+  const handleCopyTable = /* @__PURE__ */ __name((tableRef, opts2) => {
     try {
-      const allRowEls = getAllRows(e2);
+      const allRowEls = getAllRows(tableRef);
       if (!allRowEls) return;
       handleCopyRows(allRowEls, __spreadProps(__spreadValues({}, opts2), {
         onFinishMsg: "Table Copied"
@@ -44207,13 +44208,15 @@ ${latestSubscriptionCallbackError.current.stack}
       },
       [dispatch, tableFormName]
     );
-    const { allOrderedEntities, selectedEntities } = useSelector((state2) => {
-      var _a2, _b2, _c2, _d2, _e, _f;
-      return {
-        allOrderedEntities: (_c2 = (_b2 = (_a2 = state2.form) == null ? void 0 : _a2[tableFormName]) == null ? void 0 : _b2.values) == null ? void 0 : _c2.allOrderedEntities,
-        selectedEntities: (_f = (_e = (_d2 = state2.form) == null ? void 0 : _d2[tableFormName]) == null ? void 0 : _e.values) == null ? void 0 : _f.reduxFormSelectedEntityIdMap
-      };
-    });
+    const { allOrderedEntities, selectedEntities } = useSelector(
+      (state2) => {
+        var _a2, _b2, _c2, _d2, _e, _f;
+        return {
+          allOrderedEntities: (_c2 = (_b2 = (_a2 = state2.form) == null ? void 0 : _a2[tableFormName]) == null ? void 0 : _b2.values) == null ? void 0 : _c2.allOrderedEntities,
+          selectedEntities: (_f = (_e = (_d2 = state2.form) == null ? void 0 : _d2[tableFormName]) == null ? void 0 : _e.values) == null ? void 0 : _f.reduxFormSelectedEntityIdMap
+        };
+      }
+    );
     return { selectTableEntities, allOrderedEntities, selectedEntities };
   }, "useTableEntities");
   const useDeepEqualMemo = /* @__PURE__ */ __name((value) => {
@@ -65945,7 +65948,7 @@ ${latestSubscriptionCallbackError.current.stack}
       ));
     }, "render")
   });
-  function convertSchema(schema2) {
+  const convertSchema = /* @__PURE__ */ __name((schema2) => {
     let schemaToUse = schema2;
     if (!schemaToUse.fields && Array.isArray(schema2)) {
       schemaToUse = {
@@ -65954,35 +65957,26 @@ ${latestSubscriptionCallbackError.current.stack}
     }
     schemaToUse = __spreadValues({}, schemaToUse);
     schemaToUse.fields = schemaToUse.fields.map((field, i2) => {
-      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" + i2
-        });
+      } 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" + i2;
+        }
+        return fieldToUse;
       }
-      return fieldToUse;
     });
     return schemaToUse;
-  }
-  __name(convertSchema, "convertSchema");
+  }, "convertSchema");
   const TableFormTrackerContext = React.createContext({
     formNames: [],
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -85060,6 +85054,7 @@ ${latestSubscriptionCallbackError.current.stack}
     );
     const tableRef = reactExports.useRef();
     const alreadySelected = reactExports.useRef(false);
+    const [noVirtual, setNoVirtual] = reactExports.useState(false);
     const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = reactExports.useState(false);
     const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = reactExports.useState({
       currentVersion: 0
@@ -85901,76 +85896,94 @@ ${latestSubscriptionCallbackError.current.stack}
       updateEntitiesHelper,
       updateValidation
     ]);
-    const handleCopySelectedCells = reactExports.useCallback(
-      (e2) => {
-        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(e2);
-        let fullCellText = "";
-        const fullJson = [];
-        times(selectionGrid.length, (i2) => {
-          const row = selectionGrid[i2];
-          if (fullCellText) {
-            fullCellText += "\n";
+    const waitUntilAllRowsAreRendered = reactExports.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[i2 + 1]);
-            rowCopyText = rowCopyText.split("	");
-            times(row.length, (i22) => {
-              const cell = row[i22];
-              if (cell) {
-                fullCellText += rowCopyText[i22];
-                jsonRow.push(json[i22]);
-              }
-              if (i22 !== row.length - 1 && i22 >= firstCellIndex)
-                fullCellText += "	";
-            });
-            fullJson.push(jsonRow);
+        }, 50);
+      });
+    }, []);
+    const handleCopySelectedCells = reactExports.useCallback(() => __async(this, 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, (i2) => {
+        const row = selectionGrid[i2];
+        if (fullCellText) {
+          fullCellText += "\n";
+        }
+        if (!row) {
+          return;
+        } else {
+          const jsonRow = [];
+          let [rowCopyText, json] = getRowCopyText(allRows[i2 + 1]);
+          rowCopyText = rowCopyText.split("	");
+          times(row.length, (i22) => {
+            const cell = row[i22];
+            if (cell) {
+              fullCellText += rowCopyText[i22];
+              jsonRow.push(json[i22]);
+            }
+            if (i22 !== row.length - 1 && i22 >= 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 = reactExports.useCallback(
-      (selectedRecords, e2) => {
-        const idToIndex = entities.reduce((acc, e22, i2) => {
-          acc[e22.id || e22.code] = i2;
+      (selectedRecords) => __async(this, null, function* () {
+        if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+          setNoVirtual(true);
+          yield waitUntilAllRowsAreRendered();
+        }
+        const idToIndex = entities.reduce((acc, e2, i2) => {
+          acc[e2.id || e2.code] = i2;
           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(e2);
+          const allRowEls = getAllRows(tableRef);
           if (!allRowEls) return;
           const rowEls = rowNumbersToCopy.map((i2) => allRowEls[i2]);
+          if (window.Cypress) window.Cypress.__copiedRowsLength = rowEls.length;
           handleCopyRows(rowEls, {
             onFinishMsg: "Selected rows copied"
           });
@@ -85978,8 +85991,9 @@ ${latestSubscriptionCallbackError.current.stack}
           console.error(`error:`, error);
           window.toastr.error("Error copying rows.");
         }
-      },
-      [entities]
+        setNoVirtual(false);
+      }),
+      [entities, waitUntilAllRowsAreRendered]
     );
     const handleCopyHotkey = reactExports.useCallback(
       (e2) => {
@@ -86746,7 +86760,7 @@ ${latestSubscriptionCallbackError.current.stack}
                 {
                   key: "copyColumn",
                   onClick: /* @__PURE__ */ __name(() => {
-                    handleCopyColumn(e2, cellWrapper);
+                    handleCopyColumn(tableRef, cellWrapper);
                   }, "onClick"),
                   text: "Column"
                 }
@@ -86759,7 +86773,7 @@ ${latestSubscriptionCallbackError.current.stack}
                   {
                     key: "copyColumnSelected",
                     onClick: /* @__PURE__ */ __name(() => {
-                      handleCopyColumn(e2, cellWrapper, selectedRecords);
+                      handleCopyColumn(tableRef, cellWrapper, selectedRecords);
                     }, "onClick"),
                     text: "Column (Selected)"
                   }
@@ -86802,7 +86816,7 @@ ${latestSubscriptionCallbackError.current.stack}
               {
                 key: "copyFullTableRows",
                 onClick: /* @__PURE__ */ __name(() => {
-                  handleCopyTable(e2);
+                  handleCopyTable(tableRef);
                 }, "onClick"),
                 text: "Table"
               }
@@ -87339,6 +87353,7 @@ ${latestSubscriptionCallbackError.current.stack}
         __spreadValues({
           data: filteredEnts,
           ref: tableRef,
+          noVirtual,
           className: classNames$1({
             isCellEditable,
             "tg-table-loading": isLoading,
@@ -87406,7 +87421,8 @@ ${latestSubscriptionCallbackError.current.stack}
         resizePersist,
         resized,
         rowsToShow,
-        style2
+        style2,
+        noVirtual
       ]
     );
     return /* @__PURE__ */ React.createElement("div", { tabIndex: "1", onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, /* @__PURE__ */ React.createElement(
@@ -87689,8 +87705,8 @@ ${latestSubscriptionCallbackError.current.stack}
         ), /* @__PURE__ */ React.createElement(
           Button,
           {
-            onClick: /* @__PURE__ */ __name((e2) => {
-              handleCopyTable(e2, { isDownload: true });
+            onClick: /* @__PURE__ */ __name(() => {
+              handleCopyTable(tableRef, { isDownload: true });
             }, "onClick"),
             "data-tip": "Download Table as CSV",
             minimal: true,
@@ -105909,6 +105925,7 @@ ${latestSubscriptionCallbackError.current.stack}
     "updateAmbiguousOrLiteral"
   );
   const updateDnaOrAA = createMetaAction("updateDnaOrAA");
+  const updateMismatchesAllowed = createMetaAction("updateMismatchesAllowed");
   const updateMatchNumber = createMetaAction("updateMatchNumber");
   const findTool = createMergedDefaultStateReducer(
     {
@@ -105940,6 +105957,12 @@ ${latestSubscriptionCallbackError.current.stack}
           dnaOrAA: payload
         });
       },
+      [updateMismatchesAllowed]: (state2, payload) => {
+        return __spreadProps(__spreadValues({}, state2), {
+          matchNumber: 0,
+          mismatchesAllowed: payload
+        });
+      },
       [updateSearchText]: (state2, payload) => {
         return __spreadProps(__spreadValues({}, state2), {
           matchNumber: 0,
@@ -105959,6 +105982,7 @@ ${latestSubscriptionCallbackError.current.stack}
       dnaOrAA: "DNA",
       ambiguousOrLiteral: "LITERAL",
       highlightAll: false,
+      mismatchesAllowed: 0,
       matchNumber: 0
     }
   );
@@ -105971,6 +105995,7 @@ ${latestSubscriptionCallbackError.current.stack}
     updateAmbiguousOrLiteral,
     updateDnaOrAA,
     updateMatchNumber,
+    updateMismatchesAllowed,
     updateSearchText
   }, Symbol.toStringTag, { value: "Module" }));
   const openToolbarItemUpdate = createMetaAction("openToolbarItemUpdate");
@@ -112806,6 +112831,36 @@ ${latestSubscriptionCallbackError.current.stack}
     });
   }
   __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 i2 = 0; i2 < limit; i2++) {
+      const window2 = targetSeqExtended.slice(i2, i2 + 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: i2,
+          match: window2,
+          mismatchPositions,
+          numMismatches: mismatchPositions.length
+          // Keep for backwards compatibility
+        });
+      }
+    }
+    return matches;
+  }
+  __name(findApproxMatches, "findApproxMatches");
   var spliceString$1;
   var hasRequiredSpliceString;
   function requireSpliceString() {
@@ -134469,7 +134524,7 @@ ${seq.sequence}
   }
   __name(translationsRawSelector, "translationsRawSelector");
   const translationsRawSelector$1 = createSelector(sequenceDataSelector, translationsRawSelector);
-  function searchLayersSelector(sequence2, isCircular, isOpen2, searchString, ambiguousOrLiteral, dnaOrAA, isProtein2, proteinSequence) {
+  function searchLayersSelector(sequence2, isCircular, isOpen2, searchString, ambiguousOrLiteral, dnaOrAA, isProtein2, proteinSequence, mismatchesAllowed) {
     if (!searchString || !isOpen2) {
       return [];
     }
@@ -134497,6 +134552,26 @@ ${seq.sequence}
         });
       });
     }
+    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",
@@ -134521,6 +134596,7 @@ ${seq.sequence}
     (state2) => state2.findTool && state2.findTool.dnaOrAA,
     (state2) => state2.sequenceData.isProtein,
     (state2) => state2.sequenceData.proteinSequence,
+    (state2) => state2.findTool && state2.findTool.mismatchesAllowed,
     searchLayersSelector
   );
   const translationSearchMatchesSelector = createSelector(
@@ -145525,26 +145601,49 @@ ${seq.sequence}
               )
             ];
           }
-          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, i2) => /* @__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-${i2}`,
+                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;
@@ -150367,7 +150466,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.7.28";
+  const version = "0.7.29";
   const packageJson = {
     version
   };
@@ -175591,6 +175690,7 @@ ${seqDataToCopy}\r
         annotationVisibilityShow: annotationVisibilityShow2,
         updateAmbiguousOrLiteral: updateAmbiguousOrLiteral2,
         updateDnaOrAA: updateDnaOrAA2,
+        updateMismatchesAllowed: updateMismatchesAllowed2,
         updateMatchNumber: _updateMatchNumber,
         selectionLayerUpdate: selectionLayerUpdate2,
         annotationSearchMatches,
@@ -175603,6 +175703,7 @@ ${seqDataToCopy}\r
         ambiguousOrLiteral,
         matchesTotal = 0,
         matchNumber = 0,
+        mismatchesAllowed = 0,
         isInline
       } = findTool2;
       const updateMatchNumber2 = /* @__PURE__ */ __name((...args) => {
@@ -175642,6 +175743,30 @@ ${seqDataToCopy}\r
             }, "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(
+            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(
           Switch,
           {

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