• Allow switching to a orthonormal coordinate system where the x and y axis share the same unit of length.
• Let the heatmap expand to fit its container while maintaining the resulting aspect ratio (e.g. 1000x800 => 0.8). object-fit: contain might help with this.

Attributes should be prettily displayed in the MetadataViewer.

I initially chose to put the viewer in a panel for two reasons:

1. I wasn't a fan of the behaviour in Silx View, where one has to switch back to the metadata tab each time (when navigating between datasets).
2. I thought one would find it useful to be able to integrate the dataset visualizer and the metdata viewer separately in various applications - e.g. one could build an HDF5 viewer with just the explorer and the metadata viewer, or just the explorer and the dataset visualizer.

Reason 1 is less of a problem now that the active visualization is kept when navigating between two datasets in H5Web, but I don't like relying on this behaviour as it may require more complexity in the future (global state, Nexus, etc.)

Reason 2 still seems valid to me. If the metadata viewer becomes a "visualization" displayed in the tab bar, it becomes coupled to DatasetVisualizer. That being said, when we start publishing DatasetVisualizer as a package, perhaps we'll find a way to make it flexible in terms of which visualizations it is allowed to use (so people can remove the metadata and matrix visualizations, for instance).

One alternative to turning the metadata viewer into a visualization could be to provide an intuitive interface to select various kinds of layouts: explorer + dataset visualizer + metadata viewer; explorer + dataset visualizer; explorer + metadata viewer; dataset visualizer only.

