Python dash_html_components.Div() Examples

def getLayout():
    return html.Div([
        html.H1(id='Title1',children='Multiple intervals in a single page',style={'text-align':'center'}),
        html.Div(id='Title2', children='''
        Test multiple intervals in a single page.
        ''',style={'margin-bottom':'50px', 'text-align':'center'}),
        html.Div('Div1',id='div1'),
        html.Div('Div2',id='div2'),
        html.Div('Div3',id='div3'),
        dcc.Interval(
            id='interval-component-1',
            interval=500 # in milliseconds
        ),
        dcc.Interval(
            id='interval-component-2',
            interval=300 # in milliseconds
        ),
        dcc.Interval(
            id='interval-component-3',
            interval=400 # in milliseconds
        )
    ]) 

def surface_names_layout(self):
        return html.Div(
            style=self.set_style(marginTop="20px"),
            children=html.Label(
                children=[
                    html.Span("Surface:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.ids("surfacenames"),
                        options=[
                            {"label": name, "value": name} for name in self.surfacenames
                        ],
                        value=self.surfacenames,
                        clearable=True,
                        multi=True,
                    ),
                ]
            ),
        ) 

def display_output(n_clicks):
    print('display_output ' + str(n_clicks))
    if n_clicks == 0:
        return ''
    return html.Div([
        html.Div([
            dcc.Input(
                value='Input {}'.format(i),
                id='input-{}'.format(i)
            )
            for i in range(10)
        ]),
        dt.DataTable(
            rows=[{'Loading': ''}],
            id='new-table'),
        html.Div(id='dynamic-output')
    ]) 

def layout():
    return html.Div([
        html.Button('Run Process', id='button'),
        dcc.Interval(id='interval', interval=500),
        html.Div(id='lock'),
        html.Div(id='output'),
    ]) 

def display_graphs(n_clicks):
    graphs = []
    for i in range(n_clicks):
        graphs.append(dcc.Graph(
            id='graph-{}'.format(i),
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [3, 1, 2]
                }],
                'layout': {
                    'title': 'Graph {}'.format(i)
                }
            }
        ))
    return html.Div(graphs) 

def update_position_selection(rows,derived_virtual_selected_rows):
    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []
    if rows is None:
        dff3 = df3
    else:
        dff3 = pd.DataFrame(rows)
    try:
        active_row_txid = dff3['txid'][derived_virtual_selected_rows[0]]
        return html.Div([
            html.H5("Selected position: " + active_row_txid),
            html.Div(id='active_row_txid', children=active_row_txid, style={'display': 'none'})
            ]
        )
    except Exception as e:
        pass

# addfunding button callback 

def prepare_send():
    lCache = []
    cData = get_All_data()
    for pair in PAIRS:
        ticker = pair.ticker
        exchange = pair.exchange
        graph = 'live-graph-' + exchange + "-" + ticker
        lCache.append(html.Br())
        if (pair.Dataprepared):
            lCache.append(dcc.Graph(
                id=graph,
                figure=cData[exchange + ticker]
            ))
        else:
            lCache.append(html.Div(id=graph))
    return lCache


# links up the chart creation to the interval for an auto-refresh
# creates one callback per currency pairing; easy to replicate / add new pairs 

def compute_stats(questions: List[Question], db_path):
    n_total = len(questions)
    n_guesser_train = sum(1 for q in questions if q.fold == 'guesstrain')
    n_guesser_dev = sum(1 for q in questions if q.fold == 'guessdev')
    n_buzzer_train = sum(1 for q in questions if q.fold == 'buzzertrain')
    n_buzzer_dev = sum(1 for q in questions if q.fold == 'buzzerdev')
    n_dev = sum(1 for q in questions if q.fold == 'dev')
    n_test = sum(1 for q in questions if q.fold == 'test')
    columns = ['N Total', 'N Guesser Train', 'N Guesser Dev', 'N Buzzer Train', 'N Buzzer Dev', 'N Dev', 'N Test']
    data = np.array([n_total, n_guesser_train, n_guesser_dev, n_buzzer_train, n_buzzer_dev, n_dev, n_test])
    norm_data = 100 * data / n_total

    return html.Div([
        html.Label('Database Path'), html.Div(db_path),
        html.H2('Fold Distribution'),
        html.Table(
            [
                html.Tr([html.Th(c) for c in columns]),
                html.Tr([html.Td(c) for c in data]),
                html.Tr([html.Td(f'{c:.2f}%') for c in norm_data])
            ]
        )
    ]) 

