Component updates: Sample metadata vs. user generated metadata

[LibbyUX]

Currently, in example visualizations, the metadata fields are mostly empty. Ideally, every section in the sample metadata area is filled out, to make our examples more useful. This shows users what they can do with this web app.

@J-Yash - Is it possible to provide development with this information for each of the two sample datasets? If we don't have this information, can you let me know?

Information needed for 2D & 3D visualizations sample metadata:

• Source data: URL
• Color map: URL to Google sheet
• Organ: Organ name
• Technology: Imaging technology
• Sex: M/F
• Age:
• Thickness:
• Pixel Size:
• Creation date: Dev request - Can we capture the date of when each user opened the sample visualization?
• Creation time: Dev request - Can we capture the timestamp of when each user opened the sample visualization?

Mentioning @bherr2 for visibility.

I am considering specifying functionality hiding or consolidating empty fields in the metadata module.

[LibbyUX]

Please note, this is how we specified the sample files verbiage in the sample metadata tooltip:

[bherr2]

I would assume creation date/time is when the visualization was actually created, not when they opened the existing visualization. We can definitely capture date/time when they hit the create visualization button and put that in the metadata. For the pre-existing ones we need to just put a date/time (we can look at commit logs to determine an appropriate one).

[bherr2]

And yeah, you should spec out what it looks like to hide the empty metadata fields

[LibbyUX]

Thank you for the notes on creation date/time, @bherr2! This all sounds good.

I will work to get empty fields spec'd before EOB today. I am making cosmetic and responsive adjustments to the Vis App in a new iteration here.

[LibbyUX]

@J-Yash, I've worked through this further with Bruce, so I have a few asks:

• Can you confirm that the titles I wrote (a blend of my UX copy + the current titles for each sample in production) are useful? I want to make it explicit that this is a sample visualization.
  • Side ask: Where did you get this data for these samples? Is it publicly available and if so, can you please link me? I will embed a link in the title section to the publicly available resources. This is to credit the team providing the sample data for this UI.
• Can you confirm that the Google Sheet links I used are correct for each sample?
• Can you confirm that the metadata below is accurate for each sample visualization?
  • Note that I sourced this from your comment on April 11 on a separate issue.
• Do we have age/sex metadata for these two sample datasets? Can you provide this information, if so?

2D Intestine

• Title: Sample 2D Visualization (Intestine): colon-cycif-sorgerlab / CRC01002
  • URL to public dataset (if possible):
• Source Data (link to Google Sheet): https://docs.google.com/spreadsheets/d/1mOrSRSTPUaTHRDR-hucWSVweinWKzRNr5Lz9vz13Ix4/edit?gid=0#gid=0
• Organ: Intestine
• Technology: CODEX
• Sex:
• Age:
• Thickness: 7
• Pixel Size: 0.866

3D Skin

• Title: Sample 2D Visualization (Skin): skin-celldive-ge / region_6
  • URL to public dataset (if possible):
• Source Data (link to Google Sheet): https://docs.google.com/spreadsheets/d/1sBnCiggPjo6S7FBIbP6rdSK-TCSmOPBVfQcMcfgvehM/edit?gid=0#gid=0
• Organ: Skin
• Technology: Cell DIVE
• Sex:
• Age:
• Thickness: 5
• Pixel Size: 0.325

If you are curious, view my progress as I work to specify improved UX for the metadata modules in both sample visualizations and user-generated visualizations here/

[J-Yash]

@LibbyUX , below are the details. Note that the link to the intestine sample data Google Sheet is different. I deleted the old Google Sheet since that contained a different intestine dataset than what is shown in the sample visualization. I also added links to the published papers for the two datasets for "URL to public dataset." We do not have the Sex/Age info for these datasets.

2D Intestine Title: Sample 2D Visualization (Intestine): colon-cycif-sorgerlab / CRC01002 URL to public dataset (if possible): https://www.sciencedirect.com/science/article/pii/S0092867422015719?via%3Dihub Source Data (link to Google Sheet): https://docs.google.com/spreadsheets/d/1oy8U8ot7DX8ZZ2M8tz07EUHEbgzy5i2rmr09g5BrRmg/edit?usp=sharing Organ: Intestine Technology: CODEX Sex: Age: Thickness: 5 Pixel Size: 0.65 3D Skin Title: Sample 2D Visualization (Skin): skin-celldive-ge / region_6 URL to public dataset (if possible): https://www.nature.com/articles/s42003-023-04991-z Source Data (link to Google Sheet): https://docs.google.com/spreadsheets/d/1sBnCiggPjo6S7FBIbP6rdSK-TCSmOPBVfQcMcfgvehM/edit?gid=0#gid=0 Organ: Skin Technology: Cell DIVE Sex: Age: Thickness: 5 Pixel Size: 0.325

Let me know if anything else is needed!

[LibbyUX]

Thank you so much @J-Yash, this is perfect!!!

[LibbyUX]

@bherr2, can you please feasibility check this QoL component-specific design? Let me know what you think about this direction for the metadata module differences.

[bherr2]

Looks good

[LibbyUX]

Logic + aesthetic updates for the metadata modules are ready for development, thanks so much! Note that the two samples have real metadata and links in Figma.

Design Notes & Resources

• Graphic: Design changelog
• Canvas: Metadata module differences + component variants

Component building blocks

• Typography sheet
• Titles
• Tooltip
• Table text button