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

Fix DropDown on page load #98

Open
daviddavo opened this issue Sep 6, 2022 · 8 comments
Open

Fix DropDown on page load #98

daviddavo opened this issue Sep 6, 2022 · 8 comments
Assignees
Labels
enhancement New feature or request ❗ important For prioritized tasks
Milestone

Comments

@daviddavo
Copy link
Member

This issue could be related to #96, but improving the dropdown loading time is more important than adding caching to the rest of the application, so it will be done first.

@daviddavo daviddavo added enhancement New feature or request ❗ important For prioritized tasks labels Sep 6, 2022
@daviddavo daviddavo self-assigned this Sep 6, 2022
@daviddavo
Copy link
Member Author

daviddavo commented Sep 7, 2022

In old versions, before adding the filters, the dropdown was generated directly in the layout.

Perhaps we could generate the DropDown again in the layout, and prevent the first call to the callback. That way, the page will take a bit more to load, but the dropdown will be already there (better UX).

@daviddavo daviddavo changed the title Improve dropdown geneartion Generate DropDown on page load Sep 7, 2022
@daviddavo
Copy link
Member Author

The main purpose of this issue is to make the initial call to org_filters not necessary, and do everything inside dashboard_view.__generate_header.

To do this, we will have to:

  • Create a new function that encapsulates common logic
  • Add prevent_initial_call=True to the org_filters callback
  • If the filter is unmarked, update the search URL if necessary, how? Perhaps this item can't be done when generating the layout, but we can do the other ones and then PreventCallbacks for everything except the url.

@daviddavo
Copy link
Member Author

I'm also having problems to use prevent_initial_call, because of this:

However, the above behavior only applies if both the callback output and input are present in the app layout upon initial load of the application.

It is important to note that prevent_initial_call will not prevent a callback from firing in the case where the callback's input is inserted into the layout as the result of another callback after the app initially loads unless the output is inserted alongside that input!

In other words, if the output of the callback is already present in the app layout before its input is inserted into the layout, prevent_initial_call will not prevent its execution when the input is first inserted into the layout.

Because of our multipage layout, which loads the components after loading the application (using the change_subpage callback), we can't prevent the initial call on org_filters, because it has url as an input.

Perhaps using dash.no_update will prevent the Dropdown from reloading (and unfocusing it if the user had it focused).

@daviddavo
Copy link
Member Author

I've added the Dropdown to the __generate_header function.

I don't think there's much improvement. dash.no_update won't do because we need to "trigger" the following callbacks (the platform info and graphs). So it will be recalculated nevertheless.

After giving up on trying to improve it, I think we have the following options:

  1. Loading the dropdown with just the value that is currently selected (only one option). But it will be populated by the callback. This way, it will appear on screen and the user can navigate the rest of the page. But it won't be really usable. A quick user could click on the dropdown before it's really loaded.
  2. Covering the dropdown behind the "loading square". The dropdown will still take time, but the user won't notice.
  3. Create a curated selection of DAOs #99

@daviddavo
Copy link
Member Author

About the first option, there are some callbacks that read information from the dropdown. This is because they generate an OrganizationList from the filtered options available in the dropdown. In that case, we'd need to save that filtered organization list somewhere else, or to recalculate it again when needed using the original organization list and the filters.

@daviddavo daviddavo added this to the 1.2.0 milestone Sep 8, 2022
@daviddavo
Copy link
Member Author

daviddavo commented Sep 8, 2022

If we want to create a custom component, we'll need to use:

Some community made components are:

The main problem with our current dropdown is rendering thousands of items. We need a system in which the dropdown only has a couple of hundred items at most, and if the user scrolls to the end, we could either load more items or tell the user that he needs to write text to search.

We should take the Table Component (which has server-side pagination) as a reference.

daviddavo added a commit that referenced this issue Sep 26, 2022
@daviddavo daviddavo changed the title Generate DropDown on page load Fix DropDown on page load Sep 26, 2022
@daviddavo
Copy link
Member Author

Waiting for plotly/dash#2251 to be fixed

@daviddavo daviddavo modified the milestones: 1.2.0, Demo CSCW Sep 27, 2022
@daviddavo
Copy link
Member Author

This would be easier to fix if #88 was completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ❗ important For prioritized tasks
Projects
Status: Waiting
Development

When branches are created from issues, their pull requests are automatically linked.

1 participant