Hello all,
I’m trying to get hovering/highlighting working on a couple of network graphs. The intended behavior is that whenever the user hovers over a point in one graph it should look like the same point is being hovered over in the other one.
I thought I could do this by using ‘hoverData’ as Output in one of the callbacks, like so:
@app.callback(
Output('network', 'hoverData'),
[Input('heatmap', 'hoverData')],
[State('network', 'figure')])
def hover_nodes_in_network(hoverData, networkFigure):
if hoverData and len(hoverData['points']) > 0:
name_1 = hoverData['points'][0]['x']
name_2 = hoverData['points'][0]['y']
print('Selected %s and %s' % (name_1, name_2))
names = [name_1, name_2]
if networkFigure is not None:
curve_no = len(networkFigure['data']) - 1
trace = list(filter(lambda x: x['mode'] == 'markers', networkFigure['data']))[0]
hoveredPoints = []
for name in names:
name_pos = trace['text'].index(name)
print('%s appears at position %s' % (name, name_pos))
hoveredPoints.append({
'curveNumber': trace_no,
'pointNumber' : name_pos,
'pointIndex': name_pos,
'x': trace['x'][name_pos],
'y': trace['y'][name_pos],
'text': name
})
print(hoveredPoints)
return {'points' : hoveredPoints}
else:
raise dash.exceptions.PreventUpdate
I can see in browser’s debug window that the relevant component is receiving the correct props. However the tooltips never show up.
I’ve read the Interactive Graphing tutorial but it’s not exactly what I want to achieve: That approaches forces me to regenerate the whole network layout, which can be quite expensive in my case and should be avoided.
Are there any other ways to achieve this functionality that I’m missing out?
Cheers