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.

v7.0.0

👉 These release notes appear cropped on the Releases page. You'll find them in full on their dedicated page. 👈

Full Changelog: v6.6.1...v7.0.0 — big thanks to @PeterC-DLS for #1311, #1324 and #1356 🧑‍🤝‍🧑

tldr; This release includes numerous breaking changes and new features to the component library, @h5web/lib. Highlights include: a simpler way to control the aspect ratio of the visualization; a more powerful SelectionTool component with support for validating and transforming selections; a more flexible API to render SVG shapes on top of the canvas.

@h5web/app

• ❇️ Select-to-zoom interactions now zoom only on areas of at least 20x20px. This avoids inadvertently zooming on very small areas. Visual clues are provided to help users determine when selections being drawn become big enough to zoom on. #1345
• 🐛 Fix error when switching from < NX Heatmap > to < NX Line > with an axis dataset longer than the signal dataset by one value (i.e. pixel boundaries) #1350 #1352
• 🐛 When drawing a zoom selection, the stroke of the rectangle is no longer partially cropped by the canvas. #1346

@h5web/lib

Open the sections below to see the changes.

⚠️ Breaking changes

• [HeatmapVis, RgbVis] Remove prop layout, now replaced with prop aspect (cf. New features). #1284
  • layout="cover" 👉 replace with aspect="equal" (default)
  • layout="fill" 👉 replace with aspect="auto"
  • layout="contain" 👉 remove; equivalent behaviour can be achieved by constraining the size of the visualization's container. #1283
• [VisCanvas] Remove prop visRatio, now replaced with prop aspect (cf. New features). #1284
  • visRatio={undefined} 👉 replace with aspect="auto" (default)
  • visRatio={cols / rows} (i.e. orthonormal basis) 👉 replace with aspect="equal" (the correct visRatio is computed internally)
  • visRatio={(cols / rows) / aspect} 👉 replace with aspect={aspect}
• [VisCanvas] Remove prop canvasRatio, which allowed restricting the canvas to a specific ratio. The canvas now always fills the available space (i.e. parent container minus axes). Migration: remove prop and constrain size of visualization container. #1283
• [DefaultInteractions, SelectToZoom] Remove prop keepRatio. Interaction components now adjust their behaviours automatically when used inside a canvas with an aspect ratio (cf. New features). #1287
• [SelectionTool, AxialSelectionTool] Callback props onSelectionChange and onSelectionEnd can now receive undefined when the user cancels the selection with Escape or releases the modifier key (if any). You may use the new onValidSelection callback instead of onSelectionEnd if you only care about successful selections. #1360
• [SelectionTool, AxialSelectionTool] The shape of selection objects passed to callback props and to the render prop has changed - cf. the new interface vs. the old interface
• Remove SelectionRect and SelectionLine. Use the new DataToHtml, SvgElement, SvgRect and SvgLine components instead. See code example below.
• Rename useAxisSystemContext() to useVisCanvasContext() #1291
• Utility getAxisValues now returns NumArray (i.e. TypedArray | number[]) instead of number[]. #1357
• useCameraState The callback parameter no longer receives a context argument, and the second parameter is removed (i.e. the array dependencies à la useCallback), which means that ESLint rule react-hooks/exhaustive-deps no longer has to be configured in consumer projects. #1361
• dataToHtml, getVisibleDomains must now be retrieved from context and no longer require a context argument. #1342
• Rename getWorldFOV to getFovBox and move to context; it no longer requires a context argument and returns a Box instance (cf. New features). #1361
• Hook useCanvasEvents and context utilities dataToHtml, dataToWorld, worldToData now work solely with Vector3 instances; they no longer accept/return Vector2 instances. More generally, computations in all three coordinate spaces (HTML, world, data) are now performed with Vector3 only to avoid cluttering the codebase with Vector3 <-> Vector2 conversions (cf. notably, the new Box class, as well as the Rect type used for selection rectangles). We recommend you do the same when implementing your own interactivity features. #1300 #1341
• Callbacks passed to useCanvasEvents no longer receive points in camera space (i.e. property cameraPt).

🚀 New features

• VisCanvas now renders an svg element that overlays the canvas. Use the new SvgElement component to append any SVG shape to it from anywhere inside the VisCanvas component tree. See code example and screen recording below. #1322
• New SvgRect and SvgLine components to simplify rendering SVG rect and line elements from a tuple of Vector3 points. SvgRect also provides a way to simulate rendering the stroke outside or inside of the rectangle (instead of centred on the boundary). These components are for convenience only; don't hesitate to render rect, line and any other SVG element directly. #1332 #1346
• New DataToHtml component to convert points from data space to HTML space directly in JSX. Useful to render SVG shapes on the canvas and update them automatically when the user zooms or pans. See code example below.
• New Box utility class based on Three's Box 3, but with a more convenient API and some useful additional methods. Particularly handy when implementing interactivity features (zoom selection, SVG ROIs, etc.) #1323 #1359
• [LineVis] Allow passing abscissa array longer than data array (i.e. the abscissa array gets cropped) #1352
• [VisCanvas] Add prop aspect, which works similarly to matplotlib's Axes.set_aspect #1284:
  • aspect="auto": the visualization is to fill the entire canvas (default; i.e. the internal visRatio is set to undefined);
  • aspect="equal": one ordinate unit is to be displayed with the same number of pixels on screen as one abscissa unit (equivalent to aspect={1}; i.e. orthonormal basis);
  • aspect={2}: one ordinate unit is to be displayed with twice the number of pixels on screen as one abscissa unit.
