[frano-m]

Closes #5003

What changed

• Stylesheet: analytics.css from findable-ui v58.0.0 now ships with the analytics package (template/analytics.css, included in package data). generate_site() copies it next to each index.html, and the template links it relatively. This replaces the jsDelivr link to the fran/873-static-css branch.

• Branding at build time: the new render_page() / write_page() write the site's branding into index.html when it is generated:

  • the <title> and page heading
  • the favicon
  • the header logo: src, link, alt text, width and height
  • --fui-primary, --fui-primary-dark and --fui-header-logo-height

  The JS that set these after data/config.json loaded is removed.

• New config keys (all optional):

  • logo_width, logo_height: the logo's size in px, as shown in the app's header.
  • extra_css: extra CSS for <head>, e.g. a per-breakpoint logo height.

  Setting only one of logo_width / logo_height raises an error, and so does an unknown {{token}} in the template. The page is rendered before the GA4 fetch, so a config mistake stops the run at once.

• Header markup: now <div class="fui-header-left"><a class="fui-header-logo">…</a></div>, so only the logo is clickable rather than the whole left column.

• Site configs:

  Site	Logo	Size
  AnVIL Explorer	anvilExplorer.png (was logoAnvil.png)	198.09×32, and 44px from 1280px up
  HCA	unchanged	156.52×32.5
  LungMAP	unchanged	131.15×32
  AnVIL Catalog	unchanged	109.58×40

• Stat tooltips:

  • They use the shared .fui-tooltip, with aria-describedby and the Escape-to-close script from the analytics.css usage notes.
  • They are capped to their card's width, so tooltips on the first and last cards stay on screen.
  • The page's own .stat-tooltip CSS is removed.

• Chart.js: tooltips follow the usage-notes snippet. Tooltip, text and series colours are read from --fui-ink, --fui-ink-light and --fui-primary.

• Stat values: use the theme's heading-xlarge, so they are 40px on desktop (30px on mobile), as intended.

• Version: the analytics package goes to 5.1.0.

• gh-pages/: the anvil-explorer, hca-explorer and lungmap pages are re-rendered and analytics.css is added. data/ is unchanged: the July 2026 data stays.

Why

The analytics pages' headers didn't match their explorers:

• the logo appeared 300–800ms late
• the whole left column was a link
• AnVIL showed the wrong logo
• the pages loaded CSS from a branch URL that breaks when the branch is deleted

The generator copies the template over index.html on every run, so the template is the only place a fix lasts. anvil-portal#4201 is waiting on this release.

Assumptions I made

• The AnVIL logo grows at 1280px, not 1440px as the issue says. The explorer switches with useBreakpointHelper(UP, "md"), and findable-ui's md is 1280.
• Logo sizes match what the explorers show, taken from site config and the image dimensions: AnVIL 198.09×32 and 272.38×44, HCA 156.52×32.5, LungMAP 131.15×32. Fractional width/height attributes keep the aspect ratio exact; findable-ui's Logo renders them the same way.
• The logo alt text is site_title. The AnVIL explorer itself uses "NHGRI Analysis Visualization and Informatics Lab-space".
• A local copy of analytics.css, not a CDN link, so each generated site works on its own. When findable-ui is upgraded, re-copy it from node_modules; the README names the source version.
• Re-rendering gh-pages/ also deploys three template changes that were never deployed (fix: generalize access-request service classification and stat cards in analytics template (#4922) #4930, refactor: consolidate stat-card markup in static analytics template (#4923) #4931, chore: cap static analytics detail exports at top-n rows (#4924) #4932). All three pages load the July data without errors.
• meta-disco-browser's copy of the template is out of scope; it has its own ticket.
• analytics-5.1.0 is tagged after merge, and anvil-portal#4201 then moves to it.

How to verify

1. Check out the branch, then run cd gh-pages && python3 -m http.server 8080.
2. Open http://localhost:8080/anvil-explorer/, http://localhost:8080/hca-explorer/ and http://localhost:8080/lungmap/. Open each explorer alongside its dashboard.

Definition of done:

• The headers match their explorers (logo, height, position) from first paint.
  • Throttle the network in DevTools (e.g. "Slow 4G") and reload. The logo's space, the page title, the heading and the brand colour are there before any data/*.json loads.
  • AnVIL shows "AnVIL Data Explorer": 32px tall below 1280px wide, 44px from 1280px up. Inspect the <img>: it should be 198.09×32 or 272.38×44, matching the explorer.
  • HCA is 156.52×32.5 and LungMAP 131.15×32.
  • Only the logo is clickable, not the empty space to its right.
• The pages load the released analytics.css.
  • The Network tab shows analytics.css coming from the page's own origin, with no request to cdn.jsdelivr.net/gh/DataBiosphere/findable-ui@fran/873-static-css.

Also check:

• Stat tooltips: hover or tab to "Users" and a tooltip appears; Escape closes it. At 768–1280px wide, the tooltips on "Users" and "Engagement Rate" stay on screen, and the page doesn't scroll sideways.
• Chart tooltips: hover a chart point. The tooltip is dark (--fui-ink) with 13px text, like the stat tooltips.

Screenshots

🤖 Generated with Claude Code
🐦 Built with cc-claude-tools

[Copilot]

🟢 Approval recommended

No active review issues remain for the build-time branding and bundled-stylesheet changes.

No open issues 🎉

What changed in this PR

Updates the shared analytics generator and published dashboards to render branding in HTML from first paint and use a bundled, released stylesheet, addressing #5003.

Changes:

• Renders titles, favicons, logos, dimensions, and theme colors at build time, with validation before fetching analytics data.
• Bundles findable-ui v58.0.0 CSS, updates tooltip styling, corrects AnVIL Explorer branding, and bumps the analytics package to 5.1.0.
• Regenerates three published dashboards, incorporating earlier template improvements while preserving existing analytics data.

File	Description
gh-pages/​lungmap/​index.html	Regenerates LungMAP branding and dashboard markup.
gh-pages/​lungmap/​analytics.css	Adds the local released stylesheet.
gh-pages/​hca-explorer/​index.html	Regenerates HCA branding and dashboard markup.
gh-pages/​hca-explorer/​analytics.css	Adds the local released stylesheet.
gh-pages/​anvil-explorer/​index.html	Regenerates AnVIL branding with the corrected, responsive logo.
gh-pages/​anvil-explorer/​analytics.css	Adds the local released stylesheet.
analytics/​uv.lock	Records analytics version 5.1.0.
analytics/​lungmap/​generate_static_site.py	Configures LungMAP logo dimensions.
analytics/​hca-explorer/​generate_static_site.py	Configures HCA logo dimensions.
analytics/​anvil-explorer/​generate_static_site.py	Corrects the logo asset and configures responsive sizing.
analytics/​anvil-catalog/​generate_static_site.py	Configures AnVIL Catalog logo dimensions.
analytics/​analytics_package/​pyproject.toml	Bumps the version and includes CSS in package data.
analytics/​analytics_package/​analytics/​static_site/​template/​index.html	Adds branding placeholders, local CSS, and shared tooltip behavior.
analytics/​analytics_package/​analytics/​static_site/​template/​analytics.css	Bundles findable-ui v58.0.0 dashboard styles.
analytics/​analytics_package/​analytics/​static_site/​README.md	Documents branding options and bundled stylesheet maintenance.
analytics/​analytics_package/​analytics/​static_site/​generator.py	Adds validated HTML rendering and stylesheet copying before data fetching.

_{Review effort: Balanced}

[NoopDog]

Thanks Fran! Nice to have the logo there from first paint.