Improve UX to find/skim through method of element in documentation

[arunaseva]

Hi!

Methods are in alphabetic order with perhaps longer description. It's ok, but not optimal because:

• There are more "relevant" methods (=specific to this tree element) e.g. collapse, expand, on_select, on_expand ...
• There are less "relevant" methods (= common for all or for a lot of elements) e.g. bind_visibility, bind_visibility_from/to, on, classes ...

Plus: less "relevant" methods descriptions can be longer

Typically I always scroll the methods (e.g. at tree element: https://nicegui.io/documentation/tree#methods) to find the relevant method I need. Or if I more familiar with the element's props/methods I use Ctrl+F to find method name in page (if I remember the name) or scroll...

I suggest to list method names (and parameters) somehow. Examples:

1. At the left pane "Methods" link can be expandable/collapsible. And if expanded: below the "Methods" link a list of links with the method names can be placed with method parameters in tooltip.
2. At the main pane all method can be an expansion element (title: the method name and params, content: the method description). And an "Expand all/Collapse all" link can be placed somewhere.
3. Or at the main pane above methods a traditional anchor link list can be added (e.g. https://html.com/anchors-links/) similar as in 1. suggesion.

[falkoschindler]

Hi @arunaseva,

Sure, the reference section is a bit cluttered.

1. At the left pane "Methods" link can be expandable/collapsible. And if expanded: below the "Methods" link a list of links with the method names can be placed with method parameters in tooltip.

This is probably a bit challenging to implement, but would be a great improvement. See #2976 for similar request.

2. At the main pane all method can be an expansion element (title: the method name and params, content: the method description). And an "Expand all/Collapse all" link can be placed somewhere.

Yes, that's an interesting idea. You would, however, loose the ability to search the whole page for certain keywords using Ctrl-F. Only docstrings of expanded methods would match.

3. Or at the main pane above methods a traditional anchor link list can be added (e.g. https://html.com/anchors-links/) similar as in 1. suggesion.

Oh yes, maybe like the overview on top of some Python documentation pages: https://docs.python.org/3/library/collections.html

Apart from listing the methods somewhere or making them expandable, we could try to improve their order. Maybe we can sort them depending on the inheritance hierarchy...

[arunaseva]

Hello, thanks for your answer.

I don't want to force something that has low interest. But every real usability impovement should enhance the user experience.

To summarize the possibilities, what I can imagine:

Search in page (Ctrl+F)

If all contents are in expanded/unhidden state by default at page loading then the current search in page functionality will be remained.

Improve menu-like functionality

At the left panel primary methods (not unherited) and/or secondary methods (unherited) can be listed, the method names.
In tooltip method parameters can be displayed.
In main content part above methods jump links (to methods) can be displayed the same way as inthe left panel.

Sorting menu items and functions

All menu links can be sorted in one alphabetically ordered list
or separately in two alphabetically ordered list (not inherited and inherited method names separately)
Maybe we can use a switch element to alternate between different sortings.

Expand/collapse & expand all/collapse all

This four option can be all used: to expand & to collapse one method description or to expand all & to collapse all methods' descriptions.

Expand and collapse can work be clicking the expansion element's title text: the method name & params.
Expand all and collapse all can be e.g. buttons elements.
(As I mentioned before expand all can be the default state to support Crtl+F)