Browser is crashing when using dropdown component with large data in Plotly-Dash

Question

I am using Plotly-Dash to visualize a heatmap from large data (1000000) points using Densitymapbox(). The data around 30 MB loads for the first time slowly in the browser from the server and panning and zooming is also slow but browser doesn't crash. This 30MB data is coming from dash-update-component. I am using one dropdown to change the scale of heatmap. However, I observed that when I change the scale from dropdown, a callback function is called and the data from server load again in the browser and the browser crashes since now dash-update-component is loading the data again on top of the 30 MB.

Is there any way that browser cache can be cleared before loading the data from server on changing scale from dropdown so that browser doesn't crash.

Inflated

Answer 1

Browser crashes (snapped) because when we load a dash app, it fetches all the data it needs from server to the client. In this case, suppose server is sending 30 MB data to the client, and if client (your browser) is not able to handle this data data then it will crashes. FYI, this 30 MB may seem little but it will consume 4 GB of client's RAM. So what are the options here?

1. Try to send a limited amount of random data to client.
2. Use Dash's relayOut callback. this callback will send the coordinates of the corners of the current view at client side and callback function will be called. Use this corners coordinates in your callback function and send back limited data to client.

This guy has used both resampling and relayOut callback. It will solve the problem. You don't need to use the package since this will complicate your code instead you can get the relevant code and use it.

Inflated