Merge pull request #3768 from AnnMarieW/improve-dropdown-performance

optimize dropdown search

Author: camdecoster

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3738](https://github.com/plotly/dash/pull/3738) Add missing `stacklevel=2` to `warnings.warn()` calls so warnings report the caller's location instead of internal Dash source lines
 - [#3740](https://github.com/plotly/dash/pull/3740) Fix cannot tab into dropdowns in Safari
 - [#2462](https://github.com/plotly/dash/issues/2462) Allow `MATCH` in `Input`/`State` when the callback's `Output` has no wildcards (fixed-id Output, no Output, or `ALL`-only wildcard Output). `ALLSMALLER` still requires a corresponding `MATCH` in an Output.
+- [#3768](https://github.com/plotly/dash/pull/3768) Improved `Dropdown` search performance for large options lists
 - [#3759](https://github.com/plotly/dash/pull/3759) Fix the issue where `Patch` objects cannot be updated via `set_props()` in `websocket` callback. Fix [#3742](https://github.com/plotly/dash/issues/3742)
 - [#3789](https://github.com/plotly/dash/pull/3789) Fixed extra wrapper in `DatePickerRange` and `DatePickerSingle` causing styling and layout issues.
 

components/dash-core-components/src/utils/dropdownSearch.ts

@@ -23,6 +23,7 @@ export interface SanitizedOptions {
     options: DetailedOption[];
     indexes: string[];
     valueSet: Set<OptionValue>;
+    search: Search;
 }
 
 // Single-pass sanitization via sanitizeOptions, plus detection of
@@ -55,38 +56,48 @@ export function sanitizeDropdownOptions(
         indexes.push('search');
     }
 
-    return {options: sanitized, indexes, valueSet};
-}
-
-export function filterOptions(
-    options: SanitizedOptions,
-    searchValue?: string,
-    search_order?: 'index' | 'original'
-): DetailedOption[] {
-    if (!searchValue) {
-        return options.options;
-    }
-
+    // Build the search index ONCE during sanitization
     const search = new Search('value');
     search.searchIndex = new UnorderedSearchIndex();
     search.indexStrategy = new AllSubstringsIndexStrategy();
     search.tokenizer = TOKENIZER;
 
-    options.indexes.forEach(index => {
+    indexes.forEach(index => {
         search.addIndex(index);
     });
 
-    if (options.options.length > 0) {
-        search.addDocuments(options.options);
+    if (sanitized.length > 0) {
+        search.addDocuments(sanitized);
+    }
+
+    return {
+        options: sanitized,
+        indexes,
+        valueSet,
+        search,
+    };
+}
+
+export function filterOptions(
+    options: SanitizedOptions,
+    searchValue?: DropdownProps['search_value'],
+    searchOrder?: DropdownProps['search_order']
+): DetailedOption[] {
+    if (!searchValue) {
+        return options.options;
     }
 
-    const searchResults =
-        (search.search(searchValue) as DetailedOption[]) || [];
+    const results =
+        (options.search.search(searchValue) as DetailedOption[]) || [];
 
-    if (search_order === 'original') {
-        const resultSet = new Set(searchResults);
-        return options.options.filter(option => resultSet.has(option));
+    // Preserve original option order
+    if (searchOrder === 'original') {
+        const resultSet = new Set(results.map(option => option.value));
+
+        return options.options.filter(option =>
+            resultSet.has(option.value)
+        );
     }
 
-    return searchResults;
+    return results;
 }