Updating dbc.Card with hoverData

Question

I have the following skeleton code

# ------------------------------
#       IMPORT LIBRARIES
# ------------------------------


# Import Dash and Dash Bootstrap Components
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, dcc, html, dash_table, State
import dash_leaflet as dl

# Import Core Libraries
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from dash import Input, Output, dcc, html, dash_table


token='my_token'


FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"


# Import data 

data_url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSGcAFoXyMXk7lj3KJrpzKd5XiBufm2xa7M39QNZxw5ma0TZhP35q-mf2ybyf9cZQdEwsoWkHiQWfjC/pub?gid=0&single=true&output=csv'

df = pd.read_csv(data_url)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP,FONT_AWESOME], title='CONFIRM - SK4U', update_title=None,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=0.7, minimum-scale=0.4"}],
    )

server = app.server

fig_map = px.scatter_mapbox(df,lat='latitude',lon='longitude',
                            mapbox_style='mapbox://styles/vostpt/cl1w0k6uf000415nt86nk7uv2',
                            #color='Kategória / Category',
                            width=1400,height=700,
                            hover_name='name',
                            
                            #center=[48.799330977271445,19.338585158029197],
                            center=dict(lon=20.0068, lat=48.8264),
                            zoom=7,
                            custom_data=['name']
                            )

fig_map.update_layout(
        hoverlabel=dict(
        bgcolor="white",
        font_size=16,
        font_family="sans-serif"
        )
    )   

fig_map.update_layout(mapbox = dict(accesstoken = token, style ='mapbox://styles/vostpt/cl1w0k6uf000415nt86nk7uv2'))


app.layout = html.Div(
            [
            dbc.Row(
                [
                dbc.Col(
                    dbc.Card(
                        dbc.CardBody(
                            [
                                html.H4("Title", className="card-title"),
                                html.H6("Card subtitle", className="card-subtitle"),
                                html.P(id="card_data"),
                                dbc.CardLink("Card link", href="#"),
                                dbc.CardLink("External link", href="https://google.com"),
                            ]
                        ),
                    
                    ),

                ),
                dbc.Col(
                    dcc.Graph(id="my_map",figure=fig_map),
                xs=12,
                ),
                ],
                ),
            
            ],
)

@app.callback(
    Output(component_id="card_data", component_property="children"),
    Input(component_id="my_map", component_property="hoverData")
)

def upgrade_card(hoverData):
    title = hoverData['name'][0]
    return title 

if __name__ == "__main__":
    app.run_server(host='0.0.0.0', debug=True)

My objective is to update the text in the card, with the data from the dataframe, on mouse hover. The app receives the input from the hoverData but returns the error message

TypeError: 'NoneType' object is not subscriptable

Any help would be much appreciated.

Disclaimer: The solution will be used in a non-for-profit NGO's project. No commercial use will be made of the solution

Answer 1

These errors usually come up when you did not properly initialize. The children of the p-tag are non-existent in your example, so they cannot be updated.

So, replace html.P(id="card_data") with html.P("", id="card_data").