Clickable image thumbnails without knowing number of images upfront

Dash Python
1

I am working on an UI using dash (in python) where I have a list of entities on the left pane of the screen. When a user clicks on an entity, I need to fetch and display a bunch of thumbnail images for that entity on the right pane. This bit I have already got working.

However I want the thumbnails to be clickable where-in based on the thumbnail which was clicked - I navigate to another view in my app and show the full image for that thumbnail.

I tried using dynamically defined callbacks by referring to this thread Dynamic Controls and Dynamic Output Components

However, it requires me to define all callbacks upfront. I dont know how many images (thumbnails) will be there in an entity since it can vary and so I can’t define the thumbnail click callbacks upfront. How do I deal with this in dash.

Also what dash component does the forum recommend for the thumbnails. At the moment, I am using cards from an extension called dash bootstrap components (Card - dbc docs)

2

Try using pattern matching callbacks đź“Ł Dash v1.11.0 Release - Introducing Pattern-Matching Callbacks

3

Thanks @chriddyp - was able to get it implemented using pattern matching callbacks.

1 Like
4

Do you mind sharing your solution? I am trying the same.

5

Hi @mail8 - For the image thumbnails I ended up using card columns and cards from an external library for Dash called “Dash Bootstrap Components” Card - dbc docs

I provided each card with an id that leverages the pattern matching callback feature as pointed out by @chriddyp earlier on this thread đź“Ł Dash v1.11.0 Release - Introducing Pattern-Matching Callbacks - #2 by chriddyp

Hope this helps. If you are looking for something more specific - let me know

6

I am curious how that looks. Do you have a screenshot. I did not want to use columns, because I want the user to be able to adjust the browser zoom settings and the images floating around. So, the user can zoom in and have 3 images in a row and then zoom out to have 10 or 20 images instead.

I understand the columns so that it would fixes the number of images per row. Or am I mistaken?

7

The other question would be how to update or delete single items instead of recreating the whole set. I am displaying hundreds of images and it takes quite a while to generate them sometimes.

8

PS: My solution looks like:

        ...
        if not os.path.isfile( fn ) or regenerate:
                create_preview_peakshape(ms_files, mz_mean, mz_width, rt, 
                    rt_min, rt_max, image_label, wdir, title=peak_label, colors=file_colors)

            if os.path.isfile(fn):
                src = T.png_fn_to_src(fn)
            else:
                src = None

            _id = {'index': peak_label, 'type': 'image'}
            image_id = f'image-{i}'
            images.append(
                html.A(id=_id, 
                children=html.Img(src=src, height=300, id=image_id, 
                    style={'margin': '10px'}))
            )
            images.append( 
                dbc.Tooltip(peak_label, target=image_id, style={'font-size': '50'})
            )
        fsc.set(f'{wdir}-updating', False)
        return images