Python dash_core_components.Markdown() Examples

def update_server_information(status):
    config = current_app.config["FRACTAL_CONFIG"]
    server = dcc.Markdown(
        f"""
**Name:** {config.fractal.name}

**Query Limit:** {config.fractal.query_limit}
            """
    )
    database = dcc.Markdown(
        f"""
**Name:** {config.database.database_name}

**Port:** {config.database.port}

**Host:** {config.database.host}
        """
    )

    queue = dcc.Graph(figure=task_graph())
    return server, database, queue 

def display_page(pathname):
    return html.Div([
        html.Div([
            html.Span(
                dcc.Link(link_mapping['/'], href="/") if pathname != '/' else 'Exhibit A',
                style=styles['link']
            ),

            html.Span(
                dcc.Link(link_mapping['/exhibit-b'], href="/exhibit-b") if pathname != '/exhibit-b' else 'Exhibit B',
                style=styles['link']
            ),

            html.Span(
                dcc.Link(link_mapping['/exhibit-c'], href="/exhibit-c") if pathname != '/exhibit-c' else 'Exhibit C',
                style=styles['link']
            )

        ]),

        dcc.Markdown('### {}'.format(link_mapping[pathname])),
    ]) 

def DemoDescription(filename, strip=False):
    with open(filename, 'r') as file:
        text = file.read()

    if strip:
        text = text.split('<Start Description>')[-1]
        text = text.split('<End Description>')[0]

    return html.Div(
            className='row',
            style={
                'padding': '15px 30px 27px',
                'margin': '45px auto 45px',
                'width': '80%',
                'max-width': '1024px',
                'borderRadius': 5,
                'border': 'thin lightgrey solid',
                'font-family': 'Roboto, sans-serif'
            },
            children=dcc.Markdown(dedent(text))
    ) 

def Markdown(children='', **kwargs):
    children = replace_relative_links(children)
    if kwargs.pop('escape_tags', False) and 'dccLink' in children:
        # escape the HTML tags presented in the html component docstrings
        # note that if these tags are within `backticks`, then we don't need
        # to escape. so, let the caller determine whether or not to escape a
        # section.
        children = re.sub(
            '\<(\w+)\>',
            # for some reason, if we do `\<{}\>`, the first slash is shown in the
            # rendered text.
            lambda match: '<{}\> '.format(match.groups()[0]),
            children
        )
    return dcc.Markdown(
        children=children,
        dangerously_allow_html=('dccLink' in children),
        **kwargs
    ) 

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 __init__(self, markdown_file: Path):

        super().__init__()

        self.markdown_file = markdown_file

        self.html = bleach.clean(
            markdown.markdown(
                get_path(self.markdown_file).read_text(),
                extensions=[
                    "tables",
                    "sane_lists",
                    _WebvizMarkdownExtension(base_path=markdown_file.parent),
                ],
            ),
            tags=Markdown.ALLOWED_TAGS,
            attributes=Markdown.ALLOWED_ATTRIBUTES,
            styles=Markdown.ALLOWED_STYLES,
        )

        # Workaround for upstream issue https://github.com/plotly/dash-core-components/issues/746,
        # where we convert void html tags from <tag> to <tag/>.
        self.html = re.sub("<img (.*?[^/])>", r"<img \1/>", self.html)
        self.html = self.html.replace("<br>", "<br/>").replace("<hr>", "<hr/>") 

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 layout(self) -> dcc.Markdown:
        return dcc.Markdown(self.html, dangerously_allow_html=True) 

def __init__(self, image_link_re: str, md: markdown.core.Markdown, base_path: Path):
        self.base_path = base_path

        super(_MarkdownImageProcessor, self).__init__(image_link_re, md) 

def read_query(query):
    if query is None:
        return "No filter query"
    return dcc.Markdown('`filter_query = "{}"`'.format(query)) 

def display_query(query):
    if query is None:
        return ''
    return html.Details([
        html.Summary('Derived filter query structure'),
        html.Div(dcc.Markdown('''```json
{}
```'''.format(json.dumps(query, indent=4))))
    ]) 

def replace_relative_links(children):
    children = re.sub(
        ']\((\/\S*)\)',
        lambda match: ']({})'.format(tools.relpath(match.groups()[0])),
        children
    )
    children = re.sub(
        'href="(/\S*)"',
        lambda match: 'href="{}"'.format(tools.relpath(match.groups()[0])),
        children
    )
    return children

