Check Chart/Mdim Preview on Staging
Visually verify that a chart or multidimensional indicator page renders correctly on the staging server.
Prerequisites
- The
agent-browserskill must be available (for browser automation) - 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 --watchin VSCode or manually)
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/export/multidim/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.ymlOption 2: Construct manually
- Get the git branch:
git branch --show-current - Compute container name: replace
/._with-in branch name, strip anystaging-site-prefix, prependstaging-site-, truncate the normalized part to 28 chars, strip trailing- - Determine chart type and URL:
| File type | URL pattern |
|---|---|
.chart.yml (simple, no # in slug) | http://<container>/grapher/<slug> |
.chart.yml (mdim, # in slug) | http://<container>/admin/grapher/<catalogPath> |
export/multidim/*.config.yml or *.py | http://<container>/admin/grapher/<namespace>/<version>/<shortName>%23<shortName> |
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 export multidim: derive from path etl/steps/export/multidim/<namespace>/<version>/<shortName>.* → catalogPath is <namespace>/<version>/<shortName>#<shortName>.
Checking the Preview
Use the agent-browser skill to:
- Navigate to the staging URL
- Wait for the chart to render (look for the Grapher SVG or iframe content to load)
- Verify:
- No error banner or "Chart not found" message - Chart title is visible - Data points / map regions are rendered (not an empty chart) - For mdim: dimension dropdowns are present and functional
- Take a screenshot and save to
ai/directory
Quick PNG check (non-mdim charts only)
For simple (non-mdim) charts, you can fetch a PNG directly without a browser:
curl -o ai/chart_preview.png "http://<container>/grapher/<slug>.png?nocache"Add &tab=map or &tab=chart to control which tab is shown. This does NOT work for mdim charts.
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 --private
# For export multidim
.venv/bin/etlr export://multidim/<namespace>/<version>/<shortName> --export --private