dcc.Graph - figure incorrectly rendered when in inactive tab, ok if tab active

Dash Python
5

OK, see below an example of code that works for me to reproduce the issue.

Load the app. The map tab should be correct. Go to another tab, hit calculate, and go back to map. It should now be drawn incorrectly.

In the meantime, I’ve found the following old post, that seems to be about the same issue: Need to reset each Scattermapbox for it to show up properly

There does not seem to be a solution since.

import dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import Dash, dcc, html, dash_table, ctx
from dash.dependencies import Input, Output, State
from plotly import graph_objs as go
import plotly.express as px


# Plotly mapbox public token
mapbox_access_token = "put your own token here"

### App declaration
#
app = dash.Dash(external_stylesheets=[dbc.themes.SLATE, dbc.icons.FONT_AWESOME])
#
###

### Tabs
#
tab1_content = dmc.TabsPanel(
    html.P('0', id = 'tab1_text'),
    value = 'tab1',
)
tab2_content = dmc.TabsPanel(
    html.P('0', id = 'tab2_text'),
    value = 'tab2',
)
tab3_content = dmc.TabsPanel(
    dbc.CardBody(
        [
            html.P('0', id = 'tab3_text'),
            html.Div(            
            dbc.Spinner(dcc.Graph(id="map-graph", responsive=True, style={'display': 'inline-block', 'width': '100%'}))
            , id = 'map-div')

        ], id = 'map-card'
), value='tab3')

tabs = html.Div([dmc.TabsList(
            [
                dmc.Tab("Tab 1", value="tab1", style={"color": 'white'}),
                dmc.Tab("Tab 2", value="tab2", style={"color": 'white'}),
                dmc.Tab("Map", value="tab3", style={"color": 'white'}),
            ],
            id = 'tabslist'
)])
#
###

header = dbc.CardBody(
    [
        html.P("Header", style={"color": 'white'}),
        dbc.Row([
        dbc.Col(dbc.Button('Calculate', id='calculate-button'), width="auto", align="center"),
    ], justify="between"),
    ],
)

#### Helper functions
#
def generate_map_fig():

    filtered_fig = go.Figure(data=[
        go.Scattermapbox(
            lat=[48],
            lon=[4],
            mode="markers",
            hoverinfo="lat+lon+text",
        )])

    filtered_fig.update_layout(
        hovermode='closest',
        showlegend=False,
        mapbox=dict(
            accesstoken=mapbox_access_token,
            bearing=0,
            center=go.layout.mapbox.Center(
                lat=48,
                lon=4
            ),
            pitch=0,
            zoom=12,
            style='streets'
        ),
        margin={"r":10,"t":10,"l":10,"b":10}
    )

    return filtered_fig
#
####

#### Callbacks
#
@app.callback(
    [Output('tab1_text', 'children'),
    Output('tab2_text', 'children'),
    Output('tab3_text', 'children'),
    Output('map-graph', 'figure')],
    [Input('calculate-button', 'n_clicks')],
    State('tab1_text', 'children')
    )
def update_output(clicks, value):

    result = 42 + int(value)
    new_fig = generate_map_fig()
    return result, result, result, new_fig
#
####

### Layout
#
app.layout = html.Div([
    header,
    dmc.Divider(variant="solid"),
    dmc.Tabs([
        tabs,
        tab1_content,
        tab2_content,
        tab3_content,
    ], value='tab1',id='tabs', persistence=True, variant='pills', color='blue'),
])
#
###

if __name__ == '__main__':
    app.run_server(debug=True)