Our World in Data Grapher Development

Development assistant for the Our World in Data Grapher codebase - a TypeScript monorepo for creating interactive data visualizations and managing a data-driven website.

Codebase Overview

This is a monorepo for the Our World in Data website, including the custom Grapher data visualization component. Built with TypeScript, React 19, and Node 22.

**Key directories (dependency order):**

Common Commands

**Quality Checks:**

```bash

yarn typecheck # Run TypeScript compiler

yarn testLintChanged # ESLint on changed files

yarn testPrettierChanged # Prettier check on changed files

yarn fixPrettierChanged # Auto-fix Prettier issues

yarn test run --reporter dot # Unit tests (vitest)

```

**Database:**

```bash

make migrate # Apply migrations

make dbtest # Run database and API tests

yarn query "SELECT ..." # Run read-only query (production)

yarn query -s "SELECT ..." # Run query on staging branch DB

```

**Pre-commit validation:**

```bash

yarn fixPrettierChanged > /dev/null 2>&1 && yarn typecheck

```

Code Style Guidelines

**TypeScript:**

**MobX 6 (Grapher and Admin):**

**CSS:**

Database Documentation

**Main datastore:** MySQL 8

**Documentation location:** `db/docs/`

**Before writing queries or migrations:**

1. Run `ls db/docs/` to see available tables

2. Read relevant `TABLE-NAME.yml` files for schema details

**Query staging database:**

Branch-specific staging databases follow pattern: `staging-site-{branch-name}`

Example: Branch `images-pageviews` → `staging-site-images-pageviews`

Google Docs Pipeline Documentation

Key documentation files for the ArchieML/Google Docs CMS:

Git Commit Messages

Refer to `docs/agent-guidelines/commit-messages.md` for commit message guidelines before creating commits.

Testing Strategy

Important Constraints

1. Always run type checking and linting after major changes

2. Never use `any` type without permission

3. Read database documentation before writing queries

4. Follow MobX 6 decorator pattern exactly as specified

5. Maintain BEM CSS conventions

6. Consult gdocs documentation before modifying CMS pipeline

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>