• [VisCanvas] Add nice property to abscissaConfig and ordinateConfig props. This passes through to D3 to allow it to extend the domains to nice values when appropriate. #1324
• [SelectToZoom, AxialSelectToZoom] Enforce minimum selection size of 20x20px, with help of visual clues, to avoid inadvertently zooming when users mean to click. #1345
• [XAxisZoom, YAxisZoom, AxialSelectToZoom] now disable themselves when used inside a canvas with an aspect ratio (equal or custom). #1287
• [SelectToZoom] now configures its own behaviour automatically according to the canvas' aspect ratio (or lack thereof). #1287
• [SelectionTool, AxialSelectionTool] Add props validate and onValidSelection to support validating selections. See code examples and screen recordings below. Callback props onSelectionChange and onSelectionEnd, as well as the children render prop, all receive a boolean flag conveying whether the selection they are invoked with is valid. #1345
• [SelectionTool, AxialSelectionTool] The selection objects passed to the render prop and to the callback props now include the selection rectangle in HTML space (in addition to world and data space). This is likely what you want to use in the render prop to render the selection rectangle in SVG. See code examples below. #1343
• [SelectionTool] Add prop transform to allow transforming the selection while it is being drawn. The render prop and onSelectionChange both receive the transformed selection object as first parameter and the raw, untransformed selection object as second parameter. This feature is used internally by AxialSelectionTool to transform the user's selection into a selection that spans the entire width or height of the canvas. For another example, check out story Rect With Transform. #1301 #1340 #1349
• [Histogram] Add prop showLeftAxis, which defaults to true, to allow hiding the left axis (with showLeftAxis={false}) #1295
• [DataCurve, ScatterPoints] Accept typed arrays for abscissas and ordinates #1357
• getValueToIndexScale, getAxisDomain, getAxisValues Accept typed arrays as argument #1357
• [**useCameraState*...

v6.6.1

Full Changelog: v6.6.0...v6.6.1

@h5web/app

• 🐛 Fix Compression filters table appearing even if there was no filter when inspecting datasets #1282

@h5web/lib

• 🐛 [Histogram] Fix interaction area not centered on the markers when interactive. #1277
• 🐛 [Histogram] Markers can no longer be dragged beyond the histogram or each other. #1281

v6.6.0

Full Changelog: v6.5.0...v6.6.0

@h5web/app

• ✨ < RGB, NX RGB > Support stacks of RGB images #1259
• ✨ < RGB, NX RGB > Allow transposing RGB images #1259
• ✨ < NX RGB > Support custom axes #1262
• 🐛 < NX RGB > Fix detection of RGB datasets inside NXdata groups #1259
• ⚠️ CSS variable --h5w-domainSlider-histogram-indicator--color was renamed --h5w-domainSlider-histogram-marker--color
• < Heatmap, NX Heatmap > In the slider to select the colormap range, selecting a range smaller than the data domain no longer reduces the slider extent

@h5web/lib

• ✨ Expose the Histogram component used in DomainSlider to display a histogram with markers selecting a range of bins. The markers can be made interactive through the onChange prop. #1261
• ✨ [DomainSlider] The domain can now be changed by clicking on the histogram markers (note that the histogram prop must be provided for the histogram to appear). #1267
  • ⚠️ CSS variable --h5w-domainSlider-histogram-indicator--color was renamed --h5w-domainSlider-histogram-marker--color
• ✨ [VisCanvas] New prop showAxes to toggle the display of axes (default: true). #1265
• useCombinedDomain Improve typings #1269

Experimental

• ⚠️ TiledHeatmapMesh no longer renders a tooltip. Please use the new TiledTooltipMesh component. #1258
• ✨ New component TiledTooltipMesh with prop renderTooltip to customise the content of the tooltip #1258
• 🐛 [TiledHeatmapMesh] Fix regression where tiled heatmap was being flipped horizontally and vertically #1270

Screenshots

NeXus RGB image with 4 dimensions

v6.5.0

Full Changelog: v6.4.1...v6.5.0

• The "type" field was removed from the package.json of published packages, which should accommodate more setups #1219.

@h5web/app

• ✨ < NX Spectrum, NX Image > Rename visualizations "NX Line" and "NX Heatmap" respectively to reduce NeXus jargon #1244
• ✨ [H5GroveProvider, HsdsProvider, MockProvider] New prop getExportURL to generate client-side exports of datasets/slices, amongst other advanced use cases. See README of @h5web/app for a complete description.
• ✨ In addition to the support of ArrowUp or ArrowDown for focused entities in the explorer, we have now support for:
  • ArrowLeft: Focus the parent group or collapse an opened group
  • ArrowRight: Focus the first child or expand a closed group (no effect for non-group entities)
  • Home: Focus the root group
  • End: Focus the last visible entity in the file tree
• ✨ Make focused entry in toolbar more visible #1234
• 🐛 Fix ordinate tick labels appearing underneath axis label by tweaking format, reducing font-size and adjusting axis offsets #1250 #1251
• 🐛 < Heatmap, NX Image, NX Scatter > Fix a visual bug where the domain slider could seem to merge with the overflow menu #1235
• Default font size for tick labels (--h5w-tickLabels--fontSize) and color bar bounds (--h5w-colorBar-bounds--fontSize) is now 0.75em #1251

@h5web/lib

• ✨ [Selector, ColorMapSelector, ScaleSelector] Add an outline to the focused entry. The color of the outline can be set via the new CSS variable --h5w-selector-option-focus--outlineColor . #1234
• 🐛 Fix ordinate tick labels appearing underneath axis label by tweaking format, reducing font-size and adjusting axis offsets #1250 #1251
• 🐛 [Selector, DomainSlider] Fix stacking of opened menus (could merge with the overflow menu of the toolbar) #1235
• [LineVis, ScatterVis] Remove outer 1rem margin #1251

@h5web/h5wasm

• ✨ [H5WasmProvider] New prop getExportURL to generate client-side exports of datasets/slices. See README of @h5web/app for a complete description.
• ✨ [H5WasmProvider] Display dataset compression filters in metadata viewer #1253
• ✨ [H5WasmProvider] Show error when visualizing dataset compressed with external filters #1253
• ✨ [H5WasmProvider] Add basic support for datatypes #1252

Screenshots

NX Line, NX Heatmap

Keyboard arrows navigation in explorer

Dataset compressed with external filter in H5Wasm demo

Tick labels format/font-size

v6.4.1

Full Changelog: v6.4.0...v6.4.1

@h5web/app

• Prevent scroll of containers when navigating the explorer with the keyboard #1230
• Added visual cue when moving through dropdown entries in the toolbar

@h5web/lib

• [Selector] Change background color when focusing option. The color can be set via --h5w-selector-option-hover--bgColor

v6.4.0

Full Changelog: v6.3.0...v6.4.0

@h5web/app

• ✨ When an entity in the explorer has focus (as indicated by a focus outline), pressing ArrowUp or ArrowDown on the keyboard now moves focus to the next or previous entity (similarly to Tab and Shift+Tab). Pressing Enter (or Space) then selects the entity.
• ✨ < NX Image > Enable or disable "keep ratio" automatically based on axis units:
  • if the units attributes of the two axis datasets are equal, enable "keep ratio";
  • if the units attributes differ or only one units attribute is present, disable "keep ratio";
  • if no units attributes are present, apply the user's preferred setting as before.
• 🐛 < Scalar > Don't collapse line breaks and tabs #1217
• 🐛 < Raw, Scalar > Handle overflowing content better #1228
• < NX Spectrum, NX Image, NX Scatter > SILX_style options are no longer persisted across visualizations. When the user selects a plottable NeXus group with a SILX_style attribute, the plot configuration options suggested by the attribute (signal/axes scale types) now override the user's preferred options only for the current visualization and until the user decides otherwise. #1213
• [H5GroveProvider] Improve error message when user does not have permission to access the file #1218
  • ⚠️ This change requires [email protected] #1218
• [App] Add prop propagateErrors, which defaults to false, to control whether errors should be let through the top-level error boundary in order to be handled by the consumer application #1211
• [App] Focus the explorer on first render #1221

@h5web/lib

• ✨ New AxialSelectionTool component to allow drawing selections along a given axis #1225
• ✨ Add tooltip to experimental TiledHeatmapMesh component
• [ScatterVis] Make colorMap prop optional (now defaults to 'Viridis') #1210
• [TooltipMesh] Add prop size to allow resizing the mesh #1193

v6.3.0

Full Changelog: v6.2.1...v6.3.0

@h5web/app

• ✨ [App] Add prop disableDarkMode to disable automatic switch to dark mode #1190
• ✨ [H5WasmProvider] Support passing filename with slashes #1203

@h5web/lib

• ✨ [LineVis] Make auxiliary labels optional #1207

v6.2.1

Full Changelog: v6.2.0...v6.2.1

@h5web/lib

• ⚠️ Bump minimal peer dependency version of three from 0.120 to 0.138 #1194 (oversight from #1170)
  • 👉 Please upgrade three if you haven't already done so when installing @h5web/lib v6.2.0

@h5web/h5wasm

• 🐛 Fix display of attribute values in metadata viewer for several dtypes, including int64, float, and complex #1191
• 🐛 Fix Unknown dtype in metadata viewer for string datasets #1192