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 h5wasm-plugins@0.0.3. 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 h5grove@2.0.0 #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 h5was-plugins@0.0.3 #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

v7.1.0

Full Changelog: v7.0.1...v7.1.0

🔍 H5Web now allows searching for datasets, groups and other entities in an HDF5 file by text.

👀 Keep an eye out for the next releases of jupyterlab-h5web, vscode-h5web and myHDF5, or check out one of the demos to see the feature in action!

@h5web/app

• ✨ Show search panel in sidebar when supported by provider (currently H5GroveProvider, H5WasmProvider and MockProvider) #1348 #1367 #1391
  • [H5GroveProvider, MockProvider] Implement method getSearchablePaths to support searching through entities in the viewer #1367 #1394
  • ⚠️ [App] Rename prop explorerOpen to sidebarOpen; explorerOpen still works but is now deprecated and will be removed in the next major release #1404
• ✨ < Heatmap, Line > Support NetCDF's _FillValue attribute to indicate missing data. When the attribute is set, the given value is ignored when computing the data domain and when rendering the line and heatmap visualizations. #1181 #1381 #1395
• 🐛 < Heatmap > +Infinity and -Infinity no longer appear as transparent; they are now displayed with the lowest/highest colors of the selected color map just like any other under/over values #1372 #1374
• 🐛 Fix full-screen button when H5Web is integrated into a larger application, like JupyterLab #1365 #1383
• ⚡ < Line, Scatter > Optimise creation and update of internal Three.js geometries and remove misleading error bars in case of negative error values #1390 #1393

@h5web/lib

• ✨ [HeatmapVis, LineVis, DataCurve] Add prop ignoreValue to allow ignoring values when computing the domain and rendering the heatmap/line visualization. The prop accepts a callback that is called for each value in the data array; if the callback returns true, the value is ignored. #1381
• ✨ [HeatmapMesh] Add optional prop mask, a uint8 ndarray that indicates which data values to mask (255) and which to show (0) #1395
• ✨ [HeatmapMesh] Add prop badColor, which defaults to transparent, to control the color used to display NaN and other bad values (i.e. values not supported by the selected scale, and values ignored via the new mask prop) #1372 #1374
  • ⚠️ Note that the default colour for bad values used to be white.
• ✨ Stack elements that appear on top of the canvas (i.e. HTML/SVG elements, axis grid, tooltip, etc.) in the most predictable way possible, and document the new default stacking order and how to tweak it #1387
  • ⚠️ The parent container of the canvas (i.e. available from react-three-fiber's internal state via gl.parentElement) now has pointer-event: none, which means that overlays, annotations, SVG elements and other HTML elements that get appended to this container no longer respond to pointer events by default. You can therefore remove your own pointer-events: none declarations from those elements. For elements that are meant to be interactive, you can restore interactivity with pointer-events: auto.
• 🐛 [HeatmapVis, HeatmapMesh] +Infinity and -Infinity no longer appear as transparent ; they are now displayed with the lowest/highest colors of the selected color map just like any other under/over values #1372 #1374
• [SelectToZoom, AxialSelectToZoom] Add prop minZoom to allow changing the default minimum zoom size of 20px #1384
• [Toolbar] Add prop overflowChildren to forcefully render elements inside the overflow menu regardless of screen size #1378 by @PeterC-DLS
• [DomainSlider] Add prop disabled to disable the slider and tooltip #1385
• New SvgCircle component #1389
• [LineVis, DataCurve, ScatterVis] Optimise creation and update of internal Three.js geometries and fix edge cases with error values <= 0 #1390 #1393
• [getDomain, useDomain] Add optional parameter ignoreValue, a callback to ignore values from the domain computation #1381
• Add CSS custom properties --h5w-toolbar--height and --h5w-btn--height to control the height of the toolbar and toolbar buttons #1402

Experimental

• [TiledHeatmapMesh] Remove background mesh to keep canvas transparent where tiles are loading #1376

@h5web/h5wasm

• 🐛 [H5WasmProvider] Fix support for unsigned 64-bit integers #1371 #1375
• [H5WasmProvider] Implement method getSearchablePaths to support searching through entities in the viewer #1367

Screenshots

Search panel

Screencast.from.21-03-2023.17.00.24.webm

Ignore/mask values

Default stacking order

v7.0.1

Full Changelog: v7.0.0...v7.0.1

@h5web/lib

• 🐛 useCameraState Fix regression introduced in v7.0.0 (PR #1361) and affecting cases where the factory function references external dependencies (i.e. props, state and other local variables) — useCameraState would ignore changes to those dependencies and return a stale state. This bug was also affecting the Annotation and DataToHtml components (but not @h5web/app). #1368
  • If you don't use useCameraState directly, upgrading should suffice.
  • If you use useCameraState directly, you'll need to revert some of the changes you made when upgrading to 7.0.0. More specifically, you'll need to pass once again a dependency array as second argument to the hook and reconfigure the react-hooks/exhaustive-deps linting rule in your project. See the documentation for useCameraState for more details.