# Use our own Markdown function so that we can
# use `relpath` for the embedded URLs 

def extendMarkdown(self, md: markdown.core.Markdown) -> None:
        md.inlinePatterns.register(
            item=_MarkdownImageProcessor(IMAGE_LINK_RE, md, self.base_path),
            name="image_link",
            priority=50,
        ) 

def layout(self) -> dcc.Markdown:
        return dcc.Markdown(
            f"```\n{get_path(self.filename).read_text()}\n```",
            highlight_config=self.config,
        ) 

def SectionTitle(title, size, align='center', color='#222'):
    return html.Div(
        style={
            'text-align': align,
            'color': color
        },
        children=dcc.Markdown('#' * size + ' ' + title),
    ) 

def imageComponentBlock(
        example_string,
        location,
        height=None,
        width=400
):
    '''Generate a container that is visually similar to the
    ComponentBlock for components that require an externally hosted image.

    :param (str) example_string: String containing the code that is
    used in the application from the image.
    :param (str) location: The URL of the image.
    :param (int) height: The height of the image.
    :param (int) width: The width of the image.

    :rtype (dict): A dash_html_components div containing the code
    container and the image.

    '''

    try:
        exec(example_string, {})
    except Exception as e:
        print('\nError running\n{}\n{}'.format(
            example_string,
            ('======================================' +
             '======================================')
        ))
        raise e

    demo_location = re.match('.*pic_(.*)\.png\?raw=true', location)

    if demo_location is not None:
        demo_location = demo_location.group(1)
    else:
        demo_location = ''

    return html.Div([
        rc.Markdown(
            '```python  \n' + example_string + '  \n```',
            style=styles.code_container
        ),
        html.Div(
            className='example-container',
            children=[
                dcc.Markdown(
                    '> Try a live demo at http://dash-gallery.plotly.host/docs-demos-dashbio/{}'.format(demo_location, demo_location)
                ),
                html.Img(
                    style={'border': 'none', 'width': '75%', 'max-width': '500px'},
                    src=location
                )
            ]
        )
    ]) 

def generate_docs(
        library_name,
        library_short,
        library_heading,
        library_install_instructions,
        library_components
):
    '''Generate full documentation for a library.

    :param (str) library_name: The full name of the library (e.g.,
    dash_bio).
    :param (str) library_short: The short name of the library, used in an
    import statement (i.e., import library_name as library_short).
    :param (obj) library_heading: A rc.Markdown object that will be
    at the top of the documentation page; it should provide a brief
    description of the library.
    :param (obj) library_install_instructions: A dcc.SyntaxHighligher
    object that contains the code needed to install the library.
    :param (dict[dict]) library_components: A dictionary for which the
    keys are the names of the components that are to be displayed, and
    the values are dictionaries that can be used by the function
    generate_component_example.

    :rtype (list[object]): The children of the layout for the
    documentation page.

    '''

    layout_children = library_heading

    layout_children.append(library_install_instructions)

    sorted_keys = list(library_components.keys())
    sorted_keys.sort()

    for component in sorted_keys:
        layout_children += generate_component_example(
            component,
            library_name,
            library_short,
            **library_components[component]
        )

    return layout_children


# individual component pages 

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 get_layout(**kwargs):
    initial_text = kwargs.get("text", "Type some text into me!")

    # Note that if you need to access multiple values of an argument, you can
    # use args.getlist("param")
    return html.Div(
        [
            dcc.Markdown(
                dedent(
                    """
                    # Character Counter
                    
                    This demo counts the number of characters in the text box and
                    updates a bar chart with their frequency as you type.
                    """
                )
            ),
            dbc.FormGroup(
                dbc.Textarea(
                    id="text-input",
                    value=initial_text,
                    style={"width": "40em", "height": "5em"},
                )
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Sort by:"),
                    dbc.RadioItems(
                        id="sort-type",
                        options=[
                            {"label": "Frequency", "value": "frequency"},
                            {"label": "Character code", "value": "code"},
                        ],
                        value="frequency",
                    ),
                ]
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Normalize character case?"),
                    dbc.RadioItems(
                        id="normalize",
                        options=[
                            {"label": "No", "value": "no"},
                            {"label": "Yes", "value": "yes"},
                        ],
                        value="no",
                    ),
                ]
            ),
            dcc.Graph(id="graph"),
        ]
    )