Chart preview extension using staging server

[Marigold]

Motivation

We manage chart configurations through two systems: the Admin UI and, more recently, YAML-based .chart.yml files in ETL (graph steps). This PR builds the infrastructure for graph steps — a new ETL pipeline channel that lets you define charts as code, push them to the database, and preview them live.

It also ships a VSCode extension with a live preview panel, enabling fast iteration on chart configs — both for humans and for agentic workflows where an LLM edits chart YAML with visual feedback in the loop.

What's in here

• graph:// pipeline channel — new DAG channel with --graph flag; .chart.yml files define chart configs (single charts or multi-dimensional collections)
• Push/pull sync — --graph-push overwrites Admin UI edits, --graph-pull syncs DB changes back to YAML, with conflict detection when both sides have been edited
• Short indicator names — YAML uses short names like fur_farming_status that auto-expand to full catalog paths using DAG dependencies (no hardcoded versions)
• Python graph steps — for dynamic values (e.g., calculating thresholds at runtime) alongside YAML configs
• chart-preview VSCode extension — live preview panel that hot-reloads on save, supports regular charts, mdim graph steps, and export/multidim steps
• Export/multidim preview support — the extension also works with export://multidim/ steps (.config.yml and .py files), running them with --export --watch

Workflow demo

1. Install the extension and build upstream data

make vsce-compile EXT=chart-preview INSTALL=1
.venv/bin/etlr grapher/animal_welfare/2025-01-07/fur_laws --private

Reload VSCode (Cmd+Shift+P → "Reload Window").

2. Open a chart with live preview

Open etl/steps/graph/animal_welfare/latest/fur-farming-ban.chart.yml. Click the preview icon in the editor title bar — an interactive Grapher chart appears in a side panel. Edit the YAML, save, and the preview refreshes automatically.

3. Preview export/multidim steps

The extension also works with the older Python-based multidim steps. Open etl/steps/export/multidim/war/latest/ucdp.py or ucdp.config.yml and click preview — it runs etlr --export --watch and shows the mdim chart from staging.

4. Let Claude Code edit charts for you

Start Claude Code in the repo and use the /chart-editing skill:

> /chart-editing
> Change the color of "Banned" to dark red and add a subtitle

Claude reads the schema, edits the YAML, and iterates. The VSCode preview panel hot-reloads on every save.

Graph step examples

Simple chart (fur-farming-ban.chart.yml):

slug: fur-farming-ban
title: Which countries have banned fur farming?
tab: map
hasMapTab: true
dimensions:
  - property: y
    catalogPath: fur_farming_status

Mdim collection (covid-cases.chart.yml):

slug: covid/covid#covid_cases
title:
  title: COVID-19 confirmed cases
dimensions:
  - slug: period
    choices: [{slug: weekly}, {slug: biweekly}]
views:
  - dimensions: {period: weekly, metric: absolute}
    indicators:
      y: [{catalogPath: weekly_cases}]

Limitations

This is a prototype. Not yet supported:

• Inheritance from variable metadata
• Dynamic placeholders in chart YAMLs (e.g. {definitions.description})
• The render script has ~0.8s startup overhead per render

🤖 Generated with Claude Code

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-chart-preview-staging

chart-diff: ❌

• 0/1 reviewed charts
• Modified: 0/1
• New: 0/0
• Rejected: 0
• Data changes: 0
• Metadata changes: 0

data-diff: ✅ No differences found

Automatically updated datasets matching excess_mortality|covid|fluid|flunet|country_profile|garden/ihme_gbd/2019/gbd_risk are not included

Edited: 2026-02-23 11:05:22 UTC
Execution time: 12.88 seconds

[Marigold]

Some parts of this were already merged, but we need to wait for the support of chart configs. Then we should rebase.