workbench 0.8.219__py3-none-any.whl → 0.8.231__py3-none-any.whl

workbench/web_interface/components/plugins/scatter_plot.py

@@ -1,6 +1,7 @@
 import base64
+import numpy as np
 import pandas as pd
-from dash import dcc, html, callback, Input, Output, no_update
+from dash import dcc, html, callback, clientside_callback, Input, Output, no_update
 import plotly.graph_objects as go
 import plotly.express as px
 from dash.exceptions import PreventUpdate
@@ -9,6 +10,8 @@ from dash.exceptions import PreventUpdate
 from workbench.web_interface.components.plugin_interface import PluginInterface, PluginPage, PluginInputType
 from workbench.utils.theme_manager import ThemeManager
 from workbench.utils.plot_utils import prediction_intervals
+from workbench.utils.chem_utils.vis import molecule_hover_tooltip
+from workbench.utils.clientside_callbacks import circle_overlay_callback
 
 
 class ScatterPlot(PluginInterface):
@@ -18,6 +21,12 @@ class ScatterPlot(PluginInterface):
     auto_load_page = PluginPage.NONE
     plugin_input_type = PluginInputType.DATAFRAME
 
+    # Pre-computed circle overlay SVG
+    _circle_svg = """<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="overflow: visible;">
+        <circle cx="50" cy="50" r="10" stroke="rgba(255, 255, 255, 1)" stroke-width="3" fill="none" />
+    </svg>"""
+    _circle_data_uri = f"data:image/svg+xml;base64,{base64.b64encode(_circle_svg.encode('utf-8')).decode('utf-8')}"
+
     def __init__(self, show_axes: bool = True):
         """Initialize the Scatter Plot Plugin
 
@@ -29,7 +38,10 @@ class ScatterPlot(PluginInterface):
         self.df = None
         self.show_axes = show_axes
         self.theme_manager = ThemeManager()
-        self.colorscale = self.theme_manager.colorscale()
+        self.has_smiles = False  # Track if dataframe has smiles column for molecule hover
+        self.smiles_column = None
+        self.id_column = None
+        self.hover_background = None  # Cached background color for molecule hover tooltip
 
         # Call the parent class constructor
         super().__init__()
@@ -51,10 +63,10 @@ class ScatterPlot(PluginInterface):
             (f"{component_id}-x-dropdown", "options"),
             (f"{component_id}-y-dropdown", "options"),
             (f"{component_id}-color-dropdown", "options"),
-            (f"{component_id}-label-dropdown", "options"),
             (f"{component_id}-x-dropdown", "value"),
             (f"{component_id}-y-dropdown", "value"),
             (f"{component_id}-color-dropdown", "value"),
+            (f"{component_id}-regression-line", "value"),
         ]
         self.signals = [(f"{component_id}-graph", "hoverData"), (f"{component_id}-graph", "clickData")]
 
@@ -69,51 +81,67 @@ class ScatterPlot(PluginInterface):
                     id=f"{component_id}-graph",
                     figure=self.display_text("Waiting for Data..."),
                     config={"scrollZoom": True},
-                    style={"height": "100%"},
+                    style={"height": "500px", "width": "100%"},
                     clear_on_unhover=True,
                 ),
                 # Controls: X, Y, Color, Label Dropdowns, and Regression Line Checkbox
                 html.Div(
                     [
-                        html.Label("X", style={"marginLeft": "40px", "marginRight": "5px", "fontWeight": "bold"}),
+                        html.Label(
+                            "X",
+                            style={
+                                "marginLeft": "20px",
+                                "marginRight": "5px",
+                                "fontWeight": "bold",
+                                "display": "flex",
+                                "alignItems": "center",
+                            },
+                        ),
                         dcc.Dropdown(
                             id=f"{component_id}-x-dropdown",
-                            className="dropdown",
-                            style={"min-width": "50px", "flex": 1},  # Responsive width
+                            style={"minWidth": "150px", "flex": 1},
                             clearable=False,
                         ),
-                        html.Label("Y", style={"marginLeft": "30px", "marginRight": "5px", "fontWeight": "bold"}),
+                        html.Label(
+                            "Y",
+                            style={
+                                "marginLeft": "20px",
+                                "marginRight": "5px",
+                                "fontWeight": "bold",
+                                "display": "flex",
+                                "alignItems": "center",
+                            },
+                        ),
                         dcc.Dropdown(
                             id=f"{component_id}-y-dropdown",
-                            className="dropdown",
-                            style={"min-width": "50px", "flex": 1},  # Responsive width
+                            style={"minWidth": "150px", "flex": 1},
                             clearable=False,
                         ),
-                        html.Label("Color", style={"marginLeft": "30px", "marginRight": "5px", "fontWeight": "bold"}),
-                        dcc.Dropdown(
-                            id=f"{component_id}-color-dropdown",
-                            className="dropdown",
-                            style={"min-width": "50px", "flex": 1},  # Responsive width
-                            clearable=False,
+                        html.Label(
+                            "Color",
+                            style={
+                                "marginLeft": "20px",
+                                "marginRight": "5px",
+                                "fontWeight": "bold",
+                                "display": "flex",
+                                "alignItems": "center",
+                            },
                         ),
-                        html.Label("Label", style={"marginLeft": "30px", "marginRight": "5px", "fontWeight": "bold"}),
                         dcc.Dropdown(
-                            id=f"{component_id}-label-dropdown",
-                            className="dropdown",
-                            style={"min-width": "50px", "flex": 1},
-                            options=[{"label": "None", "value": "none"}],
-                            value="none",
+                            id=f"{component_id}-color-dropdown",
+                            style={"minWidth": "150px", "flex": 1},
                             clearable=False,
                         ),
                         dcc.Checklist(
                             id=f"{component_id}-regression-line",
                             options=[{"label": " Diagonal", "value": "show"}],
                             value=[],
-                            style={"margin": "10px"},
+                            style={"marginLeft": "20px", "display": "flex", "alignItems": "center"},
                         ),
                     ],
-                    style={"padding": "0px 0px 10px 0px", "display": "flex", "gap": "10px"},
+                    style={"padding": "0px 0px 10px 0px", "display": "flex", "alignItems": "center", "gap": "5px"},
                 ),
+                # Circle overlay tooltip (centered on hovered point)
                 dcc.Tooltip(
                     id=f"{component_id}-overlay",
                     background_color="rgba(0,0,0,0)",
@@ -121,6 +149,14 @@ class ScatterPlot(PluginInterface):
                     direction="bottom",
                     loading_text="",
                 ),
+                # Molecule tooltip (offset from hovered point) - only used when smiles column exists
+                dcc.Tooltip(
+                    id=f"{component_id}-molecule-tooltip",
+                    background_color="rgba(0,0,0,0)",
+                    border_color="rgba(0,0,0,0)",
+                    direction="bottom",
+                    loading_text="",
+                ),
             ],
             style={"height": "100%", "display": "flex", "flexDirection": "column"},  # Full viewport height
         )
@@ -139,12 +175,16 @@ class ScatterPlot(PluginInterface):
                             - hover_columns: The columns to show when hovering over a point
                             - suppress_hover_display: Suppress hover display (default: False)
                             - custom_data: Custom data that get passed to hoverData callbacks
+                            - id_column: Column to use for molecule tooltip header (auto-detects "id" if not specified)
 
         Returns:
             list: A list of updated property values (figure, x options, y options, color options,
-                                                    label options, x default, y default,
-                                                    color default).
+                                                    x default, y default, color default).
         """
