Self-check and detect if basemap or layer WebGL context has been lost, and if yes generate a button to refresh

**Is your feature request related to a problem? Please describe.**
I have 6 (or more) kepler.gl static HTML files (generated from a notebook with the JupyterLab widget): when I propose them in a page (or simulated tabs, etc.) with 6 or more iframes, it happens (in Chrome) that:
* after the 6th one is rendered, the 1st loses its basemap
* after the 7th one is rendered, the 1st loses also its layer, and the 2nd loses its basemap
* after the 8th one is rendered, the 2nd loses also its layer, and the 3rd loses its basemap
* after the 9th one is rendered, the 3rd loses also its layer, and the 4th loses its basemap
* and so on...

The Chrome developer console explains what's happening with a WARNING:
```
keplergl.min.js:52 WARNING: Too many active WebGL contexts. Oldest context will be lost.
```

**Describe the solution you'd like**
When a kepler.gl HTML static file is generated from a notebook with the JupyterLab widget, make it in a way that when running in an iframe somewhere, it can detect if that has happened on itself, and offer (to user) the possibility to refresh with a click.
In a similar way as it is explained (with working code) at the end of [this anwer](https://stackoverflow.com/a/61278833) on Stack Overflow (scroll to the end and click where it says "Show code snippet", then click the "Run code snippet" button to test it).

**Additional context**
Here's an explicative demo of what happens: [demo video](https://gofile.io/d/IlEYEF)