v6.2.0

Full Changelog: v6.1.0...v6.2.0

@h5web/app

• ✨ <Matrix> Add support for nD datasets with Compound HDF5 type #1169
• ✨ <Matrix> Numbers formatting can be set to scientific notation (default), fixed-point notation, or automatic #1183
• 🐛 <Heatmap, Line, NX> Fix superimposition of reset zoom button with canvas elements #1184

@h5web/lib

• ⚠️ Only compatible with three>=0.138
• 🐛 [VisCanvas] Fix superimposition of floating toolbar with canvas elements #1184

@h5web/h5wasm

• ✨ Add support for datasets with int64 values #1179
• 🐛 Fix support of 2D boolean datasets #1179

v6.1.0

Full Changelog: v6.0.1...v6.1.0

@h5web/app

• ✨ <Matrix> Add support for 1D datasets with Compound HDF5 type #1161

  

• ✨ <NX Spectrum> Add support for auxiliary signals with associated error datasets (e.g. datasets secondary and secondary_errors in the screenshot below) #1162

  

@h5web/lib

• [LineVis] Entries of the auxiliaries array props can now include an optional errors dataset #1162
• [MatrixVis] Add prop columnHeaders to customize the labels of the column header cells #1161
• [Pan] Add prop id to override the internal interaction ID 'Pan'. This allows using multiple Pan components with different mouse button/modifier key combinations. #1166
• getDomains and useDomains now accept a third parameter errorArrays, which accepts an optional array of numeric error arrays #1162

v6.0.1

Full Changelog: v6.0.0...v6.0.1

@h5web/app

• 🐛 Fix detection of pressed modifier keys when window regains focus #1153

@h5web/lib

• 🐛 [Pan, SelectToZoom, SelectionTool] Fix detection of pressed modifier keys when the modifierKey prop changes #1153
• 🐛 Fix detection of pressed modifier keys when window regains focus #1153

v6.0.0

Full Changelog: v5.0.0...v6.0.0

• 🎉 URL can now be supplied in H5Wasm demo to view remote files #1147

@h5web/app

• ⚠️ Breaking change [H5GroveProvider] now accepts the full axios config as prop rather than only params #1139
• ✨ [H5GroveProvider] Parse dtype of compound datasets as Compound rather than Unknown. Field dtypes are also parsed and can be viewed in the Raw inspection. Requires [email protected]. #1137
• ✨ < Heatmap, Line, NX, RGB > Allow select-to-zoom on a single axis:
  • Ctrl+Alt+Drag for zoom on X
  • Ctrl+Shift+Drag for zoom on Y

@h5web/lib

• ✨ New AxialSelectToZoom component to allow selection zoom on a single axis #1145
• ✨ New DefaultInteractions component that combines all of the built-in interactions used in the core visualizations (pan, zoom, axial zoom, select-to-zoom, and axial select-to-zoom) #1145
• ✨ [Pan, Zoom, SelectionTool, SelectToZoom] Prop modifierKey now accepts an array of keys to allow triggering the interaction on a combination of multiple modifier keys #1144
• ✨ [Pan] Prop button now accepts multiple buttons that can trigger the pan #1149
• ✨ [DataCurve] Add prop onDataPointClick, onDataPointEnter, onDataPointLeave to allow responding to clicks and hovers on data points #1146 #1154 #1156
• ✨ [DataCurve] Add prop glyphType and glyphSize to tune the glyph aspect #1157
• ✨ [VisCanvas] Add prop raycasterThreshold to change the interaction radius for Points. This threshold is adapted dynamically when zooming. #1155
• 🐛 Warn when trying to register two interactions with the same internal ID (for instance, when trying to render two Pan components at the same time) #1151
• Export MouseButton and GlyphType enums #1142 #1157

v5.0.0

Full Changelog: v4.1.0...v5.0.0

• 🎉 H5Web versions now have their own DOIs for citation purposes. You can find the latest DOI on the Zenodo badge at the top of the repo's README #1114
• The H5Wasm demo is now more permissive: it lets you drop files with any extensions and doesn't require files to start with the HDF5 file signature (aka magic number) #1131
• The TiledHeatmapMesh stories are a lot more fluid, now that the mandlebrot computations are performed in Web Workers #1124

