Skip to content

Draft: Implement resolution rings centered on the image

Loic Huder requested to merge rings into main

To discuss implementation and aspect. Needs a new @h5web/lib release to use Html and allow children in the Heatmap component.

Two implementations were done: one using GridRadial from @visx/grid (in dashed orange) and another with RingGeometry of Three.js (in light blue). Horizontal/vertical lines are for debugging centering issues.

FAE_w1_4_7186.cbf image

Some issues to be discussed:

  • There appears to be a small offset between the centers of the two implementations' rings. Quite small though (fraction of pixel).
  • The resolutions are the same whatever the zoom level.
  • @visx rings overflow from the canvas as the canvas wrapper has overflow: visible to show the axes
  • @visx tick text scales with the zoom as the whole Axis needs to scale with the zoom to be positioned correctly.
  • WebGL rings disappear when the Heatmap is redrawn (e.g. scale change)

Merge request reports