Merge branch 'dev' into fix/ws-connection-management

Author: T4rk1n

CHANGELOG.md

@@ -10,16 +10,17 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3680](https://github.com/plotly/dash/pull/3680) Added `search_order` prop to `Dropdown` to allow users to preserve original option order during search 
 - Added `csrf_token_name` and `csrf_header_name` config options to allow configuring the CSRF cookie and header names. Fixes [#729](https://github.com/plotly/dash/issues/729)
 - [#3797](https://github.com/plotly/dash/pull/3797) Improved websocket callback management.
-
-## Added
 - [#3523](https://github.com/plotly/dash/pull/3523) Fall back to background callback function names if source cannot be found
+- [#3785](https://github.com/plotly/dash/pull/3785) Fix patch with dcc.Graph figure.
+- [#3785](https://github.com/plotly/dash/pull/3785) Fix dcc.Graph not sending duplicate clicks because it had the same payload by adding a timestamp in the click event object.
 
 ## Fixed
 - [#3690](https://github.com/plotly/dash/pull/3690) Fixes Input when min or max is set to None
 - [#3723](https://github.com/plotly/dash/pull/3723) Fix misaligned `dcc.Slider` marks when some labels are empty strings
 - [#3738](https://github.com/plotly/dash/pull/3738) Add missing `stacklevel=2` to `warnings.warn()` calls so warnings report the caller's location instead of internal Dash source lines
 - [#3740](https://github.com/plotly/dash/pull/3740) Fix cannot tab into dropdowns in Safari
 - [#2462](https://github.com/plotly/dash/issues/2462) Allow `MATCH` in `Input`/`State` when the callback's `Output` has no wildcards (fixed-id Output, no Output, or `ALL`-only wildcard Output). `ALLSMALLER` still requires a corresponding `MATCH` in an Output.
+- [#3768](https://github.com/plotly/dash/pull/3768) Improved `Dropdown` search performance for large options lists
 - [#3759](https://github.com/plotly/dash/pull/3759) Fix the issue where `Patch` objects cannot be updated via `set_props()` in `websocket` callback. Fix [#3742](https://github.com/plotly/dash/issues/3742)
 - [#3789](https://github.com/plotly/dash/pull/3789) Fixed extra wrapper in `DatePickerRange` and `DatePickerSingle` causing styling and layout issues.
 

components/dash-core-components/src/fragments/Graph.react.js

@@ -9,6 +9,7 @@ import {
     mergeDeepRight,
     omit,
     type,
+    clone,
 } from 'ramda';
 import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
@@ -313,10 +314,12 @@ class PlotlyGraph extends Component {
         return mergeDeepRight(config, this.getConfigOverride(responsive));
     }
 
-    getLayout(layout, responsive) {
-        if (!layout) {
-            return layout;
+    getLayout(originalLayout, responsive) {
+        if (!originalLayout) {
+            return originalLayout;
         }
+        // Clone layout to avoid mutating the original (important for Patch)
+        const layout = clone(originalLayout);
         const override = this.getLayoutOverride(responsive);
         const {override: prev_override, originals: prev_originals} = this.state;
         // Store the original data that we're about to override
@@ -339,7 +342,7 @@ class PlotlyGraph extends Component {
         for (const key in override) {
             layout[key] = override[key];
         }
-        return layout; // not really a clone
+        return layout;
     }
 
     getConfigOverride(responsive) {
@@ -414,6 +417,8 @@ class PlotlyGraph extends Component {
         gd.on('plotly_click', eventData => {
             const clickData = filterEventData(gd, eventData, 'click');
             if (!isNil(clickData)) {
+                // Add timestamp to ensure each click is unique (for DashWrapper deduplication)
+                clickData.timestamp = Date.now();
                 setProps({clickData});
             }
         });
@@ -422,6 +427,8 @@ class PlotlyGraph extends Component {
                 ['event', 'fullAnnotation'],
                 eventData
             );
+            // Add timestamp to ensure each click is unique (for DashWrapper deduplication)
+            clickAnnotationData.timestamp = Date.now();
             setProps({clickAnnotationData});
         });
         gd.on('plotly_hover', eventData => {
@@ -444,6 +451,29 @@ class PlotlyGraph extends Component {
             if (!isNil(relayout) && !equals(relayout, relayoutData)) {
                 setProps({relayoutData: relayout});
             }
+            // Sync shapes from gd.layout to figure when shapes are modified by user
+            // This is needed because getLayout() clones layout to prevent mutation issues
+            if (eventData && gd.layout) {
+                const hasShapeChanges = Object.keys(eventData).some(
+                    key => key === 'shapes' || key.startsWith('shapes[')
+                );
+                if (hasShapeChanges) {
+                    const {figure = {}} = this.props;
+                    const currentShapes = figure?.layout?.shapes;
+                    const newShapes = gd.layout.shapes;
+                    if (!equals(currentShapes, newShapes)) {
+                        setProps({
+                            figure: {
+                                ...figure,
+                                layout: {
+                                    ...figure?.layout,
+                                    shapes: newShapes,
+                                },
+                            },
+                        });
+                    }
+                }
+            }
         });
         gd.on('plotly_restyle', eventData => {
             const restyle = filterEventData(gd, eventData, 'restyle');

components/dash-core-components/src/utils/dropdownSearch.ts

@@ -23,6 +23,7 @@ export interface SanitizedOptions {
     options: DetailedOption[];
     indexes: string[];
     valueSet: Set<OptionValue>;
+    search: Search;
 }
 
 // Single-pass sanitization via sanitizeOptions, plus detection of
@@ -55,38 +56,48 @@ export function sanitizeDropdownOptions(
         indexes.push('search');
     }
 
-    return {options: sanitized, indexes, valueSet};
-}
-
-export function filterOptions(
-    options: SanitizedOptions,
-    searchValue?: string,
-    search_order?: 'index' | 'original'
-): DetailedOption[] {
-    if (!searchValue) {
-        return options.options;
-    }
-
+    // Build the search index ONCE during sanitization
     const search = new Search('value');
     search.searchIndex = new UnorderedSearchIndex();
     search.indexStrategy = new AllSubstringsIndexStrategy();
     search.tokenizer = TOKENIZER;
 
-    options.indexes.forEach(index => {
+    indexes.forEach(index => {
         search.addIndex(index);
     });
 
-    if (options.options.length > 0) {
-        search.addDocuments(options.options);
+    if (sanitized.length > 0) {
+        search.addDocuments(sanitized);
+    }
+
+    return {
+        options: sanitized,
+        indexes,
+        valueSet,
+        search,
+    };
+}
+
+export function filterOptions(
+    options: SanitizedOptions,
+    searchValue?: DropdownProps['search_value'],
+    searchOrder?: DropdownProps['search_order']
+): DetailedOption[] {
+    if (!searchValue) {
+        return options.options;
     }
 
-    const searchResults =
-        (search.search(searchValue) as DetailedOption[]) || [];
+    const results =
+        (options.search.search(searchValue) as DetailedOption[]) || [];
 
-    if (search_order === 'original') {
-        const resultSet = new Set(searchResults);
-        return options.options.filter(option => resultSet.has(option));
+    // Preserve original option order
+    if (searchOrder === 'original') {
+        const resultSet = new Set(results.map(option => option.value));
+
+        return options.options.filter(option =>
+            resultSet.has(option.value)
+        );
     }
 
-    return searchResults;
+    return results;
 }

components/dash-core-components/tests/integration/graph/test_graph_basics.py

@@ -412,3 +412,138 @@ def toggle_figure(n_clicks):
     )
 
     assert dash_dcc.get_logs() == []
+
+
+def test_grbs009_graph_click_same_point_twice(dash_dcc):
+    """Clicking the same point twice should trigger callback both times."""
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Graph(
+                id="graph",
+                figure=go.Figure(
+                    data=[go.Scatter(x=[1, 2, 3], y=[1, 2, 3], mode="markers")],
+                ),
+                style={"width": 600, "height": 400},
+            ),
+            html.Div(id="output", children="[]"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("graph", "clickData"),
+        prevent_initial_call=True,
+    )
+    def on_click(click_data):
+        # Return the timestamp to verify each click has a unique one
+        return json.dumps(click_data.get("timestamp", "missing"))
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#graph .main-svg")
+
+    # Click on the graph area - uses the drag overlay which receives clicks
+    graph = dash_dcc.find_element("#graph .nsewdrag")
+    graph.click()
+
+    # Wait for callback to fire and verify timestamp exists
+    dash_dcc.wait_for_contains_text("#output", "")
+    first_output = dash_dcc.find_element("#output").text
+    assert first_output != "[]", "First click should trigger callback"
+    assert first_output != '"missing"', "clickData should contain timestamp"
+
+    # Click again - should trigger callback with different timestamp
+    graph.click()
+    sleep(0.5)
+    second_output = dash_dcc.find_element("#output").text
+    assert (
+        second_output != first_output
+    ), "Second click should trigger callback with new timestamp"
+
+    assert dash_dcc.get_logs() == []
+
+
+def test_grbs010_graph_patch_deeply_nested_figure(dash_dcc):
+    """Patching deeply nested figure properties should work correctly."""
+    from dash import Patch
+
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Graph(
+                id="graph",
+                figure={
+                    "data": [
+                        {
+                            "x": [1, 2, 3],
+                            "y": [1, 2, 3],
+                            "marker": {"color": "red", "size": 10},
+                            "type": "scatter",
+                            "mode": "markers",
+                        }
+                    ],
+                    "layout": {"title": {"text": "Initial Title"}},
+                },
+                style={"width": 600, "height": 400},
+            ),
+            html.Button("Patch Color", id="patch-color-btn"),
+            html.Button("Patch Title", id="patch-title-btn"),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("graph", "figure"),
+        Input("patch-color-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def patch_color(n):
+        p = Patch()
+        p.data[0].marker.color = "blue" if n % 2 else "green"
+        return p
+
+    @app.callback(
+        Output("graph", "figure", allow_duplicate=True),
+        Input("patch-title-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def patch_title(n):
+        p = Patch()
+        p.layout.title.text = f"Updated Title {n}"
+        return p
+
+    @app.callback(
+        Output("output", "children"),
+        Input("graph", "figure"),
+    )
+    def show_figure_state(figure):
+        color = figure.get("data", [{}])[0].get("marker", {}).get("color", "unknown")
+        title = figure.get("layout", {}).get("title", {}).get("text", "unknown")
+        return f"color={color}, title={title}"
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#graph .main-svg")
+
+    # Initial state
+    dash_dcc.wait_for_text_to_equal("#output", "color=red, title=Initial Title")
+
+    # Patch the color
+    dash_dcc.find_element("#patch-color-btn").click()
+    dash_dcc.wait_for_text_to_equal("#output", "color=blue, title=Initial Title")
+
+    # Patch the title
+    dash_dcc.find_element("#patch-title-btn").click()
+    dash_dcc.wait_for_text_to_equal("#output", "color=blue, title=Updated Title 1")
+
+    # Patch color again - should toggle
+    dash_dcc.find_element("#patch-color-btn").click()
+    dash_dcc.wait_for_text_to_equal("#output", "color=green, title=Updated Title 1")
+
+    # Multiple rapid patches
+    dash_dcc.find_element("#patch-title-btn").click()
+    dash_dcc.find_element("#patch-title-btn").click()
+    dash_dcc.wait_for_text_to_equal("#output", "color=green, title=Updated Title 3")
+
+    assert dash_dcc.get_logs() == []

tests/integration/callbacks/test_arbitrary_callbacks.py

@@ -1,6 +1,8 @@
 import time
 from multiprocessing import Value
 
+from flaky import flaky
+
 from dash import (
     Dash,
     Input,
@@ -234,6 +236,7 @@ def test_arb007_clientside_no_output(dash_duo):
     dash_duo.wait_for_text_to_equal("#output", "start2")
 
 
+@flaky(max_runs=3)
 def test_arb008_set_props_chain_cb(dash_duo):
     app = Dash(suppress_callback_exceptions=True)