def divs_list():
    return [html.Div([
        dcc.Markdown(
            '',
            id='model-{}-markdown'.format(id)
        ),
        html.P(
            '',
            id='model-{}-p'.format(id)
        ),
        html.Button(
            'Delete',
            id='model-{}-delete-button'.format(id),
            style={'width': '49%'}
        ),
        html.Button(
            'Start/Stop',
            id='model-{}-toggle-button'.format(id),
            style={'marginLeft': '2%', 'width': '49%'}
        ),

        html.Hr()
    ], id='model-k2-{}'.format(id)) for id in IDS] 

def marginal_log_layout(self):
        if self.marginal_logs is not None:
            return html.Div(
                children=html.Label(
                    children=[
                        html.Span("Marginal log:", style={"font-weight": "bold"}),
                        dcc.Dropdown(
                            id=self.ids("marginal-log"),
                            options=[
                                {"label": log, "value": log}
                                for log in self.marginal_logs
                            ],
                            placeholder="Display log",
                            clearable=True,
                        ),
                    ]
                ),
            )
        return html.Div(
            style={"visibility": "hidden"},
            children=dcc.Dropdown(id=self.ids("marginal-log")),
        ) 

def ensemble_layout(self):
        return html.Div(
            style=self.set_style(marginTop="20px"),
            children=html.Label(
                children=[
                    html.Span("Ensemble:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.ids("ensembles"),
                        options=[
                            {"label": ens, "value": ens}
                            for ens in self.ensembles.keys()
                        ],
                        value=list(self.ensembles.keys())[0],
                        clearable=False,
                        multi=False,
                    ),
                ]
            ),
        ) 

def plot_selector(self):
        """Radiobuttons to select plot type"""
        return html.Div(
            children=[
                html.Span("Plot type:", style={"font-weight": "bold"}),
                dcc.Dropdown(
                    id=self.uuid("plot-type"),
                    options=[
                        {"label": i, "value": i}
                        for i in [
                            "Per realization",
                            "Per sensitivity name",
                            "Per sensitivity case",
                        ]
                    ],
                    value="Per realization",
                    clearable=False,
                ),
            ]
        ) 

def response_selector(self):
        """Dropdown to select volumetric response"""
        return html.Div(
            children=html.Label(
                children=[
                    html.Span("Volumetric calculation:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.uuid("response"),
                        options=[
                            {"label": volume_description(i), "value": i}
                            for i in self.responses
                        ],
                        clearable=False,
                        value=self.initial_response
                        if self.initial_response in self.responses
                        else self.responses[0],
                    ),
                ]
            ),
        ) 

def filter_selectors(self):
        """Dropdowns for dataframe columns that can be filtered on (Zone, Region, etc)"""
        return [
            html.Div(
                children=[
                    html.Details(
                        open=True,
                        children=[
                            html.Summary(selector.lower().capitalize()),
                            wcc.Select(
                                id=self.selectors_id[selector],
                                options=[
                                    {"label": i, "value": i}
                                    for i in list(self.volumes[selector].unique())
                                ],
                                value=list(self.volumes[selector].unique()),
                                multi=True,
                                size=min(20, len(self.volumes[selector].unique())),
                            ),
                        ],
                    )
                ]
            )
            for selector in self.selectors
        ] 

def selector(self, label, id_name, column):
        return html.Div(
            children=html.Label(
                children=[
                    html.Span(f"{label}:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.uuid(id_name),
                        options=[
                            {"label": i, "value": i}
                            for i in list(self.volumes[column].unique())
                        ],
                        clearable=False,
                        value=list(self.volumes[column])[0],
                    ),
                ]
            ),
        ) 

def layout(self):
        """Main layout"""
        return wcc.FlexBox(
            id=self.ids("layout"),
            children=[
                html.Div(
                    style={"flex": 3},
                    children=[
                        wcc.Graph(self.ids("correlation-graph")),
                        dcc.Store(id=self.ids("initial-parameter")),
                    ],
                ),
                html.Div(
                    style={"flex": 3},
                    children=wcc.Graph(self.ids("distribution-graph")),
                ),
                html.Div(
                    style={"flex": 1},
                    children=self.control_layout + self.filter_layout
                    if self.response_filters
                    else [],
                ),
            ],
        ) 

