python plolty dash - read .pkl files and display them in plotly dash

Question

i changed the following code from using ".png" to ".pkl". but this doesn't work

import plotly.express as px
import joblib

#generate example pkl
fig = px.scatter(x=range(10), y=range(10))
joblib.dump(fig, "img_dash/figure.pkl")


#%%
import dash
import dash_core_components as dcc
import dash_html_components as html

import flask
import glob
import os

image_directory = 'img_dash/'
list_of_images = [os.path.basename(x) for x in glob.glob('{}*.pkl'.format(image_directory))]
static_image_route = '/static/'


app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        id='image-dropdown',
        options=[{'label': i, 'value': i} for i in list_of_images],
        value=list_of_images[0]
    ),
    html.Img(id='image')
])

@app.callback(
    dash.dependencies.Output('image', 'src'),
    [dash.dependencies.Input('image-dropdown', 'value')])
def update_image_src(value):
    return static_image_route + value


@app.server.route('{}.pkl'.format(static_image_route))
def serve_image(image_path):
    image_name = '{}.pkl'.format(image_path)
    if image_name not in list_of_images:
        raise Exception('"{}" is excluded from the allowed static files'.format(image_path))
    return flask.send_from_directory(image_directory, image_name)

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

i expect to show the .pkl files in the dashboard with hover-function. may other formats also possible! i was not able to check this.

user_9098350 · Answer

I recommend you to use a Graph component here instead of an Img component since you want to display these figures dynamically.

Since each pkl file already stores a Figure you can just dynamically load these files using joblib in your callback based on the dropdown value.

Example based on your code:

# Example figures for demo purposes
fig1 = px.scatter(x=range(10), y=range(10))
fig2 = px.scatter(x=range(15), y=range(15))
fig3 = px.scatter(x=range(20), y=range(20))
joblib.dump(fig1, "img_dash/figure1.pkl")
joblib.dump(fig2, "img_dash/figure2.pkl")
joblib.dump(fig3, "img_dash/figure3.pkl")

# ...

image_directory = "img_dash/"
list_of_images = [
    os.path.basename(x) for x in glob.glob("{}*.pkl".format(image_directory))
]

app = dash.Dash()

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="image-dropdown",
            options=[{"label": i, "value": i} for i in list_of_images],
            value=list_of_images[0],
        ),
        dcc.Graph(id="graph"),
    ]
)


@app.callback(
    dash.dependencies.Output("graph", "figure"),
    [dash.dependencies.Input("image-dropdown", "value")],
)
def update_graph(file):
    return joblib.load(os.path.join(image_directory, file))
    

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

python plolty dash - read .pkl files and display them in plotly dash

1 Answers