VEuPathDB / web-eda

Web browser code for EDA-based applications
Apache License 2.0
0 stars 0 forks source link

Update/2x2 params 1575 #1608

Closed jernestmyers closed 1 year ago

jernestmyers commented 1 year ago

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:

  1. The X and Y variables/values are stacked
  2. The reference values are grayed out until X and Y variables are selected
  3. Stratification variables wrap beneath the X and Y variables/values selections

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 in CoreUI. I will open an issue in CoreUI 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 the CoreUI Toggle component, but its API doesn't allow it as far as I can tell. I will open another issue in CoreUI 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): image image image

dmfalke commented 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.