made ui styling changes

mlexchange · Jul 12, 2023 · a592605 · a592605
1 parent 4ed865d
commit a592605
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 59 deletions.
diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py
@@ -1,11 +1,26 @@
-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"),
@@ -17,17 +32,27 @@ 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"
-    return patched_figure
+        pan_style = {"border": "3px solid black"}
+    return patched_figure, open_style, close_style, circle_style, rect_style, pan_style
 
 
 @callback(

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
@@ -123,68 +123,63 @@ def layout():
                             ),
                             dmc.Space(h=20),
                             dmc.Text("Annotation mode", size="sm"),
-                            dmc.Grid(
+                            dmc.Group(
+                                spacing="xs",
+                                grow=True,
                                 children=[
-                                    dmc.Col(
-                                        span=7,
-                                        children=[
-                                            dmc.Button(
-                                                "Open Freeform",
-                                                id="open-freeform",
-                                                variant="outline",
-                                                color="gray",
-                                                leftIcon=DashIconify(icon="mdi:draw"),
-                                                style={"width": "100%"},
-                                            ),
-                                            dmc.Space(h=5),
-                                            dmc.Button(
-                                                "Closed Freeform",
-                                                id="closed-freeform",
-                                                variant="outline",
-                                                color="gray",
-                                                leftIcon=DashIconify(
-                                                    icon="fluent:draw-shape-20-regular"
-                                                ),
-                                                style={"width": "100%"},
+                                    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.Col(
-                                        span=5,
-                                        children=[
-                                            dmc.Button(
-                                                "Circle",
-                                                id="circle",
-                                                variant="outline",
-                                                color="gray",
-                                                leftIcon=DashIconify(
-                                                    icon="gg:shape-circle"
-                                                ),
-                                                style={"width": "100%"},
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="circle",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(
+                                                icon="gg:shape-circle"
                                             ),
-                                            dmc.Space(h=5),
-                                            dmc.Button(
-                                                "Rectangle",
-                                                id="rectangle",
-                                                variant="outline",
-                                                color="gray",
-                                                leftIcon=DashIconify(
-                                                    icon="gg:shape-square"
-                                                ),
-                                                style={"width": "100%"},
+                                        ),
+                                        label="Circle",
+                                    ),
+                                    dmc.Tooltip(
+                                        dmc.ActionIcon(
+                                            id="rectangle",
+                                            variant="outline",
+                                            color="gray",
+                                            children=DashIconify(
+                                                icon="gg:shape-square"
                                             ),
-                                        ],
+                                        ),
+                                        label="Rectangle",
                                     ),
-                                ]
-                            ),
-                            dmc.Space(h=5),
-                            dmc.Button(
-                                "Stop Drawing",
-                                id="drawing-off",
-                                variant="outline",
-                                color="gray",
-                                leftIcon=DashIconify(icon="el:off"),
-                                style={"width": "100%"},
+                                    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"),