NeurodataWithoutBorders
Use Tabs instead of Accordions
fix #191
Still implementing an interaction similar to the previous Enable / Disable feature (e.g. for certain interfaces on particular sessions). Though wanted to make this public for comments.
Aside from the ongoing DANDI schema issue, the tests are passing for this PR and all the relevant sub-features have been completed.
In general looks fine; I think centering the title in the middle of the tab would be nice
I think I might prefer a border outline and no fill (and rounded edges if I'm being picky); basically like how the session selectors look in the session manager (including the way those yield signs look, which is great; the number counter for warnings could be added below or adjacent to the the yield sign to make it clearer that yellow is warning, red is error) - and perhaps no green underline is all is OK (instead, just a green checkmark next to section name)
That said, I do understand that going this route can lead to issues if there are too many sections on a page; this shouldn't be a problem for metadata (even on minimum allowed window size) but using the tabs on the Locate Data page to split up interfaces could be a case of that (possible to have ~6-8 interfaces in a realistic setting) - how hard is it to swap between tabs and the previous accordion if say, the number of elements is greater than some threshold? (as calculated by some estimate that all the tabs ought to fit on one screen vs. spilling over)
I think I might prefer a border outline and no fill (and rounded edges if I'm being picky); basically like how the session selectors look in the session manager (including the way those yield signs look, which is great; the number counter for warnings could be added below or adjacent to the the yield sign to make it clearer that yellow is warning, red is error) - and perhaps no green underline is all is OK (instead, just a green checkmark next to section name)
So more like the Centered Pills here?
https://cdn-clibi.nitrocdn.com/OmAxDmvnEDrIbyCCcgEheUGaGtzJEYJA/assets/images/optimized/rev-e75d6e9/wpstackable.com/wp-content/uploads/2023/07/tabs_11.png
Gonna need a visual example, as this otherwise seems like it'll get cluttered very quickly. Additionally, Pills (when used for tab-like interactions) tend to have less flexibility regarding their internal design and aren't as easily scrolled.
Also, d'you only want the number of errors OR warnings to show, rather than both if they exist? I'm doing the former, though the latter is easier to manage visually.
That said, I do understand that going this route can lead to issues if there are too many sections on a page
What sort of issues were you thinking with too many tabs?
How hard is it to swap between tabs and the previous accordion if say, the number of elements is greater than some threshold? (as calculated by some estimate that all the tabs ought to fit on one screen vs. spilling over)
This would be fairly simple, would just have to re-integrate the accordion handling into the JSONSchemaForm.
Though a calculation for this is going to be difficult to approach because it all depends on window size, length of the header string, etc.
Are you trying to avoid the tabs being scrollable? Just FYI we could also stylize the horizontal scrollbar so it always shows and looks better. Alternatively, we could also have stacked tabs / pills to avoid scroll interactions, though we'd have to change the rendering slightly so the currently selected tab still looks as if it's attached to the content.
So more like the Centered Pills here?
Yes, those look good to me
and aren't as easily scrolled.
How do you mean? Horizontal scrolling across tabs or vertical scrolling of page contents when tab is clicked?
Also, d'you only want the number of errors OR warnings to show, rather than both if they exist? I'm doing the former, though the latter is easier to manage visually.
I like both, or if easier to constrain to one could give priority to errors over warnings
The current red/yellow circle in the tab is already an improvement, but displaying a counter next to severity could help prioritize attention (e.g., "NWBFile 2 ❌ 5 ⚠️ | Subject 5 ❌ 1 ⚠️ "
What sort of issues were you thinking with too many tabs?
Squishing of text in a fixed window size if no horizontal scrolling, or difficulty of navigation if allowing horizontal scrolling across tabs (easier on laptops, but not all desktop or plugin mice have native buttons for this)
Basically, the reasons we originally didn't go with tabs (I thought)
Though a calculation for this is going to be difficult to approach because it all depends on window size, length of the header string, etc.
Yeah, it would be a rule of thumb derived from the smallest window sizes we can test on
Are you trying to avoid the tabs being scrollable? Just FYI we could also stylize the horizontal scrollbar so it always shows and looks better.
It is; see some comments above for justification against. I know one could always click and drag the scrollbar but that's a minor annoyance
Alternatively, we could also have stacked tabs / pills to avoid scroll interactions, though we'd have to change the rendering slightly so the currently selected tab still looks as if it's attached to the content.
I do like that, yes. If you can get that to look good with not too much effort I'd love to see it
Also, just throwing this out there to wonder about how hard it would be to implement; this entire feature of tabs vs. accordions might be an 'opinion'/'preference' where some people might prefer one way or the other
How hard would it be to have both components available to display the forms, and have the choice of which to use be a configuration setting of the app itself?
Will clean this up ASAP, otherwise we'll wait until the next GUIDE meeting to get some more feedback.
Now we're thinking that the tabs will be styled like this image: https://ddgobkiprc33d.cloudfront.net/fde81095-a8e0-4716-983d-757927957851.png
@CodyCBakerPhD Alright, I've tested this extensively and played around with some of the styling changes we discussed today. Let me know what you think!
I've also confirmed that you can preview the changes in Storybook.