+        # Get the colorscale and background color from the current theme
+        self.colorscale = self.theme_manager.colorscale()
+        self.hover_background = self.theme_manager.background()
+
         # Get the limit for the number of rows to plot
         limit = kwargs.get("limit", 20000)
 
@@ -163,19 +203,28 @@ class ScatterPlot(PluginInterface):
         self.suppress_hover_display = kwargs.get("suppress_hover_display", False)
         self.custom_data = kwargs.get("custom_data", [])
 
+        # Check if the dataframe has smiles/id columns for molecule hover rendering
+        self.smiles_column = next((col for col in self.df.columns if col.lower() == "smiles"), None)
+        # Use provided id_column, or auto-detect "id" column, or fall back to first column
+        self.id_column = kwargs.get("id_column") or next(
+            (col for col in self.df.columns if col.lower() == "id"), self.df.columns[0]
+        )
+        self.has_smiles = self.smiles_column is not None
+
         # Identify numeric columns
         numeric_columns = self.df.select_dtypes(include="number").columns.tolist()
         if len(numeric_columns) < 3:
             raise ValueError("At least three numeric columns are required for x, y, and color.")
 
-        # Default x, y, and color (for color, default to a numeric column)
+        # Default x, y, and color (for color, prefer 'confidence' if it exists)
         x_default = kwargs.get("x", numeric_columns[0])
         y_default = kwargs.get("y", numeric_columns[1])
