Closed jernestmyers closed 1 year ago
I think the screenshots look pretty good. In the case where the stratification variable selection wraps below the x- and y-axis variable sections, I find it a little hard to process. I wonder if adding some indentation (left margin) to the selectors would help, to make it more clear that they are subordinate to the heading.
I also think the no data toggle should go above the variable selectors in the stratification section, but it's possible that's been discussed before. It just seems a little lost being beneath them.
I'll take a look at the implementation shortly.
Resolves https://github.com/VEuPathDB/web-eda/issues/1575 and I believe the current implementation would obviate https://github.com/VEuPathDB/web-eda/issues/1610.
The mockups request that:
Regarding 1 and 3, I applied these changes to all visualizations, not just 2x2 mosaic. I also stacked stratification variable/toggle selectors.
Regarding 2, I relied on CSS to gray out and disable those selections but it raises the need to handle disabling in the
Select
components' APIs inCoreUI
. I will open an issue inCoreUI
to do so.Regarding 3 alone, I find that the toggle's label can get longer than necessary. I found myself wanting to limit its width by passing a
styleOverride
into theCoreUI
Toggle component, but its API doesn't allow it as far as I can tell. I will open another issue inCoreUI
to address this limitation, if others agree.Testing the UI with the updated backend can be done on my dev site.
Screenshots (1: shows 2x2 without wrapping; 2: shows 2x2 with wrapping; 3: shows line plot potentially obviating the aforementioned issue):