New updateImages method (for efficient image updates in response to continuous layout changes)#1
Draft
robertcollar-kobold wants to merge 2 commits into
Draft
New updateImages method (for efficient image updates in response to continuous layout changes)#1robertcollar-kobold wants to merge 2 commits into
updateImages method (for efficient image updates in response to continuous layout changes)#1robertcollar-kobold wants to merge 2 commits into
Conversation
Add a lightweight API method that surgically updates layout images without triggering a full relayout or trace redraw. Designed for use during plotly_relayouting (e.g., tiled image pyramids that swap tiles on zoom/pan). The method bypasses the diff/redraw pipeline by directly calling supplyLayoutDefaults and draw for the images component only, avoiding the axrange→drawData code path that causes all traces to flash.
Cover basic add/remove, no-trace-redraw guarantee (drawData not called), layout state update, and promise return value.
updateImages method (for efficient image updates in response to continuous layout changes)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds
Plotly.updateImages(gd, images)— a new public API method that efficiently updates layout images (and layout images only!). This method is most impactful when called in response to theplotly_relayoutingevent, which fires continuously during scroll-zooming or drag-panning. Together, they enable continuously updating layout images in response to axis range changes, as is required to display tiled image pyramids.What wasn't working before?
Viewing images is most intuitive when using scroll-zoom and drag-pan to navigate. When viewing tiled image pyramids, image tiles would ideally be updated continuously while scrolling or dragging is ongoing. However, image tiles can only be added at the end of such actions, as the
plotly_relayoutevent is only called once an action is complete.Screen.Recording.2026-04-10.at.11.21.39.AM.mov
We can get around this by using the the private
plotly_relayoutingevent, which fires continuously during these actions. However, doing so introduces a new problem. Adding images to the layout requires use of theupdate_layoutmethod, which triggers the redraw pipeline. Callingupdate_layoutin response toplotly_relayoutingmeans that the redraw pipeline is triggered continuously in the middle of scrolling/panning — while relayouting is already ongoing! This causes unexpected behavior (scroll-zooming does not result in zooming on the axes, even as the traces zoom — though temporarily). CodePen to reproduce: https://codepen.io/robertcollar-kobold/pen/gbwKRvaScreen.Recording.2026-04-10.at.11.01.46.AM.mov
In theory we could turn to the
reactmethod, which is intended to calculate the delta with the previous figure and update only what has changed. However, it behaves similarly to theupdate_layoutmethod in this context. CodePen to reproduce: https://codepen.io/robertcollar-kobold/pen/wBzXeXoThe new
updateImagesmethod resolves these problems by targeting layout images only, narrowing the scope of the layout update. Notably, it enables Plotly to reach performance parity with standard slippy map style tiled image viewers, which update image tiles continuously during scroll-zooming/drag-panning. Check out the example below:Screen.Recording.2026-04-10.at.11.09.30.AM.mov
Considerations
plotly_relayoutingevent, though it of course stands on its own as an efficient way to update layout images. We could amplify its impact by makingplotly_relayoutingpublic instead of private, but doing so might make it more likely that users callupdate_layoutcontinuously (and concurrent with ongoing relayouting), in a way that performs poorly.updateImagesin the python API. It's a minor addition that benefits most from use withplotly_relayouting, which is not accessible from the python API. If the latter were made public and exposed in the python API, then we might consider exposingupdateImagesin the python API as well. Note that similar methods (e.g.,react) are not exposed in the python API.