Merge pull request #53 from mlexchange/disable-controls-with-overlay

🐛 disable controls using loadingOverlay
mlexchange · Jul 25, 2023 · 2d817fd · 2d817fd
2 parents 57db682 + 279622e
commit 2d817fd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py
@@ -1,4 +1,5 @@
 from dash import Input, Output, State, callback, ctx, Patch, clientside_callback
+import dash
 import dash_mantine_components as dmc
 from tifffile import imread
 import plotly.express as px
@@ -10,6 +11,9 @@
     Output("image-viewer", "figure"),
     Output("annotation-store", "data", allow_duplicate=True),
     Output("image-viewer-loading", "zIndex", allow_duplicate=True),
+    Output("data-selection-controls", "children", allow_duplicate=True),
+    Output("image-transformation-controls", "children", allow_duplicate=True),
+    Output("annotations-controls", "children", allow_duplicate=True),
     Input("image-selection-slider", "value"),
     State("project-name-src", "value"),
     State("paintbrush-width", "value"),
@@ -71,7 +75,16 @@ def render_image(
     patched_annotation_store["image_size"] = tf.size
     fig_loading_overlay = -1
 
-    return fig, patched_annotation_store, fig_loading_overlay
+    # No update is needed for the 'children' of the control components
+    # since we just want to trigger the loading overlay with this callback
+    return (
+        fig,
+        patched_annotation_store,
+        fig_loading_overlay,
+        dash.no_update,
+        dash.no_update,
+        dash.no_update,
+    )
 
 
 clientside_callback(
@@ -116,6 +129,9 @@ def locally_store_annotations(relayout_data, img_idx, annotation_store):
     Output("image-selection-slider", "value"),
     Output("image-selection-slider", "disabled"),
     Output("annotation-store", "data"),
+    Output("data-selection-controls", "children"),
+    Output("image-transformation-controls", "children"),
+    Output("annotations-controls", "children"),
     Input("project-name-src", "value"),
     State("annotation-store", "data"),
 )
@@ -142,6 +158,11 @@ def update_slider_values(project_name, annotation_store):
         slider_value,
         disable_slider,
         annotation_store,
+        # No update is needed for the 'children' of the control components
+        # since we just want to trigger the loading overlay with this callback
+        dash.no_update,
+        dash.no_update,
+        dash.no_update,
     )
 
 

diff --git a/components/control_bar.py b/components/control_bar.py
@@ -14,7 +14,7 @@
 DEFAULT_ANNOTATION_CLASS = "red"
 
 
-def _accordion_item(title, icon, value, children):
+def _accordion_item(title, icon, value, children, id):
     return dmc.AccordionItem(
         [
             dmc.AccordionControl(
@@ -25,7 +25,11 @@ def _accordion_item(title, icon, value, children):
                     width=20,
                 ),
             ),
-            dmc.AccordionPanel(children),
+            dmc.LoadingOverlay(
+                dmc.AccordionPanel(children=children, id=id),
+                loaderProps={"size": 0},
+                overlayOpacity=0.4,
+            ),
         ],
         value=value,
     )
@@ -45,6 +49,7 @@ def layout():
                         "Data selection",
                         "majesticons:data-line",
                         "data-select",
+                        id="data-selection-controls",
                         children=[
                             dmc.Text("Image"),
                             dmc.Select(
@@ -60,6 +65,7 @@ def layout():
                         "Image transformations",
                         "fluent-mdl2:image-pixel",
                         "image-transformations",
+                        id="image-transformation-controls",
                         children=html.Div(
                             [
                                 dmc.Text("Brightness", size="sm"),
@@ -109,6 +115,7 @@ def layout():
                         "Annotation tools",
                         "mdi:paintbrush-outline",
                         "annotations",
+                        id="annotations-controls",
                         children=[
                             dmc.Center(
                                 dmc.Switch(