Integrating javascript triggering html and css into a Dash plotly run in Python

Dash Python
1

I created a set of cards I am very proud of in Postman using a bit of javascript and a lot of html. How could I adapt or integrate it to be part of my Dash app developped in Python?

Here is teh code I made in the visualisation tool of Postman:

let template = `
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <style type="text/css">
        body { font-size: 12px; background: #eee; padding: 16px;}
        .card { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.15); -moz-box-shadow: 0 4px 10px rgba(0,0,0,.15);}
        .card-topper { border-top-right-radius: 8px; border-top-left-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;}
        .card-topper.micro { background-color: #173F5F; color: #ffffff;}
        .card-topper.planning { background-color: #ED553B; color: #ffffff;}
        .card-topper.large { background-color: #ED553B; color: #ffffff;}
        .card-topper.brewpub { background-color: #20639B; color: #ffffff;}
        .card-topper.regional { background-color: #F6D55C;}
        .card-topper.contract { background-color: #3CAEA3; color: #ffffff;}
        .card-topper.proprietor { background-color: #ED553B; color: #ffffff;}
        .card-topper.bar { background-color: #ED553B; color: #ffffff;}
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col mb-4">
                <h1>Answers</h1>
            </div>
        </div>
        <div class="row">
            {{#each response}}
            <div class="col-sm-6 col-lg-4 col-xl-3 mb-5">
                <div class="card">
                    <div class="test card-topper card-img-top ">{{id}}</div>
                    <div class="card-body">
                        <h2>{{html_meta_title}}</h2>
                        <p>{{author}}<br>{{domain}}</p>
                        <p>{{clean_text}}</p>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
`;

pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()['items']
});

It draws the following set of card:

image
image2954×1683 265 KB

My Slack app is very simple so far:

from dash import Dash
from panels import cards

app = Dash(
    __name__,
    meta_tags=[
        {'charset': 'utf-8'},{'name': 'viewport', 'content': 'width=device-width, initial-scale=1, shrink-to-fit=no'}
    ]
)
server = app.server

def cards_monitoring():
    data_mm = utils.load_topics(entity, start_date) # same data as the one managed above
    return html.Div([
             # What do I need to do here to get the same cards as above ?
        ])
    ], className='bare_container twelve columns')

app.layout = html.Div(
    [
        # empty Div to trigger javascript file for graph resizing
        html.Div(id="output-clientside"),
        # Header
        header(),
        dcc.Tabs(
                id="tabs-example",
                         style={
                        'width': '70%',
                        'font-size': '120%',
                        'font_family': 'cursive',
                        'height':tab_height},
            children=[
                dcc.Tab(
                    label='Card Monitoring',
                    style={'padding': '0','line-height': tab_height},selected_style={'padding': '0','line-height': tab_height},
                    children=card_monitoring()
                ),
            colors={
            "border": "lightseagreen",
            "primary": "white",
            "background": "aliceblue"}
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=False)

So what do I need to do in cards_monitoring() to get the same cards as above ? Can I integrate the code as it is with minor modification?

I used to use Dash.datatable but it’s not very nice