feat: implement searchable multi-select filtering for java instrument…

ecosystem-explorer/package.json

@@ -28,8 +28,10 @@
     "@grafana/faro-react": "^2.4.0",
     "@grafana/faro-web-tracing": "^2.4.0",
     "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "cmdk": "^1.1.1",
     "idb": "^8.0.3",
     "js-yaml": "^4.1.1",
     "lucide-react": "^1.0.0",

ecosystem-explorer/src/components/ui/searchable-multi-select.test.tsx

@@ -0,0 +1,116 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SearchableMultiSelect, SelectedChips } from "./searchable-multi-select";
+
+describe("SearchableMultiSelect", () => {
+  const options = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
+  const defaultProps = {
+    label: "Fruits",
+    placeholder: "Select fruits...",
+    options,
+    selected: [],
+    onChange: vi.fn(),
+  };
+
+  it("renders correctly with placeholder", () => {
+    render(<SearchableMultiSelect {...defaultProps} />);
+    expect(screen.getByText("Fruits")).toBeInTheDocument();
+    expect(screen.getByText("Select fruits...")).toBeInTheDocument();
+  });
+
+  it("shows number of selected items when selection exists", () => {
+    render(<SearchableMultiSelect {...defaultProps} selected={["Apple", "Banana"]} />);
+    expect(screen.getByText("2 selected")).toBeInTheDocument();
+  });
+
+  it("opens popover on click and displays options", async () => {
+    const user = userEvent.setup();
+    render(<SearchableMultiSelect {...defaultProps} />);
+
+    const trigger = screen.getByRole("button", { name: "Fruits" });
+    await user.click(trigger);
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    for (const option of options) {
+      expect(screen.getByRole("option", { name: option })).toBeInTheDocument();
+    }
+  });
+
+  it("filters options when typing in search input", async () => {
+    const user = userEvent.setup();
+    render(<SearchableMultiSelect {...defaultProps} />);
+
+    await user.click(screen.getByRole("button", { name: "Fruits" }));
+
+    const searchInput = screen.getByPlaceholderText("Search...");
+    await user.type(searchInput, "ba");
+
+    expect(screen.getByRole("option", { name: "Banana" })).toBeInTheDocument();
+    expect(screen.queryByRole("option", { name: "Apple" })).not.toBeInTheDocument();
+  });
+
+  it("calls onChange when an option is toggled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<SearchableMultiSelect {...defaultProps} onChange={onChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Fruits" }));
+    await user.click(screen.getByRole("option", { name: "Banana" }));
+
+    expect(onChange).toHaveBeenCalledWith(["Banana"]);
+  });
+
+  it("removes option if already selected", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <SearchableMultiSelect {...defaultProps} selected={["Apple", "Banana"]} onChange={onChange} />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Fruits" }));
+    await user.click(screen.getByRole("option", { name: "Banana" }));
+
+    expect(onChange).toHaveBeenCalledWith(["Apple"]);
+  });
+});
+
+describe("SelectedChips", () => {
+  it("renders nothing if selected is empty", () => {
+    const { container } = render(<SelectedChips selected={[]} onRemove={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders chips for selected items", () => {
+    render(<SelectedChips selected={["Apple", "Banana"]} onRemove={vi.fn()} />);
+    expect(screen.getByText("Apple")).toBeInTheDocument();
+    expect(screen.getByText("Banana")).toBeInTheDocument();
+  });
+
+  it("calls onRemove when a chip's remove button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(<SelectedChips selected={["Apple", "Banana"]} onRemove={onRemove} />);
+
+    const removeAppleButton = screen.getByRole("button", { name: "Remove Apple" });
+    await user.click(removeAppleButton);
+
+    expect(onRemove).toHaveBeenCalledWith("Apple");
+  });
+});

ecosystem-explorer/src/components/ui/searchable-multi-select.tsx

@@ -0,0 +1,157 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState, useId, type ReactNode } 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) => ReactNode;
+  className?: string;
+}
+
+export function SearchableMultiSelect({
+  label,
+  placeholder,
+  options,
+  selected,
+  onChange,
+  renderOption,
+  className = "",
+}: SearchableMultiSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerId = useId();
+
+  const toggleOption = (option: string) => {
+    const newSelected = selected.includes(option)
+      ? selected.filter((item) => item !== option)
+      : [...selected, option];
+    onChange(newSelected);
+  };
+
+  return (
+    <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>
+            <ChevronDown
+              className={`text-muted-foreground h-4 w-4 transition-transform duration-200 ${
+                isOpen ? "rotate-180" : ""
+              }`}
+            />
+          </button>
+        </Popover.Trigger>
+
+        <Popover.Portal>
+          <Popover.Content
+            align="start"
+            className="border-border/60 bg-background/95 ring-border/5 z-[100] mt-1 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-xl ring-1 backdrop-blur-md"
+          >
+            <Command className="flex w-full flex-col overflow-hidden bg-transparent">
+              <div className="border-border/50 border-b p-2">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                  <Command.Input
+                    placeholder="Search..."
+                    className="bg-muted/50 focus:bg-muted w-full rounded-md py-1.5 pr-3 pl-9 text-sm transition-colors focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <Command.List className="custom-scrollbar max-h-[240px] overflow-y-auto p-1">
+                <Command.Empty className="text-muted-foreground py-4 text-center text-sm">
+                  No options found
+                </Command.Empty>
+                <Command.Group>
+                  {options.map((option) => (
+                    <Command.Item
+                      key={option}
+                      value={option}
+                      onSelect={() => toggleOption(option)}
+                      className={`hover:bg-primary/10 data-[selected=true]:bg-primary/10 data-[selected=true]:text-primary flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm transition-colors outline-none ${
+                        selected.includes(option)
+                          ? "bg-primary/5 text-primary font-medium"
+                          : "text-foreground"
+                      }`}
+                    >
+                      <span>{renderOption ? renderOption(option) : option}</span>
+                      {selected.includes(option) && <Check className="h-4 w-4" />}
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  );
+}
+
+export function SelectedChips({
+  selected,
+  onRemove,
+  renderItem,
+  className = "",
+}: {
+  selected: string[];
+  onRemove: (item: string) => void;
+  renderItem?: (item: string) => ReactNode;
+  className?: string;
+}) {
+  if (selected.length === 0) return null;
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {selected.map((item) => (
+        <span
+          key={item}
+          className="bg-primary/10 border-primary/20 text-primary hover:bg-primary/20 flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium backdrop-blur-sm transition-all"
+        >
+          {renderItem ? renderItem(item) : item}
+          <button
+            type="button"
+            onClick={() => onRemove(item)}
+            aria-label={`Remove ${item}`}
+            className="hover:text-foreground transition-colors"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}

ecosystem-explorer/src/features/java-agent/components/instrumentation-badges.test.tsx

@@ -38,6 +38,8 @@ const defaultFilters: FilterState = {
   search: "",
   telemetry: new Set(),
   target: new Set(),
+  semantic: [],
+  features: [],
 };
 
 describe("TargetBadges", () => {
@@ -73,6 +75,8 @@ describe("TargetBadges", () => {
       search: "",
       telemetry: new Set(),
       target: new Set(["javaagent"]),
+      semantic: [],
+      features: [],
     };
     render(
       <TargetBadges badges={{ ...allFalse, hasJavaAgentTarget: true }} activeFilters={filters} />
@@ -81,7 +85,13 @@ describe("TargetBadges", () => {
   });
 
   it("highlights Library badge when library filter is active", () => {
-    const filters: FilterState = { search: "", telemetry: new Set(), target: new Set(["library"]) };
+    const filters: FilterState = {
+      search: "",
+      telemetry: new Set(),
+      target: new Set(["library"]),
+      semantic: [],
+      features: [],
+    };
     render(
       <TargetBadges badges={{ ...allFalse, hasLibraryTarget: true }} activeFilters={filters} />
     );
@@ -121,13 +131,25 @@ describe("TelemetryBadges", () => {
   });
 
   it("highlights Spans badge when spans filter is active", () => {
-    const filters: FilterState = { search: "", telemetry: new Set(["spans"]), target: new Set() };
+    const filters: FilterState = {
+      search: "",
+      telemetry: new Set(["spans"]),
+      target: new Set(),
+      semantic: [],
+      features: [],
+    };
     render(<TelemetryBadges badges={{ ...allFalse, hasSpans: true }} activeFilters={filters} />);
     expect(screen.getByText("Spans").className).toContain(FILTER_STYLES.telemetry.spans.active);
   });
 
   it("highlights Metrics badge when metrics filter is active", () => {
-    const filters: FilterState = { search: "", telemetry: new Set(["metrics"]), target: new Set() };
+    const filters: FilterState = {
+      search: "",
+      telemetry: new Set(["metrics"]),
+      target: new Set(),
+      semantic: [],
+      features: [],
+    };
     render(<TelemetryBadges badges={{ ...allFalse, hasMetrics: true }} activeFilters={filters} />);
     expect(screen.getByText("Metrics").className).toContain(FILTER_STYLES.telemetry.metrics.active);
   });

ecosystem-explorer/src/features/java-agent/components/instrumentation-card.test.tsx

@@ -164,6 +164,8 @@ describe("InstrumentationCard", () => {
       search: "",
       telemetry: new Set(),
       target: new Set(["javaagent"]),
+      semantic: [],
+      features: [],
     };
 
     renderCard(instrumentation, activeFilters);
@@ -181,6 +183,8 @@ describe("InstrumentationCard", () => {
       search: "",
       telemetry: new Set(),
       target: new Set(["library"]),
+      semantic: [],
+      features: [],
     };
 
     renderCard(instrumentation, activeFilters);
@@ -198,6 +202,8 @@ describe("InstrumentationCard", () => {
       search: "",
       telemetry: new Set(["spans"]),
       target: new Set(),
+      semantic: [],
+      features: [],
     };
 
     renderCard(instrumentation, activeFilters);
@@ -228,6 +234,8 @@ describe("InstrumentationCard", () => {
       search: "",
       telemetry: new Set(["metrics"]),
       target: new Set(),
+      semantic: [],
+      features: [],
     };
 
     renderCard(instrumentation, activeFilters);