Sign in
concept-collection / numbl-figure-viewer
main
Branches
main
numbl-figure-viewer
Go to fileHistoryFork
Code
Clone with HTTP

Anyone can clone. Pushing asks for a username and a token.

Download main
Source as zipSource as tar.gz
owner Use a relative base so the build works at any mount point ab35c1f 6 Commits
.githubnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
srcAdd "Share link" to copy a shareable URL to the current figure
.gitignorenumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
index.htmlnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
package-lock.jsonnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
package.jsonnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
README.mdVS Code-style layout: object tree + figure + details panel
tsconfig.app.jsonnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
tsconfig.jsonnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
tsconfig.node.jsonnumbl figure viewer: upload a numbl .h5 figure and render it via numbl/graphics
vite.config.tsUse a relative base so the build works at any mount point
README.md

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