@h5web/app

• ⚠️ Breaking change [H5GroveProvider] now requires [email protected] #1128
• ✨ Constrain panning and select-to-zoom interactions to left mouse button only #1129
• ✨ Invert single-hue colormaps (dark to light instead of light to dark) for consistency with perceptually-uniform colormaps like Viridis #1106
• ✨ [H5WasmProvider] Improve parsing of dataset and attribute dtypes (integer, float, string) #1098
• ✨ [H5WasmProvider] Add support for complex and boolean dtypes #1111 #1112
• ✨ [H5WasmProvider] Support requesting dataset slices #1103
• 🐛 [H5WasmProvider] Show soft and external links as unresolved entities in metadata viewer #1101
• 🐛 Resolve issues with TypeScript types #1099

@h5web/lib

• ⚠️ Breaking change Event handlers registered via useCanvasEvents now receive the coordinates of interaction events in multiple coordinate spaces: htmlPt, cameraPt, worldPt (:warning: renamed from unprojectedPoint), and dataPt (which can save you from calling worldToData yourself). #1116
• ✨ Invert single-hue interpolators (dark to light instead of light to dark) #1106
• ✨ [Annotation, Html] Add prop overflowCanvas, which defaults to false, to control whether the children of Html can overflow the canvas #1113
• ✨ Expose and document the following hook and utilities that were previously experimental: #1136
  • useCameraState, which can re-render a component by updating a local state as the user pans/zooms;
  • four camera-based utilities:, which are meant to be called inside useCameraState and DOM event handlers:
    • worldToCamera to convert a point from world space to camera space;
    • dataToHtml to convert a point from data space to HTML space;
    • getWorldFOV to compute the field of view of the camera in world space; and
    • getVisibleDomains to compute the field of view of the camera in data space.
• 🐛 [Annotation, Html] Prevent annotations and other Html elements from overflowing the canvas #1108
• 🐛 [ScatterVis] Fix tooltip not appearing for first point #1115
• [Pan, SelectToZoom, SelectionTool] Constrain interaction to a single mouse button: #1129
  • [Pan] left button by default, but configurable to either left or middle via new button prop;
  • [SelectToZoom, SelectionTool] left button, not configurable.
• Add utility getAxisValues, and memoised hook useAxisValues, to generate an array of axis values of a requested length (or to convert an existing typed array of values to a plain JS array) #1123
• [SelectionTool] Render prop and event callbacks now receive the start and end points of the selection in world space in addition to data space #1135

v4.1.0

Full Changelog: v4.0.0...v4.1.0

🌟 The demo site has a brand new homepage! Accessing the demos of the built-in data providers is now much simpler. #1083

✨ NEW PACKAGE: @h5web/h5wasm

• ✨ New H5WasmProvider by @bmaranville to read HDF5 files straight in the browser. Try opening an HDF5 file from your local machine in H5Web in our new demo! #1031 #1080
• 👉 Check out the package's README to learn more about installing and using this new package and provider.

@h5web/app

• ✨ Display chunk shape and compression info in dataset metadata when supplied by data provider (currently H5GroveProvider) #1084
• 🐛 < Heatmap, NX Image, RGB > Make sure vis ratio is respected when "keep ratio" becomes enabled and user had previously zoomed in on an axis #1081
• 🐛 Fix zooming out requiring one extra mouse wheel turn #1095
• New useDataContext hook to allow using the built-in data providers in custom applications. See @h5web/app's README for more information and usage examples. #1090
• Support NeXus v2 specification for finding plotable data, in which the signal and axes attributes are located on the signal dataset rather than on the NXdata group #1060 #1087

@h5web/lib

• 🐛 [VisCanvas] Make sure vis ratio is respected when "keep ratio" becomes enabled and user had previously zoomed in on an axis #1081
• 🐛 [Annotation] Fix positioning of annotation on zoom when scaleOnZoom is enabled #1074
• 🐛 [Zoom, XAxisZoom, YAxisZoom] Fix zooming out requiring one extra mouse wheel turn #1095
• [Annotation] Add prop center to center the annotation on the given coordinates #1074
• [Pan] Stop panning temporarily if configured modifierKey is released #1075