At the moment, when the explorer is first rendered, we select the root node by default. Making this behaviour more flexible by allowing a specific node to be selected on mount would get us closer to being able to persist and restore the state of the explorer in some way (cf. #94). This would save us headaches in development, notably.

This issue requires solving the problem of addressing a node in the tree across renders. We can't:

• use HDF5 IDs since the same entity can be linked from multiple places;
• use HDF5 link names since multiple links can have the same name;
• use node IDs, since they are generated randomly on load.

What we can do is count on the order of the nodes in the tree. So I think our only option is to use an array of indices - e.g. [0, 2] <=> root node / first link / third link.

When you clicking somewhere on the slider instead of dragging the handles, the domain isn't updated automatically.

Check if this could simplify some calculations around zooming and panning.

Note that, in Firefox at least, there's a "View image" contextual option on the heatmap's canvas, which generates an image automatically. This doesn't work for me, but it works somewhat for others:

When I do "View image" with Firefox I see the zoomed image but then if leave go to another tab in firefox and go back to the image I see a empty (white) image. I get this URL: blob:null/b92087e5-f865-4a88-b13c-6c7b1481b192.

It may be worth making sure "View image" works before implementing a more advanced export feature.

The touchpad seems to be quite sensitive between two-finger scroll (heatmap zoom) and two-finger pinch (browser zoom). Perhaps we should mitigate this by canceling some pinch events. We'll have to test this on a Mac laptop at some point.

Creating an epic for now, as this is quite complex.

• Create a stack visualization to allow visualizing for nD datasets where n is in the interval [2, 3] (at least initially).
• Users navigate on one of the dimensions with a slider (typically the first dimension).
• The (n-1)D dataset can then be visualized with the appropriate visualization (scalar, matrix, line chart, heatmap, etc.)

The definition above is quite generic but the two main use cases are visualizing a 2D dataset as a stack of line charts, and a 3D dataset as a stack of heatmaps.

... when keepAspectRatio is enabled.

See pmndrs/react-three-fiber#350 (comment). Haven't been able to reproduce in CodeSandbox yet, so the problem might come from our code after all... :'(

It would be useful to have the option to display a line plot of a 2d image by selecting a row or column to plot and in the future an arbitrary cut.

I am not sure if this is part of the 2d display widget or if the line display should be able to handle 2d images?

I leave it to the developers to make a proposal.

When resizing to very small heights (~150-200px), the axes are no longer resized and therefore do not follow the image any more:

Toggling on/off Keep ratio has no effect on this.

That's the term they use in VX - https://vx-demo.now.sh/glyphs. They use the term "marker" for something else.

Could be implemented as a simple toggle, or as a dropdown selector to choose between a number of shapes.

Find the domain and compute the texture inside a web worker so as to not block the main thread.

Horizontal and vertical axis could be rendered as SVG with VX.

After experimenting with react-three-fiber for the Heatmap visualization, I think it'd be a much better solution than Recharts for the Line visualization. It's easy to use and stable, and it performs much better than all of the charting libraries that render to SVG.

Before we make the switch, though, we should first implement axis in the Heatmap visualization.

Allow selecting which dimension should be displayed on which axis. This applies to the Matrix, Line and Heatmap visualizations.

Ideally swapping two axis should take a single click and not require a intermediate step where the same dimension is displayed on two axis.

@loichuder you had suggested this in the chat a while back: adding horizontal and vertical guides to the tooltip. Here's a mockup:

The goal is to be able to use a dataset somewhere else, like in a Jupyter Notebook. The copy could be done either by reference or by value. The export could be to CSV or other raw formats.

When selecting a dataset then a group or datatype, the dataset remains displayed in the visualizer. Perhaps this should be made clear by highlighting the dataset that was last selected in the explorer even when another group or datatype is also highlighted.

When the metadata viewer or the explorer is resized, for instance, the canvas grows better never shrinks.

Tooltip should include coordinates and value.

No need for both libraries.

It could be interesting to add a minimap for context. Here is an example: https://vx-demo.now.sh/zoom-i

The minimap itself could be interactive:

• drag the rectangle to pan;
• click to pan instantly to another location.

Add a breadcrumbs bar (see #67) above the VisSelector tab bar showing the path to the selected entity.

Current behaviour

1. Click on entry_0000 group => group node expands and group metadata appears in metadata viewer.
2. Click on start_time dataset => dataset metadata appears in metadata viewer.
3. Click on entry_0000 group again to see its metadata => group node collapses and group metadata appears in metadata viewer.

Suggested behaviour

3. Click on entry_0000 group again to see its metadata => group metadata appears in metadata viewer (group node does not collapse).
4. Click on entry_0000 group one more time => group node collapses.

Add button in breadcrumbs bar (see #84 and #67) to show/hide the explorer panel.

Allow user to pick a different colour scheme -- https://github.com/d3/d3-scale-chromatic

Does not appear if the number of rows is equal to the one of columns. An issue of x,y inversion ?

The toolbar should probably go in the tab bar, to the right.

This line introduced in #99 is the responsible. @axelboc : is the overflow: hidden necessary ?

We are depending on @types/d3-scale-chromatic which only supports d3-scale-chromatic 1.3.2 while Cividis and Turbo are implemented in d3-scale-chromatic 1.5.0.

Originally posted by @loichuder in #61

• I'm thinking /hsds for now?
• React Router to manage routing

Panning should be constrained to the edges of the Heatmap.

Implement a control to switch between the metadata viewer and the dataset visualizer. The control is described in #66 and should sit in a new bar above the VisSelector tab bar.

The aspect and position of this tool must be reviewed as more features will be integrated in it (#68, #69).

This is a very high-level issue for now. Here are some initial ideas:

• Persist inspect/display state.
• Persist open/closed state of groups in explorer.
• Persist selected node and expanded groups in explorer.
• Persist explorer width if resized.
• Persist selected visualization.
• Persist visualization options - cf. #72
• Persist some states to the URL (inspect/display, selected node, selected visualization, visualization options, etc.)?

We can play with different amounts of persistence and technical solutions:

• Persistence during a session - i.e. restore state when unmounting then remounting a component:
  • move state up the component hierarchy;
  • make state global.
• Persistence across sessions - i.e. restore state when closing then re-opening the app in the same browser:
  • localStorage - e.g. UI settings;
  • cookies - e.g. authentication.
• Persistence across environments:
  • URL - e.g. navigation;
  • server-side database - e.g. permalink generation, authenticated settings, etc.