Problem about obtain hoverdata

Dash Python
1

I need to use the hoverdata in the bar charts to return a new graph. I can get the hoverdata when the bar chart only one figure. But when the bar charts are multiple figures, the output is the “children” property, in which case I can’t obtain the hoverdata. Can anyone help me?

Thank you!

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)


app.layout = html.Div(children=[
     html.Div(style={'height': '1200px', 'margin-top':'100px'}, children=[
         html.Div(style={'margin': '0 5px', 'float': 'left', 'height': '37px'},
                  children=dcc.Input(id='gene_list', value="Sox2,Sox9", type='text', placeholder='input gene list')),
         html.Div(
             style={'height': '1000px',
                    'width': '650px',
                    'float': 'left',
                    'overflow': 'scroll',
                    'margin-top': '50px',
                    'border': '1px solid #F1F1F1'},
             children=html.Div(id='exp_plot')),
         # exp_tsne plot
         html.Div(
             style={'float': 'left',
                    'height': '1000px',
                    'width': '530px',
                    'margin': '50px 0 0 10px'},
             children=[
                 html.Div(
                     style={'width': '530px',
                            'height': '635px',
                            'margin-top': '5px',
                            'padding-top': '10px',
                            'border': '1px solid #F1F1F1',
                            'text-align': 'center',
                            'overflow': 'scroll',
                            },
                     children=[
                         html.Div(id='cluster-dis'),
                     ])
         ])
     ])
])

def plot(gene):
    #gene = gene.capitalize()
    customHeight = 200 + len(dff[gene]) * 13
    fig = px.bar(dff, x=gene, y='celltype',
                 width=750, height=customHeight, opacity=0.8)
    fig.update_layout({'xaxis': {'automargin': True, 'title': ''},
                       'yaxis': {'automargin': True, 'title': '',
                                 'tickfont': {'size': 10, 'color': '#000'}},
                       })
    return dcc.Graph(figure=fig)

dff = pd.read_csv('D:/web_creat/jiazi_new/app/static/gene/2020-09-28-exp/Early embryo_exp.csv',index_col=0)
dff['celltype'] = dff.index

@app.callback([Output('exp_plot', 'children')],
              [Input('gene_list', 'value')])
def gene_plot(gene_list):
    dff['celltype'] = dff.index
    gene_list = gene_list.split(',')
    return [[plot(gene) for gene in gene_list]]



@app.callback([Output('cluster-dis', 'children')],
              [Input('exp_plot', 'hoverData')])
def display_hover_data(hover_data):
    if hover_data is not None:
        data = hover_data
        celltype = "Gut tube_Sostdc1+"
        #celltype = data['points'][0]['y'].split(':', 1)[1]
    else:
        celltype = "Gut tube_Sostdc1+"

    return [html.Img(style={'width': '380px', 'height': '380px'},
                     src='http://127.0.0.1:8000/assets/gene/cluster_distribution_density/' + celltype + '.png')]

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