-        color_default = kwargs.get("color", numeric_columns[2])
+        default_color = "confidence" if "confidence" in self.df.columns else numeric_columns[2]
+        color_default = kwargs.get("color", default_color)
         regression_line = kwargs.get("regression_line", False)
 
         # Create the default scatter plot
-        figure = self.create_scatter_plot(self.df, x_default, y_default, color_default, "none", regression_line)
+        figure = self.create_scatter_plot(self.df, x_default, y_default, color_default, regression_line)
 
         # Dropdown options for x and y: use provided dropdown_columns or fallback to numeric columns
         dropdown_columns = kwargs.get("dropdown_columns", numeric_columns)
@@ -188,11 +237,10 @@ class ScatterPlot(PluginInterface):
         color_columns = numeric_columns + cat_columns
         color_options = [{"label": col, "value": col} for col in color_columns]
 
-        # For label dropdown, include None option and all columns
-        label_options = [{"label": "None", "value": "none"}]
-        label_options.extend([{"label": col, "value": col} for col in self.df.columns])
+        # Regression line checklist value (list with "show" if enabled, empty list if disabled)
+        regression_line_value = ["show"] if regression_line else []
 
-        return [figure, x_options, y_options, color_options, label_options, x_default, y_default, color_default]
+        return [figure, x_options, y_options, color_options, x_default, y_default, color_default, regression_line_value]
 
     def create_scatter_plot(
         self,
@@ -200,9 +248,7 @@ class ScatterPlot(PluginInterface):
         x_col: str,
         y_col: str,
         color_col: str,
-        label_col: str,
         regression_line: bool = False,
-        marker_size: int = 15,
     ) -> go.Figure:
         """Create a Plotly Scatter Plot figure.
 
@@ -211,24 +257,46 @@ class ScatterPlot(PluginInterface):
             x_col (str): The column to use for the x-axis.
             y_col (str): The column to use for the y-axis.
             color_col (str): The column to use for the color scale.
-            label_col (str): The column to use for point labels.
             regression_line (bool): Whether to include a regression line.
-            marker_size (int): Size of the markers. Default is 15.
 
         Returns:
             go.Figure: A Plotly Figure object.
         """
-        # Check if we need to show labels
-        show_labels = label_col != "none" and len(df) < 1000
+
+        # If aggregation_count is present, sort so largest counts are drawn first (underneath)
+        # and compute marker sizes using square root (between log and linear)
+        if "aggregation_count" in df.columns:
+            df = df.sort_values("aggregation_count", ascending=False).reset_index(drop=True)
+            # Scale: base_size (15) + (sqrt(count) - 1) * factor, so count=1 stays at base_size
+            marker_sizes = 15 + (np.sqrt(df["aggregation_count"]) - 1) * 3
+        else:
+            marker_sizes = 15
 
         # Helper to generate hover text for each point.
         def generate_hover_text(row):
             return "<br>".join([f"{col}: {row[col]}" for col in self.hover_columns])
 
