Hi,
When the Venn diagram is first displayed after a callback call, the text displays correctly, but if the callback is called again and different data should be displayed on the diagram, the new text only appears when hover over.
Below is the code that will reproduce the problem.
When first click on Compare button, we can see the common value Test3. A second click on the Compare button will show no common values, which is correct. But if I click the button again I should see again the Test3 as common value, but it only appears when hover over.
Thank you for any help/suggestions on this issue.
import dash
from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
app = Dash(__name__)
def format_text_from_lists(list_a, list_b):
text_a = "<br>".join([t for t in list_a.difference(list_b)])
text_b = "<br>".join([t for t in list_b.difference(list_a)])
text_ab = "<br>".join([t for t in list_a.intersection(list_b)])
return text_a, text_b, text_ab
def get_venn_diagram(list_a, list_b, title):
text_a, text_b, text_ab = format_text_from_lists(list_a=list_a, list_b=list_b)
fig = go.Figure()
fig.add_trace(go.Scatter(
x=[1, 1.75, 2.5],
y=[1, 1, 1],
text=[text_a, text_ab, text_b],
mode="markers + text",
textfont=dict(
color="black",
size=14,
family="Arail",
),
textposition='middle center'
))
# Update axes properties
fig.update_xaxes(
showticklabels=False,
showgrid=False,
zeroline=False,
)
fig.update_yaxes(
showticklabels=False,
showgrid=False,
zeroline=False,
)
# Add circles
fig.add_shape(type="circle",
line_color="blue", fillcolor=None,
x0=0, y0=0, x1=2, y1=2
)
fig.add_shape(type="circle",
line_color="gray", fillcolor=None,
x0=1.5, y0=0, x1=3.5, y1=2
)
fig.update_shapes(opacity=0.3, xref="x", yref="y")
fig.update_layout(
margin=dict(l=20, r=20, b=100),
height=600, width=800,
plot_bgcolor="white",
template="seaborn"
)
fig.update_layout(title=title)
return fig
btn_compare = dbc.Button('Compare', id='btn-compare',
color="primary",
className="mr-1",
n_clicks=0)
app.layout = html.Div(children=[
dbc.Row([html.Div(id="btn_compare_div", children=html.Div(children=btn_compare))]),
dcc.Loading(dbc.Row([
dbc.Col([dbc.Row([html.Div(id='compare_drugs_graph_div')])], width=2)
]), type="circle")
])
# Callback when select a patient from the table, to view it's timeline graph
@app.callback(
Output('compare_drugs_graph_div', 'children'),
[Input('btn-compare', 'n_clicks')])
def compare_patients(n_clicks):
ctx = dash.callback_context
if not ctx.triggered:
return dash.no_update
else:
changed_id = [p['prop_id'] for p in ctx.triggered][0]
if 'btn-compare' in changed_id:
if n_clicks % 2:
lst_a = set(['Test1', 'Test2', 'Test3'])
lst_b = set(['Test3', 'Test4', 'Test5'])
else:
lst_a = set(['Test10', 'Test20', 'Test30'])
lst_b = set(['Test40', 'Test50', 'Test60'])
fig = get_venn_diagram(list_a=lst_a, list_b=lst_b, title=f"Compare results ")
return dcc.Graph(figure=fig)
# end if
# end if
# end if
return dash.no_update
if __name__ == '__main__':
app.run_server(debug=True)