feat: implement searchable multi-select filtering for java instrument…#390
feat: implement searchable multi-select filtering for java instrument…#390hussainjamal760 wants to merge 18 commits intoopen-telemetry:mainfrom
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
There was a problem hiding this comment.
Pull request overview
Implements scalable filtering for the Java instrumentation list by adding searchable multi-select controls (semantic conventions + features/tags) and wiring the selected filters into list filtering and card-level visual feedback.
Changes:
- Added a reusable
SearchableMultiSelectUI component (plus selected “chip” rendering) for long option lists. - Extended Java instrumentation filtering to support semantic convention + feature/tag filters (OR within a category, AND across categories).
- Updated Java agent UI styling and card badges; expanded/updated related unit tests to account for the new filter state shape.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| ecosystem-explorer/src/index.css | Adds global custom-scrollbar styling used by the new dropdown option list. |
| ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts | Updates active/inactive styling for telemetry/target filter buttons. |
| ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx | Adds semantic + feature/tag filter logic and passes instrumentation data into the filter bar for option generation. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx | Adds semantic/features multi-select controls, options derivation from instrumentation data, and selected chips. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx | Displays semantic conventions/features/tags as badges and highlights them when matching active filters. |
| ecosystem-explorer/src/components/ui/searchable-multi-select.tsx | Introduces the new searchable multi-select dropdown and selected-chips UI. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-group-card.test.tsx | Updates default filter state for new filter fields. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.test.tsx | Updates filter bar tests to pass new required props and filter state fields. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-card.test.tsx | Updates tests to include new filter state fields. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-badges.test.tsx | Updates tests to include new filter state fields. |
|
Heads up: the My take: tags don't add much as a filter dimension anyway. Their values are essentially the prefix of the instrumentation name ( That said, the broader call on |
|
A searchable dropdown is the right pattern for scalability. The concern in my opinion is the custom implementation: this rebuilds keyboard navigation, ARIA roles, focus management, click-outside, and z-index/portal logic from scratch. Switching to the Radix approach would also subsume Copilot's comment about the trigger semantics directly. Since the project already depends on Radix ( I tried this locally and the rewrite comes in at fewer lines with the same UX, plus keyboard navigation, Escape to close, and proper ARIA roles work out of the box. |
|
nice work overall 🚀 I left a few comments above, mostly on three threads: the |
Thanks for the detailed review. I’ll address the issues in the next update:
Will push an updated PR soon. |
|
sounds good, thanks! |
Updated |
…sainjamal760/opentelemetry-ecosystem-explorer into feat/instrumentation-filters abort���# the commit.
…sainjamal760/opentelemetry-ecosystem-explorer into feat/instrumentation-filters
| import { useState, useId } from "react"; | ||
| import { Search, ChevronDown, Check, X } from "lucide-react"; | ||
| import * as Popover from "@radix-ui/react-popover"; | ||
| import { Command } from "cmdk"; | ||
|
|
||
| interface SearchableMultiSelectProps { | ||
| label: string; | ||
| placeholder: string; | ||
| options: string[]; | ||
| selected: string[]; | ||
| onChange: (selected: string[]) => void; | ||
| renderOption?: (option: string) => React.ReactNode; | ||
| className?: string; | ||
| } |
| {renderItem ? renderItem(item) : item} | ||
| <button | ||
| type="button" | ||
| onClick={() => onRemove(item)} | ||
| aria-label={`Remove ${item}`} | ||
| className="hover:text-foreground transition-colors" | ||
| > |
| <div className={`relative space-y-2 ${className}`}> | ||
| <label htmlFor={triggerId} className="text-muted-foreground text-sm font-medium"> | ||
| {label} | ||
| </label> | ||
|
|
||
| <Popover.Root open={isOpen} onOpenChange={setIsOpen}> | ||
| <Popover.Trigger asChild> | ||
| <button | ||
| type="button" | ||
| id={triggerId} | ||
| className={`border-border/60 bg-background/80 hover:border-primary/50 focus:ring-primary/20 flex min-h-[42px] w-full cursor-pointer items-center justify-between rounded-lg border px-4 py-2 text-left text-sm backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none ${ | ||
| isOpen ? "border-primary/50 ring-primary/20 ring-2" : "" | ||
| }`} | ||
| > | ||
| <span | ||
| className={selected.length === 0 ? "text-muted-foreground/50" : "text-foreground"} | ||
| > | ||
| {selected.length === 0 ? placeholder : `${selected.length} selected`} | ||
| </span> |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Issue: 224
#224
Description
This PR implements a scalable and production-ready filtering system for the Java Instrumentation list page. The previous flat filtering logic has been replaced with a more robust architecture that handles a large number of Semantic Conventions and Features without cluttering the UI.
Key Changes
Searchable Multi-Select Component
Created a new reusable SearchableMultiSelect component that supports internal searching and scrolling.
This allows users to quickly find specific conventions or features from a list of 100+ options.
Advanced Filtering Logic
Implemented real-time filtering with standard multi-select logic:
OR logic within a specific category (e.g., selecting multiple features).
AND logic between categories (e.g., filtering for a specific telemetry type AND a semantic convention).
Expanded the "Features" list to include features, tags, and explicitly derived telemetry types (TRACING, METRICS).
Visual Feedback & UI Polish
Filter Chips: Selected filters now appear as removable chips in the filter bar for easy management.
Card Badges: Updated InstrumentationCard to display Semantic Conventions and Feature/Tag badges. These badges now "light up" (change color) when they match an active filter, providing immediate visual confirmation.
Improved UX:
Enhanced selection states for Telemetry and Type buttons with glow effects.
Fixed z-index layering issues to ensure dropdowns overlap correctly.
Optimized scroll propagation to prevent page-level scrolling while interacting with dropdowns.
Motivation
As the number of instrumentations in the ecosystem grows, a flat list of checkboxes for 100+ semantic conventions is no longer sustainable. This searchable approach ensures the Explorer remains usable and performant as more data is added to the registry.
Testing Performed
Verified filtering logic against local instrumentation data.
Tested searchable dropdowns with long lists to ensure scrolling and search functionality.
Verified mobile/responsive layout for the new filter bar.