Imageomics / Imageomics/dashboard-prototype
Speed up the dashboard
- Dominant language
- Python
- Stars
- 6
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
Currently, the dashboard starts to slow down with datasets at about 1.6MB, this becomes more pronounced by 3.3MB (CSV with about 12,000 rows by 15 columns).
The slow down is most pronounced in
1. Initial processing of the dataset (hence we have a loading indicator).
2. Selecting different color-by options for the map distribution; the change in the map has a pronounced delay.
Diagnosing the specific source of the slow down (if it's one or more reasons) is still required.
The Dash documentation provides various suggestions under their [performance section](https://dash.plotly.com/performance), and the [dash-extensions package](https://www.dash-extensions.com/) also has some options:
1. [Flask caching](https://dash.plotly.com/performance#memoization). Since the processing is only done once, this would only have potential to speed up the graphing components, though initial testing didn't seem to show improvement.
a. A similar solution is [background caching](https://dash.plotly.com/background-callback-caching).
b. Dash-extensions has a package for server-side caching: [ServersideOutput Transform](https://www.dash-extensions.com/transforms/serverside_output_transform). This removes the need for JSON serialization between callbacks and [_should_](https://community.plotly.com/t/sharing-data-between-callbacks/48415/2) speed things up, though I'm not sure how effective it was (I tried an implementation on the [server-store branch](https://github.com/Imageomics/dashboard-prototype/blob/server-store)). This would also require a regular clean-up of the cached files (as with the previous two).
2. [Dash Patch Class](https://dash.plotly.com/partial-properties#the-dash-patch-class) for updating the map (and potentially other graphs as well). Plotly express is fast, but starts to slow down around 15K points (per [dash performance docs](https://dash.plotly.com/performance#graphs)). I attempted to implement this with the map, but my initial attempt was unsuccessful.
3. [Using orjson](https://dash.plotly.com/performance#data-serialization). I'm unclear on precisely how this potential solution works, it [seems](https://github.com/plotly/plotly.py/pull/2955) (and [this](https://community.plotly.com/t/best-practices-to-improve-dash-performance/64883)) that having the package installed allows dash to serialize json strings with orjson instead. There are errors thrown if you try to use it for the serialization (the speedup comes from the fact that it's [bytes](https://community.plotly.com/t/dash-2-8-and-orjson/72295/3)).
4. [Clientside Callbacks](https://dash.plotly.com/clientside-callbacks). To implement this, the graphing portion would have to be translated into Javascript.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by profiling the dashboard with the 1.6MB and 3.3MB CSV datasets, focusing on initial processing and color-by map selections. Read Dash's performance documentation and compare the mentioned caching, Patch Class, orjson, and clientside callback options. Done means identifying the bottleneck and demonstrating faster loading and map updates without breaking the dashboard.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- data-visualization, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100