def ensemble_selector(self):
        """Dropdown to select ensemble"""
        return html.Div(
            style={"paddingBottom": "30px"},
            children=html.Label(
                children=[
                    html.Span("Ensemble:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.ids("ensemble"),
                        options=[
                            {"label": i, "value": i}
                            for i in list(self.data["ENSEMBLE"].unique())
                        ],
                        clearable=False,
                        value=list(self.data["ENSEMBLE"].unique())[0],
                    ),
                ]
            ),
        ) 

def layout(self):
        return html.Div(
            children=[
                html.Div(
                    children=[
                        self.attribute_selector,
                        self.selector(
                            self.name_wrapper_id,
                            self.name_id,
                            "Surface name",
                            self.name_id_btn_prev,
                            self.name_id_btn_next,
                        ),
                        self.selector(
                            self.date_wrapper_id,
                            self.date_id,
                            "Date",
                            self.date_id_btn_prev,
                            self.date_id_btn_next,
                        ),
                    ]
                ),
                dcc.Store(id=self.storage_id),
            ]
        ) 

def seismic_layout(self):
        if self.segyfiles:
            return html.Div(
                style=self.set_style(marginTop="20px")
                if self.segyfiles
                else {"display": "none"},
                children=html.Label(
                    children=[
                        html.Span("Seismic:", style={"font-weight": "bold"}),
                        dcc.Dropdown(
                            id=self.ids("cube"),
                            options=[
                                {"label": Path(segy).stem, "value": segy}
                                for segy in self.segyfiles
                            ],
                            value=self.segyfiles[0],
                            clearable=False,
                        ),
                    ]
                ),
            )
        return html.Div(
            style={"visibility": "hidden"}, children=dcc.Dropdown(id=self.ids("cube"))
        ) 

def well_layout(self):
        return html.Div(
            children=html.Label(
                children=[
                    html.Span("Well:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.ids("wells"),
                        options=[
                            {"label": Path(well).stem, "value": well}
                            for well in self.wellfiles
                        ],
                        value=self.wellfiles[0],
                        clearable=False,
                    ),
                ]
            )
        ) 

def smry_selector(self):
        """Dropdown to select ensemble"""
        return html.Div(
            style={"paddingBottom": "30px"},
            children=html.Label(
                children=[
                    html.Span("Time series:", style={"font-weight": "bold"}),
                    dcc.Dropdown(
                        id=self.ids("vector"),
                        options=[
                            {
                                "label": f"{simulation_vector_description(vec)} ({vec})",
                                "value": vec,
                            }
                            for vec in self.smry_cols
                        ],
                        clearable=False,
                        value=self.initial_vector,
                    ),
                ]
            ),
        ) 

def _make_buttons(self, prev_id, next_id):
        return html.Div(
            style=self.set_grid_layout("1fr 1fr"),
            children=[
                html.Button(
                    style={
                        "fontSize": "2rem",
                        "paddingLeft": "5px",
                        "paddingRight": "5px",
                    },
                    id=prev_id,
                    children="⬅",
                ),
                html.Button(
                    style={
                        "fontSize": "2rem",
                        "paddingLeft": "5px",
                        "paddingRight": "5px",
                    },
                    id=next_id,
                    children="➡",
                ),
            ],
        ) 

def attribute_selector(self):
        return html.Div(
            style={"display": "grid"},
            children=[
                html.Label("Surface attribute"),
                html.Div(
                    style=self.set_grid_layout("6fr 1fr"),
                    children=[
                        dcc.Dropdown(
                            id=self.attr_id,
                            options=[
                                {"label": attr, "value": attr} for attr in self.attrs
                            ],
                            value=self.attrs[0],
                            clearable=False,
                        ),
                        self._make_buttons(
                            self.attr_id_btn_prev, self.attr_id_btn_next
                        ),
                    ],
                ),
            ],
        ) 

def setUp(self):
        """Set up for tests.  Need to provid Flask.test_client() to all tests.  Further
        configuration (e.g. FlaskLoginAuth) must be provided within the tests."""
        server = Flask(__name__)
        server.config.update(
            SECRET_KEY = os.urandom(12),
        )

        self.app = Dash(name='app1', url_base_pathname='/app1', server=server)
        self.app.layout = html.Div('Hello World!')

        self.add_auth_app = Dash(name='add_auth_app', url_base_pathname='/add-auth-app', server=server)
        self.add_auth_app.layout = html.Div('Hello World!')

        self.multi_app_no_auth = Dash(name='multi_app_no_auth', url_base_pathname='/app-no-auth', server=server)
        self.multi_app_no_auth.layout = html.Div('Hello World!')

        # Will raise an error because it doesn't have the same server
        self.crash_app = Dash(name='crash', url_base_pathname='/crash-app')
        self.crash_app.layout = html.Div('Goodby Cruel World!')

        self.server = server.test_client()
        self.assertEqual(server.debug, False) 