Screenshots

Homepage for H5Web's demo site

H5Wasm demo

Chunk shape and compression info with H5Grove

v4.0.0

Full Changelog: v3.0.2...v4.0.0

@h5web/app

• ⚠️ Breaking change [App] Prop startFullscreen is renamed to explorerOpen, as the term "full screen" was misleading. Note that the logic is inverted: the prop now defaults to true and has to be set to false in order to close the explorer on first render. #1042
  • The query param to pass in the URL to start the demo with the explorer closed is now called wide instead of fullscreen. If your app uses a query param called fullscreen, you may want to rename it as well.
• ✨ New < NX Scatter > visualization for NXdata groups with 1D signal and two axis datasets. #1040
• ✨ Add button in top bar to tell browser to go full screen #1042
• ✨ < NX Spectrum > Show auxiliary values with colored handles in tooltip #1041 #1049
• 🐛 < Heatmap, Line, RGB, NX > Fix tooltip remaining visible while dragging #1039
• < NX Image > Allow switching to < NX Spectrum > when interpretation is not known or specified #1016
• < Heatmap, RGB, NX Image > When drawing a zoom selection box with a ratio constraint (with Ctrl + drag):
  • the effective zoom box now corresponds exactly to the area that will be zoomed on. #1033
  • the effective zoom box is now centred around the selection box #1059

@h5web/lib

• ⚠️ Breaking change [LineVis] Prop auxArrays is renamed to auxiliaries and now accepts an array of objects to allow passing a label for each auxiliary array #1041
  • ✨ This allows the tooltip to show the auxiliaries' labels, values and colors
• ⚠️ Breaking change [ScatterVis] Props dataAbscissas and abscissaLabel are removed in favour of the new abscissaParams prop, and props dataOrdinates and ordinateLabel are removed in favour of ordinateParams #1047
  • ✨ This brings support for non-linear axis scale types on the scatter visualization
• ⚠️ Breaking change [Html] Html now focuses solely on rendering HTML elements from inside VisCanvas. groupProps, followCamera and scaleOnZoom props were therefore removed. The HTML elements are rendered in a div that is appended next to the canvas element by default. Prop container can be used to provide a different container for the div. #1036
  • If you were using Html to overlay HTML on top of the entire canvas, please look at the new Overlay component instead.
  • If you were using Html with followCamera and/or scaleOnZoom, please look at Annotation. Annotation is positioned in the data space and therefore follows the camera automatically; it also has a scaleOnZoom prop.
