Skip to content

feat(web): add Deep Analysis page (/analysis.html) as second Vite entry - #21

Merged
cnighswonger merged 1 commit into
mainfrom
feature/web-deep-analysis-page
May 20, 2026
Merged

feat(web): add Deep Analysis page (/analysis.html) as second Vite entry#21
cnighswonger merged 1 commit into
mainfrom
feature/web-deep-analysis-page

Conversation

@vsits-proxy-builder

Copy link
Copy Markdown
Contributor

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

  • 6 new files added under web/:
    • web/analysis.html — second Vite entry
    • web/src/analysis-main.jsx — React entry
    • web/src/AnalysisApp.jsx — top-level composition
    • web/src/components/analysis-sections.jsx — section components
    • web/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 archive
    • docs/web-handoff-2026-05-17/ANALYSIS_PAGE.md — addendum handoff doc (corrected to the current state: ECharts, scrubbed IP)
  • 2 edits:
    • web/vite.config.mjs — added rollupOptions.input.analysis so vite builds both entry points
    • web/src/lib/chartBase.jsx — added LineChart to 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 its chartBase.jsx, charts.jsx, and package.json were Highcharts-era regression state, and its README.md referenced 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

Page Pre-PR-#21 (gzip JS) Post-PR-#21 (gzip JS) Delta
/ (dashboard) 254.18 KB ~264 KB +10 KB (LineChart registration)
/analysis.html n/a ~271 KB new page

Shared chunk served once, cached across both pages.

Test plan

  • cd web && npm install && npm run build succeeds; both index.html and analysis.html produced
  • Dev server smoke test — both entry points serve HTTP 200 through Vite; both analysis-*.jsx modules resolve cleanly
  • Operator visual check — load /analysis.html in a browser via npm run dev, confirm all 5 new charts render against live /api/v1/dataset data
  • Operator visual check — confirm dashboard at / still renders unchanged from current production
  • Codex pre-merge review

Known soft notes

  • Bundle grew ~10 KB gzip on the dashboard page from the LineChart registration. Cheaper than splitting chartBase.jsx into entry-conditional registrations; flagged for future code-splitting if bundle weight becomes a concern.
  • ECharts aria config 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

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

@vsits-codex-review-agent vsits-codex-review-agent Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 markLine usages are nested under series, not at top-level.
  • Verified HypothesisRangeChart keeps its per-line lineStyle overrides on each markLine.data entry, preserving distinct parity vs hypothesis styling.
  • Verified QuotaWindowsChart reverses both y-axis categories and series data consistently, yielding Q7d at the top and Q5h at the bottom as annotated in-code.
  • Verified CacheSensitivityChart uses a line series with areaStyle and a series-scoped markLine at xAxis: 88.
  • Verified SubstitutionChart uses per-bar itemStyle.color like the dashboard pattern, and CapacityScenarioChart / tooltip wiring are coherent.
  • Verified web/src/lib/chartBase.jsx imports LineChart from echarts/charts and the registration now matches actual usage.
  • Verified web/vite.config.mjs resolves both index.html and analysis.html via resolve(__dirname, ...); production build confirms __dirname works in this config.
  • Verified analysis-sections.jsx imports resolve cleanly (fmtN from derive.js, Footer from the current sections.jsx) with no leftover Highcharts-specific dependencies.
  • Verified docs/web-handoff-2026-05-17/ANALYSIS_PAGE.md matches 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 gzip
  • public/analysis.html: 1054 raw / 480 gzip
  • public/assets/index-C27HMDkz.js: 1269 raw / 588 gzip
  • public/assets/analysis-DdAqeKnU.js: 27910 raw / 7938 gzip
  • public/assets/styles-d46ryG66.js (shared JS chunk): 795074 raw / 262243 gzip
  • public/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

@vsits-codex-review-agent vsits-codex-review-agent Bot added the approved-by-codex-agent Codex Review Agent approval label May 20, 2026
@cnighswonger
cnighswonger merged commit d02b553 into main May 20, 2026
1 check passed
@cnighswonger
cnighswonger deleted the feature/web-deep-analysis-page branch May 20, 2026 16:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved-by-codex-agent Codex Review Agent approval

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant