H5Web 13

Full Changelog: v12.0.0...v13.0.0

@h5web/app

• ⚠️ Breaking change: [H5GroveProvider] Now requires [email protected] #1709
• ✨ Preserve dimension mapping and slicing when possible, notably when toggling inspect mode or selecting another dataset with the same dimensions #1572 (comment) #1698
• ✨ Support visualizing enum datasets and signals #1498 #1688
• [H5GroveProvider] Support inspecting metadata of committed datatypes #1699 #1710
• New enableBigIntSerialization utility to enable big integer serialization in consumer apps. #1706
  Invoke this function before rendering H5Web to allow the Raw visualization and metadata inspector to serialize and display big integers. This is needed only when working with a provider that can return int-64 values as JavaScript big integers (currently only MockProvider).

@h5web/lib

• ⚠️ Breaking change: Change signature of useGeometry hook to fix React warning. #1684 #1687
  Previously, the params parameter could be set to false or undefined to skip updating the geometry (e.g. when the R3F object is hidden). Now, it is required. The fourth parameter, isInteractive is replaced with a configuration object with two options: isInteractive and skipUpdates.
• ⚠️ Breaking change: [ScalarVis] Remove prop formatter and change prop value to accept an already-formatted string — see #1705 for migration examples.
• ⚠️ Breaking change: [MatrixVis] Replace props dataArray and formatter with props dims and cellFormatter — see #1702 for migration example.
• 🐛 [VisCanvas] Customize frustrum only when using orthographic camera #1685 #1686
• Add CSS property --h5w-overflowMenu-control--justify to customise alignment of controls in overflow menu #1695 #1696

@h5web/h5wasm

• ✨ Support variable-length datasets #1692
• Support inspecting metadata of committed datatypes #1699 #1708

Screenshots

Preserving dimension mapping

Enum datasets visualisation

Variable-length support with h5wasm

H5Web 12

Full Changelog: v11.2.0...v12.0.0

@h5web/app

• ✨ < NX Line, NX Heatmap > Support complex auxiliary signals #1676 #1680
• ✨ < Line > Replace Autoscale toggle in toolbar with domain widget to allow customising the y axis domain #1665
• ✨ < Compound > Visualize compound scalar datasets #1674
• ✨ < Raw > Add toggle to fit raw JPEG/PNG images to viewport (on by default) #1633
• ✨ [H5GroveProvider, HsdsProvider] Add prop resetKeys to reset fetch cache when file content changes #1673
• 🐛 < Raw > Disable dark mode on raw JPEG/PNG images #1628
• 🐛 Fix alignment of toolbar controls in overflow menu #1647
• 🐛 Don't capitalize attribute names in metadata viewer #1671
• ⚡ Reduce delay when slicing through a dimension whenever the target slice is already in the cache #1634 #1667
• Make variable-length string types explicit in metadata viewer #1620
• Allow inspecting HDF5 string padding metadata with h5grove (>=2.2.0), h5wasm and HSDS providers #1659
• Errors that occur when retrieving dataset values are no longer stored in the provider's cache, which allows for retrying #1661
• Throw error when encountering axes or auxiliary_signals attributes with dataset paths #1671

@h5web/lib

⚠️ Breaking changes

• [Btn] Prop onClick now receives the MouseEvent as first parameter #1653
  • 👉 Please make sure you don't pass a state setter as is, like onClick={toggleOpen}; if you do, refactor with an arrow function instead: onClick={() => toggleOpen()}
• [Selector] Remove prop optionComponent #1652
  • 👉 Use new renderOption prop instead, which accepts an inline render function instead of a component
• Remove component ColorMapOption #1652
  • 👉 Use new ColorMapGradient component instead, which renders only the horizontal color map gradient preview
• Remove deprecated components GridToggler and FlipYAxisToggler #1653
  • 👉 Use ToggleBtn directly instead
• [ExportMenu] Remove prop align #1653
  • 👉 The popup is now smart enough to remain within the bounds of the viewport

Other changes

• ⚙️ Remove react-aria-menubutton dependency to get rid of peer dependency warning
  • 👉 You may now revert any package manager configuration that you had made to silence the warning
• 🐛 [Line] Fix subtle glitch between two points with finite and infinite/NaN coordinates #1632
• [VisCanvas] Tweak camera frustrum to provide wider z range, and export Z_MIN and Z_MAX constants #1632
• [SelectionTool] Start selection on pointerdown instead of pointermove #1625
• [Btn] Add prop withArrow to display a drop-down arrow #1653
• [Btn] Forward ref and any valid HTML attributes to the button element (HTMLAttributes<HTMLButtonElement>) #1653
• New ComplexVisTypeSelector toolbar component and ComplexVisType enum #1652

@h5web/h5wasm

• ⚠️ Breaking change: Rename H5WasmProvider to H5WasmBufferProvider #1664
• ✨ [H5WasmLocalFileProvider, H5WasmBufferProvider] Load compression plugins for datasets with compressed virtual sources within the same file #1662
• ✨ [H5WasmLocalFileProvider] Add prop resetKeys to reset fetch cache when file content changes #1673
• ⚡ [H5WasmBufferProvider] Now implemented with a Web Worker, which may reduce UI lag when accessing large datasets.

Screenshots

Complex auxiliary signals

NX Line	NX Heatmap

Scalar compound

Fit JPEG/PNG images

v11.2.0

Full Changelog: v11.1.1...v11.2.0

🎉 This release brings a new provider, H5WasmLocalFileProvider. Contrary to H5WasmProvider, which requires files to be loaded entirely into memory, H5WasmLocalFileProvider uses a web worker to enable partial reads. This allows reading local HDF5 files of virtually any size! Keep an eye out for upcoming releases of myHDF5 and the VS Code extension, or give it a try right away in the h5wasm demo!

@h5web/app

• ✨ < RGB > Allow flipping RGB visualizations on X and Y #1608
• ✨ Add NX Note visualization with support for JSON MIME type #1606
• 🐛 Fix styling of raw JPEG/PNG images in some contexts #1600

@h5web/lib

• [RgbVis] Add props flipXAxis and flipYAxis #1608

@h5web/h5wasm

• 🥳 Add new H5WasmLocalFileProvider, which supports reading local HDF5 files of any size #1604
• Improve support for empty datasets and attributes #1602

Screenshots

New NX Note visualization

Flipping RGB visualization

v11.1.1

Full Changelog: v11.1.0...v11.1.1

• 🐛 Fix styling regressions introduced with v11.1.0 in both @h5web/app and @h5web/lib.

v11.1.0

Full Changelog: v11.0.0...v11.1.0

@h5web/app

• ✨ < Heatmap > Add toolbar control to flip X axis #1573 #1574
• ✨ < NX Heatmap > Support auxiliary signals #1500 #1577
• ✨ < Raw > Display JPEG/PNG images stored as opaque datasets (requires h5grove>=2.1.0) #1554 #1587 #1590

@h5web/lib

• ✨ [HeatmapVis] New prop flipXAxis to flip heatmap horizontally
• ✨ Add props className and style to all visualization components (HeatmapVis, LineVis, RgbVis, etc.)
• ⚠️ Deprecate components FlipYAxis and GridToggler (to be removed in H5Web 12) — use ToggleBtn directly instead.

@h5web/h5wasm

• 🐛 Convert all bigints to number in H5WasmProvider without exceptions, notably in nested compound datasets, to fix error in Raw visualization #1536 #1581
• 5️⃣ Propagate HDF5 errors to viewer so they can be properly handled and displayed #1570 #1586
  • H5Web no longer has to guess ahead of time whether a compression filter is supported or not; it can now request the dataset knowing that if a decompression error occurs, it will be able to detect the error and inform the user. This means that some compressed datasets may now be displayed when they didn't use to be.

Screenshots

Flip X axis

Auxiliary signal selection

H5Web 11

Full Changelog: v10.1.0...v11.0.0

