Migrate trace dashboard charts to @schemavaults/ui components - #237
Merged
Merged
Conversation
…server-sdk:0.31.1, trpc-backend-init:0.9.67, openapi-docs-ui:0.1.8, auth-server:0.46.2, example-nextjs-resource-server:0.5.9 - @schemavaults/ui 0.110.1 + theme 0.29.0; traces charts on ui components Update @schemavaults/ui (0.101.0 -> 0.110.1) and @schemavaults/theme (0.26.1 -> 0.29.0) everywhere, and replace the hand-rolled charts with the chart components the new ui ships: - /admin/traces: the duration histogram is ui's Histogram (bins from binValues with a 1 ms minimum bin, same buckets as before), the scatter plot is ScatterPlot (log scale, p50/p95 reference lines, operation highlight on hover), latency over time and throughput are LineChart (gaps, area, crosshair readout; markers only for isolated buckets), and the slowest/busiest rankings are BarList (click to filter). The charts/ directory, MeasuredChart and the --trace-series-* color variables are gone: charts size themselves with width="auto" and colors come from the theme's --chart-* palette (the same hues). - The scatter plot no longer filters on click: ui's ScatterPlot makes every clickable point a Tab stop, which with a 1,000-trace sample would bury the rest of the dashboard behind 1,000 tab presses. The rankings and the per-operation table still filter by operation. - auth-ui: in ui 0.110 the "default" chart color is palette slot 1 rather than the brand blue, so the users breakdown legend swatches now come from getChartColorClasses() and match their slices; the users growth sparklines use width="auto". auth-ui's useMeasuredWidth is deprecated in favour of the ui charts' own sizing. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cf3XfSV7aPL398ffXS1tEP
auth-ui's own width hook is now a re-export of the one @schemavaults/ui 0.110 ships for its charts' width="auto", instead of a deprecated duplicate. The root export, the default export and the lib/ deep path all resolve to the ui hook. Its ref is a callback ref (it was a ref object) and the result gains isMeasured; passing the ref to an element works as before. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cf3XfSV7aPL398ffXS1tEP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces custom chart implementations in the server traces dashboard with reusable chart components from the
@schemavaults/uipackage, reducing code duplication and improving maintainability.Summary
This PR migrates the trace dashboard from custom SVG chart implementations to standardized chart components exported by
@schemavaults/ui. The custom chart files (TimeSeriesChart,DurationScatter,DurationHistogram,RankedBarList, andchart-primitives) are removed and replaced withLineChart,ScatterPlot,Histogram, andBarListcomponents from the shared UI package.Key Changes
Removed custom chart implementations:
TimeSeriesChart.tsx– replaced byLineChartfrom@schemavaults/uiDurationScatter.tsx– replaced byScatterPlotfrom@schemavaults/uiDurationHistogram.tsx– replaced byHistogramfrom@schemavaults/uiRankedBarList.tsx– replaced byBarListfrom@schemavaults/uichart-primitives.tsx– utilities now provided by@schemavaults/uiUpdated tile components:
DistributionTiles.tsx: MigratedDurationHistogramTileandDurationScatterTileto useHistogramandScatterPlotTimeTiles.tsx: Migrated time series charts to useLineChart; extractedTimeLineCharthelper componentBreakdownTiles.tsx: Migrated to useBarListfrom@schemavaults/uiSimplified trace analytics:
buildDurationHistogram(),niceTicks(), and related histogram-specific functions fromtrace-analytics.tsniceAxisTop()andniceStep()as they're still used by the new chart componentsUpdated trace categories:
@schemavaults/ui(CHART_SERIES_COLORS,CHART_OTHER_COLOR)Removed measurement utilities:
MeasuredChartcomponent fromTraceTileCard.tsx(charts now handle their own sizing)useMeasuredWidthusage fromUsersGrowthCard.tsxType updates:
HistogramScaleIdfrom@schemavaults/uiinstead oftrace-analyticsHistogramBuckettype from@schemavaults/uiImplementation Details
LineChartwith a helper component (TimeLineChart) that adapts the trace analytics data formatauth-server(0.46.1 → 0.46.2),auth-ui(0.17.0 → 0.17.1), and related packageshttps://claude.ai/code/session_01Cf3XfSV7aPL398ffXS1tEP