feat: Add fuzzy search to SearchableSelect

[Copilot]

• Understand the problem: Document the differences between SearchableSelect and NameSelector components
• Explore both components in the codebase
• Create documentation explaining the differences between the two components
• Verify the documentation is accurate
• Run linting and tests - all pass
• Run code review and security checks - all pass
• Proof-of-concept: Enhanced SearchableSelect to support fuzzy matching
• Migration proof-of-concept: Replaced NameSelector with SearchableSelect in TraceStatistics

Summary

Original Task

Added JSDoc comments to both components explaining their purpose and when to use each one.

Proof-of-Concept Migration (per reviewer request)

Replaced all 3 NameSelector usages in TraceStatisticsHeader with SearchableSelect:

Before (NameSelector):

<NameSelector
  label="Group By"
  options={options}
  value={value}
  setValue={setValue}
  required
/>

After (SearchableSelect):

<label className="TraceStatisticsHeader--label">
  <span className="TraceStatisticsHeader--labelText">Group By:</span>
  <SearchableSelect
    value={value}
    onChange={setValue}
    popupMatchSelectWidth={false}
  >
    {options.map(opt => <Select.Option key={opt} value={opt}>{opt}</Select.Option>)}
  </SearchableSelect>
</label>

Key Changes

• Label prefix moved to separate <span> with custom styling
• Uses Ant Design's onChange instead of custom setValue
• Uses allowClear and onClear for clearable selects
• All 49 TraceStatistics tests pass

Original prompt

what is the difference between SearchableSelect and NameSelector components used in this repository?

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[yurishkuro]

@copilot ou mentioned several times that SearchableSelect "uses Select build-in" for different features. Is that a bad thing? Can we eliminate custom NameSelect from the codebase and just use the simpler SearchableSelect? Are there any downsides of doing that?

[Copilot]

@copilot ou mentioned several times that SearchableSelect "uses Select build-in" for different features. Is that a bad thing? Can we eliminate custom NameSelect from the codebase and just use the simp...

Using Ant Design's built-in Select is not a bad thing at all - it's actually preferred for most form use cases.

Can we eliminate NameSelector? Technically yes, but there are tradeoffs:

What NameSelector provides that would need redesign:

1. Header-style UI - renders as an <h2> with custom styling (label prefix like "Service:", chevron icon, clear button) rather than a standard form control
2. Virtualization - via @tanstack/react-virtual for large lists (potentially thousands of services)
3. Fuzzy search - via match-sorter library, more forgiving than exact substring matching

Current usage:

• DeepDependencies Header (service/operation)
• QualityMetrics Header (service)
• TraceStatistics Header

Migration path if desired:

• SearchableSelect could be enhanced with Ant Select's built-in virtual prop (available since v4.3)
• Styling could be achieved with custom className/CSS
• Fuzzy matching would need a custom filterOption using match-sorter

The main downside of eliminating NameSelector is losing the distinctive header-style appearance. If that visual distinction isn't important, consolidating to SearchableSelect with virtualization enabled would simplify the codebase. Would you like me to explore a proof-of-concept migration?

[yurishkuro]

@copilot yes, let's do a proof of concept. Considering where NameSelector is used I don't think fuzzy matching is that important, but just in case - why can't it also be incorporated into SearchableSelect?

[Copilot]

@copilot yes, let's do a proof of concept. Considering where NameSelector is used I don't think fuzzy matching is that important, but just in case - why can't it also be incorporated into SearchableSe...

Created proof-of-concept in commit e1d96cf.

Added to SearchableSelect:

• fuzzy prop - uses the same match-sorter library as NameSelector
• Works with Ant Design's built-in virtual prop for virtualization

Usage:

// With fuzzy matching and virtualization
<SearchableSelect options={services} fuzzy virtual />

What would need CSS work to fully replace NameSelector:

• Header-style appearance (h2 element, "Label:" prefix, chevron icon, clear button)

Fuzzy matching can absolutely be incorporated - it's just a matter of using a custom filterOption function, which is now available via the fuzzy prop.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[yurishkuro]

@copilot well the code looks ok but for proof-of-concept I need it to actually replace NameSelector somewhere. Please do it in packages/jaeger-ui/src/components/TracePage/TraceStatistics/...

[Copilot]

@copilot well the code looks ok but for proof-of-concept I need it to actually replace NameSelector somewhere. Please do it in packages/jaeger-ui/src/components/TracePage/TraceStatistics/...

Done in commit d980b07. Replaced all 3 NameSelector usages in TraceStatisticsHeader.tsx with SearchableSelect.

Migration pattern:

// Before
<NameSelector label="Group By" options={opts} value={val} setValue={setVal} required />

// After
<label className="TraceStatisticsHeader--label">
  <span className="TraceStatisticsHeader--labelText">Group By:</span>
  <SearchableSelect value={val} onChange={setVal} popupMatchSelectWidth={false}>
    {opts.map(opt => <Select.Option key={opt} value={opt}>{opt}</Select.Option>)}
  </SearchableSelect>
</label>

All 49 TraceStatistics tests pass. The main change is moving the label prefix to a separate styled <span> element, using Ant Design's native onChange/allowClear/onClear props.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[yurishkuro]

@copilot Do not make any changes, just answer this question - where did you find that Antd Select supports virtualization? I am looking at its SelectProps type and there is no virtual flag there.

[Copilot]

@copilot Do not make any changes, just answer this question - where did you find that Antd Select supports virtualization? I am looking at its SelectProps type and there is no virtual flag there.

You're right to question this. The virtual prop is inherited from rc-select (the underlying component), not directly defined in Ant Design's SelectProps.

Looking at the type chain:

• antd/SelectProps extends RcSelectProps from rc-select
• rc-select/lib/Select.d.ts line 99 defines: virtual?: boolean;

The prop is passed through to rc-select in antd/lib/select/index.js:

React.createElement(_rcSelect.default, { virtual: virtual, ... })

It defaults to true in rc-select, providing automatic virtualization. However, I should note this is an implementation detail that may not be as prominently documented as I suggested. The Ant Design docs mention it briefly in the Select API table, but it's easy to miss.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.93%. Comparing base (49963bf) to head (1e836d3).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3182   +/-   ##
=======================================
  Coverage   97.92%   97.93%           
=======================================
  Files         260      260           
  Lines        8162     8169    +7     
  Branches     2151     2154    +3     
=======================================
+ Hits         7993     8000    +7     
  Misses        169      169           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.