numbl figure viewer#

A browser app that opens a .h5 figure file exported from numbl and renders it — reusing numbl's own figure components via the numbl/graphics package export.

In numbl (or its IDE / plot viewer) you can download any figure's data as a self-describing HDF5 file (numeric data as gzip-compressed datasets, styling as attributes). Open that file here to view and inspect it outside numbl.

Interface#

A VS Code-style three-pane layout that fills the window and is responsive / mobile-friendly:

• Left — an expandable tree of the figure's objects (figure → axes → traces → data arrays).
• Center — the rendered figure (numbl's FigureView, which resizes with the pane).
• Right — details of the selected object: properties (with colour swatches) for figure/axes/traces, and shape / stats / a value preview for data arrays.

On narrow screens the side panels become slide-in drawers.

How it works#

import { importFigureHdf5, FigureView } from "numbl/graphics";

const figure = await importFigureHdf5(bytes); // .h5 → FigureState
// <FigureView figure={figure} />

importFigureHdf5 parses the HDF5 file (via lazily-loaded h5wasm) into the same FigureState numbl renders internally, and FigureView draws it.

Develop#

npm install      # numbl is a local file: dependency (../../numbl)
npm run dev

This app consumes numbl as file:../../numbl. Build the numbl graphics bundle first (npm run build:graphics in the numbl repo) so numbl/graphics resolves. The deployed site (GitHub Pages) builds against numbl's main branch automatically — see .github/workflows/deploy.yml.

Build#

npm run build            # → dist/
npm run build:pages      # base path for GitHub Pages project site