Hi Everyone,
New here and I am building a dash app with multiple dropdown. For example in the code below, when I select a cluster, each cluster has an image independent of the filter.Meaning the first dropdown ‘Select a cluster’ is independent on the second dropdown ‘Filter by’ . Now Each filter also has images for clusters 1 -5. When I select a filter, I want to be able to also select a cluster which will display an image for that filter only not the one related to the original cluster images. Followed this link((Part 2. Basic Callbacks | Dash for Python Documentation | Plotly) but no help. Please can this be done?
import dash
from dash import dcc, html, callback, Output, Input
import plotly.express as px
import dash_bootstrap_components as dbc
dash.register_page(__name__,
path='/image_explorer', # represents the url text
name='Image Explorer', # name of page, commonly used as name of link
title=' Store Clustering - Image Explorer' # represents the title of browser's tab
)
# page 2 data
# Define your clusters and their corresponding image filenames
clusters = ['Cluster 1', 'Cluster 2', 'Cluster 3', 'Cluster 4', 'Cluster 5']
top_5 = ['Tops', 'Jeans', 'Dresses', 'Summer', 'Woven']
layout = html.Div(
[
dbc.Row(
[
dbc.Col(
[ html.Label("Select a Cluster"),
dcc.Dropdown(options=[{'label': f'Cluster {i+1}', 'value': cluster} for i, cluster in enumerate(clusters)],
id='cluster-choice')
], xs=10, sm=10, md=8, lg=4, xl=4, xxl=4
),
dbc.Col(
[ html.Label("Filter By"),
dcc.Dropdown(options=[{'label': top, 'value': top} for top in top_5],
id='filter-choice')
], xs=10, sm=10, md=8, lg=4, xl=4, xxl=4
)
]
),
dbc.Row(
[
dbc.Col(
[
html.Img(id='image-display', style={'width': '50%'})
], width=12
)
]
)
]
)
@callback(
Output('image-display', 'src'),
Input('cluster-choice', 'value'),
Input('filter-choice', 'value'),
)
def update_image(cluster, top):
if cluster is None or top is None:
return dash.no_update
image_filename = f'assets/{cluster}.png' # Adjust the path based on your image directory structure
return image_filename