feat: optimize information hierarchy and implement progressive disclo…

[hussainjamal760]

Issue: #394

Overview

This PR improves the UX of instrumentation detail pages by making the information easier to understand without changing any JSON data.

The goal was to reduce cognitive overload and create a clearer flow for users:

• What this instrumentation does
• What telemetry it provides
• How to configure it

---

Key Changes

• Reorganized information into clearer sections:

  • Capabilities
  • Requirements
  • Resources

• Added a simple “Telemetry Overview” section to explain metrics and traces in a more user-friendly way.

• Improved visual structure using reusable UI components for better readability and scanning.

---

Scalability

• No JSON files were modified.
• The solution is fully component-driven and works automatically for all 250+ instrumentations.

---

Data Flow

• Details → overview and key information
• Telemetry → metrics and spans
• Configuration → setup and environment variables

---

Verification

• Tested with multiple instrumentation JSONs (ActiveJ, Kafka, etc.)
• Verified responsive layout and existing data compatibility.

[netlify]

✅ Deploy Preview for otel-ecosystem-explorer ready!

Name	Link
🔨 Latest commit	38bcb7b
🔍 Latest deploy log	https://app.netlify.com/projects/otel-ecosystem-explorer/deploys/69ff93c200816d0008495d9f
😎 Deploy Preview	https://deploy-preview-395--otel-ecosystem-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jaydeluca]

I left some comments on some of the wording, I'm not sure if this improves things (just yet). one of the challenges with this, is that telemetry varies based on the different configuration options, so I wonder if this could be misleading without that additional context that we provide on the telemetry tab

I also don't know if we are doing enough with the "Traces and Spans" description to provide context as to what the information in the badges mean. On the other page its a little more obvious that these refer to the span kinds emitted. The capabilities tab already provides some sort of summary around what metrics and spans it could produce, and I wonder if that could just be revamped in some way.

I agree with the idea of this PR to improve this page, but I think we might need to give it another iteration and see if we can come up with a different approach where we summarize things, but don't provide information that could be confusing without the additional context of configuration options

[hussainjamal760]

Issue: #394

Overview

This PR improves the UX of instrumentation detail pages by making the information easier to understand without changing any JSON data.

The goal was to reduce cognitive overload and create a clearer flow for users:

• What this instrumentation does
• What telemetry it provides
• How to configure it

Key Changes

• Reorganized information into clearer sections:

  • Capabilities
  • Requirements
  • Resources

• Added a simple “Telemetry Overview” section to explain metrics and traces in a more user-friendly way.

• Improved visual structure using reusable UI components for better readability and scanning.

Scalability

• No JSON files were modified.
• The solution is fully component-driven and works automatically for all 250+ instrumentations.

Data Flow

• Details → overview and key information
• Telemetry → metrics and spans
• Configuration → setup and environment variables

Verification

• Tested with multiple instrumentation JSONs (ActiveJ, Kafka, etc.)
• Verified responsive layout and existing data compatibility.

Thanks for the feedback , that makes sense.

This was intended as a V1 focused mainly on improving scanability and reducing cognitive overload. I’ll iterate on the UX gradually across versions and explore approaches that provide better context without being misleading.

I agree the Capabilities section may be a better place to evolve these summaries.