User Story 4: Export PNG

[tihuan]

User Story 4:
As a data consumer, I want to export visualizations or specific data subsets from the spatial data, so that I can use them in presentations, publications, or further analysis with other tools.

DoD:

1. Export PNG file with TBD dimension UPDATE 2/28: Use the minimum "hi-res" required dimensions
2. Timmy: The downloaded image should have a legend on the top left corner with sensible amount of space / padding around it, the image, and the dots, similar to the Loupe downloaded image in the comment below
3. Add corresponding e2e tests (Timmy: maybe download the image and open in a new tab and take Chromatic screenshot?)

NOTES:

1. Timmy: @atarashansky will grab a screenshot for export image from Excellxgene for us 😆
2. Timmy: Scale Bar feature is captured in this ticket outside of MVP

Excellxgene example - we can probably just have a screenshot button instead of a dropdown, since we don't have other download options

[tihuan]

@atarashansky @niknak33 maybe we should align on what's included in the downloaded image - I suppose it's just whatever is currently rendered on the canvas + a legend, like what Loupe has?

[tihuan]

Hey team! Please add your planning poker estimate with Zenhub @kaloster @seve

[sidneymbell]

This seems totally reasonable to me! I'd suggest adding a scale bar if possible. Also, this is a total nit, but let's align the legend in the top left and add a few pixels of padding if possible.

[tihuan]

#742 spike blocks this ticket, because we'll use that spike ticket to port over Excellxgene's code to export image

[tihuan]

@sidneymbell Oh great idea! I'll add the requirement to move the legend to the top left 👍

I like the scale bar as well! To do it properly, should we extract that feature out as a standalone ticket, so we can add the scale bar both in Explorer and the downloaded image? (I see that Loupe Browser has the scale bar in their app but surprisingly not in their downloaded image, so this is our time to do better than them! Bwahaha)

Another reason to extract scale bar out as a standalone ticket is that we've never implemented a scale bar before, so we'd need to do some research to make sure our implementation works and can be validated 😆!

Scale Bar ticket: https://app.zenhub.com/workspaces/single-cell-5e2a191dad828d52cc78b028/issues/gh/chanzuckerberg/single-cell-explorer/749. We can prioritize this after the MVP to see when we want to add this feature!

[tihuan]

@niknak33 @seve can you sync on what image dimension we should go with? I checked 2 Loupe Browser exported images, and they are both 1499 x 1051. Not sure why it's so specific lol

Thank you!

[tihuan]

Ah okay, I just played with the Loupe Browser a bit more. The exported image dimension actually corresponds to your Loupe Browser app window dimension, so it's a YSWYG experience

To simplify the feature for Explorer, it feels like maybe we can just stick with exporting hardcoded image dimensions to start with and iterate on what the users actually need later?

[tihuan]

@seve : Okay just chatted with @niknak33 on the exported PNG file dimension, we should just use the minimal "hi-res" image dimensions required by the schema (2000x2000, I believe?) as the hard coded image dimension, so even if the "hi-res" image dimensions provided by the user is larger than 2000x2000, the exported PNG file would still look good?

CC: @sidneymbell to confirm the 2000x2000 min "hi-res" requirement is correct 🙏 Thank you!

[tihuan]

@seve said "there’c currently no legend, I’m not sure how we want to show legends for categorical color by"

CC: @niknak33 @sidneymbell to see if you can help clarify the requirement for legend

Thanks!

[tihuan]

@seve I think we're missing e2e test for this? Thanks!

[seve]

I spent some time looking through chromatic's API docs to see if it can diff downloaded images, but couldn't find any resources that made it seem like it could. Any advice on testing?

Also I left this issue open because of the open question to @niknak33

[tihuan]

Wonder if we could download the image and open it in a browser tab for Chromatic to screenshot?

[tihuan]

sync'd offline - will keep this ticket open until the e2e tests are covered!