def make_configuration_modal(self, activity: Activity,
config: UserConfig) -> html:
config_modal = html.Div([
dbc.Button("Configuration",
id="btn_open_configuration",
color="link",
n_clicks=0),
dbc.Modal(
[
dbc.ModalTitle("Configuration"),
dbc.ModalBody(self.make_charts_selector(activity, config)),
dbc.ModalFooter([
dbc.Button("Save",
id="btn_save_configuration",
color="link",
n_clicks=0),
dbc.Button("Close",
id="btn_close_configuration",
color="link",
n_clicks=0)
])
],
id="configuration_modal_centered",
centered=True,
is_open=False,
)
])
return config_modal
def make_pulsar_display_modal(pulsar_name):
print("Pulsar NAME: ", pulsar_name)
record = records[pulsar_name]
generator = PulsarDetailGenerator(record)
header = dbc.ModalHeader([dbc.ModalTitle(pulsar_name)])
body = dbc.ModalBody(children=generator.generate())
footer = dbc.ModalFooter([])
children = [header, body, footer]
return children
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal = html.Div([
dbc.Button("Open modal", id="open-dismiss"),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Dismissing"), close_button=False),
dbc.ModalBody(
"This modal has no close button and can't be dismissed by "
"pressing ESC. Try clicking on the backdrop or the below "
"close button."),
dbc.ModalFooter(dbc.Button("Close", id="close-dismiss")),
],
id="modal-dismiss",
keyboard=False,
backdrop="static",
),
], )
@app.callback(
Output("modal-dismiss", "is_open"),
[Input("open-dismiss", "n_clicks"),
Input("close-dismiss", "n_clicks")],
[State("modal-dismiss", "is_open")],
)
def toggle_modal(n_open, n_close, is_open):
if n_open or n_close:
return not is_open
return is_open
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal = html.Div([
dbc.Button("Open modal", id="open", n_clicks=0),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("This is the content of the modal"),
dbc.ModalFooter(
dbc.Button(
"Close", id="close", className="ms-auto", n_clicks=0)),
],
id="modal",
is_open=False,
),
])
@app.callback(
Output("modal", "is_open"),
[Input("open", "n_clicks"),
Input("close", "n_clicks")],
[State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal = html.Div([
dbc.Button("Open", id="open-centered"),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Header"), close_button=True),
dbc.ModalBody("This modal is vertically centered"),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close-centered",
className="ms-auto",
n_clicks=0,
)),
],
id="modal-centered",
centered=True,
is_open=False,
),
])
@app.callback(
Output("modal-centered", "is_open"),
[Input("open-centered", "n_clicks"),
Input("close-centered", "n_clicks")],
[State("modal-centered", "is_open")],
)
def toggle_modal(n1, n2, is_open):
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal = html.Div(
[
dbc.Button(
"Scrolling modal", id="open-scroll", className="me-1", n_clicks=0
),
dbc.Button(
"Modal with scrollable body", id="open-body-scroll", n_clicks=0
),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Scrolling modal")),
dbc.ModalBody(LOREM),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close-scroll",
className="ms-auto",
n_clicks=0,
)
),
],
id="modal-scroll",
is_open=False,
),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Modal with scrollable body")),
dbc.ModalBody(LOREM),
:return:
"""
return dcc.Graph(id=f'{variable}', figure=update_heatmap(ds, variable))
# Layout
app.layout = dbc.Container(
[
dcc.Store(id="patchstore", data={}),
dcc.Store(id="patchstore2", data={}),
dcc.Store(id="patchstore3", data={}),
# dbc.Button("Open modal", id="open", n_clicks=0),
dbc.Modal(
[
dbc.ModalHeader(
dbc.ModalTitle("Pick a storm type for the pixel")),
dbc.ModalBody(children=[
dcc.RadioItems(options=[{
'label': '10 - Mid-Latitude Cyclone',
'value': 10
}, {
'label': '30 - Mesoscale Storm',
'value': 30
}, {
'label': '40 - Local Storm',
'value': 40
}, {
'label': '43 - Local Storm with Enhanced Convection',
'value': 43
}, {
'label': '60 - MLC/MEC Hybrid',
], id='collapse-evaluation', is_open=False)
], id='evaluation-card', className='mt-1', style={'display': 'none'})
status_panel = [
html.Div([html.H5('Status: ', style={'display': 'inline'})], id='div-status',
style={'display': 'inline'}),
html.Div(id='div-status-mining', children='Not started',
style={'display': 'inline'}),
html.Div(id='div-status-similarity', children='', style={'display': 'inline'})
]
modal_extended_adaptive_options = [
dbc.Button("+", id="extended_adaptive_options", n_clicks=0, outline=True),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("ADWIN parameters")),
dbc.ModalBody(
dbc.FormFloating(
[
dbc.Input(id='input-delta', type='number', value=0.002),
dbc.Label('Delta'),
]
)),
dbc.ModalFooter(
dbc.Button(
"Close", id="close", className="ms-auto", n_clicks=0
)
),
],
id="modal",
size="sm",
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal_1 = dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Modal 1")),
dbc.ModalBody("This is the content of the first modal"),
dbc.ModalFooter(
dbc.Button(
"Open Modal 2",
id="open-toggle-modal-2",
className="ms-auto",
n_clicks=0,
)),
],
id="toggle-modal-1",
is_open=False,
)
modal_2 = dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Modal 2")),
dbc.ModalBody("This is the second modal"),
dbc.ModalFooter(
dbc.Button(
"Back to Modal 1",
id="open-toggle-modal-1",
className="ms-auto",
n_clicks=0,
)),
],
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
modal = html.Div([
dbc.Button("Open modal", id="open-fs"),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Fullscreen modal")),
dbc.ModalBody("Wow this thing takes up a lot of space..."),
],
id="modal-fs",
fullscreen=True,
),
])
@app.callback(
Output("modal-fs", "is_open"),
Input("open-fs", "n_clicks"),
State("modal-fs", "is_open"),
)
def toggle_modal(n, is_open):
if n:
return not is_open
return is_open