Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ENH: disable tabs with no content #266

Closed
jsheunis opened this issue Mar 31, 2023 · 10 comments
Closed

ENH: disable tabs with no content #266

jsheunis opened this issue Mar 31, 2023 · 10 comments
Labels
javascript Related to Javascript code, VueJS, etc

Comments

@jsheunis
Copy link
Member

e.g.:

Screenshot 2023-03-31 at 15 27 00

"subdatasets" tab can be disabled if no content is available to display, and the "files" tab would therefore be the default displayed tab in this case.

IMO the empty tabs should not be hidden/removed, since this would make for an inconsistent user experience. Better to keep the components where they are expected to be, but make it clearer/intuitive when they cannot be interacted with.

@jsheunis jsheunis added the javascript Related to Javascript code, VueJS, etc label Mar 31, 2023
@jsheunis
Copy link
Member Author

jsheunis commented Apr 4, 2023

This is proving to be more difficult than anticipated.

It somehow relates to the asynchronous call made upon navigation to the dataset page, in order to get subdatasets or files.

@jsheunis
Copy link
Member Author

jsheunis commented Apr 5, 2023

(Note: standard tabs are Subdatasets and Files, non-standard tabs such as Publications are currently only displayed if they have content)

The options for tab display are:

1 - Always display standard tabs

If they don't have content, display a message stating that. This is the current setting

2 - Disable standard tabs with no content

E.g. if the Files tab does not have content, it remains in place but the tab is greyed out and not clickable.

3 - Hide standard tabs with no content

E.g. if the Subdatasets tab does not have content it is not shown

Which UX would you expect or prefer?

@christian-monch
Copy link
Contributor

I would prefer option 2. It is consistent with a number of user interfaces that allow the "familiar" click, but state explicitly that there is no data. I also think that not being able to click on a tab on which you usually click out of habit feels wrong.

@jsheunis
Copy link
Member Author

jsheunis commented Apr 5, 2023

I would prefer option 2. It is consistent with a number of user interfaces that allow the "familiar" click, but state explicitly that there is no data. I also think that not being able to click on a tab on which you usually click out of habit feels wrong.

@christian-monch Do you mean option 1? Option 2 is the one that does not allow the click.

@loj
Copy link
Collaborator

loj commented Apr 5, 2023

I lean towards option 1 or 3, with a slight preference for option 3.

IMO the empty tabs should not be hidden/removed, since this would make for an inconsistent user experience. Better to keep the components where they are expected to be, but make it clearer/intuitive when they cannot be interacted with.

I understand why you like the idea of a consistent user experience, and I do like option 1 over 2. But the empty tabs makes me feel like it's incomplete/not done when that might not be the case.

@jsheunis
Copy link
Member Author

jsheunis commented Apr 6, 2023

Ok based on feedback I am leaning towards option 1 (which is also technically much easier)

@jsheunis
Copy link
Member Author

jsheunis commented Apr 6, 2023

Closing since nothing further needs to be done. Decided on Option 1 and this does not require changes.

@mih
Copy link
Member

mih commented Apr 14, 2023

It is not clear to me why there are "standard tabs" and "non-standard" tabs? From a user perspective this seems to be an arbitrary and opaque distinction, but it is used here to explain behavior differences.

@jsheunis
Copy link
Member Author

IMO there's always an expected structure for what a dataset looks like in a user interface. If you click on a dataset in any portal-like interface, there's always some top-level description and then options to view other properties of the dataset (in our case subdatasets, file tree, publications etc.). Some of these properties might be shown by default, and others would need to be selected in order to be rendered. IMO the position and availability of these options, and the way a user interacts with them, should be predictable. If you click on one dataset and only see publications (no other tabs), and on another dataset and see three tabs with one autorendered, how do you discern which dataset actually has which content? Is it existing but hidden for some reason, or missing, or non-existent? To make these questions unnecessary, i.e. to make the UX as intuitive as possible, I think the setup of the tabs and their content should be predictable and standard across datasets in the catalog.

@jsheunis
Copy link
Member Author

jsheunis commented Jun 7, 2024

Closing this since the current state in main is sufficient to address this issue.

@jsheunis jsheunis closed this as completed Jun 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javascript Related to Javascript code, VueJS, etc
Projects
None yet
Development

No branches or pull requests

4 participants