Populate dbc.Card with hoverdata

Dash Python
1

Hello,

I’m learnin dash for a month now and i’m trying to populate my bootstrap card with hoverdata from my scattermapbox map, taking example on this tutorial.
It works but only for a short time and it looks like datas inside dbc.card keep refreshing all time even without user action 2021-03-09 23-15-25

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd
import plotly.graph_objects as go

from app import app
from apps.utils import create_card

teamPlayoffs =pd.read_csv('https://github.com/jnditifei/nbastats/blob/main/2019-2020_NBA_team_playoffs.csv')

maps= go.Figure()

access = ("")

maps.add_trace(go.Scattermapbox(
        lat=teamPlayoffs['lat'],
        lon=teamPlayoffs['lon'],
        mode='markers',
        hovertext=teamPlayoffs['short'],
        hoverinfo="text",
        marker=go.scattermapbox.Marker(
            size=20,
            color='rgb(138, 11, 11)',
            opacity=0.7
        )
    ))

maps.update_layout(
    autosize=True,
    hovermode='closest',
    showlegend=False,
    mapbox=dict(
        accesstoken=access,
        bearing=0,
        center=dict(
            lat=38,
            lon=-94
        ),
        pitch=0,
        zoom=3,
        style='light'
    ),
    mapbox_style="dark", margin = dict(l = 0, r = 0, t = 0, b = 0,)
    )

first_row = dbc.Row([
    dbc.Col(
        id="first", width={"size": 3, "order": 1, "offset": 2}
    ),
    dbc.Col(
        children=create_card("Second-title", "Second-Description"), width={"size": 3, "order": 1, "offset": 2}
    ),
                     ])

layout = html.Div([
    first_row,
    dbc.Row(dbc.Col(dcc.Graph(id='map',figure=maps, hoverData={'points': [{'hovertext': 'Lal'}]}), style={"margin-top":"20px"}
        ),
    )
])

@app.callback(
    Output('first','children'),
    [Input('map', 'hoverData')]
    )
def upgrade_card(hoverData):
    title = hoverData['points'][0]['hovertext']
    return create_card(title, "Second-Description")

I also tried inside an html.Div i have the same result
Sorry for my poor english i hope you understand me.

2

Take a look at your callback decorator:

@app.callback(
    Output('first','children'),
    [Input('map', 'hoverData')]

You’re telling your application to repopulate the “children” attribute of an element with ID as “first” (which happens to be a Col), every time “hoverData” event triggers from an element with ID of “map” (which happens to be your map object). And the logic you’ve written simply recreates a Card object and returns it to the Col every time you hover over the map.

The app is doing what you’re asking it to do.

4

Oh it’s obvious now you said it, thanks !!
I want this behavior but just when mouse user is on red point (NBA TEAM) on the map, do you have an idea on how i can do that ? Marker inside scattermapbox doen’t have an ‘id’ element

5

You can suppress the Output from being updated for every “hover” event by using something like this: Advanced Callbacks | Dash for Python Documentation | Plotly

If you follow the section that talks about “no_update”, that should provide you with a possible implementation. I’m away from computer currently and can’t provide help with a sample code unfortunately.

6

Thanks u help me a lot, I appreciate

7

You’re welcome and I’m glad I could help.