I’ve been making an image alignment app in Dash that requires some manual input through two sliders (controlling x and y translation). The issue is specifically with the plot, so I’m sorry if this is in the wrong place.
Currently, I have two graphs (each containing a heatmap) overlaid within the Dash app to avoid both traces graph re-rendering when I move just the top trace. Additionally, I have only been able to get animation by changing the layout, rather than the x0 and y0 positions. I am not too bothered with animation if the rendering can be quick enough, but the delay on two ~700px^2 images rendering is currently prohibitive as I need users to have fairly quick feedback from their actions.
Unfortunately, having two overlaid graphs obviously causes problems with interactivity (zooming, hover-info, etc.), so it’s far from an ideal solution. I was wondering whether there would be a way to have a quick-rendering low-res copy that moves over a pre-rendered background, and then load a higher-res graph containing both traces when changes stop occurring? Is this possible, and how would I go about this? I am getting stuck on how I make it wait for a slider to stop being used while the slider is in ‘drag’ mode for the low-res, as well as how to stop the high-res version rendering if a slider is changed again.
Alternatively, if the resolution could be dynamically changed to render different resolutions depending on frequency of input from within Dash/plotly it would obviously be much more efficient than my awkward workaround idea but I don’t think that’s a current feature… Please correct me if I’m wrong!
Thanks in advance for any help you can give.