hubmapconsortium / hra-ui

HRA UIs Monorepo (includes HRA Portal, EUI, RUI, ASCT+B Reporter, and more)

https://hubmapconsortium.github.io/hra-ui/

MIT License

3 stars 2 forks source link

Visualization app QoL updates #499

Open LibbyUX opened 6 days ago

LibbyUX commented 6 days ago

Visualization app QoL updates

Closing out major MVP1 work with cosmetic, responsive, and functionality updates for our new CDE!
Please inspect all redesigned components carefully for responsive and aesthetic details! Any component appearing in the new canvas has been modified from our initial CDE.
Redesigning this interface was extremely intentional to stay consistent and responsive, and to optimize screen space.
Please don't hesitate to contact me with questions - I am always happy to help!!!
Most of these updates are aesthetic/responsive, so I will highlight the UX updates needed below:

UX updates + Figma links

[x] Implement new tooltip text for the Cell Type module
[x] Anchor icon: Implement a tooltip hovercard for this target point in the cell types list and legend

Design repo resources

Typography Sheet

CDE design file

Prototype previews

bhushankhope commented 5 days ago

@LibbyUX I have updated the tooltip for cell types and anchor. I have also updated the header on the visualization page. Preview is available here. I will continue to work on the other parts of the visualization page.

LibbyUX commented 5 days ago

@bhushankhope thank you so much! The tooltip looks great for the cell type module and the anchor listing within the cell types module.

One question about the anchor tooltip, and we might need @bherr2's expertise here: there are two areas where the anchor should be but I don't see the anchor endothelial cell in the histogram legend preview for the 2D preview. Is this the dataset? Does the histogram legend not need an anchor? Is my computer/internet bugging out right now? Let me know if there's anything I can do on my end!

Regarding the header logos: My internet connection/computer might be buggy at the moment, but the header logo graphics appear more spacious than specified, perhaps? The preview itself is also moving slowly on my end, too. The text/font updates look good from my end. I might revisit the header appearance tomorrow when I'm back at the office.

Thanks for knocking out the tooltips today!

bherr2 commented 5 days ago

@LibbyUX the anchor cell type doesn't show up in the histogram because it doesn't make sense to. The histogram is a distribution of the distances to the anchor node, thus all anchor cells are zero distance to an anchor cell (itself). To include it would highly skew the visualization and defeat the purpose.

LibbyUX commented 5 days ago

@bherr2 makes sense - thanks for breaking this down! I appreciate it!