-        # Generate hover text for all points.
-        hovertext = df.apply(generate_hover_text, axis=1)
-        hovertemplate = "%{hovertext}<extra></extra>"
-        hoverinfo = "none" if self.suppress_hover_display else None
+        # Generate hover text for all points (unless suppressed or using molecule hover)
+        suppress_hover = self.suppress_hover_display or self.has_smiles
+        if suppress_hover:
+            # Use "none" to hide the default hover display but still fire hoverData callbacks
+            # Don't set hovertemplate when suppressing - it would override hoverinfo
+            hovertext = None
+            hovertemplate = None
+            hoverinfo = "none"
+        else:
+            hovertext = df.apply(generate_hover_text, axis=1)
+            hovertemplate = "%{hovertext}<extra></extra>"
+            hoverinfo = None
+
+        # Build customdata columns - include smiles and id if available for molecule hover
+        custom_data_cols = list(self.custom_data) if self.custom_data else []
+        if self.has_smiles:
+            # Add smiles as first column, id as second (if available)
+            if self.smiles_column not in custom_data_cols:
+                custom_data_cols = [self.smiles_column] + custom_data_cols
+            if self.id_column and self.id_column not in custom_data_cols:
+                custom_data_cols.insert(1, self.id_column)
 
         # Determine marker settings based on the type of the color column.
         if pd.api.types.is_numeric_dtype(df[color_col]):
@@ -240,18 +308,16 @@ class ScatterPlot(PluginInterface):
                     x=df[x_col],
                     y=df[y_col],
                     mode="markers",
-                    text=df[label_col].astype(str) if show_labels else None,
-                    textposition="top center",
                     hoverinfo=hoverinfo,
                     hovertext=hovertext,
                     hovertemplate=hovertemplate,
-                    customdata=df[self.custom_data],
+                    customdata=df[custom_data_cols] if custom_data_cols else None,
                     marker=dict(
-                        size=marker_size,
+                        size=marker_sizes,
                         color=marker_color,
                         colorscale=self.colorscale,
                         colorbar=colorbar,
-                        opacity=0.8,
+                        opacity=0.9,
                         line=dict(color="rgba(0,0,0,0.25)", width=1),
                     ),
                 )
@@ -266,20 +332,27 @@ class ScatterPlot(PluginInterface):
             data = []
             for i, cat in enumerate(categories):
                 sub_df = df[df[color_col] == cat]
-                sub_hovertext = hovertext.loc[sub_df.index]
+                sub_hovertext = hovertext.loc[sub_df.index] if hovertext is not None else None
+                # Get marker sizes for this subset (handles both array and scalar)
+                if isinstance(marker_sizes, (pd.Series, np.ndarray)):
+                    sub_marker_sizes = (
+                        marker_sizes.loc[sub_df.index]
+                        if isinstance(marker_sizes, pd.Series)
+                        else marker_sizes[sub_df.index]
+                    )
+                else:
+                    sub_marker_sizes = marker_sizes
                 trace = go.Scattergl(
                     x=sub_df[x_col],
                     y=sub_df[y_col],
                     mode="markers",
-                    text=sub_df[label_col] if show_labels else None,  # Add text if labels enabled
-                    textposition="top center",  # Position labels above points
                     name=cat,
                     hoverinfo=hoverinfo,
                     hovertext=sub_hovertext,
                     hovertemplate=hovertemplate,
-                    customdata=sub_df[self.custom_data],
+                    customdata=sub_df[custom_data_cols] if custom_data_cols else None,
                     marker=dict(
-                        size=marker_size,
+                        size=sub_marker_sizes,
                         color=discrete_colors[i % len(discrete_colors)],
                         opacity=0.8,
                         line=dict(color="rgba(0,0,0,0.25)", width=1),
@@ -345,64 +418,73 @@ class ScatterPlot(PluginInterface):
                 Input(f"{self.component_id}-x-dropdown", "value"),
                 Input(f"{self.component_id}-y-dropdown", "value"),
                 Input(f"{self.component_id}-color-dropdown", "value"),
-                Input(f"{self.component_id}-label-dropdown", "value"),
                 Input(f"{self.component_id}-regression-line", "value"),
             ],
             prevent_initial_call=True,
         )
