8000 Scattermapbox and Choroplethmapbox plots can't be placed under an inactive dcc.Tab · Issue #1296 · plotly/dash · GitHub
[go: up one dir, main page]
Skip to content

Scattermapbox and Choroplethmapbox plots can't be placed under an inactive dcc.Tab #1296

New issue

Have a question about this project? Sign up for 8000 a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cczhu opened this issue Jun 10, 2020 · 2 comments
Open

Scattermapbox and Choroplethmapbox plots can't be placed under an inactive dcc.Tab #1296

cczhu opened this issue Jun 10, 2020 · 2 comments
Labels
bug something broken P3 backlog

Comments

@cczhu
Copy link
cczhu commented Jun 10, 2020

I'm building a webapp that has multiple tabs, some of which include Plotly go.Scattermapbox and go.Choroplethmapbox elements. Tab visibilty is controlled by a callback using display set to 'block' or 'none'. I'm getting a Javascript error if I move the Mapbox plots to a tab which is not displayed on app startup.

My current environment (Python 3.6.9 under the Windows Subsystem for Linux version of Ubuntu 18.04 LTS) includes

dash-bootstrap-components (0.9.1)
dash-core-components (1.10.0)
dash-html-components (1.0.3)
dash-renderer (1.4.1)
dash-table (4.7.0)
plotly (4.8.1)

My browser is Chrome 83.0.4103.61.

This is a minimum working example of my code that reproduces the error:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


import pathlib
import configparser


import plotly.express as px
px.set_mapbox_access_token(open(".mapbox_token").read())


df = px.data.carshare()


app = dash.Dash()
app.layout = html.Div([

    dcc.Tabs(
        children=[dcc.Tab(label='Text Tab', value='text'),
                  dcc.Tab(label='Map Tab', value='map')],
        value='text',
        id='tabs'
    ),

    html.Div(id='content-text',
             children=dcc.Markdown("# Some Text")),

    html.Div(
        id='content-map',
        children= [
            dcc.Markdown('# Test of Figure'),
            dcc.Graph(id='test_fig',
                      style={'height': "500px"})
        ]
    )
])


@app.callback([Output('content-text', 'style'),
               Output('content-map', 'style')],
              [Input('tabs', 'value')])
def display_tabs(value):
    tab_settings = [{'display': 'none'}, {'display': 'none'}]
    which_tab = {'text': 0, 'map': 1}
    tab_settings[which_tab[value]] = {'display': 'block'}
    return tab_settings


@app.callback(Output('test_fig', 'figure'),
              [Input('test_fig', 'id')])
def callback_graph(value):

    fig = px.scatter_mapbox(df, lat="centroid_lat", lon="centroid_lon",    
                            color="peak_hour", size="car_hours",
                            color_continuous_scale=px.colors.cyclical.IceFire,
                            size_max=15, zoom=10)

    return fig


app.run_server(debug=True)

When the default value of dcc.Tabs is set to value='map', the app works as expected. When it's set to value='text', the map is not loaded, and the debugger returns the following JS error:

Error: Something went wrong with axis scaling

    at Object.t.setScale (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:2480138)

    at http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:1985622

    at SVGGElement.<anonymous> (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:1989968)

    at http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:315738

    at ut (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:312104)

    at Array.Y.each (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:315711)

    at draw (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:1982743)

    at Object.r.drawMarginPushers (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:2358498)

    at A (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:2331674)

    at Object.l.syncOrAsync (http://127.0.0.1:8050/_dash-component-suites/dash_core_components/async-plotlyjs.v1_10_0m1588696753.js:2:2247780)

I've had no problems setting display to none for other types of Plotly plots, so figured this has to do with being unable to hide the Mapbox layer?
@cczhu
Copy link
Author
cczhu commented Jun 10, 2020

My current workaround is to create a hidden div trigger that only renders the plots after the user clicks on the Map tab for the first time.

@alexcjohnson
Copy link
Collaborator

Thanks @cczhu - the problem isn't specifically with mapbox, in fact the error you're seeing appears to be coming from the colorbar. Here's the same problem in pure plotly.js with a scatter plot and a colorbar https://codepen.io/alexcjohnson/pen/QWyymxY

But the root cause of the issue is that we're not correctly inferring the size of the graph - which is extremely difficult to do for a hidden element given all the options available through CSS and other items that might be on the page influencing it. Normally this isn't a problem, as we redraw the graph when it becomes visible - but after throwing an error it seems like the plot is in an inconsistent state and can't recover by redrawing.

I think we want to solve this at the plotly.js level via plotly/plotly.js#4155

@AnnMarieW AnnMarieW mentioned this issue Apr 2, 2023
Closed
@gvwilson gvwilson self-assigned this Jul 17, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added P3 backlog bug something broken labels Aug 13, 2024
@gvwilson gvwilson changed the title [BUG] - Scattermapbox and Choroplethmapbox plots can't be placed under an inactive dcc.Tab Scattermapbox and Choroplethmapbox plots can't be placed under an inactive dcc.Tab Aug 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken P3 backlog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cczhu @gvwilson @alexcjohnson
0