• ⚠️ Breaking change [HeatmapMesh] The mesh is no longer automatically flipped when ordinateConfig.flip is true as this behavior could be undesirable #1052 . The new scale prop can be used to re-implement this behavior:

  <HeatmapMesh scale={[1, ordinateConfig.flip ? -1 : 1, 1] ... />

• ⚠️ Breaking change TiledHeatmap renamed to TiledHeatmapMesh #1069
• ✨ New component Overlay to render HTML elements inside a div that covers the entire canvas #1030
• ✨ New component FloatingControl to add HTML controls to the floating toolbar in the bottom-right corner of the canvas (such as buttons, legend...) #1030
• ✨ [HeatmapVis, LineVis, ScatterVis] Add prop interactions to override the default interactions configuration; each interaction can now be fully removed or temporarily disabled and can be assigned to a different modifier key (or no modifier key at all): #1023

  interactions={{
    Pan: false,
    Zoom: { disabled: isZoomDisabled, modifierKey: 'Control' },
    SelectToZoom: { modifierKey: undefined }
  }}

• ✨ [ScatterVis] Show tooltip when hovering scatter points #1070
• 🐛 [SelectionLine, SelectionRect] Lines and rectangles now remain at the right coordinates in the data space regardless of zoom/pan #1067
• 🐛 [Toolbar] Fix toolbar menus appearing underneath visualizations #1022
• 🐛 [DomainSlider, Histogram] Fix support for typed histogram values #1024
• 🐛 [ScatterVis] Make children prop optional #1027
• 🐛 [ScatterVis] Fix undesirable outlines on scatter points #1071
• 🐛 [TooltipMesh, HeatmapVis, LineVis] Fix tooltip remaining visible while dragging #1039
• 📜 The AxisSystemContext documentation has moved to a dedicated page.
• 📜 The DataCurve component is now officially documented
• [ScatterVis] Add prop onPointClick to run a callback when a scatter point is clicked #1051
• [TiledHeatmapMesh] Add support for flipped axes and non-index axes #1035 #1052
• [SelectToZoom] The ratio-constrained zoom rectangle is now centered around the selection rectangle and bound to the vis size when possible #1033 #1059
• [XAxisZoom, YAxisZoom, SelectToZoom] Remove default value for modifierKey prop so it can be left unset #1020
• [Pan, Zoom, XAxisZoom, YAxisZoom, SelectToZoom] Pressing a modifier key that is not assigned to any interaction component no longer prevents interactions from taking effect #1020
• [SelectionTool, SelectToZoom] Selection can be canceled by pressing Esc #1056
• [SelectionTool] Add prop id, defaulting to "Selection". When using multiple SelectionTool components in the same VisCanvas (e.g. select-to-zoom and profile selection), please use a different id for each to ensure that they both function properly. #1023
• [Separator] Toolbar separator can now be passed any HTML attributes #1042

Screenshots

New NX Scatter visusalization

Centered zoom box with ratio constraint

Auxiliary values and colors in NX Spectrum tooltip

Button to go full screen

ScatterVis tooltip

v3.0.2

Full Changelog: v3.0.0...v3.0.2

@h5web/app, @h5web/lib

• 🐛 Fix compatibility issue with Create React App v5 50c9ef8
• 🐛 Fix flickering of selection #1011
• 🐛 Fix selection tool not working when window doesn't have focus #1011
• New CSS custom property to customize color of shortcuts in interactivity help popup: --h5w-interactionHelp-shortcut--color #1012

v3.0.0

Full Changelog: v2.0.0...v3.0.0

👉 @h5web/app and @h5web/lib are now compatible with Create React App v5! #1000 🎉

@h5web/app

• ✨ < Heatmap, Line, NX, RGB > Add select-to-zoom feature: press Ctrl and drag the pointer to draw a selection on which to zoom #981 #990
• ✨ < Heatmap, Line, NX, RGB > Show button to reset zoom once user starts to zoom in #991
• ✨ < Heatmap, Line, NX, RGB > Show help button in toolbar to document interactivity features #1005
• ✨ < Line, NX Spectrum > Change default curve colors to increase contrast and help distinguish auxiliary curves from one another. Also provide more distinct colors in dark mode. #1008
• ✨ < Matrix > Improve sizing of cells:
  • Compute widths of content cells based on dataset type to avoid cropping (notably for fixed-length strings and booleans) #980
  • Add toolbar control for users to be able to adjust width of content cells (notably when width cannot be computed programmatically - e.g. with variable-length strings) #980
  • Reduce width of header column #976
  • Crop overflowing cell contents (instead of wrapping) #980
  • 👇 See @h5web/lib below for changes to CSS custom properties for customization purposes #980
• 🐛 Fix responsiveness of dimension mapper/slicer #975
• 🐛 Fix stretching of ordinate axis on Chrome when using browser zoom (cf. silx-kit/jupyterlab-h5web#80) #977

@h5web/lib

• ⚠️ Breaking changes Rename components PanMesh, ZoomMesh, XAxisZoomMesh and YAxisZoomMesh to Pan, Zoom, XAxisZoom and YAxisZoom #995 #996
• ⚠️ Breaking changes Rename component SelectionMesh to SelectionTool and change its API. It is now up to the consumer to render the selection while the user is drawing it. This is done by passing a render function as child of SelectionTool - e.g. <SelectionTool>{(selection) => <SelectionLine {...selection} />}</SelectionTool>. #981 #996
  • ⚠️ Remove obsolete components LineSelectionMesh and RectSelectionMesh
  • ⚠️ [SelectionTool] Remove prop selectionComponent in favor of the children render prop
  • ⚠️ [SelectionTool] Stop persisting selection after pointer is released to support more selection use cases. It is now up to the consumer to persist the selection (cf. below for new callback props)
  • ✨ New SelectionLine and SelectionRect components
  • ✨ [SelectionTool] Remove callback prop onSelection in favor of three new callback props (see below): onSelectionStart, onSelectionChange, onSelectionEnd. For instance, you may use onSelectionEnd to persist a new selection, onSelectionStart to clear a previously persisted selection, and onSelectionChange to display the coordinates of the selection that the user is currently drawing.
• ⚠️ Breaking change [ScatterVis] Rename prop data to dataArray in line with other visualizations. dataArray accepts an ndarray (plain or typed) instead of a plain JS array. #983
• ✨ New component TiledHeatmap for visualizing very large images as tiles, with support for zoom-based level-of-detail pyramids #967
• ✨ New component SelectToZoom to allow zooming by drawing a selection #981
• ✨ New component ResetZoomButton to provide a quick way for users to reset the zoom #991
• ✨ [HeatmapVis, LineVis, RgbVis, ScatterVis] Add select-to-zoom feature (bound to Ctrl key) #990
• ✨ [HeatmapVis, LineVis, RgbVis, ScatterVis] Show button to reset zoom once user starts to zoom in #991
• ✨ [LineVis] Change default curve colors to increase contrast and help distinguish auxiliary curves from one another. Also provide better colors in dark mode. #1008
• 🐛 Fix stretching of ordinate axis on Chrome when using browser zoom (cf. silx-kit/jupyterlab-h5web#80) #977
• 🐛 [SelectionTool] (previously SelectionMesh) Fix selection interaction when cursor leaves canvas #995
• [ScatterVis] Add props abscissaLabel, ordinateLabel, title and children, in line with other visualizations #983
• [ScatterVis] Add prop size to control the size of the scattered points #983
• [MatrixVis] Reduce width of header column #976
• [VisMesh] Add prop size to override the mesh's size (which otherwise defaults to the visSize provided by AxisSystem) #967
• [HeatmapMesh] App prop size to override the mesh's size (forwarded to VisMesh) #967
• New hook useCanvasEvents to register event listeners on the canvas (useful to implement custom interactions) #995 #996 #1007
• New utility worldToHtml available through AxisSystemContext #1001
• Improve documentation of getSafeDomain #979
• Changes to CSS custom properties: #980
  • New property to customize background color of shortcuts in interactivity help popup: --h5w-interactionHelp-shortcut--bgColor
  • New properties to customize shadow colors of toolbar input fields (for new Matrix cell width control): --h5w-toolbar-input--shadowColor, --h5w-toolbar-input-hover--shadowColor, --h5w-toolbar-input-focus--shadowColor
  • New property to customize text color of toolbar control labels: --h5w-toolbar-label--color
  • --h5w-selector-label--color now defaults to var(--h5w-toolbar-label--color, royalblue) instead of just royalblue

Screenshots

Mandelbrot demo of new TiledHeatmap component

Select-to-zoom feature + button to reset zoom

Select-to-zoom feature with ratio constraint

Help button

New curve colors in Line vis

Cell-width toolbar control in Matrix vis

v2.0.0

@h5web/app

• ⚠️ Breaking change Importing the styles now requires importing only one stylesheet named styles.css (note the s) #942:

  /* BEFORE */
  @import '@h5web/app/dist/style-lib.css';
  @import '@h5web/app/dist/style.css';
  
  /* AFTER */
  @import '@h5web/app/dist/styles.css';

• ✨ < Line > Allow zooming on a specific axis with mouse wheel by pressing Alt for x or Shift for y #949 #953
• ✨ Restore last selected visualization when switching back from inspect mode to display mode #954
• ✨ Select most advanced visualization automatically when switching between datasets, unless user has manually selected a less advanced visualization #954
• ⚡ [H5GroveProvider] Datasets fetched as binary typed arrays are no longer converted to plain JavaScript number arrays. H5Web is now capable of handling those raw typed arrays without any conversion in most cases (see below for caveats with shader-based visualizations). This leads to significant speed ups and memory savings for very large datasets. #946 #950 #951 #952 #956 #960 #964
  • < Heatmap >: float32 and uint8 data arrays are passed directly to the shader; everything else is converted to float32;
  • < RGB >: float32 and uint8 data arrays are passed directly to the shader; float64 arrays are converted to float32; int8 arrays are converted to number[] and their values incremented by 128 before being converted to uint8; everything else is converted to uint8.
• 🐛 Fix issue with react-keyed-flatten-children import in Angular project #914
• [App] Add prop initialPath to select a path on initial load #937
• < RGB > RGB/BGR flip now performed entirely in shader #969
• Avoid copying ndarray when no slicing/mapping is needed #973
• Add CodeSandbox examples in README to demonstrate use of package in Create React App and Vite projects. #929

@h5web/lib

• ⚠️ Breaking change Stylesheet renamed to styles.css (note the s) #942:

  /* BEFORE */
  @import '@h5web/lib/dist/style.css';
  
  /* AFTER */
  @import '@h5web/lib/dist/styles.css';

• ⚠️ Breaking change PanZoomMesh removed in favour of two separate components: PanMesh and ZoomMesh #953 #955 #957:

  // BEFORE
  <PanZoomMesh />
  
  // AFTER
  <PanMesh />
  <ZoomMesh />

• ✨ [LineVis] Add axial zoom interactivity (mouse wheel + Alt key for x axis; mouse wheel + Shift key for y axis)
• ✨ New XAxisZoomMesh component to enable constrained zooming on the x axis, by default bound to the Alt key
• ✨ New YXAxisZoomMesh component to enable constrained zooming on the y axis, by default bound to theShift key
• ✨ New RectSelectionMesh, LineSelectionMesh and SelectionMesh components to draw selection rectangles and lines on the canvas (or other custom shapes with SelectionMesh's selectionComponent prop). #941 #944 #947 #959
• ✨ PanMesh, ZoomMesh, XAxisZoomMesh and YAxisZoomMesh can all be disabled dynamically with optional prop disabled, and can all be bound to a specific key with optional prop modifierKey. By default, PanMesh and ZoomMesh are not bound to any key. #947 #949 #953
• ✨ [HeatmapMesh] Now officially documented in Storybook #948
• ✨ [HeatmapMesh] Props values and alphaValues now accept float32,uint8 and uint16 typed ndarrays. uint16 arrays are interpreted as half-floats. #946 #950 #960
  • ⚠️ Breaking change Props values and alphaValues no longer accept plain number[] ndarrays; you must convert them to one of the supported typed ndarrays beforehand - e.g. ndarray(Float32Array.from(numNdArr.data), numNdArr.shape)
• ✨ [HeatmapMesh] Add optional prop magFilter to override ThreeJS' default texture filter (i.e. NearestFilter) #948
• ⚡ [HeatmapVis] Props dataArray and alpha.array now accept typed ndarrays - e.g. NdArray<Float32Array>. Prefer float32 and uint8 arrays for performance as they are passed directly to the shader. #946 #950 #960
• ⚡ [LineVis] Props dataArray, errorsArray and auxArrays now accept typed ndarrays #951
• ⚡ [MatrixVis] Prop dataArray now accepts typed ndarrays #952
• 🐛 [ScatterVis] Fix y-axis domain computation #971
• 🐛 [HeatmapVis] No longer flip children when flipY is set to true #945
• [MatrixVis] Prop sticky is now optional and defaults to true #952
• [DataCurve] Add optional prop visible to control the visibility of the curve #965
• [getDomain, getDomains, useDomain, useDomains] Accept typed arrays and typed ndarrays - e.g. Float32Array, NdArray<Uint16Array>, etc. #950
• Add hook useVisibleDomains to compute the x and y-axis domains at the current camera position and zoom level #936
• Add hook useFrameRendering to re-render a React component on every React Three Fiber frame (e.g. when panning/zooming) #933
• Add utility getValueToIndexScale and corresponding memoised hook to create threshold scales, which are particularly useful to recover indices from axis values in tooltips #968
• Provide functions dataToWorld and worldToData through AxisSystemContext to convert vectors from data space to world space and back #935
• Add CodeSandbox examples in README to demonstrate use of package in Create React App and Vite projects. #929

Screenshots

Axial zooming

Rectangle selection