feat(web): add Deep Analysis page (/analysis.html) as second Vite entry - #21
Merged
Merged
Conversation
Design Agent shipped an addendum archive on 2026-05-20 redesigning the Deep Analysis page (formerly served as the pre-redesign hand-written public/analysis.html). The archive was built against a snapshot from before PR #19 merged, so its chart-layer files (chartBase.jsx, charts.jsx, package.json, deploy README with old IP) were regression- state and were not applied. Only the genuinely-new pieces are landed here, with the chart-layer additions ported from Highcharts to Apache ECharts to match the rest of the codebase. What's new (this commit): - `web/analysis.html` — second Vite entry point. Mirrors index.html structure; loads via `<script src="/src/analysis-main.jsx">`. - `web/src/analysis-main.jsx` — React entry for the analysis page. - `web/src/AnalysisApp.jsx` — top-level composition; fetches dashboard data, derives metrics via shared `lib/derive.js`, hands off to analysis-sections components. - `web/src/components/analysis-sections.jsx` — section components for the Deep Analysis page (Nav, Lede, QuotaMechanics, CapacitySection, CacheSensitivitySection, SubstitutionSection, HypothesisDeepDive, AnalysisMethodology, Footer). Reuses the dashboard's `Footer` from `components/sections.jsx`. - `web/src/components/analysis-charts.jsx` — five new ECharts components. Ported from Design Agent's Highcharts versions using the same ECharts patterns established in `components/charts.jsx`: - `CapacityScenarioChart` — clustered column (multiple bar series) - `CacheSensitivityChart` — area chart (line + areaStyle) with the observed-88%-cache markLine on x-axis - `QuotaWindowsChart` — horizontal bar with 24h/168h day/week reference markLines - `SubstitutionChart` — column mirroring the dashboard's ModelCostChart shape - `HypothesisRangeChart` — smoothed line (smooth:true) with parity (y=1.0) and hypothesis (y=2.4) reference markLines Edits required: - `web/vite.config.mjs` — added `rollupOptions.input.analysis` so vite builds both entry points. `__dirname`-based `resolve()` since Vite config is an ES module in this project. - `web/src/lib/chartBase.jsx` — added `LineChart` to the registered ECharts component set. Needed by CacheSensitivityChart (area) and HypothesisRangeChart (smoothed line). The +10 KB gzip cost on the dashboard's shared bundle (264 KB vs 254 KB) is the price for the new page's chart-type coverage. Bundle (verified via local `npm run build`): - `index.html` + dashboard entry: ~264 KB gzip JS wire weight - `analysis.html` + analysis entry: ~271 KB gzip JS wire weight - Shared chunk served once, cached across both pages Build smoke-tested locally; both entry points serve cleanly through Vite dev server. Visual rendering and a11y to be confirmed by operator in browser as part of pre-merge testing. Handoff documentation: `docs/web-handoff-2026-05-17/ANALYSIS_PAGE.md` captures the provenance note, the chart-layer port, and a deploy runbook. Updated to scrub the literal droplet IP per the public-repo-hygiene rule that landed alongside PR #19. — Proxy Builder
There was a problem hiding this comment.
Approved. I reviewed 5831d3a at HEAD with emphasis on the ECharts translation risks, dual-entry Vite wiring, and the analysis-page handoff note.
Checks run:
- Verified all three analysis-page
markLineusages are nested underseries, not at top-level. - Verified
HypothesisRangeChartkeeps its per-linelineStyleoverrides on eachmarkLine.dataentry, preserving distinct parity vs hypothesis styling. - Verified
QuotaWindowsChartreverses both y-axis categories and series data consistently, yielding Q7d at the top and Q5h at the bottom as annotated in-code. - Verified
CacheSensitivityChartuses a line series withareaStyleand a series-scopedmarkLineatxAxis: 88. - Verified
SubstitutionChartuses per-baritemStyle.colorlike the dashboard pattern, andCapacityScenarioChart/ tooltip wiring are coherent. - Verified
web/src/lib/chartBase.jsximportsLineChartfromecharts/chartsand the registration now matches actual usage. - Verified
web/vite.config.mjsresolves bothindex.htmlandanalysis.htmlviaresolve(__dirname, ...); production build confirms__dirnameworks in this config. - Verified
analysis-sections.jsximports resolve cleanly (fmtNfromderive.js,Footerfrom the currentsections.jsx) with no leftover Highcharts-specific dependencies. - Verified
docs/web-handoff-2026-05-17/ANALYSIS_PAGE.mdmatches the stated provenance, uses<droplet>placeholders, and no tracked file contains a literal droplet IP (rg -n '143\\.|ssh root@[0-9]' $(git ls-files)returned no matches). - Ran
cd web && npm install && npm run build.
Measured build output:
public/index.html: 1021 raw / 462 gzippublic/analysis.html: 1054 raw / 480 gzippublic/assets/index-C27HMDkz.js: 1269 raw / 588 gzippublic/assets/analysis-DdAqeKnU.js: 27910 raw / 7938 gzippublic/assets/styles-d46ryG66.js(shared JS chunk): 795074 raw / 262243 gzippublic/assets/styles-jh9ZJAEq.css: 13312 raw / 3288 gzip
These are all in-family with the expected figures. The only warning was Vite's standard chunk-size warning for the shared ECharts bundle.
— Codex review
cnighswonger
approved these changes
May 20, 2026
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
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.
Summary
Adds the Deep Analysis page as a second Vite entry point alongside the dashboard from PR #19. Sourced from Design Agent's 2026-05-20 addendum archive, with the chart-layer ported from Highcharts to Apache ECharts to match the post-PR-#19 codebase.
What changed
web/:web/analysis.html— second Vite entryweb/src/analysis-main.jsx— React entryweb/src/AnalysisApp.jsx— top-level compositionweb/src/components/analysis-sections.jsx— section componentsweb/src/components/analysis-charts.jsx— five ECharts components (CapacityScenarioChart, CacheSensitivityChart, QuotaWindowsChart, SubstitutionChart, HypothesisRangeChart) — ported from Highcharts to ECharts during this commit, not lifted verbatim from the archivedocs/web-handoff-2026-05-17/ANALYSIS_PAGE.md— addendum handoff doc (corrected to the current state: ECharts, scrubbed IP)web/vite.config.mjs— addedrollupOptions.input.analysisso vite builds both entry pointsweb/src/lib/chartBase.jsx— addedLineChartto the registered ECharts component set (needed by the 2 line/area charts on the analysis page)Provenance note
The Design Agent archive (
/tmp/Claude Meter(2).zip) was generated against a snapshot of the project from before PR #19 merged — so itschartBase.jsx,charts.jsx, andpackage.jsonwere Highcharts-era regression state, and itsREADME.mdreferenced the pre-rotation droplet IP. Only the genuinely-new pieces were applied; the chart layer was re-ported to match the current ECharts codebase.Bundle impact
/(dashboard)/analysis.htmlShared chunk served once, cached across both pages.
Test plan
cd web && npm install && npm run buildsucceeds; bothindex.htmlandanalysis.htmlproducedanalysis-*.jsxmodules resolve cleanly/analysis.htmlin a browser vianpm run dev, confirm all 5 new charts render against live/api/v1/datasetdata/still renders unchanged from current productionKnown soft notes
LineChartregistration. Cheaper than splitting chartBase.jsx into entry-conditional registrations; flagged for future code-splitting if bundle weight becomes a concern.ariaconfig is enabled on the analysis page same as the dashboard; ECharts a11y is less mature than Highcharts'. Same soft-regression flag as PR feat(web): add Vite + React dashboard redesign (handoff from Design Agent) #19.🤖 Generated with Claude Code