Check Chart/Mdim Preview on Staging

Visually verify that a chart or multidimensional indicator page renders correctly on the staging server.

Prerequisites

• A staging server must be running for the current git branch (check via curl -s -o /dev/null -w "%{http_code}" http://<container>/)
• The chart/mdim must have been pushed to staging already (either via etlr --watch in VSCode or manually)
• For non-trivial UI checks (MDIM dropdowns, link/unlink chips, etc.) the agent-browser skill is needed; for plain PNG snapshots it isn't

Getting the Staging URL

Option 1: Helper script (recommended)

.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py <slug-or-path>

Accepts chart slugs, mdim slugs, or file paths:

# Chart slug (most common)
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py life-expectancy

# Mdim slug
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py energy/latest/energy_prices#energy_prices

# Export multidim file path
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py etl/steps/viz/chart/energy/latest/energy_prices.config.yml

# Chart file path
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py etl/steps/graph/covid/latest/covid-cases.chart.yml

Option 2: Construct manually

1. Get the git branch: git branch --show-current
2. Compute container name: replace /._ with - in branch name, strip any staging-site- prefix, prepend staging-site-, truncate the normalized part to 28 chars, strip trailing -
3. Determine chart type and URL:

For .chart.yml: the slug is in the YAML slug: field. For mdim slugs containing #, the catalogPath inserts the version from the file path.

For viz chart steps: derive from path etl/steps/viz/chart/<namespace>/<version>/<shortName>.* → catalogPath is <namespace>/<version>/<shortName>#<shortName>.

Checking the Preview

Recommended: PNG via /grapher/by-uuid/<UUID>.png (works for drafts)

The fastest, most reliable way to grab a chart's rendered image — works for drafts as well as published charts, no browser, no auth required. Uses the same render pipeline OWID's public site uses for /grapher/<slug>.png, but addresses the chart by its chart_configs.id UUID, which is published to R2's byUUID/ directory for every chart (whether or not the chart itself is isPublished).

# Resolve slug → by-uuid PNG URL, then fetch
URL=$(.venv/bin/python .claude/skills/check-chart-preview/get_chart_png_url.py <slug-or-id>)
curl -o ai/chart_preview.png "$URL"

Pass extra grapher query params with --<key>=<value>:

.venv/bin/python .claude/skills/check-chart-preview/get_chart_png_url.py <slug> --tab=map
.venv/bin/python .claude/skills/check-chart-preview/get_chart_png_url.py <slug> --tab=chart --time=earliest..2020

The helper queries the staging MySQL via etl.config.OWID_ENV.read_sql (which auto-routes to staging-site-<branch>).

Use the resulting PNG by reading it directly with the Read tool (Claude can view images).

Fallback: browser preview for mdim pages / interactive UI

The by-uuid PNG route renders a single chart frame. For MDIM data pages with dropdowns, or for verifying interactive UI (controls, link/unlink chips, etc.), use the agent-browser skill to navigate to the staging URL from get_staging_url.py and take an in-browser screenshot.

Quick PNG check (published charts only)

For charts that are already published, the slug-based PNG route also works:

curl -o ai/chart_preview.png "http://<container>/grapher/<slug>.png?nocache"

This 404s for drafts — use the by-uuid route above instead.

Pushing to Staging First

If the chart hasn't been pushed yet:

# For graph step charts
.venv/bin/etlr graph://<namespace>/<version>/<slug> --graph --graph-push

# For viz chart steps (charts and MDIMs)
.venv/bin/etlr viz://chart/<namespace>/<version>/<shortName> --grapher