🐛 disable controls using loadingOverlay

[hannahker]

Proposing a slightly simpler approach to #51 -- addressing #41. I like this approach because it means that we don't have to update any callbacks when new controls are added into the existing sections on the sidebar. Since the loading spinner itself isn't visible it looks basically the same as if the controls are disabled.

[github-actions]

Staging application has been deployed and is available at: https://dash5-services.plotly.host/ml-exchange-staging
Production app name: ml-exchange
Current branch name: disable-controls-with-overlay
Commit: 18a2abf

[danton267]

When the app initially loads or when the project is changed, app has to ask the server for the project data to be able to populate sliders with the correct number of slices.
It does it here:

mlex_highres_segmentation/callbacks/image_viewer.py

Lines 146 to 147 in 0162667

	if not disable_slider:
	tiff_file = data[project_name]

On my PC it can take from 0.01s - 5s (especially when you load in another browser/incognito so it doesn't cache anything). While this callback is waiting to finish, the controls are able to be clicked on since the overlays are controlled by render_image()

You can change render_image() into

    Output("data-selection-controls", "children", allow_duplicate=True),
    Output("image-transformation-controls", "children", allow_duplicate=True),
    Output("annotations-controls", "children", allow_duplicate=True),

and add them to update_slider_values() too

    Output("data-selection-controls", "children"),
    Output("image-transformation-controls", "children"),
    Output("annotations-controls", "children"),

However, every time update_slider_values() finishes, the controls will "flash" and become clickable for a brief period of time, before render_image() disables them again.

[hannahker]

Good catch @danton267! Thought about this for a bit and I'm not too concerned about the timing of the update_slider_values(), since I don't see any lag for this on the deployed app. I'd also expect this to be quite fast especially after we get the app deployed on LBL's infrastructure. My proposal would be to merge this in it's current state and revisit if needed in the future.

What do you think?

[danton267]

I would personally add

    Output("data-selection-controls", "children"),
    Output("image-transformation-controls", "children"),
    Output("annotations-controls", "children"),

to update_slider_values() since that is part of the issue.
When the page loads it does not necessarily depend on the server only, users with slower PC could experience the initial offset while update_slider_values() is executing.

The split-second "flash" after update_slider_values() finishes and before render_image() overlay starts can be ignored for now, and if requested, we can always use #51 for better UX.

Either way, looks good to me

[danton267]

All good! Can be merged