-
-
-
-
onFiltersChange({ ...filters, search: e.target.value })}
- className="border-border/60 bg-background/80 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:ring-primary/20 w-full rounded-lg border px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
- />
+
+
+
+
+
+ onFiltersChange({ ...filters, search: e.target.value })}
+ className="border-border/60 bg-background/80 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:ring-primary/20 flex h-[42px] w-full rounded-lg border px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+ />
+
+
+
onFiltersChange({ ...filters, semantic: selected })}
+ renderOption={(s) => getSemanticConventionInfo(s)?.label ?? s}
+ />
+
+ onFiltersChange({ ...filters, features: selected })}
+ renderOption={(f) => getFeatureInfo(f)?.label ?? f}
+ />
@@ -147,6 +195,29 @@ export function InstrumentationFilterBar({
+
+
+
+ onFiltersChange({
+ ...filters,
+ semantic: filters.semantic.filter((s) => s !== item),
+ })
+ }
+ renderItem={(s) => getSemanticConventionInfo(s)?.label ?? s}
+ />
+
+ onFiltersChange({
+ ...filters,
+ features: filters.features.filter((f) => f !== item),
+ })
+ }
+ renderItem={(f) => getFeatureInfo(f)?.label ?? f}
+ />
+
{/* Corner accent */}
diff --git a/ecosystem-explorer/src/features/java-agent/components/instrumentation-group-card.test.tsx b/ecosystem-explorer/src/features/java-agent/components/instrumentation-group-card.test.tsx
index c2874c01..410991e1 100644
--- a/ecosystem-explorer/src/features/java-agent/components/instrumentation-group-card.test.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/instrumentation-group-card.test.tsx
@@ -37,6 +37,8 @@ const defaultFilters: FilterState = {
search: "",
telemetry: new Set(),
target: new Set(),
+ semantic: [],
+ features: [],
};
describe("InstrumentationGroupCard", () => {
diff --git a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.test.tsx b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.test.tsx
index 26ab8eec..ed4ce011 100644
--- a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.test.tsx
+++ b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.test.tsx
@@ -55,6 +55,8 @@ describe("JavaInstrumentationListPage - Filtering", () => {
has_javaagent: true,
javaagent_target_versions: ["1.0.0"],
telemetry: [{ when: "always", spans: [{ span_kind: "CLIENT" }] }],
+ semantic_conventions: ["http"],
+ features: ["stable"],
},
{
name: "jdbc",
@@ -76,6 +78,7 @@ describe("JavaInstrumentationListPage - Filtering", () => {
],
},
],
+ semantic_conventions: ["db"],
},
{
name: "kafka-client",
@@ -100,6 +103,8 @@ describe("JavaInstrumentationListPage - Filtering", () => {
],
},
],
+ semantic_conventions: ["messaging"],
+ features: ["stable"],
},
{
name: "spring-web",
@@ -108,6 +113,7 @@ describe("JavaInstrumentationListPage - Filtering", () => {
scope: { name: "spring" },
has_javaagent: true,
javaagent_target_versions: ["1.0.0"],
+ features: ["experimental"],
},
];
@@ -355,4 +361,62 @@ describe("JavaInstrumentationListPage - Filtering", () => {
expect(screen.getByText("Error loading instrumentations")).toBeInTheDocument();
expect(screen.getByText("Failed to load instrumentations")).toBeInTheDocument();
});
+
+ it("filters by semantic conventions (OR logic)", async () => {
+ const user = userEvent.setup();
+ renderPage();
+
+ await waitFor(() => expect(screen.getByText("HTTP Client")).toBeInTheDocument());
+
+ const semanticButton = screen.getByRole("button", { name: /Semantic Conventions/i });
+ await user.click(semanticButton);
+
+ const httpOption = screen.getByRole("option", { name: "http" });
+ await user.click(httpOption);
+
+ expect(screen.getByText("HTTP Client")).toBeInTheDocument();
+ expect(screen.queryByText("JDBC")).not.toBeInTheDocument();
+
+ const dbOption = screen.getByRole("option", { name: "db" });
+ await user.click(dbOption);
+
+ expect(screen.getByText("HTTP Client")).toBeInTheDocument();
+ expect(screen.getByText("JDBC")).toBeInTheDocument();
+ expect(screen.queryByText("Kafka Client")).not.toBeInTheDocument();
+ });
+
+ it("filters by features (OR logic)", async () => {
+ const user = userEvent.setup();
+ renderPage();
+
+ await waitFor(() => expect(screen.getByText("HTTP Client")).toBeInTheDocument());
+
+ const featuresButton = screen.getByRole("button", { name: /Features/i });
+ await user.click(featuresButton);
+
+ const experimentalOption = screen.getByRole("option", { name: "experimental" });
+ await user.click(experimentalOption);
+
+ expect(screen.getByText("Spring Web")).toBeInTheDocument();
+ expect(screen.queryByText("HTTP Client")).not.toBeInTheDocument();
+ });
+
+ it("combines filters from different categories (AND logic)", async () => {
+ const user = userEvent.setup();
+ renderPage();
+
+ await waitFor(() => expect(screen.getByText("HTTP Client")).toBeInTheDocument());
+
+ const semanticButton = screen.getByRole("button", { name: /Semantic Conventions/i });
+ await user.click(semanticButton);
+ await user.click(screen.getByRole("option", { name: "http" }));
+
+ const featuresButton = screen.getByRole("button", { name: /Features/i });
+ await user.click(featuresButton);
+ await user.click(screen.getByRole("option", { name: "stable" }));
+
+ expect(screen.getByText("HTTP Client")).toBeInTheDocument();
+ expect(screen.queryByText("Kafka Client")).not.toBeInTheDocument();
+ expect(screen.queryByText("JDBC")).not.toBeInTheDocument();
+ });
});
diff --git a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
index dc090da2..4463f275 100644
--- a/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
+++ b/ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx
@@ -56,6 +56,8 @@ export function JavaInstrumentationListPage() {
search: "",
telemetry: new Set(),
target: new Set(),
+ semantic: [],
+ features: [],
});
const filteredInstrumentations = useMemo(() => {
@@ -101,6 +103,18 @@ export function JavaInstrumentationListPage() {
}
}
+ if (filters.semantic.length > 0) {
+ const hasMatch = filters.semantic.some((s) => instr.semantic_conventions?.includes(s));
+ if (!hasMatch) return false;
+ }
+
+ if (filters.features.length > 0) {
+ const hasMatch = filters.features.some((f) => {
+ return instr.features?.includes(f);
+ });
+ if (!hasMatch) return false;
+ }
+
return true;
});
}, [instrumentations, filters]);
@@ -200,7 +214,11 @@ export function JavaInstrumentationListPage() {
)}
diff --git a/ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts b/ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts
index e339dc7d..7a13fda4 100644
--- a/ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts
+++ b/ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts
@@ -16,36 +16,40 @@
export const FILTER_STYLES = {
telemetry: {
spans: {
- active: "bg-blue-500/30 border-blue-500 text-blue-700 dark:text-blue-300 shadow-sm",
- inactive: "bg-blue-500/10 border-transparent text-blue-600 dark:text-blue-400",
- hover: "hover:border-blue-500/50 hover:bg-blue-500/5",
+ active:
+ "bg-blue-500/40 border-blue-400 text-blue-100 shadow-[0_0_15px_rgba(59,130,246,0.3)] ring-1 ring-blue-400/50",
+ inactive:
+ "bg-blue-500/5 border-blue-500/20 text-blue-400/70 hover:border-blue-500/50 hover:bg-blue-500/10",
},
metrics: {
- active: "bg-green-500/30 border-green-500 text-green-700 dark:text-green-300 shadow-sm",
- inactive: "bg-green-500/10 border-transparent text-green-600 dark:text-green-400",
- hover: "hover:border-green-500/50 hover:bg-green-500/5",
+ active:
+ "bg-green-500/40 border-green-400 text-green-100 shadow-[0_0_15px_rgba(34,197,94,0.3)] ring-1 ring-green-400/50",
+ inactive:
+ "bg-green-500/5 border-green-500/20 text-green-400/70 hover:border-green-500/50 hover:bg-green-500/10",
},
},
target: {
javaagent: {
- active: "bg-orange-500/30 border-orange-500 text-orange-700 dark:text-orange-300 shadow-sm",
- inactive: "bg-orange-500/10 border-transparent text-orange-600 dark:text-orange-400",
- hover: "hover:border-orange-500/50 hover:bg-orange-500/5",
+ active:
+ "bg-orange-500/40 border-orange-400 text-orange-100 shadow-[0_0_15px_rgba(249,115,22,0.3)] ring-1 ring-orange-400/50",
+ inactive:
+ "bg-orange-500/5 border-orange-500/20 text-orange-400/70 hover:border-orange-500/50 hover:bg-orange-500/10",
},
library: {
- active: "bg-purple-500/30 border-purple-500 text-purple-700 dark:text-purple-300 shadow-sm",
- inactive: "bg-purple-500/10 border-transparent text-purple-600 dark:text-purple-400",
- hover: "hover:border-purple-500/50 hover:bg-purple-500/5",
+ active:
+ "bg-purple-500/40 border-purple-400 text-purple-100 shadow-[0_0_15px_rgba(168,85,247,0.3)] ring-1 ring-purple-400/50",
+ inactive:
+ "bg-purple-500/5 border-purple-500/20 text-purple-400/70 hover:border-purple-500/50 hover:bg-purple-500/10",
},
},
} as const;
export function getTelemetryFilterClasses(type: "spans" | "metrics", isActive: boolean): string {
const styles = FILTER_STYLES.telemetry[type];
- return isActive ? styles.active : `${styles.inactive} ${styles.hover}`;
+ return isActive ? styles.active : styles.inactive;
}
export function getTargetFilterClasses(type: "javaagent" | "library", isActive: boolean): string {
const styles = FILTER_STYLES.target[type];
- return isActive ? styles.active : `${styles.inactive} ${styles.hover}`;
+ return isActive ? styles.active : styles.inactive;
}
diff --git a/ecosystem-explorer/src/index.css b/ecosystem-explorer/src/index.css
index 13c74895..6c986906 100644
--- a/ecosystem-explorer/src/index.css
+++ b/ecosystem-explorer/src/index.css
@@ -101,3 +101,28 @@ html {
.y-plain {
color: hsl(var(--foreground-hsl));
}
+.custom-scrollbar::-webkit-scrollbar {
+ width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: hsl(var(--border-hsl) / 0.8);
+ border-radius: 10px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--primary-hsl) / 0.6);
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+
+.custom-scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: hsl(var(--border-hsl) / 0.8) transparent;
+}
diff --git a/ecosystem-explorer/src/test/setup.ts b/ecosystem-explorer/src/test/setup.ts
index 2a98f066..e45cd17b 100644
--- a/ecosystem-explorer/src/test/setup.ts
+++ b/ecosystem-explorer/src/test/setup.ts
@@ -13,4 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import { vi } from "vitest";
import "@testing-library/jest-dom";
+
+class ResizeObserverMock {
+ constructor() {}
+
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+}
+globalThis.ResizeObserver = ResizeObserverMock as typeof ResizeObserver;
+HTMLElement.prototype.scrollIntoView = vi.fn();
+HTMLElement.prototype.hasPointerCapture = vi.fn();
+HTMLElement.prototype.releasePointerCapture = vi.fn();