From 33c0f66f5f0ed6e382b892d48dc684d379f2e1e3 Mon Sep 17 00:00:00 2001 From: hannahker Date: Fri, 21 Jul 2023 12:37:10 -0700 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=90=9B=20disable=20controls=20using?= =?UTF-8?q?=20loadingOverlay?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- callbacks/image_viewer.py | 10 ++++++++-- components/control_bar.py | 7 +++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index 6d7ac9e5..7f4a6879 100644 --- 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"), + Output("image-transformation-controls", "children"), + Output("annotations-controls", "children"), Input("image-selection-slider", "value"), State("project-name-src", "value"), State("paintbrush-width", "value"), @@ -70,8 +74,10 @@ def render_image( patched_annotation_store = Patch() 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( diff --git a/components/control_bar.py b/components/control_bar.py index 8dc4855f..fd757395 100644 --- 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,7 @@ def _accordion_item(title, icon, value, children): width=20, ), ), - dmc.AccordionPanel(children), + dmc.LoadingOverlay(dmc.AccordionPanel(children=children, id=id), loaderProps={"size": 0}), ], value=value, ) @@ -45,6 +45,7 @@ def layout(): "Data selection", "majesticons:data-line", "data-select", + id='data-selection-controls', children=[ dmc.Text("Image"), dmc.Select( @@ -60,6 +61,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 +111,7 @@ def layout(): "Annotation tools", "mdi:paintbrush-outline", "annotations", + id='annotations-controls', children=[ dmc.Center( dmc.Switch( From b7d6e55d95510695936ab5edb25e7db0653df938 Mon Sep 17 00:00:00 2001 From: hannahker Date: Fri, 21 Jul 2023 12:45:21 -0700 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84=20decrease=20opacity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/control_bar.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/control_bar.py b/components/control_bar.py index fd757395..9714b085 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -25,7 +25,7 @@ def _accordion_item(title, icon, value, children, id): width=20, ), ), - dmc.LoadingOverlay(dmc.AccordionPanel(children=children, id=id), loaderProps={"size": 0}), + dmc.LoadingOverlay(dmc.AccordionPanel(children=children, id=id), loaderProps={"size": 0}, overlayOpacity=0.4,), ], value=value, ) From 0162667b9a3d842b6f76da94e2dbd9aa718758b3 Mon Sep 17 00:00:00 2001 From: hannahker Date: Fri, 21 Jul 2023 13:51:58 -0700 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Apply=20black?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- callbacks/image_viewer.py | 11 +++++++++-- components/control_bar.py | 12 ++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index 7f4a6879..f58b4168 100644 --- a/callbacks/image_viewer.py +++ b/callbacks/image_viewer.py @@ -74,10 +74,17 @@ def render_image( patched_annotation_store = Patch() patched_annotation_store["image_size"] = tf.size fig_loading_overlay = -1 - + # 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, + return ( + fig, + patched_annotation_store, + fig_loading_overlay, + dash.no_update, + dash.no_update, + dash.no_update, + ) clientside_callback( diff --git a/components/control_bar.py b/components/control_bar.py index 9714b085..5bd81d27 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -25,7 +25,11 @@ def _accordion_item(title, icon, value, children, id): width=20, ), ), - dmc.LoadingOverlay(dmc.AccordionPanel(children=children, id=id), loaderProps={"size": 0}, overlayOpacity=0.4,), + dmc.LoadingOverlay( + dmc.AccordionPanel(children=children, id=id), + loaderProps={"size": 0}, + overlayOpacity=0.4, + ), ], value=value, ) @@ -45,7 +49,7 @@ def layout(): "Data selection", "majesticons:data-line", "data-select", - id='data-selection-controls', + id="data-selection-controls", children=[ dmc.Text("Image"), dmc.Select( @@ -61,7 +65,7 @@ def layout(): "Image transformations", "fluent-mdl2:image-pixel", "image-transformations", - id='image-transformation-controls', + id="image-transformation-controls", children=html.Div( [ dmc.Text("Brightness", size="sm"), @@ -111,7 +115,7 @@ def layout(): "Annotation tools", "mdi:paintbrush-outline", "annotations", - id='annotations-controls', + id="annotations-controls", children=[ dmc.Center( dmc.Switch( From 279622eb2bf7986c9205ce0d818015eb8b677b84 Mon Sep 17 00:00:00 2001 From: hannahker Date: Mon, 24 Jul 2023 16:22:48 -0700 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=92=84=20disable=20controls=20while?= =?UTF-8?q?=20slider=20is=20updating?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- callbacks/image_viewer.py | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index f58b4168..1f7f40e3 100644 --- a/callbacks/image_viewer.py +++ b/callbacks/image_viewer.py @@ -11,9 +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"), - Output("image-transformation-controls", "children"), - Output("annotations-controls", "children"), + 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"), @@ -75,8 +75,8 @@ def render_image( patched_annotation_store["image_size"] = tf.size fig_loading_overlay = -1 - # No update is needed for the 'children' of the control components since we just want to trigger the loading - # overlay with this callback + # 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, @@ -129,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"), ) @@ -155,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, )