workbench 0.8.177__py3-none-any.whl → 0.8.227__py3-none-any.whl

workbench/web_interface/components/plugins/scatter_plot.py

@@ -1,6 +1,6 @@
 import base64
 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
@@ -8,7 +8,7 @@ from dash.exceptions import PreventUpdate
 # Workbench Imports
 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.plot_utils import prediction_intervals, molecule_hover_tooltip
 
 
 class ScatterPlot(PluginInterface):
@@ -18,6 +18,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 +35,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 +60,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 +78,67 @@ class ScatterPlot(PluginInterface):
                     id=f"{component_id}-graph",
                     figure=self.display_text("Waiting for Data..."),
                     config={"scrollZoom": True},
-                    style={"height": "100%"},
+                    style={"height": "600px", "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 +146,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 +172,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)
 
@@ -159,23 +196,32 @@ class ScatterPlot(PluginInterface):
         self.df = self.df.drop(columns=aws_cols, errors="ignore")
 
         # Set hover columns and custom data
-        self.hover_columns = kwargs.get("hover_columns", self.df.columns.tolist()[:10])
+        self.hover_columns = kwargs.get("hover_columns", sorted(self.df.columns.tolist()[:15]))
         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 +234,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,7 +245,6 @@ 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:
@@ -211,24 +255,38 @@ 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
 
         # 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 +298,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,
                         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,18 +322,16 @@ 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
                 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,
                         color=discrete_colors[i % len(discrete_colors)],
@@ -345,64 +399,97 @@ 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(
+            f"""
+            function(hoverData) {{
+                if (!hoverData) {{
+                    return [false, window.dash_clientside.no_update, window.dash_clientside.no_update];
+                }}
+                var bbox = hoverData.points[0].bbox;
+                var centerX = (bbox.x0 + bbox.x1) / 2;
+                var centerY = (bbox.y0 + bbox.y1) / 2;
+                var adjustedBbox = {{
+                    x0: centerX - 50,
+                    x1: centerX + 50,
+                    y0: centerY - 162,
+                    y1: centerY - 62
+                }};
+                var imgElement = {{
+                    type: 'Img',
+                    namespace: 'dash_html_components',
+                    props: {{
+                        src: '{self._circle_data_uri}',
+                        style: {{width: '100px', height: '100px'}}
+                    }}
+                }};
+                return [true, adjustedBbox, [imgElement]];
+            }}
+            """,
             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__":
@@ -420,22 +507,35 @@ if __name__ == "__main__":
     df = pd.DataFrame(data)
 
     # Get a UQ regressor model
-    # from workbench.api import Endpoint, DFStore
-    # end = Endpoint("aqsol-uq")
-    # df = end.auto_inference()
-    # DFStore().upsert("/workbench/models/aqsol-uq/auto_inference", df)
-
-    from workbench.api import DFStore
+    from workbench.api import Model
 
-    df = DFStore().get("/workbench/models/aqsol-uq/auto_inference")
+    model = Model("logd-reg-xgb")
+    df = model.get_inference_predictions("full_cross_fold")
 
     # Run the Unit Test on the Plugin
+    # Test currently commented out
+    """
     PluginUnitTest(
         ScatterPlot,
         input_data=df,
         theme="midnight_blue",
-        x="solubility",
+        x="logd",
         y="prediction",
-        color="residuals_abs",
+        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()