def create_description():
    div = html.Div(
        children=[
            dcc.Markdown('''
            The redder the outer circle, the higher the magnitude. The darker 
            the inner circle, the deeper the earthquake.
                        
            > Currently no organization or government or scientist is capable 
            > of succesfully predicting the time and occurrence of an
            > earthquake.
            > — Michael Blanpied
            
            Use the table below to know more about the {} earthquakes that 
            exceeded magnitude 4.5 last month.

            ***
            '''.format(data['metadata']['count']).replace('  ', '')),
        ],
    )
    return div 

def layout(self) -> html.Div:

        style = {
            "color": self.color,
            "background-image": f"url({self.image_url})",
            "height": f"{self.height}px",
        }

        if self.shadow:
            style["text-shadow"] = "0.05em 0.05em 0"

            if self.color == "white":
                style["text-shadow"] += " rgba(0, 0, 0, 0.7)"
            else:
                style["text-shadow"] += " rgba(255, 255, 255, 0.7)"

        return html.Div(self.title, className="_banner_image", style=style) 

def layout(self) -> html.Div:
        return html.Div(
            children=[
                wcc.FlexBox(
                    children=[
                        html.Div(
                            id=self.uuid("selector-row"),
                            style={"display": "none"}
                            if self.lock
                            else {"width": "15%"},
                            children=self.plot_option_layout(),
                        ),
                        wcc.Graph(
                            id=self.uuid("graph-id"),
                            style={"height": "80vh", "width": "60%"},
                        ),
                        html.Div(style={"width": "15%"}, children=self.filter_layout()),
                    ],
                )
            ]
        ) 

def display_page(pathname):
    print(pathname)
    if pathname == '/':
        return html.Div([
            html.Div('You are on the index page.'),

            # the dcc.Link component updates the `Location` pathname
            # without refreshing the page
            dcc.Link(html.A('Go to page 2 without refreshing!'), href="/page-2", style={'color': 'blue', 'text-decoration': 'none'}),
            html.Hr(),
            html.A('Go to page 2 but refresh the page', href="/page-2")
        ])
    elif pathname == '/page-2':
        return html.Div([
            html.H4('Welcome to Page 2'),
            dcc.Link(html.A('Go back home'), href="/"),
        ])
    else:
        return html.Div('I guess this is like a 404 - no content available')

# app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"}) 

def layout(self) -> html.Div:
        return html.Div(
            children=[
                html.Span(
                    "Here is some blue text to explain... ",
                    id=self.uuid("blue_text"),
                    style={"color": "blue"},
                ),
                html.Span(
                    " ...and here is some red text that also needs an explanation.",
                    id=self.uuid("red_text"),
                    style={"color": "red"},
                ),
            ]
        ) 

def plot_option_layout(self) -> List[html.Div]:
        """Renders a dropdown widget for each plot option"""
        divs = []
        # The plot type dropdown is handled separate
        divs.append(
            html.Div(
                style=self.style_options_div,
                children=[
                    html.H4("Set plot options"),
                    html.P("Plot type"),
                    dcc.Dropdown(
                        id=self.uuid("plottype"),
                        clearable=False,
                        options=[{"label": i, "value": i} for i in self.plots],
                        value=self.plot_options.get("type", "scatter"),
                    ),
                ],
            )
        )
        # Looping through all available plot options
        # and renders a dropdown widget
        for key, arg in self.plot_args.items():
            divs.append(
                html.Div(
                    style=self.style_options_div_hidden,
                    id=self.uuid(f"div-{key}"),
                    children=[
                        html.P(key),
                        dcc.Dropdown(
                            id=self.uuid(f"dropdown-{key}"),
                            clearable=arg["clearable"],
                            options=[{"label": i, "value": i} for i in arg["options"]],
                            value=arg["value"],
                            multi=arg["multi"],
                        ),
                    ],
                )
            )
        return divs