Cell Population Graphs Y3 cosmetic updates

[bherr2]

The original tissue-bar-graphs web component is written in Angular. We want to integrate this component as an official HRA web component and update it's processing to accept our new cell type summary format (in addition to CSV). More refactoring/ergonomics will likely be needed to make it most useful.

[bherr2]

I'd love to do this now, but it just has to have a spec/disussion to be actionable.

[LibbyUX]

@bherr2,

Is this issue for the app of many names Cell Population Comparison at https://hubmapconsortium.github.io/tissue-bar-graphs/ ? I will organize this issue to the Design System Alignment milestone if so.

[bherr2]

Yep!

[LibbyUX]

@bherr2 are there any notes on this issue that you'd like me to track for later versions of Cell Population Graphs? I realize I kind of took over this issue, lol, so I want to be sure to capture anything for future versions if necessary. Thanks!

[bherr2]

One note, is that we will eventually need to make this more flexible (probably a next cycle thing). I think right now you are focusing on rebranding/cleaning up the existing functionality, but for it to be really useful we'll need to think harder about the data model and the types of user interactions with the data that we want to enable with this.

[LibbyUX]

Perfect, I will capture this in a new issue for design system expansion. Thank you so much @bherr2 and happy Friday!

[LibbyUX]

Ready for dev: Cosmetic updates

The Cell Population Graphs page is ready for development. Our Vega-lite Pattern sheet should be utilized for the visualizations. All design system components relevant to this UI have been submitted or utilized in the past:

• Button Toggle #665
• Form Field: Mat-Select #667
• Vega-lite visualization initial style sheet #515

Design Notes

• A new splash section has been added to this UI.
• We may need a smaller font size for the Vega-lite visualizations. Please contact me when this is being worked on to see if we need to add a smaller font size to our Vega-lite Patterns sheet.
• Please let me know if you have questions, I am happy to help! Thanks so much!

Figma Resources

• Design File: Cell Population Graphs
• Vega-lite Patterns Sheet