Skip to content

Fetch the citation dialog on first open; hold the embed to a fixed budget (closes #356) - #435

Merged
adamjohnwright merged 3 commits into
mainfrom
perf/356-load-features-on-use
Oct 13, 2026
Merged

adamjohnwright merged 3 commits into
mainfrom
perf/356-load-features-on-use

Conversation

@adamjohnwright

Copy link
Copy Markdown
Contributor

The last part of #356.

The citation dialog loads when it's first opened.

  • The embed provides CitationService but never shows its dialog. The service's MatDialog and CitationComponent imports were carrying Material's dialog code into the embed's first load.
  • Both are now imported when the dialog first opens. The Pathway Browser's and the site's buttons report a failed fetch.
  • The embed's initial load goes from 1,366 KB to 1,324 KB, with no dialog code left in it.

Correction to what I first proposed: svg-pan-zoom (illustrations) and svgcanvas (downloads) were already loaded on demand in the embed, through the lazy illustration component. My earlier per-package totals had mixed on-demand chunks into the first load. The slider and drag-and-drop are the zoom control and the legend drawer, both visible in the first view, so they stay.

The "Cite us" button had no accessible name. Nothing tested the dialog, so e2e/citation-dialog.spec.ts now does: the Pathway Browser's "Cite us" and the site-wide "Cite Us".

  • Writing the test showed the Pathway Browser's button had only a tooltip, so a screen reader announced an unnamed button. It now has aria-label="Cite us", and the test finds it by that name. I checked the test fails without it.
  • The pathway citation request carries today's date (?dateAccessed=), so no recording can match it. The test answers it in the service's own shape, taken from beta.
  • The recordings were scanned for server version strings; there are none.

SC-004 is now a fixed budget.

  • It said "less than a third of the full site", but that ratio moves whenever the site changes: slimming the site raised the bar by about 50 KB while the embed was being slimmed.
  • It now names an absolute budget, set just above today's 1.36 MB initial so the embed can only shrink: warn 1.4 MB, error 1.45 MB in angular.json, for production and beta.
  • I checked that a 1.3 MB budget fails the build.
  • spec.md and tasks.md record the change and why.

Where #356 ends up (with #432, reactome/ngx-reactome-base#15 + #434 and #433): the router, lodash, vectorious and the dialog are all out of the first load. Initial JavaScript went from 1.58 MB to 1.36 MB.

Checks: unit tests (729) pass; the citation e2e tests (2) pass; preflight passes; lint is unchanged.

Closes #356.

🤖 Generated with Claude Code

adamjohnwright and others added 3 commits October 13, 2026 12:01
…dget (closes #356)

The embeddable diagram provides CitationService but never shows its dialog,
and the service's MatDialog and CitationComponent imports carried Material's
dialog code into the embed's first load. They are now imported when the
dialog is first opened; the viewport reports a failed fetch. The embed's
initial load goes from 1,366 KB to 1,324 KB.

Writing a test for the dialog (e2e/citation-dialog.spec.ts; nothing tested it)
found the "Cite us" button had no accessible name -- only a tooltip -- so a
screen reader announced an unnamed button. It now has aria-label "Cite us",
and the test finds it by that name (it fails without it). The citation request
carries today's date, so the test answers it in the service's own shape.

SC-004 named "less than a third of the full site", a ratio that moves when the
site changes: slimming the site raised the bar by about 50 KB while the embed
was being slimmed. It now names an absolute budget, set just above today's
1.36 MB initial so the embed can only shrink: warn 1.4 MB, error 1.45 MB
(angular.json, production and beta). Checked: a 1.3 MB budget fails the build.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…est it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…get measures

The first open now waits while the dialog's code loads, so a second click in
that moment was likelier and opened a second dialog. openDialog() is guarded
while an open is in flight, and the dialog has an id it checks for. The new
e2e test fails without the guard (two dialogs) and passes with it. The unused
afterClosed() call is gone, and SC-004's note says the budget checks the
build's initial total, unlike the browser measurement beside it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@adamjohnwright

Copy link
Copy Markdown
Contributor Author

Review (subagent, adversarial): no defects. MatDialog is providedIn: 'root', so resolving it through the service's injector gives the same instance and overlay container as before, on the site and in the embed; both callers handle the promise; the route pattern matches the dated request; recordings carry no server/version headers; the budget is enforced by CI and preflight (build:embed, production), with 1,355,809 bytes against 1.4 MB / 1.45 MB in Angular's 1000-based units. Fixed in the latest commit: a second click while the dialog's code loads no longer opens a second dialog (in-flight guard plus a dialog id; the new e2e test fails without it, two dialogs), the unused afterClosed() is gone, and SC-004 says which figure the budget checks.

@adamjohnwright
adamjohnwright merged commit cff1f22 into main Oct 13, 2026
6 checks passed
@adamjohnwright
adamjohnwright deleted the perf/356-load-features-on-use branch October 13, 2026 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Embeddable diagram: slim the bundle below a third of the site's

1 participant