Python dash_html_components.Hr() Examples

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 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 update_conversation(click, text):
    global conv_hist

    # dont update on app load
    if click > 0:
        # call bot with user inputted text
        response, generic_response = utils.bot.respond(
            text,
            interpreter,
            app_data_path
        )
        # user message aligned left
        rcvd = [html.H5(text, style={'text-align': 'left'})]
        # bot response aligned right and italics
        rspd = [html.H5(html.I(r), style={'text-align': 'right'}) for r in response]
        if generic_response:
            generic_msg = 'i couldn\'t find any specifics in your message, here are some popular apps:'
            rspd = [html.H6(html.I(generic_msg))] + rspd
        # append interaction to conversation history
        conv_hist = rcvd + rspd + [html.Hr()] + conv_hist

        return conv_hist
    else:
        return '' 

def horizontal_separator():
    return html.Hr()


### Abstract class for a nicer naming experience. 

def update_output(contents):
    if contents is not None:
        content_type, content_string = contents.split(',')
        if 'csv' in content_type:
            df = pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
            return html.Div([
                dt.DataTable(rows=df.to_dict('records')),
                html.Hr(),
                html.Div('Raw Content'),
                html.Pre(contents, style=pre_style)
            ])
        elif 'image' in content_type:
            return html.Div([
                html.Img(src=contents),
                html.Hr(),
                html.Div('Raw Content'),
                html.Pre(contents, style=pre_style)
            ])
        else:
            # xlsx will have 'spreadsheet' in `content_type` but `xls` won't
            # have anything
            try:
                df = pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
                return html.Div([
                    dt.DataTable(rows=df.to_dict('records')),
                    html.Hr(),
                    html.Div('Raw Content'),
                    html.Pre(contents, style=pre_style)
                ])
            except:
                return html.Div([
                    html.Hr(),
                    html.Div('Raw Content'),
                    html.Pre(contents, style=pre_style)
                ]) 

def serve_layout():
    df = dataframe()
    return html.Div([
        html.Pre(df.to_json()),
        html.Hr(),
    ]) 

def display_output(rows):
    pruned_rows = []
    for row in rows:
        # require that all elements in a row are specified
        # the pruning behavior that you need may be different than this
        if all([cell != '' for cell in row.values()]):
            pruned_rows.append(row)

    return html.Div([
        html.Div('Raw Data'),
        html.Pre(pprint.pformat(rows)),
        html.Hr(),
        html.Div('Pruned Data'),
        html.Pre(pprint.pformat(pruned_rows)),
    ]) 

def create_examples(
        examples_data
):
    examples = []
    for example in examples_data:
        examples += [
            html.H3(example['param_name'].title()),
            rc.Markdown(example['description']),
            rc.ComponentBlock(example['code']),
            html.Hr()
        ]
    return examples 

def parse_contents(contents, filename, date):
    content_type, content_string = contents.split(',')

    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))
    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])

    return html.Div([
        html.H5(filename),
        html.H6(datetime.datetime.fromtimestamp(date)),

        dash_table.DataTable(
            data=df.to_dict('records'),
            columns=[{'name': i, 'id': i} for i in df.columns]
        ),

        html.Hr(),  # horizontal line

        # For debugging, display the raw contents provided by the web browser
        html.Div('Raw Content'),
        html.Pre(contents[0:200] + '...', style={
            'whiteSpace': 'pre-wrap',
            'wordBreak': 'break-all'
        })
    ]) 

def parse_contents(contents, filename, date):
    return html.Div([
        html.H5(filename),
        html.H6(datetime.datetime.fromtimestamp(date)),

        # HTML images accept base64 encoded strings in the same format
        # that is supplied by the upload
        html.Img(src=contents),
        html.Hr(),
        html.Div('Raw Content'),
        html.Pre(contents[0:200] + '...', style={
            'whiteSpace': 'pre-wrap',
            'wordBreak': 'break-all'
        })
    ]) 

def create_default_example(
        component_name,
        example_code,
        styles,
        component_hyphenated
):
    '''Generate a default example for the component-specific page.

    :param (str) component_name: The name of the component as it is
    defined within the package.
    :param (str) example_code: The code for the default example.
    :param (dict) styles: The styles to be applied to the code
    container.

    :rtype (list[object]): The children of the layout for the default
    example.
    '''

    return [
        rc.Markdown('See [{} in action](http://dash-gallery.plotly.host/dash-{}).'.format(
            component_name,
            component_hyphenated
        )),

        html.Hr(),

        html.H3("Default {}".format(
            component_name
        )),
        html.P("An example of a default {} component without \
        any extra properties.".format(
            component_name
        )),
        rc.Markdown(
            example_code[0]
        ),
        html.Div(
            example_code[1],
            className='example-container'
        ),
        html.Hr()
    ] 

def layout():
    return html.Div(id='ideogram-body', className='app-body', children=[
        dcc.Loading(className='dashbio-loading', children=html.Div(id='ideogram-container')),
        html.Div(className='control-tabs', children=[
            dcc.Tabs(id='ideogram-control-tabs', value='what-is', children=[
                dcc.Tab(
                    label='About',
                    value='what-is',
                    children=html.Div(className='control-tab', children=[
                        html.H4(className='what-is', children='What is Ideogram?'),
                        html.P('Ideogram is a tool used to schematically '
                               'represent chromosomes. Bands on the chromosomes '
                               'can show the locations of specific genes.'),
                        html.P('In the "View" tab, you can choose to interact '
                               'with several different features of the Ideogram '
                               'component. You can customize the appearance of '
                               'the ideogram, as well as choose a different '
                               'organism to display, under the "Custom" option. '
                               'The homology, brush, and annotation features '
                               'are demonstrated under the corresponding options.')
                    ])
                ),
                dcc.Tab(
                    label='View',
                    value='view',
                    children=html.Div(className='control-tab', children=[
                        html.Div(id='ideogram-feature-select', children=[
                            html.Div(className='app-controls-block', children=[
                                html.Div(
                                    className='app-controls-name',
                                    children='View feature:'
                                ),
                                dcc.Dropdown(
                                    className='ideogram-dropdown',
                                    id='ideogram-feature-dropdown',
                                    options=[
                                        {'label': 'Customizability', 'value': 'custom'},
                                        {'label': 'Homology', 'value': 'homology'},
                                        {'label': 'Brush', 'value': 'brush'},
                                        {'label': 'Annotations', 'value': 'annotations'}
                                    ],
                                    clearable=False,
                                    value='custom'
                                )
                            ]),
                        ]),
                        html.Hr(),
                        html.Div(
                            id='ideogram-feature-view-options'
                        )
                    ])
                )
            ])
        ]),
        dcc.Store(id='ideo-custom-data', data=ideograms_initial['custom']),
        dcc.Store(id='ideo-homology-data', data=ideograms_initial['homology']),
        dcc.Store(id='brush-ideo-data', data=ideograms_initial['brush']),
        dcc.Store(id='ideo-annotations-data', data=ideograms_initial['annotations'])
    ])