Live Stage Visualization

Dash Python
1

Hi

I am relatively new to Dash/plotly and currently exploring a possibility to show a live stage visual.
To explain with an example, let’s say that I have a code written which keeps sending trace/verbose message as soon as it completes one function/segment of code and does this till it completes, is there a way to show the same in a visual format as to where the code is currently.

I am not sure how clear the query sounds so added a snapshot of what I picturize. This is similar to monitoring tool visuals like Nagios

StageVisual
StageVisual839×218 9.77 KB

2

Hi @rajat, and welcome to the Dash community!

You could try using a bootstrap progress bar or button group:

You can find more info here: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/progress/

Here are two examples::

progress_bar
progress_bar706×298 62.7 KB

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = html.Div(
    [
        dcc.Interval(id="progress-interval", n_intervals=0, interval=100),

        dbc.Progress(id="progress_bar"),

        dbc.ButtonGroup(
            [
                dbc.Button(
                    "stage " + str(i),
                    id="stage" + str(i),
                    style={"border": None, "border-radius": "50%"},
                    className="m-5",
                )
                for i in range(1, 5)
            ],
            size="lg",
        ),
    ],
)


@app.callback(
    [Output("progress_bar", "value"), Output("progress_bar", "children")],
    [Input("progress-interval", "n_intervals")],
)
def update_progress_bar(n):
    # check progress of some background process, in this example we'll just
    # use n_intervals constrained to be in 0-100
    progress = min(n % 110, 100)
    # only add text after 5% progress to ensure text isn't squashed too much
    return progress, f"{progress} %" if progress >= 5 else ""


@app.callback(
    [Output("stage" + str(i), "color") for i in range(1, 5)],
    [Input("progress-interval", "n_intervals")],
)
def update_stage_button(n):

    progress = min(n % 110, 100)
    stage_number = progress // 25

    stages = ["white", "white", "white", "white"]  # startup  colors
    stage_colors = ["primary", "success", "warning", "info"]

    stages[:stage_number] = stage_colors[:stage_number]  # update colors to show step
    return stages


if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
3

Thanks a lot @AnnMarieW

I will give it a try and mark the answer as solution once I can concur.

Regards
Rajat