Merge pull request #31 from mlexchange/custom-annotation-buttons

add annotation buttons
mlexchange · Jul 12, 2023 · 4fd7c96 · 4fd7c96
2 parents dc6e01e + a592605
commit 4fd7c96
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 3 deletions.
diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py
@@ -1,9 +1,60 @@
-from dash import Input, Output, State, callback, Patch, ALL, ctx, clientside_callback
+from dash import (
+    Input,
+    Output,
+    State,
+    callback,
+    Patch,
+    ALL,
+    ctx,
+    clientside_callback,
+    no_update,
+)
 import dash_mantine_components as dmc
 import json
 from utils.data_utils import convert_hex_to_rgba, data
 
 
+@callback(
+    Output("image-viewer", "figure", allow_duplicate=True),
+    Output("open-freeform", "style"),
+    Output("closed-freeform", "style"),
+    Output("circle", "style"),
+    Output("rectangle", "style"),
+    Output("drawing-off", "style"),
+    Input("open-freeform", "n_clicks"),
+    Input("closed-freeform", "n_clicks"),
+    Input("circle", "n_clicks"),
+    Input("rectangle", "n_clicks"),
+    Input("drawing-off", "n_clicks"),
+    prevent_initial_call=True,
+)
+def annotation_mode(open, closed, circle, rect, off_mode):
+    """This callback determines which drawing mode the graph is in"""
+    patched_figure = Patch()
+    triggered = ctx.triggered_id
+    open_style = {"border": "1px solid"}
+    close_style = {"border": "1px solid"}
+    circle_style = {"border": "1px solid"}
+    rect_style = {"border": "1px solid"}
+    pan_style = {"border": "1px solid"}
+    if triggered == "open-freeform" and open > 0:
+        patched_figure["layout"]["dragmode"] = "drawopenpath"
+        open_style = {"border": "3px solid black"}
+    if triggered == "closed-freeform" and closed > 0:
+        patched_figure["layout"]["dragmode"] = "drawclosedpath"
+        close_style = {"border": "3px solid black"}
+    if triggered == "circle" and circle > 0:
+        patched_figure["layout"]["dragmode"] = "drawcircle"
+        circle_style = {"border": "3px solid black"}
+    if triggered == "rectangle" and rect > 0:
+        patched_figure["layout"]["dragmode"] = "drawrect"
+        rect_style = {"border": "3px solid black"}
+    if triggered == "drawing-off" and off_mode > 0:
+        patched_figure["layout"]["dragmode"] = "pan"
+        pan_style = {"border": "3px solid black"}
+    return patched_figure, open_style, close_style, circle_style, rect_style, pan_style
+
+
 @callback(
     Output("image-viewer", "figure", allow_duplicate=True),
     Input("paintbrush-width", "value"),

diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py
@@ -30,7 +30,7 @@ def render_image(
         margin=dict(l=0, r=0, t=0, b=0),
         xaxis=dict(visible=False),
         yaxis=dict(visible=False),
-        dragmode="pan",
+        dragmode="drawopenpath",
         height=620,
         width=620,
         paper_bgcolor="rgba(0,0,0,0)",

diff --git a/components/control_bar.py b/components/control_bar.py
@@ -4,7 +4,7 @@
 from utils import data_utils
 
 COMPONENT_STYLE = {
-    "width": "22.5vw",
+    "width": "25vw",
     "height": "calc(100vh - 40px)",
     "padding": "10px",
     "borderRadius": "5px",
@@ -122,6 +122,66 @@ def layout():
                                 )
                             ),
                             dmc.Space(h=20),
+                            dmc.Text("Annotation mode", size="sm"),
+                            dmc.Group(
+                                spacing="xs",
+                                grow=True,
+                                children=[
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="open-freeform",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(icon="mdi:draw"),
+                                            style={"border": "3px solid black"},
+                                        ),
+                                        label="Open Freeform",
+                                    ),
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="closed-freeform",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(
+                                                icon="fluent:draw-shape-20-regular"
+                                            ),
+                                        ),
+                                        label="Closed Freeform",
+                                    ),
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="circle",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(
+                                                icon="gg:shape-circle"
+                                            ),
+                                        ),
+                                        label="Circle",
+                                    ),
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="rectangle",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(
+                                                icon="gg:shape-square"
+                                            ),
+                                        ),
+                                        label="Rectangle",
+                                    ),
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="drawing-off",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(icon="el:off"),
+                                        ),
+                                        label="Stop Drawing",
+                                    ),
+                                ],
+                            ),
+                            dmc.Space(h=20),
                             dmc.Text("Paintbrush size", size="sm"),
                             dmc.Slider(
                                 id="paintbrush-width",