[P2] Dashboard L3 diagram readability & interaction #109

New Issue

claude · 2026-04-01T22:54:18+02:00

claude commented

2026-04-01 22:54:18 +02:00

Parent Epic

Problem

At Dashboard L3 (route level), a compact process diagram with latency heatmap colors is shown — great concept but nodes are cramped, text is truncated, and there's no zoom or expand option. The diagram is one of Cameleer's killer differentiators and deserves better treatment on the dashboard.

Current State (screenshot: `ux-audit/05-dashboard-l3-route.png`)

Process diagram is squeezed into a narrow horizontal strip
Node text is truncated
No zoom controls
No click interaction (can't click a node to see processor metrics)
Latency heatmap coloring exists but is hard to read at this size

Proposed Solution

1. Expandable Diagram

Add a "fullscreen" or "expand" button on the diagram section:

┌─ Route Topology ────────────────────────── [⛶ Expand] ─┐
│  [ENDPOINT] → [SET BODY] → [PROCESSOR] → [LOG] → [TO]  │
│   0ms          0ms          497ms          0ms     0ms   │
└─────────────────────────────────────────────────────────┘

Clicking "Expand" opens the diagram in a larger overlay or dedicated section, reusing the same ProcessDiagram component with zoom controls and minimap from the exchanges page.

2. Clickable Nodes → Processor Metrics

Clicking a node in the dashboard diagram should:

Highlight that processor's row in the Processor Metrics table below
Show a tooltip with: avg latency, P99, invocations, error rate
Link to filtered exchanges (show exchanges where this processor was the bottleneck)

3. Heatmap Legend

Add a legend explaining the color scale:

Latency:  ■ < 10ms  ■ 10-100ms  ■ 100-500ms  ■ > 500ms

4. Minimum Height

Give the diagram section a minimum height of 200px so it's readable without expanding. Currently it can be very short on routes with few processors.

Acceptance Criteria

Diagram has an expand/fullscreen button
Expanded view shows full ProcessDiagram with zoom/minimap
Clicking a node highlights corresponding processor metrics row
Heatmap legend explains color coding
Minimum height ensures readability for small routes

## Parent Epic #100 ## Problem At Dashboard L3 (route level), a compact process diagram with latency heatmap colors is shown — great concept but nodes are cramped, text is truncated, and there's no zoom or expand option. The diagram is one of Cameleer's killer differentiators and deserves better treatment on the dashboard. ## Current State (screenshot: `ux-audit/05-dashboard-l3-route.png`) - Process diagram is squeezed into a narrow horizontal strip - Node text is truncated - No zoom controls - No click interaction (can't click a node to see processor metrics) - Latency heatmap coloring exists but is hard to read at this size ## Proposed Solution ### 1. Expandable Diagram Add a "fullscreen" or "expand" button on the diagram section: ``` ┌─ Route Topology ────────────────────────── [⛶ Expand] ─┐ │ [ENDPOINT] → [SET BODY] → [PROCESSOR] → [LOG] → [TO] │ │ 0ms 0ms 497ms 0ms 0ms │ └─────────────────────────────────────────────────────────┘ ``` Clicking "Expand" opens the diagram in a larger overlay or dedicated section, reusing the same `ProcessDiagram` component with zoom controls and minimap from the exchanges page. ### 2. Clickable Nodes → Processor Metrics Clicking a node in the dashboard diagram should: - Highlight that processor's row in the Processor Metrics table below - Show a tooltip with: avg latency, P99, invocations, error rate - Link to filtered exchanges (show exchanges where this processor was the bottleneck) ### 3. Heatmap Legend Add a legend explaining the color scale: ``` Latency: ■ < 10ms ■ 10-100ms ■ 100-500ms ■ > 500ms ``` ### 4. Minimum Height Give the diagram section a minimum height of 200px so it's readable without expanding. Currently it can be very short on routes with few processors. ## Acceptance Criteria - [ ] Diagram has an expand/fullscreen button - [ ] Expanded view shows full ProcessDiagram with zoom/minimap - [ ] Clicking a node highlights corresponding processor metrics row - [ ] Heatmap legend explains color coding - [ ] Minimum height ensures readability for small routes

claude added the ui ux labels 2026-04-01 22:54:18 +02:00

claude referenced this issue

2026-04-01 22:56:35 +02:00

Epic: UX Audit — PMF Readiness for First Market Offer #100

claude commented

2026-04-01 23:11:20 +02:00

Design Specification

Increase minimum height from 280px to 360px (420px on tall screens)
Add Expand button (Maximize2 icon) → full-viewport overlay reusing ProcessDiagram with zoom controls
Clickable nodes: tooltip showing avg/P99/invocations/error rate from latencyHeatmap data, scroll-to-row in Processor Metrics table
Heatmap legend: horizontal gradient bar 0%→100% of route time, positioned bottom-left

## Design Specification - Increase minimum height from 280px to 360px (420px on tall screens) - Add Expand button (Maximize2 icon) → full-viewport overlay reusing ProcessDiagram with zoom controls - Clickable nodes: tooltip showing avg/P99/invocations/error rate from latencyHeatmap data, scroll-to-row in Processor Metrics table - Heatmap legend: horizontal gradient bar 0%→100% of route time, positioned bottom-left

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#109

[P2] Dashboard L3 diagram readability & interaction #109