OSDU Schema Viz

A React + Vite app using React Flow to explore and visualize OSDU JSON Schemas and their relationships.

Check out the live demo here.

Quick features

• Dropdown search to find and select any schema found under public/data/**/*.(min.)json. The current schema source is from the published v0.28.7 here and reference values here.
• Fast text search / filter by schema title, $id or version.
• Clickable graph nodes with styled relationship edges and tooltip details.
• Tooltip shows properties, relationships and (for reference-data types) loads reference values from disk.

Requirements

• Node.js 18 or later
• npm (or yarn) — project uses npm scripts
• Modern browser for the UI (Chrome, Edge, Firefox) with IndexedDB support
• Recommended: 4+ GB free disk and 2+ GB RAM for a smooth dev experience when working with all schemas

Installation & Quick Start

1. Clone the repo and change into the project directory:

git clone <repo> && cd osdu-viz

1. Install dependencies:

npm install

1. Run the dev server (Vite):

npm run dev

1. Open the app in your browser (usually http://localhost:5173)

Notes for deployment

• The app prefers minified JSON assets in public/data (*.min.json). The build script scans public/data/Generated and writes public/schema-index.json which the app consumes at runtime.
• If you host the app under a subpath, set Vite's base (for example base: '/osdu-viz/' in vite.config.ts). The app uses the Vite BASE_URL internally so asset fetches resolve correctly.
• Serve dist/ (the npm run build output) from a static host or CDN. Configure long-lived caching for versioned .min.json files and appropriate cache-control for schema-index.json.

IndexedDB cache

• DB name: osdu-viz-cache
• Object store: schemas (keyPath: path)
• Behavior: cached schemas are only used as a fallback when network fetches return zero schemas (offline resume). This avoids merging large cached sets into fresh loads.

Troubleshooting

• If reference values are not visible in tooltips, check the Network tab for attempted candidate paths like /data/reference-data/OPEN/RigType.1.min.json.
• To inspect the IndexedDB cache in Chrome: DevTools → Application → IndexedDB → osdu-viz-cache → schemas.

Development

• Requires Node 18+

Run locally

npm install
npm run dev

Build

npm run build
npm run preview

Tests

npm test