🎉 H5WasmProvider now supports loading the Blosc2 and Bitshuffle compression plugins provided by @bmaranville in [email protected]. Keep an eye out for upcoming releases of myHDF5 and the VS Code extension, or check out the h5wasm demo!

@h5web/app

• ⚠️ Breaking change [H5GroveProvider] now requires [email protected] #1557
  • ✨ External links are now included in search results thanks to improvements to the /paths endpoint.
  • ✨ Advanced HDF5 types, such as H5T_ENUM, H5T_OPAQUE, H5T_ARRAY, H5T_VLEN, H5T_REFERENCE, are now properly parsed and displayed in the metadata viewer thanks to improvements to the /metadata endpoint.
• 🐛 Fix import issues with Vitest #1562 #1564 #1565
• 🛠️ Reduce bundle size and runtime footprint in consumer applications #1537 #1564 #1571
• [H5GroveProvider, HsdsProvider] Document using React's key attribute to ensure the viewer displays up-to-date metadata and dataset values when the content of the current HDF5 file changes #1559
• [H5GroveProvider] Take advantage of h5grove's dtype=safe type conversions to fetch float16 and float128 datasets as binary (Float32Array and Float64Array respectively) instead of JSON #1561
• [H5GroveProvider] Recommend memoising axiosConfig object with useMemo #1559

@h5web/lib

• ⚠️ Remove mockMetadata, findMockEntity and getMockDataArray #1537
• ⚠️ Instead of holding entire, plain JS arrays, the mockValues object now provides factory functions to generate mock ndarrays only when needed — e.g. mockValues.twoD() returns a mock ndarray with dimensions [20, 41] #1537
• 🐛 Fix import issues with Vitest #1562 #1564 #1565
• 🛠️ Reduce bundle size and runtime footprint in consumer applications #1537 #1564 #1571
• Export toTypedNdArray utility to convert a plain number[] ndarray into a typed ndarray #1537

@h5web/h5wasm

• ✨ [H5WasmProvider] Support loading Blosc2 and Bitshuffle compression plugins provided in [email protected] #1524
  • ⚠️ The type of the getPlugin function prop has changed: it now accepts a Plugin enum value as argument.
• ✨ [H5WasmProvider] Correctly parse the following advanced HDF5 types: H5T_OPAQUE, H5T_VLEN, and H5T_REFERENCE so they no longer appear as Unknown in the metadata viewer #1556
• 🐛 [H5WasmProvider] Fix issue when switching between two files with the same NeXus default path #1568

v10.1.0

Full Changelog: v10.0.0...v10.1.0

🎉 This release brings initial support for loading compressed datasets with H5WasmProvider. Keep an eye out for upcoming releases of myHDF5 and the VS Code extension, or give it a try right away in the h5wasm demo! Big thanks to @bmaranville for making common HDF5 compression plugins available through the h5wasm-plugins package. 🏆

⚠️ This version includes a change that unwillingly breaks support for Create React App. However, since CRA is no longer maintained, we have decided to not revert the change. If this is causing issues with other set-ups, please let us know.

@h5web/app

• 🐛 < NX Heatmap > Fix min axis array length off by 1 in error message #1521

@h5web/lib

• ✨ New useGeometry hook, H5WebGeometry abstract class, and createBufferAttribute and createIndex utilities, to ease creation/update of buffer geometries #1515
  • The DataCurve component is now a simple abstraction on top of three new components, each of which comes with its own custom H5WebGeometry class(es). You are free to use these components directly, or to reuse, extend or just get inspiration from the new geometry classes for your own custom components:
    • Line + LineGeometry
    • Glyphs + GlyphsGeometry
    • ErrorBars + ErroBarsGeometry and ErrorCapsGeometry
  • Other experimental components have been refactored and now come with their own custom geometry classes as well (ScatterPointsGeometry, SurfaceMeshGeometry).
• 🐛 [HeatmapVis] Fix min axis array length off by 1 in error message #1521
• 🐛 [LineVis] Forward ignoreValue prop to auxiliary DataCurve(s) #1515

