"""
import json
from random import randint
from uuid import uuid4
import dash
import dash_bootstrap_components as dbc
from dash import ALL, Input, Output, State, dcc, html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
# store will save all messages to display to the user
# this is on the client-side so it's user specific
dcc.Store(id="message-store"),
html.H1("Toast demo"),
html.P(
"Click on generate, you'll get a random number pop up in a toast"),
dbc.Button("Generate number", id="button"),
# create a container for the toasts and position to the top right
# depending on the layout of your app you might want to change this
html.Div(
id="toast-container",
style={
"position": "fixed",
"top": 10,
"right": 10,
"width": 350
},
),
for ctag in COMPRESSOR_TAGS
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id="page-content", style=CONTENT_STYLE)
interval = dcc.Interval(
id="interval-component",
interval=900 * 1000,
n_intervals=0, # in milliseconds
)
store = dcc.Store(id="store")
store_int = dcc.Store(id="store-int")
app.layout = html.Div(
[dcc.Location(id="url"), sidebar, content, store, interval, store_int]
)
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
if pathname[1:] in COMPRESSOR_TAGS:
return page_layout()
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
Path(workdir).mkdir(exist_ok=True)
app = Dash(
__name__,
external_stylesheets=[
dbc.themes.BOOTSTRAP,
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'
])
app.title = "FMU Check"
server = app.server
app.layout = dbc.Container([
dcc.Store(id='submitted-store'),
dcc.Store(id='finished-store'),
dcc.Interval(id='update-interval', interval=500),
dbc.Container([
html.H2([
"FMU Check",
html.Span([html.I(className='fas fa-flask me-2'), "beta"],
className='badge badge-secondary ml-3'),
],
className='bd-title'),
html.
P("Validate an FMU and get the meta information from the model description",
className='bd-lead'),
html.P(
html.A([
html.I(className='fas fa-info-circle me-2'),
fac.AntdAlert(
type='info',
showIcon=True,
message='请你在点击【创建新一局游戏】后，以最快的速度对下方具有红点徽标的3个头像进行点击，全部耗时（单位：秒）即为你的成绩！',
messageRenderMode='marquee',
style={
'marginBottom': '5px'
}
),
fac.AntdButton(
'创建新一局游戏',
id='badge-click-demo-reset',
type='primary'
),
fac.AntdDivider(),
dcc.Store(id='badge-click-demo-start-time'),
html.Div(
id='badges-area',
style={
'display': 'flex',
'justifyContent': 'center'
}
),
html.Div(
id='badge-click-demo-score',
style={
'display': 'flex',
'justifyContent': 'center'
}
),
def test_stcp004_remount_store_component(dash_dcc):
app = Dash(__name__, suppress_callback_exceptions=True)
content = html.Div([
dcc.Store(id="memory", storage_type="memory"),
dcc.Store(id="local", storage_type="local"),
dcc.Store(id="session", storage_type="session"),
html.Button("click me", id="btn"),
html.Button("clear data", id="clear-btn"),
html.Div(id="output"),
])
app.layout = html.Div(
[html.Button("start", id="start"),
html.Div(id="content")])
@app.callback(Output("content", "children"), [Input("start", "n_clicks")])
def start(n):
return content if n else "init"
@app.callback(
Output("output", "children"),
[
Input("memory", "modified_timestamp"),
Input("local", "modified_timestamp"),
Input("session", "modified_timestamp"),
],
[
State("memory", "data"),
State("local", "data"),
State("session", "data")
],
)
def write_memory(tsm, tsl, tss, datam, datal, datas):
return json.dumps([datam, datal, datas])
@app.callback(
[
Output("local", "clear_data"),
Output("memory", "clear_data"),
Output("session", "clear_data"),
],
[Input("clear-btn", "n_clicks")],
)
def on_clear(n_clicks):
if n_clicks is None:
raise PreventUpdate
return True, True, True
@app.callback(
[
Output("memory", "data"),
Output("local", "data"),
Output("session", "data")
],
[Input("btn", "n_clicks")],
)
def on_click(n_clicks):
return ({"n_clicks": n_clicks}, ) * 3
dash_dcc.start_server(app)
dash_dcc.wait_for_text_to_equal("#content", "init")
dash_dcc.find_element("#start").click()
dash_dcc.wait_for_text_to_equal(
"#output",
'[{"n_clicks": null}, {"n_clicks": null}, {"n_clicks": null}]')
dash_dcc.find_element("#btn").click()
dash_dcc.wait_for_text_to_equal(
"#output", '[{"n_clicks": 1}, {"n_clicks": 1}, {"n_clicks": 1}]')
dash_dcc.find_element("#clear-btn").click()
dash_dcc.wait_for_text_to_equal("#output", "[null, null, null]")
dash_dcc.find_element("#btn").click()
dash_dcc.wait_for_text_to_equal(
"#output", '[{"n_clicks": 2}, {"n_clicks": 2}, {"n_clicks": 2}]')
# now remount content components
dash_dcc.find_element("#start").click()
dash_dcc.wait_for_text_to_equal(
"#output",
'[{"n_clicks": null}, {"n_clicks": null}, {"n_clicks": null}]')
dash_dcc.find_element("#btn").click()
dash_dcc.wait_for_text_to_equal(
"#output", '[{"n_clicks": 1}, {"n_clicks": 1}, {"n_clicks": 1}]')
assert dash_dcc.get_logs() == []
def __settings_layout(
get_uuid: Callable,
ensembles: List[str],
vector_selector_data: list,
vector_calculator_data: list,
predefined_expressions: List[ExpressionInfo],
realizations: List[int],
disable_resampling_dropdown: bool,
selected_resampling_frequency: Frequency,
selected_visualization: VisualizationOptions,
selected_vectors: Optional[List[str]] = None,
) -> html.Div:
return html.Div(
children=[
wcc.Selectors(
label="Group By",
id=get_uuid(LayoutElements.TOUR_STEP_GROUP_BY),
children=[
wcc.RadioItems(
id=get_uuid(LayoutElements.SUBPLOT_OWNER_OPTIONS_RADIO_ITEMS),
options=[
{
"label": "Time Series",
"value": SubplotGroupByOptions.VECTOR.value,
},
{
"label": "Ensemble",
"value": SubplotGroupByOptions.ENSEMBLE.value,
},
],
value=SubplotGroupByOptions.VECTOR.value,
),
],
),
wcc.Selectors(
label="Resampling frequency",
children=[
wcc.Dropdown(
id=get_uuid(LayoutElements.RESAMPLING_FREQUENCY_DROPDOWN),
clearable=False,
disabled=disable_resampling_dropdown,
options=[
{
"label": frequency.value,
"value": frequency.value,
}
for frequency in Frequency
],
value=selected_resampling_frequency,
),
wcc.Label(
"NB: Disabled for presampled data",
style={"font-style": "italic"}
if disable_resampling_dropdown
else {"display": "none"},
),
],
),
wcc.Selectors(
label="Ensembles",
children=[
wcc.Dropdown(
label="Selected ensembles",
id=get_uuid(LayoutElements.ENSEMBLES_DROPDOWN),
clearable=False,
multi=True,
options=[
{"label": ensemble, "value": ensemble}
for ensemble in ensembles
],
value=None if len(ensembles) <= 0 else [ensembles[0]],
),
wcc.Selectors(
label="Delta Ensembles",
id=get_uuid(LayoutElements.TOUR_STEP_DELTA_ENSEMBLE),
open_details=False,
children=[
__delta_ensemble_creator_layout(
get_uuid=get_uuid,
ensembles=ensembles,
)
],
),
],
),
wcc.Selectors(
label="Time Series",
children=[
wsc.VectorSelector(
id=get_uuid(LayoutElements.VECTOR_SELECTOR),
maxNumSelectedNodes=3,
data=vector_selector_data,
persistence=True,
persistence_type="session",
selectedTags=[]
if selected_vectors is None
else selected_vectors,
numSecondsUntilSuggestionsAreShown=0.5,
lineBreakAfterTag=True,
customVectorDefinitions=get_custom_vector_definitions_from_expressions(
predefined_expressions
),
),
html.Button(
"Vector Calculator",
id=get_uuid(LayoutElements.VECTOR_CALCULATOR_OPEN_BUTTON),
style={
"margin-top": "5px",
"margin-bottom": "5px",
},
),
],
),
wcc.Selectors(
label="Visualization",
children=[
wcc.RadioItems(
id=get_uuid(LayoutElements.VISUALIZATION_RADIO_ITEMS),
options=[
{
"label": "Individual realizations",
"value": VisualizationOptions.REALIZATIONS.value,
},
{
"label": "Statistical lines",
"value": VisualizationOptions.STATISTICS.value,
},
{
"label": "Statistical fanchart",
"value": VisualizationOptions.FANCHART.value,
},
{
"label": "Statistics + Realizations",
"value": VisualizationOptions.STATISTICS_AND_REALIZATIONS,
},
],
value=selected_visualization.value,
),
wcc.Selectors(
label="Options",
id=get_uuid(LayoutElements.TOUR_STEP_OPTIONS),
children=__plot_options_layout(
get_uuid=get_uuid,
selected_visualization=selected_visualization,
),
),
],
),
wcc.Selectors(
label="Filter Realizations",
children=__realization_filters(get_uuid, realizations),
),
__vector_calculator_modal_layout(
get_uuid=get_uuid,
vector_data=vector_calculator_data,
predefined_expressions=predefined_expressions,
),
dcc.Store(
id=get_uuid(LayoutElements.VECTOR_CALCULATOR_EXPRESSIONS),
data=predefined_expressions,
),
dcc.Store(
id=get_uuid(LayoutElements.VECTOR_CALCULATOR_EXPRESSIONS_OPEN_MODAL),
data=predefined_expressions,
),
]
)
def get_app_layout():
return dbc.Container([
dcc.Store(id='selected-data-left'),
dcc.Store(id='selected-data-right'),
dcc.Store(id='session-id', data=str(uuid.uuid4())),
dcc.Store(id='filter-trigger', data=0),
dcc.Store(id='left-hide-trigger', data=0),
dcc.Store(id='file-loaded-trigger', data=0),
dcc.Store(id='dummy-export-scatter2d-left'),
dcc.Store(id='dummy-export-scatter2d-right'),
dcc.Store(id='dummy-export-histogram'),
dcc.Store(id='dummy-export-violin'),
dcc.Store(id='dummy-export-parallel'),
dcc.Store(id='dummy-export-heatmap'),
dcc.Store(id='dummy-export-data'),
html.Div(
[
html.Div(html.Img(
src=app.get_asset_url('sensorview_logo.svg'),
id='sensorview-image',
style={
'height': '100px',
'width': 'auto',
},
), className="text-center"),
html.H1(app.title, className="text-center"),
html.Hr(className="my-2"),
html.P(
'Sensor Data Visualization', className="text-center"
),
],
className="bg-light rounded-3 my-2 p-3",
),
dbc.Row([
dbc.Col(
dbc.CardGroup([
testcase_card,
datafile_card
])
)], className='mb-3'),
tabs,
dcc.Markdown(
'Designed and developed by **Zhengyu Peng** \
| Powered by [Dash](https://plotly.com/dash/),\
[Redis](https://redis.io/),\
[Celery](https://docs.celeryproject.org/en/stable/),\
[Docker](https://www.docker.com/)'),
], fluid=True, className="dbc_light")
def layout(self):
return wcc.FlexBox(
id=self.uuid("layout"),
children=[
wcc.Frame(
id=self.uuid("filters"),
style={
"flex": "1",
"height": "90vh"
},
children=[
wcc.Selectors(
label="Selectors",
children=[
wcc.Dropdown(
label="Saturation axis",
id=self.uuid("sataxis"),
clearable=False,
options=[{
"label": i.lower().capitalize(),
"value": i,
} for i in self.sat_axes],
value=self.sat_axes[0],
),
wcc.Dropdown(
label="Color by",
id=self.uuid("color_by"),
clearable=False,
options=[{
"label": i.lower().capitalize(),
"value": i,
} for i in self.color_options],
value=self.color_options[0],
),
dcc.Store(
id=self.uuid("stored_ensemble"),
storage_type="session",
data={},
),
wcc.Dropdown(
label="Ensembles",
id=self.uuid("ensemble"),
clearable=False,
multi=True,
options=[{
"label": i,
"value": i
} for i in self.ensembles],
value=self.ensembles[0],
),
wcc.Dropdown(
label="Curves",
id=self.uuid("curve"),
clearable=False,
multi=True,
),
dcc.Store(
id=self.uuid("stored_satnum"),
storage_type="session",
data={},
),
wcc.Dropdown(
label="Satnum",
id=self.uuid("satnum"),
clearable=False,
multi=True,
options=[{
"label": i,
"value": i
} for i in self.satnums],
value=self.satnums[0],
),
],
),
wcc.Selectors(
label="Visualization",
children=[
wcc.RadioItems(
label="Line traces",
id=self.uuid("visualization"),
className="block-options",
options=[
{
"label": "Individual realizations",
"value": "realizations",
},
{
"label": "Statistical fanchart",
"value": "statistics",
},
],
value="statistics",
),
wcc.RadioItems(
label="Y-axis",
id=self.uuid("linlog"),
className="block-options",
options=[
{
"label": "Linear",
"value": "linear",
},
{
"label": "Log",
"value": "log",
},
],
value="linear",
),
],
),
wcc.Selectors(
style={"display": "block"}
if self.scal is not None else {"display": "none"},
id=self.uuid("scal_selector"),
label="SCAL recommendation",
children=[
wcc.Checklist(
id=self.uuid("scal"),
options=[
{
"label": "Show SCAL",
"value": "show_scal",
},
],
value=["show_scal"]
if self.scal is not None else [],
),
],
),
],
),
wcc.Frame(
color="white",
highlight=False,
style={
"flex": "4",
"height": "90vh"
},
children=wcc.Graph(style={"height": "88vh"},
id=self.uuid("graph")),
),
],
)
style_as_list_view=True,
style_header={'fontWeight': 'bold'},
style_table={'overflowX': 'auto'},
),
],
),
],
)
meta = [
html.Div(
id="no-display",
children=[
# Store for user created masks
# data is a list of dicts describing shapes
dcc.Store(id='image-id'),
dcc.Store(id='pred-summary-data'),
dcc.Store(id='gt-summary-data'),
dcc.Store(id='base64-img-string'),
dcc.Store(id='json-annotation-demo', data=read_local_file('json_annotation_demo.json', 'data')),
dcc.Store(id='json-pred-annotation-demo', data=read_local_file('json_pred_annotation_demo.json', 'data'))
],
),
]
app.layout = html.Div(
[
header,
dbc.Container(id='root-container',
children=[
dbc.Container(id="app-container",
html.Div(
[
dbc.Button(
html.I(className="fas fa-bars"),
color="transparent",
id="btn_sidebar",
),
html.A(
html.Span("Imóveis", className="navbar-brand mb-0 h1"),
href="/",
style={"color": "inherit"},
),
]
)
)
layout = dcc.Loading(
id="loading",
children=html.Div(
[
dcc.Store(id="data"),
dcc.Store(id="filtered_data"),
dcc.Store(id="side_click"),
dcc.Location(id="url"),
navbar,
sidebar.layout,
html.Div(id="page-content", style=CONTENT_STYLE),
],
),
)
def plot_heatmap(ds, variable):
"""
:param ds:
:param variable:
: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
}, {
**empty_path_figure["layout"],
"dragmode":"drawline",
"title":f"{path.capitalize()} Construction",
},
"data":[
*empty_path_figure["data"],
*([interpolate_segment_datum] if path=="generator" else []),
],
},
),
])
])
for path in ["seed", "generator"]
]),
dcc.Store(
id="store-fractal",
data={"seed":[], "generator":[], "n":0},
),
dbc.Col(width=6, children=[
dbc.Card(style={"height":"100%"}, children=[
dbc.CardHeader([
dbc.InputGroup(
size="sm",
children=[
dbc.Button(
id="button-fractal-iterate",
children="Iterate",
color="warning",
n_clicks=0,
),
],
),
app = dash.Dash(__name__,
external_stylesheets=external_stylesheets,
suppress_callback_exceptions=True)
app.layout = html.Div([
html.H1('Web Application connected to a Live Database',
style={'textAlign': 'center'}),
# interval activated once/week or when page refreshed
dcc.Interval(id='interval_db', interval=86400000 * 7, n_intervals=0),
html.Div(id='mongo-datatable', children=[]),
html.Div([
html.Div(id='pie-graph', className='five columns'),
html.Div(id='hist-graph', className='six columns'),
],
className='row'),
dcc.Store(id='changed-cell')
])
# Display Datatable with data from Mongo database
@app.callback(Output('mongo-datatable', component_property='children'),
Input('interval_db', component_property='n_intervals'))
def populate_datatable(n_intervals):
# Convert the Collection (table) date to a pandas DataFrame
df = pd.DataFrame(list(collection.find()))
# Convert id from ObjectId to string so it can be read by DataTable
df['_id'] = df['_id'].astype(str)
print(df.head(20))
return [
dash_table.DataTable(
__name__, plugins=[dl.plugins.pages], external_stylesheets=[dbc.themes.FLATLY], suppress_callback_exceptions=True
)
navbar = dbc.NavbarSimple(
dbc.DropdownMenu(
[
dbc.DropdownMenuItem(page["name"], href=page["path"])
for page in dash.page_registry.values()
if page["module"] != "pages.not_found_404"
],
nav=True,
label="More Pages",
),
brand="Multi Page App Plugin Demo",
color="primary",
dark=True,
className="mb-2",
)
app.layout = dbc.Container(
[navbar,
dcc.Store(id="stored-data", data=df),
dcc.Store(id="store-dropdown-value", data=None),
dl.plugins.page_container],
fluid=True,
)
if __name__ == "__main__":
app.run_server(debug=True, port=8003)
),
dbc.Table(id="component-table"),
dcc.Graph(id="hourly"),
html.P(
["Browse through the year per weeknumber below:"],
style={"padding-left": "5%"},
),
dcc.Slider(
id="startingweek",
min=min(af.weeks.values()),
max=max(af.weeks.values()),
value=af.startingweek,
persistence=False,
),
dcc.Store(
id="data-store",
data=dict(),
),
dcc.Store(
id="store-filtered-df",
data=dict(),
),
],
className="container",
)
## reads associated JSON file and stores to react app
## (this allows for sharing between callbacks)
@app.callback(
Output("data-store", "data"),
Input("filtered-experiment-select", "value"),
def create_layout(app):
# Actual layout of the app
return html.Div(
className="row",
style={
"max-width": "100%",
"font-size": "1.5rem",
"padding": "0px 0px"
},
children=[
# Header
html.Div(
className="row header",
id="app-header",
style={"background-color": "#f9f9f9"},
children=[
html.Div(
[
html.Img(
src=app.get_asset_url("bonn-logo.png"),
className="logo",
id="bonn-image",
)
],
className="three columns header_img",
),
html.Div(
[
html.H3(
"Visualizing the effects of domain shift on CNN based image segmentation",
className="header_title",
id="app-title",
)
],
className="nine columns header_title_container",
),
],
),
# Body
dcc.Store(id='long_term_memory'),
dcc.Store(id='reductor_memory'),
dcc.Store(id='map-memory', data=(0, 0)),
dcc.Store(id='side_click'),
dcc.Store(id='model_path-memory'),
dcc.Store(id='database_domains-memory'),
dcc.Store(id='label_domains-memory'),
dcc.Store(id='page-memory'),
html.Div([
dcc.Tabs(
id="tabs-styled-with-inline",
value='tab-0',
children=[
dcc.Tab(label='Tool setup',
value='tab-0',
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(label='Dimentionality reduction',
value='tab-1',
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(label='Feature map explorer',
value='tab-2',
style=tab_style,
selected_style=tab_selected_style),
# dcc.Tab(label='Autoencoder?', value='tab-3', style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label='About',
value='tab-4',
style=tab_style,
selected_style=tab_selected_style),
],
style=tabs_styles),
html.Div(id='tabs-content-inline')
]),
html.Div(id='user-cache',
style={'display': 'none'},
children=json.dumps(initial_layout)),
html.Div(id='invisible_text', style={'visible': 'False'}),
],
)
def layout(self) -> wcc.FlexBox:
return wcc.FlexBox(
id=self.uuid("layout"),
children=[
wcc.Frame(
style={"flex": "1", "height": "90vh"},
children=[
wcc.Selectors(
label="Selectors",
children=[
wcc.Dropdown(
label="Color by",
id=self.uuid("color_by"),
clearable=False,
options=[
{
"label": i.lower().capitalize(),
"value": i,
}
for i in self.color_options
],
value=self.color_options[0],
),
wcc.Dropdown(
label="Ensembles",
id=self.uuid("ensemble"),
clearable=False,
multi=True,
options=[
{"label": i, "value": i} for i in self.ensembles
],
value=self.ensembles,
),
wcc.Dropdown(
label="Phase",
id=self.uuid("phase"),
clearable=False,
options=[
{
"label": f"{value.lower().capitalize()} ({info})",
"value": value,
}
for value, info in self.phases.items()
],
multi=False,
value=list(self.phases.keys())[0],
),
wcc.Dropdown(
label="Pvtnum",
id=self.uuid("pvtnum"),
clearable=False,
multi=False,
options=[
{"label": i, "value": i} for i in self.pvtnums
],
value=self.pvtnums[0],
),
],
),
wcc.Selectors(
label="Show plots",
children=[
wcc.Checklist(
id=self.uuid("plots_visibility"),
options=[
{"label": l, "value": v}
for v, l in self.plot_visibility_options().items()
],
value=[
"fvf",
"viscosity",
"density",
"ratio",
],
labelStyle={"display": "block"},
),
],
),
],
),
wcc.Frame(
color="white",
highlight=False,
id=self.uuid("graphs"),
style={"flex": "6", "height": "90vh"},
children=[],
),
dcc.Store(
id=self.uuid("init_callback"), storage_type="session", data=True
),
],
)
def test_stda001_data_types(dash_dcc):
app = Dash(__name__)
types = [
("str", "hello"),
("number", 1),
("dict", {
"data": [2, 3, None]
}),
("list", [5, -6, 700000, 1e-12]),
("null", None),
("bool", True),
("bool", False),
("empty-dict", {}),
]
data_types = list(itertools.chain(*itertools.combinations(
types, 2))) + [ # No combinations as it add much test time.
("list-dict-1", [1, 2, {
"data": [55, 66, 77],
"dummy": "dum"
}]),
("list-dict-2", [1, 2, {
"data": [111, 99, 88]
}]),
("dict-3", {
"a": 1,
"c": 1
}),
("dict-2", {
"a": 1,
"b": None
}),
]
app.layout = html.Div([
html.Div(id="output"),
html.Button("click", id="click"),
dcc.Store(id="store"),
])
@app.callback(
Output("output", "children"),
[Input("store", "modified_timestamp")],
[State("store", "data")],
)
def on_data(ts, data):
if ts is None:
raise PreventUpdate
return json.dumps(data)
@app.callback(Output("store", "data"), [Input("click", "n_clicks")])
def on_click(n_clicks):
if n_clicks is None:
raise PreventUpdate
return data_types[n_clicks - 1][1]
dash_dcc.start_server(app)
button = dash_dcc.wait_for_element("#click")
for data_type in data_types:
button.click()
dash_dcc.wait_for_text_to_equal("#output", json.dumps(data_type[1]))
assert dash_dcc.get_logs() == []
dcc.Graph components to ensure graphs get sized correctly. We also show how
dcc.Store can be used to cache the results of an expensive graph generation
process so that switching tabs is fast.
"""
import time
import dash
import dash_bootstrap_components as dbc
import numpy as np
import plotly.graph_objs as go
from dash import Input, Output, dcc, html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
dcc.Store(id="store"),
html.H1("Dynamically rendered tab content"),
html.Hr(),
dbc.Button(
"Regenerate graphs",
color="primary",
id="button",
className="mb-3",
),
dbc.Tabs(
[
dbc.Tab(label="Scatter", tab_id="scatter"),
dbc.Tab(label="Histograms", tab_id="histogram"),
],
id="tabs",
active_tab="scatter",
html.Div(
className="ecdf-and-stats",
children=[
# ECDF plot
dcc.Loading(
color="cyan",
children=[
dcc.Graph(id="ecdf-plot", config=plot_config)
],
),
# Summary statistics table
html.Div(
className="stats-table",
children=[html.Table(id="summary-stats")],
),
dcc.Store(id="sample-store"),
# Sample download button
html.Button(
"Download sample",
id="sample-download-button",
className="custom-button",
),
dcc.Download(id="download-sample"),
],
),
],
),
])
@app.callback(
1. *Any live cell with {GameOfLife._min_neighbors} or {GameOfLife._max_neighbors} live neighbours survives.*
2. *Any dead cell with {GameOfLife._pop_neighbors} live neighbours becomes a live cell.*
2. *All other live cells die in the next generation. Similarly, all other dead cells stay dead.*
The neighborhood of a cell comprises the eight adjacent cells.
"""),
]),
]),
dcc.Interval(
id="interval-gol",
interval=100,
disabled=True,
),
dcc.Store(
id="store-gol",
data={},
),
dbc.Card([
dbc.CardHeader([
dcc.Markdown("""
### The Simulation
***
"""),
dbc.InputGroup(
size="sm",
children=[
dbc.Button(
id="button-gol-clear",
children="Clear Cells",
n_clicks=0,
color="primary",
def main_layout(
get_uuid: Callable,
ensemble_names: List[str],
vector_selector_data: list,
vector_calculator_data: list,
predefined_expressions: List[ExpressionInfo],
realizations: List[int],
disable_resampling_dropdown: bool,
selected_resampling_frequency: Frequency,
selected_visualization: VisualizationOptions,
selected_vectors: Optional[List[str]] = None,
) -> html.Div:
return wcc.FlexBox(
id=get_uuid(LayoutElements.TOUR_STEP_MAIN_LAYOUT),
children=[
# Settings layout
wcc.FlexColumn(
id=get_uuid(LayoutElements.TOUR_STEP_SETTINGS_LAYOUT),
children=wcc.Frame(
style={"height": "90vh"},
children=__settings_layout(
get_uuid=get_uuid,
ensembles=ensemble_names,
vector_selector_data=vector_selector_data,
vector_calculator_data=vector_calculator_data,
predefined_expressions=predefined_expressions,
realizations=realizations,
disable_resampling_dropdown=disable_resampling_dropdown,
selected_resampling_frequency=selected_resampling_frequency,
selected_visualization=selected_visualization,
selected_vectors=selected_vectors,
),
),
),
# Graph layout
wcc.FlexColumn(
flex=4,
children=[
wcc.Frame(
style={"height": "90vh"},
highlight=False,
color="white",
children=[
wcc.Graph(
style={"height": "85vh"},
id=get_uuid(LayoutElements.GRAPH),
),
dcc.Store(
# NOTE:Used to trigger graph update callback if data has
# changed, i.e. no change of regular INPUT html-elements
id=get_uuid(
LayoutElements.GRAPH_DATA_HAS_CHANGED_TRIGGER
),
data=0,
),
],
)
],
),
],
)
def layout(self) -> html.Div:
return html.Div(
id=self.uuid("layout"),
children=[
wcc.FlexBox(
style={"fontSize": "1rem"},
children=[
html.Div(
id=self.uuid("settings-view1"),
style={
"margin": "10px",
"flex": 4
},
children=[
self.selector.layout,
self.ensemble_layout(
ensemble_id=self.uuid("ensemble"),
ens_prev_id=self.uuid("ensemble-prev"),
ens_next_id=self.uuid("ensemble-next"),
real_id=self.uuid("realization"),
real_prev_id=self.uuid("realization-prev"),
real_next_id=self.uuid("realization-next"),
),
],
),
html.Div(
style={
"margin": "10px",
"flex": 4
},
id=self.uuid("settings-view2"),
children=[
self.selector2.layout,
self.ensemble_layout(
ensemble_id=self.uuid("ensemble2"),
ens_prev_id=self.uuid("ensemble2-prev"),
ens_next_id=self.uuid("ensemble2-next"),
real_id=self.uuid("realization2"),
real_prev_id=self.uuid(
"realization2-prev"),
real_next_id=self.uuid(
"realization2-next"),
),
],
),
html.Div(
style={
"margin": "10px",
"flex": 4
},
id=self.uuid("settings-view3"),
children=[
html.Label("Calculation"),
html.Div(
dcc.Dropdown(
id=self.uuid("calculation"),
value="Difference",
clearable=False,
options=[{
"label": i,
"value": i
} for i in [
"Difference",
"Sum",
"Product",
"Quotient",
]],
persistence=True,
persistence_type="session",
)),
wcc.FlexBox(children=[
html.Div(
style={
"width": "20%",
"flex": 1
},
children=[
html.Label("Truncate Min"),
dcc.Input(
debounce=True,
type="number",
id=self.uuid(
"truncate-diff-min"),
persistence=True,
persistence_type="session",
),
],
),
html.Div(
style={
"width": "20%",
"flex": 1
},
children=[
html.Label("Truncate Max"),
dcc.Input(
debounce=True,
type="number",
id=self.uuid(
"truncate-diff-max"),
persistence=True,
persistence_type="session",
),
],
),
html.Label(
style={"fontSize": "1.2rem"},
id=self.uuid("map3-label"),
),
]),
],
),
],
),
wcc.FlexBox(
style={"fontSize": "1rem"},
children=[
html.Div(
style={
"height": self.map_height,
"margin": "10px",
"flex": 4,
},
children=[
LeafletMap(
syncedMaps=[
self.uuid("map2"),
self.uuid("map3")
],
id=self.uuid("map"),
layers=[],
unitScale={},
autoScaleMap=True,
minZoom=-19,
updateMode="replace",
mouseCoords={"position": "bottomright"},
colorBar={"position": "bottomleft"},
switch={
"value": False,
"disabled": False,
"label": "Hillshading",
},
),
],
),
html.Div(
style={
"margin": "10px",
"flex": 4
},
children=[
LeafletMap(
syncedMaps=[
self.uuid("map"),
self.uuid("map3")
],
id=self.uuid("map2"),
layers=[],
unitScale={},
autoScaleMap=True,
minZoom=-19,
updateMode="replace",
mouseCoords={"position": "bottomright"},
colorBar={"position": "bottomleft"},
switch={
"value": False,
"disabled": False,
"label": "Hillshading",
},
)
],
),
html.Div(
style={
"margin": "10px",
"flex": 4
},
children=[
LeafletMap(
syncedMaps=[
self.uuid("map"),
self.uuid("map2")
],
id=self.uuid("map3"),
layers=[],
unitScale={},
autoScaleMap=True,
minZoom=-19,
updateMode="replace",
mouseCoords={"position": "bottomright"},
colorBar={"position": "bottomleft"},
switch={
"value": False,
"disabled": False,
"label": "Hillshading",
},
)
],
),
dcc.Store(
id=self.uuid("attribute-settings"),
data=json.dumps(self.attribute_settings),
storage_type="session",
),
],
),
],
)