-        def _update_scatter_plot(x_value, y_value, color_value, label_value, regression_line):
+        def _update_scatter_plot(x_value, y_value, color_value, regression_line):
             """Update the Scatter Plot Graph based on the dropdown values."""
 
             # Check if the dataframe is not empty and the values are not None
             if not self.df.empty and x_value and y_value and color_value:
-                # Update Plotly Scatter Plot with the label value
-                figure = self.create_scatter_plot(self.df, x_value, y_value, color_value, label_value, regression_line)
+                figure = self.create_scatter_plot(self.df, x_value, y_value, color_value, regression_line)
                 return figure
 
             raise PreventUpdate
 
-        @callback(
+        # Clientside callback for circle overlay - runs in browser, no server round trip
+        clientside_callback(
+            circle_overlay_callback(self._circle_data_uri),
             Output(f"{self.component_id}-overlay", "show"),
             Output(f"{self.component_id}-overlay", "bbox"),
             Output(f"{self.component_id}-overlay", "children"),
             Input(f"{self.component_id}-graph", "hoverData"),
         )
-        def _scatter_overlay(hover_data):
-            if hover_data is None:
-                # Hide the overlay if no hover data
-                return False, no_update, no_update
-
-            # Extract bounding box from hoverData
-            bbox = hover_data["points"][0]["bbox"]
 
-            # Create an SVG with a circle at the center
-            svg = """
-            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="overflow: visible;">
-                <!-- Circle for the node -->
-                <circle cx="50" cy="50" r="10" stroke="rgba(255, 255, 255, 1)" stroke-width="3" fill="none" />
-            </svg>
-            """
+        @callback(
+            Output(f"{self.component_id}-molecule-tooltip", "show"),
+            Output(f"{self.component_id}-molecule-tooltip", "bbox"),
+            Output(f"{self.component_id}-molecule-tooltip", "children"),
+            Input(f"{self.component_id}-graph", "hoverData"),
+        )
+        def _scatter_molecule_overlay(hover_data):
+            """Show molecule tooltip when smiles data is available."""
+            if hover_data is None or not self.has_smiles:
+                return False, no_update, no_update
 
-            # Encode the SVG as Base64
-            encoded_svg = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
-            data_uri = f"data:image/svg+xml;base64,{encoded_svg}"
+            # Extract customdata (contains smiles and id)
+            customdata = hover_data["points"][0].get("customdata")
+            if customdata is None:
+                return False, no_update, no_update
 
-            # Use an img tag for the overlay
-            svg_image = html.Img(src=data_uri, style={"width": "100px", "height": "100px"})
+            # SMILES is the first element, ID is second (if available)
+            if isinstance(customdata, (list, tuple)):
+                smiles = customdata[0]
+                mol_id = customdata[1] if len(customdata) > 1 and self.id_column else None
+            else:
+                smiles = customdata
+                mol_id = None
+
+            # Generate molecule tooltip with ID header (use cached background color)
+            mol_width, mol_height = 300, 200
+            children = molecule_hover_tooltip(
+                smiles, mol_id=mol_id, width=mol_width, height=mol_height, background=self.hover_background
+            )
 
-            # Get the center of the bounding box
+            # Position molecule tooltip above and slightly right of the point
+            bbox = hover_data["points"][0]["bbox"]
             center_x = (bbox["x0"] + bbox["x1"]) / 2
             center_y = (bbox["y0"] + bbox["y1"]) / 2
+            x_offset = 5  # Slight offset to the right
+            y_offset = mol_height + 50  # Above the point
 
-            # The tooltip should be centered on the point (note: 'bottom' tooltip, so we adjust y position)
             adjusted_bbox = {
-                "x0": center_x - 50,
-                "x1": center_x + 50,
-                "y0": center_y - 162,
-                "y1": center_y - 62,
+                "x0": center_x + x_offset,
+                "x1": center_x + x_offset + mol_width,
+                "y0": center_y - mol_height - y_offset,
+                "y1": center_y - y_offset,
             }
-            # Return the updated values for the overlay
-            return True, adjusted_bbox, [svg_image]
+            return True, adjusted_bbox, children
 
 
 if __name__ == "__main__":
@@ -426,6 +508,8 @@ if __name__ == "__main__":
     df = model.get_inference_predictions("full_cross_fold")
 
     # Run the Unit Test on the Plugin
+    # Test currently commented out
+    """
     PluginUnitTest(
         ScatterPlot,
         input_data=df,
@@ -435,3 +519,18 @@ if __name__ == "__main__":
         color="prediction_std",
         suppress_hover_display=True,
     ).run()
+    """
+
+    # Test with molecule hover (smiles column)
+    from workbench.api import FeatureSet
+
+    fs = FeatureSet("aqsol_features")
+    mol_df = fs.pull_dataframe()[:1000]  # Limit to 1000 rows for testing
+
+    # Run the Unit Test with molecule data (hover over points to see molecule structures)
+    PluginUnitTest(
+        ScatterPlot,
+        input_data=mol_df,
+        theme="midnight_blue",
+        suppress_hover_display=True,
+    ).run()

workbench/web_interface/components/settings_menu.py

@@ -0,0 +1,185 @@
+"""SettingsMenu: A settings menu component for the Workbench Dashboard."""
+
+from dash import html, dcc
+import dash_bootstrap_components as dbc
+
+# Workbench Imports
+from workbench.utils.theme_manager import ThemeManager
+
+
+class SettingsMenu:
+    """A settings menu with admin links and theme selection."""
+
+    def __init__(self):
+        """Initialize the SettingsMenu."""
+        self.tm = ThemeManager()
+
+    def create_component(self, component_id: str) -> html.Div:
+        """Create a settings menu dropdown component.
+
+        Args:
+            component_id (str): The ID prefix for the component.
+
+        Returns:
+            html.Div: A Div containing the settings menu dropdown.
+        """
+        themes = self.tm.list_themes()
+
+        # Create theme submenu items
+        theme_items = []
+        for theme in sorted(themes):
+            theme_items.append(
+                dbc.DropdownMenuItem(
+                    [
+                        html.Span(
+                            "",
+                            id={"type": f"{component_id}-checkmark", "theme": theme},
+                            style={
+                                "fontFamily": "monospace",
+                                "marginRight": "5px",
+                                "width": "20px",
+                                "display": "inline-block",
+                            },
+                        ),
+                        theme.replace("_", " ").title(),
+                    ],
+                    id={"type": f"{component_id}-theme-item", "theme": theme},
+                )
+            )
+
+        # Hamburger icon (3 rounded lines)
+        hamburger_icon = html.Div(
+            [
+                html.Div(
+                    style={
+                        "width": "20px",
+                        "height": "3px",
+                        "backgroundColor": "currentColor",
+                        "borderRadius": "2px",
+                        "marginBottom": "4px",
+                    }
+                ),
+                html.Div(
+                    style={
+                        "width": "20px",
+                        "height": "3px",
+                        "backgroundColor": "currentColor",
+                        "borderRadius": "2px",
+                        "marginBottom": "4px",
+                    }
+                ),
+                html.Div(
+                    style={"width": "20px", "height": "3px", "backgroundColor": "currentColor", "borderRadius": "2px"}
+                ),
+            ],
+            style={"display": "flex", "flexDirection": "column", "alignItems": "center", "justifyContent": "center"},
+        )
+
+        # Build menu items: Home, Status, License, divider, Themes submenu
+        menu_items = [
+            dbc.DropdownMenuItem("Home", href="/"),
+            dbc.DropdownMenuItem("Status", href="/status", external_link=True, target="_blank"),
+            dbc.DropdownMenuItem("License", href="/license", external_link=True, target="_blank"),
+            dbc.DropdownMenuItem(divider=True),
+            dbc.DropdownMenuItem("Themes", header=True),
+            *theme_items,
+        ]
+
+        return html.Div(
+            [
+                dbc.DropdownMenu(
+                    label=hamburger_icon,
+                    children=menu_items,
+                    id=f"{component_id}-dropdown",
+                    toggle_style={
+                        "background": "transparent",
+                        "border": "none",
+                        "boxShadow": "none",
+                        "padding": "5px 10px",
+                    },
+                    caret=False,
+                    align_end=True,
+                ),
+                # Dummy store for the clientside callback output
+                dcc.Store(id=f"{component_id}-dummy", data=None),
+                # Store to trigger checkmark update on load
+                dcc.Store(id=f"{component_id}-init", data=True),
+            ],
+            id=component_id,
+        )
+
+    @staticmethod
+    def get_clientside_callback_code(component_id: str) -> str:
+        """Get the JavaScript code for the theme selection clientside callback.
+
+        Args:
+            component_id (str): The ID prefix used in create_component.
+
+        Returns:
+            str: JavaScript code for the clientside callback.
+        """
+        return """
+        function(n_clicks_list, ids) {
+            // Find which button was clicked
+            if (!n_clicks_list || n_clicks_list.every(n => !n)) {
+                return window.dash_clientside.no_update;
+            }
+
+            // Find the clicked theme
+            let clickedTheme = null;
+            for (let i = 0; i < n_clicks_list.length; i++) {
+                if (n_clicks_list[i]) {
+                    clickedTheme = ids[i].theme;
+                    break;
+                }
+            }
+
+            if (clickedTheme) {
+                // Store in localStorage
+                localStorage.setItem('wb_theme', clickedTheme);
+                // Set cookie for Flask to read on reload
+                document.cookie = `wb_theme=${clickedTheme}; path=/; max-age=31536000`;
+                // Reload the page to apply the new theme
+                window.location.reload();
+            }
+
+            return window.dash_clientside.no_update;
+        }
+        """
+
+    @staticmethod
+    def get_checkmark_callback_code() -> str:
+        """Get the JavaScript code to update checkmarks based on localStorage.
+
+        Returns:
+            str: JavaScript code for the checkmark update callback.
+        """
+        return """
+        function(init, ids) {
+            // Get current theme from localStorage (or cookie as fallback)
+            let currentTheme = localStorage.getItem('wb_theme');
+            if (!currentTheme) {
+                // Try to read from cookie
+                const cookies = document.cookie.split(';');
+                for (let cookie of cookies) {
+                    const [name, value] = cookie.trim().split('=');
+                    if (name === 'wb_theme') {
+                        currentTheme = value;
+                        break;
+                    }
+                }
+            }
+
+            // Return checkmarks for each theme
+            return ids.map(id => id.theme === currentTheme ? '\u2713' : '');
+        }
+        """
+
+
+if __name__ == "__main__":
+    # Quick test to verify component creation
+    menu = SettingsMenu()
+    component = menu.create_component("test-settings-menu")
+    print("SettingsMenu component created successfully")
+    print(f"Available themes: {menu.tm.list_themes()}")
+    print(f"Current theme: {menu.tm.current_theme()}")