Any way to create an instructions popout?

Dash Python
7

Thank you for suggesting this @mbkupfer. I tried the below approach and it worked! I referred to this thread as well to store the states, as clickData will always have some value once the chart is clicked. Below is my code:

# -*- coding: utf-8 -*-

“”"
Created on Wed Mar 13 20:02:17 2019

@author: monishaj
“”"

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
from plotly import graph_objs as go
from plotly.graph_objs import *
import dash_core_components as dcc
import json

app = dash.Dash(name)

trace1 = go.Bar(
x=[‘a’, ‘b’, ‘c’,‘d’],
y=[1.2,9.8,4.5,0.9],
name=‘A1’
)

trace2 = go.Bar(
x=[‘a’, ‘b’, ‘c’,‘d’],
y=[1.6,9.6,5.6,3.2],
name=‘A2’
)

trace3 = go.Bar(
x=[‘a’, ‘b’, ‘c’,‘d’],
y=[4.2,1.3,2.5,2.4],
name=‘A3’
)

app.layout = html.Div([

html.H2('Simple Modal'),
html.Div([
        html.Div(id='modal-content'),
         dcc.Graph(id='bar_plot',
          figure=go.Figure(data=[trace1, trace2, trace3],
                           layout=go.Layout(barmode='stack',hovermode='closest')),style={'margin-left':'205px'}
         )
          
        ]),

html.Div([  # modal div
    html.Div([  # content div
        html.P('Some Text'),
        html.Button('Close',n_clicks=0, id='modal-close-button')
    ],
        style={'textAlign': 'center', },
        className='modal-content',
    ),
],
    id='modal',
    className='modal',style={"display":"none"}
),
    html.Div(id='modal-button-values', children="Close:0 last:Close",style={"display":"none"})

])

@app.callback(Output(‘modal-button-values’, ‘children’),
[Input(‘bar_plot’, ‘clickData’),Input(‘modal-close-button’, ‘n_clicks’)],
[State(‘modal-button-values’, ‘children’)])
def close_modal(clickData,n,button_values):
button_values = dict([i.split(’:’) for i in button_values.split(’ ')])
l = len(clickData[‘points’][0].keys())

if l:
    if n == 0:
        last_clicked = "Get"
    elif n is not None and n > 0:
        if n > int(button_values["Close"]):
            last_clicked = "Close"
        elif n == int(button_values["Close"]):
            last_clicked = "Get"
return "Close:{0} last:{1}".format(n,last_clicked)

@app.callback(Output(‘modal’, ‘style’),
[Input(‘modal-button-values’, ‘children’)]
)
def modal_display_status(button_values):
button_values = dict([i.split(’:’) for i in button_values.split(’ ')])

if button_values["last"] == 'Get':
    return {'display': 'block'}
else:
    return {'display': 'none'}

if name == ‘main’:
app.run_server(debug=True)