@h5web/h5wasm

• ✨ Allow consumer applications to load the following compression plugins on demand: Blosc, bzip2, LZ4, LZF, SZ, ZFP and Zstandard #1522
  • Consumers must implement the new function prop getPlugin of H5WasmProvider. This async function is called whenever a dataset compressed with one (or more) of the supported plugins is requested; it receives the name of the plugin as argument and should return the plugin's *.so shared library file as an array buffer if available.
  • Fetching the plugins' library files is the responsibility of the consumer application, as this depends on how/where the files are served, whether they are loaded via a bundler like Vite or webpack, etc. For an example of loading plugin files from the h5wasm-plugins package in a Vite project, see plugin-utils.ts in the demo project.
• 🐛 Fix NextJS import issue #1525

H5Web 10 – now with React 18

Full Changelog: v9.0.0...v10.0.0

🥳 H5Web is now on React 18!

If your application is on React 17, you will need to upgrade to React 18 before you can upgrade to H5Web 10. Going forward, H5Web 9 will receive only critical bug fixes, and only upon request.

@h5web/app

• 🎉 Upgrade React to v18 #1119
  • ⚠️ Breaking change: please upgrade react and react-dom to v18.x
• ✨ < Line, Heatmap > Support visualizing boolean datasets #1498 #1499
• 🐛 < Raw > Fix layout when content overflows #1488

@h5web/lib

• 🎉 Upgrade React to v18 and @react-three/fiber to v8 #1119 #1494
  • ⚠️ Breaking change: please upgrade react and react-dom to v18.x, and @react-three/fiber to v8.x
• 🐛 [RawVis] Fix layout when content overflows #1488
• ⚠️ [LineVis, HeatmapVis] Prop dtype, which controls the dtype displayed in the tooltip, must now be provided directly as a string #1512
• ⚠️ [VisCanvas] React Three Fiber now adds an extra div wrapper around the canvas element #1494

Experimental

• 🐛 [useDrag] Fix unstable drag while zooming #1487

@h5web/h5wasm

• ✨ [H5WasmProvider] Support (u)int64 data inside compound datasets (so they can be visualized with MatrixVis) #1503

v9.0.0

Full Changelog: v8.0.0...v9.0.0

@h5web/app

• ✨ [H5GroveProvider, MockProvider] Support exporting < Raw > visualizations to JSON #1485
• ✨ Allow zooming on very thin selection boxes #1482
• 🐛 Fix heatmap snapshot feature and, more generally, fix saving WebGL canvas as image via "save image as" #1453 #1460
• ⚠️ A number of CSS custom properties related to the domain widget (previously called "domain slider") have been renamed — cf. #1456. If you customise these properties in your app, please rename them.

@h5web/lib

Canvas

• 🐛 [VisCanvas] Fix saving WebGL canvas as image via "save image as" #1453 #1460
• ⚠️ The DOM structure created by VisCanvas has changed significantly, which may impact advanced use cases — see also #1471

Interactions

• ✨ [SelectToZoom, SelectionTool] Allow cancelling selection-based interactions with right click #1370 #1463
• ✨ [SelectToZoom] Allow zooming on very thin selection boxes #1482
• ✨ ⚠️ Allow interacting with canvas through other interactive elements, like SVG elements. Interactive elements on top of the canvas must now take care of stopping the propagation of events that might lead to conflicting interactions before they bubble up the DOM (typically pointerdown to prevent panning/selecting). #1388 #1473

HTML/SVG overlays

