""" 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", ), ], ), ], )