feat: Add Lucene/SQL search filter to Service Map page#2319
Draft
MikeShi42 wants to merge 4 commits into
Draft
Conversation
Support filtering on Service Maps via a Lucene/SQL search bar on span data. Changes: - Add SearchWhereInput to DBServiceMapPage with Lucene/SQL toggle - Thread where/whereLanguage through ServiceMap component to useServiceMap hook - Pass user filters into both server and client span CTEs via renderChartConfig - Include implicitColumnExpression from source for Lucene parsing support - Store where/whereLanguage in URL params via nuqs for shareable links - Include filter params in TanStack Query key for automatic refetching Co-authored-by: Mike Shi <mike@hyperdx.io>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Contributor
E2E Test Results✅ All tests passed • 179 passed • 3 skipped • 1246s
Tests ran across 4 shards in parallel. |
Add a searchable MultiSelect dropdown that lets users filter the service map by specific service names. The dropdown is populated with distinct service names from the trace source via useGetKeyValues. Changes: - Add MultiSelect with service name options fetched from ClickHouse - Wire selected services as SQL IN filter in useServiceMap's baseCTEConfig - Persist selected services in URL via nuqs parseAsArrayOf for shareable links - Place MultiSelect alongside SearchWhereInput in the filter bar - Update SearchWhereInput placeholders to suggest attribute-level filters since service filtering is now handled by the dedicated dropdown Co-authored-by: Mike Shi <mike@hyperdx.io>
SqlString.raw() returns an object for column identifiers - use '?' placeholder (not '??') so it resolves to the raw string value correctly. Co-authored-by: Mike Shi <mike@hyperdx.io>
Move the service name filter from the CTE level (span-level filtering) to the outer query (post-JOIN filtering). The filter now matches edges where either the server OR client service is in the selected set, so selecting a service shows both its inbound callers and outbound callees in the service graph. Co-authored-by: Mike Shi <mike@hyperdx.io>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add support for filtering on Service Maps (HDX-3025). Two complementary filter mechanisms:
Service name MultiSelect — A searchable, clearable dropdown populated with distinct service names from ClickHouse. Selecting services shows that service plus all its inbound callers and outbound callees — so you see the full neighborhood of the selected service(s) in the graph. The filter is applied post-JOIN on the outer query (
WHERE serverServiceName IN (...) OR clientServiceName IN (...)), preserving the span linkage that builds edges.Lucene/SQL search bar — A free-form search input (same
SearchWhereInputused on the Search page) for filtering on any span attribute. Supports both Lucene syntax and raw SQL WHERE clauses. This enables deeper filtering beyond service names (e.g.http.method:GET,Duration > 1000000,SpanAttributes['db.system'] = 'postgresql').Both filters persist in URL params for shareable filtered views.
Key changes:
DBServiceMapPage.tsx— Added MultiSelect (service names viauseGetKeyValues) andSearchWhereInputwith URL state persistence vianuqsServiceMap.tsx— Threadwhere,whereLanguage, andserviceNamesprops throughuseServiceMap.tsx— Apply service name filter on the outer query (post-JOIN) so both inbound and outbound neighbors are shown; apply free-text WHERE/filters viarenderChartConfigin the CTEsScreenshots or video
Full service map (no filter) — all 6 services visible:
Full service map
api-gateway selected — shows api-gateway + all neighbors (web-frontend, user-service, order-service, payment-service):
api-gateway with neighbors
order-service selected — shows order-service + api-gateway (inbound) + inventory-service (outbound):
order-service with neighbors
payment-service selected — shows payment-service + api-gateway (its caller):
payment-service with caller
Neighbor-inclusive filtering demo — selecting services and seeing their neighborhoods:
demo_neighbor_filtering.webm
Test results
make ci-lint)make ci-unit)How to test on Vercel preview
Preview routes: /service-map
Steps:
servicesparam for shareable linksReferences
To show artifacts inline, enable in settings.
Linear Issue: HDX-3025