silx-kit / h5web Goto Github PK
View Code? Open in Web Editor NEWReact components for data visualization and exploration
Home Page: https://h5web.panosc.eu/
License: MIT License
React components for data visualization and exploration
Home Page: https://h5web.panosc.eu/
License: MIT License
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:
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.
entry_0000
group => group node expands and group metadata appears in metadata viewer.start_time
dataset => dataset metadata appears in metadata viewer.entry_0000
group again to see its metadata => group node collapses and group metadata appears in metadata viewer.entry_0000
group again to see its metadata => group metadata appears in metadata viewer (group node does not collapse).entry_0000
group one more time => group node collapses.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.
Find the domain and compute the texture inside a web worker so as to not block the main thread.
... 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... :'(
Tooltip should include coordinates and value.
Panning should be constrained to the edges of the Heatmap.
object-fit: contain
might help with this./hsds
for now?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.
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.
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:
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.
Add a breadcrumbs bar (see #67) above the VisSelector
tab bar showing the path to the selected entity.
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.
I initially chose to put the viewer in a panel for two reasons:
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.
This is a very high-level issue for now. Here are some initial ideas:
We can play with different amounts of persistence and technical solutions:
localStorage
- e.g. UI settings;Check if this could simplify some calculations around zooming and panning.
No need for both libraries.
Horizontal and vertical axis could be rendered as SVG with VX.
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
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.
Creating an epic for now, as this is quite complex.
nD
datasets where n
is in the interval [2, 3]
(at least initially).(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.
Allow user to pick a different colour scheme -- https://github.com/d3/d3-scale-chromatic
When you clicking somewhere on the slider instead of dragging the handles, the domain isn't updated automatically.
Attributes should be prettily displayed in the MetadataViewer
.
The toolbar should probably go in the tab bar, to the right.
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.
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.
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.
@loichuder you had suggested this in the chat a while back: adding horizontal and vertical guides to the tooltip. Here's a mockup:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.