Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set key function for layout images #7277

Merged
merged 7 commits into from
Nov 21, 2024
Merged

Set key function for layout images #7277

merged 7 commits into from
Nov 21, 2024

Conversation

alexcjohnson
Copy link
Collaborator

Continuing my quest to make layout.images work well for a custom tile server - panning around is currently glitchy, because when new tiles are added at or removed from the beginning of the array, we first shift the existing images to where the new start is, then update the URLs.

This PR changes it so if there's an image at the same data or paper coordinates we'll leave the same element there, create new elements at new coordinates, and delete elements at coordinates where there is no longer an image. Two caveats to be aware of, but I think these are reasonable:

  1. If your intent is just to move an existing image to new data or paper coordinates, it'll actually delete and recreate that image. Assuming you didn't change the URL, this update typically happens within one render frame so the practical effect should be minimal. If we wanted we could add a new attribute to these images like id and have that override this coordinate-based key. That would likely be necessary if we wanted to enable image animation, but we don't have that today.
  2. If you ever provided two images at precisely the same coordinates (x/yref, x/y, sizex/y all need to be the same) the update behavior will be undefined so there could still be a glitch in this case. I guess I could imagine this happening for example if you wanted a background and a variable-opacity overlay. The solution again would be to add an id attribute.

@alexcjohnson alexcjohnson added bug something broken performance something is slow labels Nov 21, 2024
@alexcjohnson alexcjohnson requested a review from archmoj November 21, 2024 00:46
@alexcjohnson
Copy link
Collaborator Author

Hmph I guess we DO have image animation? Investigating the test failure...

@@ -106,7 +106,7 @@ describe('Plots.transition', function() {
var pythonLogo = 'https://images.plot.ly/language-icons/api-home/python-logo.png';

function imageel() {
return gd._fullLayout._imageUpperLayer.select('image').node();
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't able to replicate the transition error on real code so started poking around the test itself. I don't understand it, but somehow doing this d3 selection was resetting the data stored with the image element, causing the key function I added in this PR to think the existing element wasn't the right one to use for the new image, so line 135 below expect(e1).toBe(e2); failed. Switching to a native JS querySelector fixed it. 🤷

@gvwilson gvwilson added the P2 considered for next cycle label Nov 21, 2024
@archmoj
Copy link
Contributor

archmoj commented Nov 21, 2024

Thanks very much for the PR.
💃

@alexcjohnson alexcjohnson merged commit ca6a886 into master Nov 21, 2024
1 check passed
@alexcjohnson alexcjohnson deleted the alex/image-ident branch November 21, 2024 20:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken P2 considered for next cycle performance something is slow
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants