🎛️ Roundup of UX improvements #157
Draft
+276
−277
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
https://dash.plotly.com/background-callbacks#using-set_props-within-a-callback Implements a 'background' callback to improve the batching of add_user_stats. This avoids relying on a dcc.Interval with a fixed time between batches The new callback, which has background=True, continues running continuously on the server until all of the chunks have been processed. At the end of each chunk it calls set_props, which sends an update to the UI with the latest data for 'store-loaded-uuids' Via `running=`, the loading spinner is disabled during execution of the callback and reinstated when the callback finishes or cancels. When there are 0 loaded-uuids-stats and >0 total uuids (i.e. while we are loading the first batch of 10) a secondary loading spinner is shown in place of the table This should speed things up further and prevent any glitches caused by the fixed interval The Output of the callback is 'all-uuids-stats-loaded', a new store which is not used anywhere. This seems pointless, but is necessary because the callback's initialization depends on its Output. if it has no Output, it initializes on the Overview page causing errors. If the output is 'loaded-uuids-stats', it waits for the callback to finish before showing anything, defeating the purpose of batch loading. Thus, I resorted to making a new store for it
This store is already declared in app_sidebar_collapsible (which is global to the entire app) Redeclaring it on this page, I think does nothing, but it might cause issues because dash doesn't expect 2 components with the same ID. removing it.
When the map was updated, it would just zoom in on whatever was the first location point, which makes for an annoying UX if you are trying to look at a lot of data spread over a large area. These changes set the view of the map to the bounding box of the points being shown. This isn't supported natively by dash so there's a new function, thanks to folks on plotly forum
`data.user_input_mode_confirm` does not exist in the trips store, only `mode_confirm`. It was probably changed at some point and forgotten to change here
no reason to repeat this code when e-mission-server has a function for that
The label-options config will be used on the Map page to get colors and icons for rich modes. Later, we might also need it for footprint calculations if we add those to admin dash later I made it a background callback so it does not slow the initialization of the dashboard
Simplify user filter dropdowns; unify "User UUIDs" and "User Emails" into one dropdown "Users". Still respects separate permissions for uuid / email; if options_emails permission is False, the admin will only see the UUIDs, and vice versa Made this text monospace to avoid ambiguous character in UUIDs/tokens Mode filters use rich mode colors and icons using emcommon and label-options config New package dash-iconify allows use of MDI icon library (which is what rich modes use)
The UUIDs table gives a mapping of uuids to tokens, but the other tables only have uuids Instead of having to constanly cross-reference, which is tedious, we can just insert the user_token column alongside the user_id column in any table that has it
Since this dashboard was created, the dash team has released dash-ag-grid (https://dash.plotly.com/dash-ag-grid) which has many advantages over DataTable including better performance, more customiziability, and advanced sorting and filtering I was mainly interested just looking for a polished filtering mechanism, but I think this will serve us well in many ways; we may consider changing the DataTables on other pages to also be AgGrids
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Addresses backlog of UX issues in e-mission/e-mission-docs#1066
Data page
show user_token on tables on data page dc1d590
use dash-ag-grid for filterable tables f78069d
Map page
fix mode filters on maps 82d8064
overhaul filters on map page 6295d1a
auto-adjust zoom on map 8063f53
initialize Map page to showing heatmap / first permitted map type 25aba5f
Misc
use eacd.get_dynamic_config() for permissions.py 512f9e4
download label-options config in background callback 33c6877