1# numbl figure viewer
3A browser app that opens a `.h5` **figure file** exported from
4[numbl](https://numbl.org) and renders it — reusing numbl's own figure
5components via the `numbl/graphics` package export.
7In numbl (or its IDE / plot viewer) you can download any figure's data as a
8self-describing HDF5 file (numeric data as gzip-compressed datasets, styling as
9attributes). Open that file here to view and inspect it outside numbl.
11## Interface
13A VS Code-style three-pane layout that fills the window and is responsive /
14mobile-friendly:
16- **Left** — an expandable tree of the figure's objects (figure → axes → traces
17 → data arrays).
18- **Center** — the rendered figure (numbl's `FigureView`, which resizes with the
19 pane).
20- **Right** — details of the selected object: properties (with colour swatches)
21 for figure/axes/traces, and shape / stats / a value preview for data arrays.
23On narrow screens the side panels become slide-in drawers.
25## How it works
27```ts
28import { importFigureHdf5, FigureView } from "numbl/graphics";
30const figure = await importFigureHdf5(bytes); // .h5 → FigureState
31// <FigureView figure={figure} />
32```
34`importFigureHdf5` parses the HDF5 file (via lazily-loaded h5wasm) into the same
35`FigureState` numbl renders internally, and `FigureView` draws it.
37## Develop
39```bash
40npm install # numbl is a local file: dependency (../../numbl)
41npm run dev
42```
44> This app consumes `numbl` as `file:../../numbl`. Build the numbl graphics
45> bundle first (`npm run build:graphics` in the numbl repo) so
46> `numbl/graphics` resolves. The deployed site (GitHub Pages) builds against
47> numbl's `main` branch automatically — see `.github/workflows/deploy.yml`.
49## Build
51```bash
52npm run build # → dist/
53npm run build:pages # base path for GitHub Pages project site
54```