Dash callbacks with Holoviews

Dash Python
1

Hello,

I am relatively new to Dash and Plotly, the library is really cool so thanks for all the good work! I am currently using hvplot in holoview to display high resolution medical images in combination with dash so that I would be able to change the image when I press a button but I am struggling to determine what I need to write in the callback function as outputs to display a new hvplot, I tried different things but none of them worked, here is an example of what I tried. Of course it doesn’t work because I need to return a dash element but how do I update what is inside components ? is it even possible ? :grin:

rgb_paths = glob(rgb_folder + '/*.tif')
gray_paths = glob(gray_folder + '/*.tif')

rgb_plot = rgb_image.hvplot.rgb(x='x', y='y', bands='band', 
                                grid=True,rasterize=True, data_aspect=1, 
                                xaxis='bare', yaxis='bare', width=500, height=500)
gray_plot = gray_image.sel(band=1).hvplot.image(x='x', y='y', cmap='Greys_r', 
                                              rasterize=True, data_aspect=1, grid=True,
                                              colorbar=False,
                                              xaxis='bare', yaxis='bare',
                                              width=500, height=500, clim=(0,3000))

app = JupyterDash(__name__, external_stylesheets=[dbc.themes.MINTY])

components = to_dash(app, [rgb_plot, gray_plot], reset_button=False)

app.layout = dbc.Container([ 
    
    dbc.Row([
        dbc.Col([ 
            dbc.Button('Previous', id='btn-nclicks-previous', color="primary", style={"margin": "5px"}),
            dbc.Button('Next', id='btn-nclicks-next', color="primary", style={"margin": "5px"}),
        ]),
        
        dbc.Col([
            dbc.Col([html.Div(id='g1', children=components.graphs[0])]),
            dbc.Col([html.Div(id='g2', children=components.graphs[1])])
        ]),
    ]),
    components.store
])

@app.callback(Output(components.graphs[0].id, 'children'),
                          Output(components.graphs[1].id, 'children'),
              [Input('btn-nclicks-prev', 'n_clicks'),
               Input('btn-nclicks-next', 'n_clicks')])

def figure_update(bt1, bt2):
    
    frame = get_current_frame(bt1, bt2) 

    rgb_image = xr.open_rasterio(rgb_path[frame])
    gray_image = xr.open_rasterio(gray_path[frame])

    rgb_plot = rgb_image.hvplot.rgb(x='x', y='y', bands='band', 
                                    grid=True,rasterize=True, data_aspect=1, 
                                    xaxis='bare', yaxis='bare', width=500, height=500)
    gray_plot = gray_image.sel(band=1).hvplot.image(x='x', y='y', cmap='Greys_r', 
                                                  rasterize=True, data_aspect=1, grid=True,
                                                  colorbar=False,
                                                  xaxis='bare', yaxis='bare',
                                                  width=500, height=500, clim=(0,3000))

    return rgb_plot, gray_plot
app.run_server(debug=True)