Replace fuzzy-search with fuzzysort, and load the song search on demand - #628

Swaps fuzzy-search 3.2.1 for fuzzysort 4.0.1, then splits the search UI out of the main bundle so the larger library doesn't cost anything at startup.

Why

fuzzy-search scores a match by the span between the first and last matched character, so a scattered subsequence inside a short title outranks an exact prefix. Searching max in DDR World put ARACHNE at the top, ahead of every song actually named MAX. It also has no Unicode normalization, so full-width input returns nothing — a real problem on this song database. The package last shipped in February 2020 and needs a separate @types package.

Search quality

Both columns are the real omnibar, driven in headless Chromium against the two production builds, DDR World (1,451 songs), same config:

Recall is unchanged. The call site passes threshold: 0, which keeps every subsequence match the old library found — including the transposed pranoia — and only reorders them. At fuzzysort's default threshold: 0.5 that typo returns nothing, so the explicit zero is load-bearing.

fuzzysort also applies NFKD normalization and strips diacritics, which is what fixes ｍａｘ and helps with the typographic quotes and full-width tildes that are all over these titles.

Search latency drops from 1.79 ms to 0.26 ms per keystroke (2.23 ms → 0.37 ms on the 2,279-song sdvx_nabla set). Nobody was complaining about 2 ms; it's headroom for larger imported data sets.

Bundle size

fuzzysort is a bigger library — 17.6 KB minified vs ~1.5 KB — so dropped in as a straight swap it added 7.2 KB gzipped to main.js. The later commits get that back.

SongSearch renders an Omnibar that is closed until someone starts a pocket pick, but every song card mounted it, so it sat in the main bundle. It's now lazy-loaded the way eligible-charts, drawn-set, and controls-drawer already are.

Splitting the component alone wasn't enough: the store imported fuzzysort to build the search index, which anchored the library to the main bundle regardless. The index is derived from gameData, which the store already holds, so it moved next to the search UI behind a WeakMap keyed on the loaded data set. That also removes a piece of redundant derived state from the store. Indexing costs ~40 ms and the omnibar now unmounts between uses, so the cache keeps that off every open.

fuzzysort ends up in its own 20.8 KB / 8.1 KB gzipped chunk, which webpack shares between the search UI and round-label. It is not fetched on initial page load; it arrives when the first drawing renders.

Where the lazy boundary goes

Worth calling out for review, since the first attempt got this wrong. Gating the lazy SongSearch on pocketPickPendingForPlayer — rendering it only while a pick is pending — puts the Suspense boundary around the component that owns the overlay animation. Blueprint's Overlay2 wraps its children in a TransitionGroup with appear={true}, so opening still faded in, but closing set the flag to 0 and unmounted the whole overlay before CSSTransition could run its exit, and the omnibar vanished instantly instead of fading out.

Sampling .bp6-omnibar opacity every animation frame, against the pre-fuzzysort build:

So SongSearch is instead mounted, closed, when a card's action menu opens, and isOpen drives the overlay as before. The chunk still loads only on demand, and it doubles as the prefetch — the menu always opens before a player is picked. Overlay2 renders nothing until its first open, so mounting it closed costs no DOM. Verified stable across repeated open/close cycles.

Code structure

Four source files plus one new module, and a net reduction. The nicest part is round-label.tsx, where ~35 lines of hand-rolled highlighting — split the query on whitespace, escape regex metacharacters, run a global regex, splice <strong> tags — collapse into result.highlight(). It's also more correct: it highlights the characters the predicate actually matched rather than a separate word-based approximation.

Worth knowing before merging

• Results reorder. Anyone with muscle memory for a half-typed query will find that row has moved. The new order is better on every query tested, but it's a behavior change during live tournament use, so it's worth landing between events rather than the morning of one.
• Round-label highlighting is now subsequence-based. For wr1 against "Winners Round 1" that's three scattered bold letters where the old highlighter bolded nothing. Correct, but visually different.
• fuzzysort v4 is ESM-only. Webpack 5 handles it without configuration; it would only matter if a CommonJS script under scripts/ needed the search, and none do.

Verification

tsc --noemit, oxlint, and oxfmt --check all pass. Production builds compared asset-by-asset at each step. Builds were served and driven in headless Chromium — load DDR World, draw, open the omnibar, run five queries — with identical results throughout and no page errors. Separate traces confirm the fuzzysort chunk is absent from initial page load, and that the overlay transitions match baseline frame for frame.