Viewfinder toggle

assets/style.css

@@ -132,4 +132,14 @@ body {
 .mantine-Text-root.mantine-Modal-title {
     font-weight: 700 !important;
 
+}
+
+/* used to display viewfinder */
+.visible {
+    display: block;
+}
+
+/* used to hide viewfinder */
+.hidden {
+    display: none;
 }

callbacks/image_viewer.py

@@ -210,6 +210,17 @@ def keybind_image_slider(
     return new_slice, notification
 
 
+@callback(
+    Output("image-viewfinder", "className", allow_duplicate=True),
+    Input("toggle-viewfinder", "checked"),
+    prevent_initial_call=True,
+)
+def toggle_viewdinfer(viewfinder_enabled):
+    if viewfinder_enabled:
+        return "visible"
+    return "hidden"
+
+
 @callback(
     Output("image-viewfinder", "figure", allow_duplicate=True),
     Input("image-viewer", "relayoutData"),

components/control_bar.py

@@ -659,6 +659,7 @@ def drawer_section(children):
             ),
             create_reset_view_affix(),
             create_info_card_affix(),
+            create_viewfinder_affix(),
             dmc.NotificationsProvider(html.Div(id="notifications-container")),
             dcc.Download(id="export-annotation-metadata"),
             dcc.Download(id="export-annotation-mask"),
@@ -711,6 +712,25 @@ def create_reset_view_affix():
     )
 
 
+def create_viewfinder_affix():
+    return dmc.Affix(
+        position={"top": 10, "right": 10},
+        zIndex=9999999,
+        children=_tooltip(
+            "Toggle viewfinder",
+            dmc.Switch(
+                size="md",
+                radius="lg",
+                id="toggle-viewfinder",
+                checked=True,
+                onLabel="ON",
+                offLabel="OFF",
+                color="gray",
+            ),
+        ),
+    )
+
+
 def create_info_card_affix():
     return dmc.Affix(
         position={"bottom": 20, "right": 20},

components/image_viewer.py

@@ -37,7 +37,6 @@ def layout():
                             "width": "100vw",
                             "height": "100vh",
                             "position": "fixed",
-                            "zIndex": 1,
                         },
                     ),
                 ],
@@ -49,8 +48,8 @@ def layout():
                 config={"displayModeBar": False},
                 style={
                     "position": "absolute",
-                    "top": "30px",
-                    "right": "10px",
+                    "top": "35px",
+                    "right": "15px",
                 },
             ),
         ],