• ✨ ⚠️ [Overlay] Overflow canvas bounds by default — to hide the overflow, simply pass the appropriate inline style #1470
• 🐛 [Annotation] Fix position of overflowing annotations #1467
• 🐛 [SvgRect] Fix rectangle with inset stroke disappearing when width or height is close to zero (internally, SvgRect now renders a path element instead of a rect) #1482
• ⚠️ [Html] Remove prop container and stop wrapping children with an extra div element #1465
  • If you were using prop container, we now recommend rendering the children through a React Portal instead. The three DOM containers rendered by VisCanvas are now available in the context, so you can use them as portal targets (cf. #1467 and #1479). However, remember that this is for advanced use cases only; the following Html-based components should be used in priority: Annotation, Overlay, SvgElement, and FloatingControl.

Toolbar

• 🐛 [DomainWidget] (previously DomainSlider): Moving one histogram marker now toggles off autoscale only for the corresponding bound (i.e. min or max, not both) #1422 #1439
  • ⚠️ [Histogram] Replace prop onChange with two props: onChangeMin and onChangeMax #1439
• ⚠️ Rename DomainSlider to DomainWidget and export internal components #1382 #1377 #1445
  • ✨ Export component DomainSlider, which now corresponds to the slider part of the DomainWidget #1448
  • ✨ Export component DomainControls, which corresponds to the content of the DomainWidget's popup (with the bound inputs, autoscale buttons, histogram, etc.) #1455
  • ⚠️ As a result of these changes, a number of CSS custom properties have been renamed — cf. #1456
• Export component ColorMapOption #1461
• [ExportMenu] Add prop align to change the alignment of the Export menu popup (defaults to "center") #1485

Utilities & hooks

• ⚠️ Rename hook useCanvasEvents to useCanvasEvent — the hook must now be called once per event to listen for, similarly to react-hookz' useEventListener, and the given listener function no longer needs to be wrapped with useCallback. Note that, in relation to #1388, useCanvasEvent no longer registers events on the canvas element but on a parent container. #1481
• ✨ Add hook useInteraction — use it to register and control your own canvas interactions #1475 #1477
• ✨ Add hook useModifierKeyPressed — use it to keep track of the pressed state of one or more modifier keys #1475 #1477
• ✨ Add experimental hook useDrag — use it to make SVG and other elements on top of the canvas draggable (e.g. moveable/resizeable ROIs) #1478

@h5web/h5wasm

• ✨ [H5WasmProvider] Support exporting < Raw > visualizations to JSON #1485
• [H5WasmProvider] Parse nested array types returned by h5wasm #1486

Screenshots

Experimental useDrag hook

This recording also demonstrates interacting with the canvas through other interactive elements.

v8.0.0

Full Changelog: v7.1.0...v8.0.0

@h5web/app

• ⚠️ Breaking change [App] Remove prop explorerOpen, which was deprecated in favor of sidebarOpen in v7.1.0 #1438
• ✨ < NX > Show NeXus axis labels when hovering dimension buttons D0, D1, ... #1426 #1435
• ✨ < Heatmap > Add Cubehelix colormap #1420
• 🐛 < NX Line > Fix wrong colors in the tooltip legend in dark mode #1432
• 🐛 < Complex Line > Remove unsupported scale types from drop-down selector in toolbar #1431

@h5web/lib

• ⚠️ Breaking change Props and parameters that accept scale type(s) (i.e. ScaleType or ScaleType[]) are now more strictly typed to ensure that only supported scale types are provided #1431
  • This notably affects VisCanvas, LineVis, HeatmapVis, RgbVis, ScatterVis, extendDomain, and getAxisDomain
• ⚠️ Breaking change [ScaleSelector] Prop options is now required – i.e. you must now always provide an array of scale type options #1431
  • For convenience, the following arrays of scale types are now available: AXIS_SCALE_TYPES (linear, log, symlog), COLOR_SCALE_TYPES (linear, log, symlog, sqrt), as well as their corresponding union types: AxisScaleType, ColorScaleType
• ✨ Add Cubehelix to the list of possible interpolators #1420
• 🐛 [LineVis] Fix wrong colors in tooltip in dark mode when auxiliaries arrays are provided #1432
• [ToggleGroup.Btn] Add prop hint to show tooltip on hover #1435

@h5web/h5wasm

• ✨ Parse and display chunks information when present #1433
• 🐛 Fix support for big-endian numbers #1421 #1424

Screenshots

Axis hints in dimension mapper

Cubehelix colormap