Skip to content

Add deep dive view and 20x query performance improvement#181

Merged
atheurer merged 2 commits intomasterfrom
web-ui-deep-dive
Apr 22, 2026
Merged

Add deep dive view and 20x query performance improvement#181
atheurer merged 2 commits intomasterfrom
web-ui-deep-dive

Conversation

@atheurer
Copy link
Copy Markdown
Contributor

Summary

  • Deep Dive view: Time-series line charts with elapsed-time X-axis, multiple iterations overlaid, breakout support from compare view, progressive rendering, adjustable resolution
  • 20x query performance: Rewrite getMetricDataFromIdsSets with time-range templates and periodic flushing (100s → 5s for 130 labels at resolution=100)
  • Replace then-request with native fetch: Eliminates child process spawning via sync-rpc for every OpenSearch HTTP request
  • Short-circuit numMBytes/memUsage when debug is off (was JSON.stringify on 104K-element arrays)
  • Server logging: Per-request IDs, curl-reproducible metric-data logs, OpenSearch request/response timing
  • npm ci with stamp files for efficient dependency management on server restart
  • Per-iteration sample selection in supplemental-metric endpoint

Test plan

  • Compare view: primary metric bars display correctly
  • Compare view: supplemental metrics with breakouts work
  • Deep dive: select metrics with "Dive" checkboxes, switch to Deep Dive view
  • Deep dive: line charts render with elapsed time, multiple iterations overlay
  • Deep dive: breakout labels from compare view carry over
  • Performance: 130-label mpstat query completes in ~5s instead of ~100s
  • Server restarts cleanly with npm ci stamp logic

🤖 Generated with Claude Code

Deep Dive view:
- New DeepDiveView component with time-series line charts
- "Dive" checkboxes on compare view metric panels to select metrics
- Elapsed time X-axis with multiple iterations overlaid
- Breakout configuration snapshot from compare view at transition
- Progressive rendering as per-iteration data arrives
- Adjustable resolution (default 100 data points)
- New POST /api/v1/iterations/period-info endpoint for period data
- Sequential metric loading to avoid OpenSearch contention

Query performance (cdm.js):
- Rewrite getMetricDataFromIdsSets with time-range templates built
  once per set and reused across all labels via string replace
- Flush to OpenSearch every 10 labels instead of accumulating all
  queries before sending (was 104K array entries causing O(n) growth)
- Replace then-request with native fetch (eliminates child process
  spawning via sync-rpc for every HTTP request)
- Short-circuit numMBytes and memUsage when debug is off (was calling
  JSON.stringify on 104K-element arrays even with debug disabled)

Server improvements:
- Per-request IDs in server logs for correlating concurrent requests
- Detailed metric-data logging with curl-reproducible commands
- OpenSearch request/response timing at the HTTP level
- npm ci with stamp files for efficient dependency management
- Per-iteration sample selection support in supplemental-metric endpoint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Series legend table below each chart, grouped by iteration with
  breakout segment columns and color swatches
- Live value tracking: values update in real-time as pointer moves
  across any chart, synchronized across all charts via shared elapsed
  time
- Click-to-pin: click locks all charts to that time position with red
  reference line; click again to resume live tracking
- Cross-chart sync: hovering/pinning on one chart updates the reference
  line and legend values on all other charts at the nearest elapsed time
- Scrollable legend body for charts with many series

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@atheurer atheurer requested a review from k-rister April 22, 2026 14:53
@atheurer atheurer merged commit 5ee68b2 into master Apr 22, 2026
33 checks passed
@github-project-automation github-project-automation Bot moved this from In Progress to Done in Crucible Tracking Apr 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants