Optimize previews: redraw only changed elements when client updates #6
Description
Summary
Currently the preview components fully clear and redraw every time the parent state changes (new image, new units, changed header, etc.). This can be wasteful: many updates only change a small subset of the displayed data (for example, swapping the pixel buffer while axes, titles and layout remain identical). We should implement partial redraws so only changed elements (pixel data, axis range, color scale) are updated, reducing CPU work and improving responsiveness.
Motivation
- Large images (megapixel) cause slow redraws and UI jank when fully re-rendered on every change.
- Avoiding unnecessary DOM resets and histogram re-creation can significantly reduce CPU and memory churn.
Reproduction
- Load a large image and observe the JSROOT preview draw time.
- Modify only pixel data (apply small filter) or change a UI control that affects only scaling; observe full redraw cost.
Proposed changes
- Implement a selective redraw strategy in the preview components:
- Track immutable layout/axis properties (width, height, axis titles, draw options). Only recreate histogram or canvas if these change.
- Look into this link for inspiration https://root.cern/js/latest/api.htm#custom_html_update_drawing