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