Skip to content

Fix ordering of pmc after subtree update. #2388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 23, 2023
Merged

Fix ordering of pmc after subtree update. #2388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13911b3
Add test pmc update subtree ordering.
T4rk1n Jan 16, 2023
94521e3
Fix pmc path ordering update.
T4rk1n Jan 16, 2023
c2f3faf
Update changelog
T4rk1n Jan 16, 2023
92ef512
Merge branch 'dev' into fix-2368
T4rk1n Jan 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ This project adheres to [Semantic Versioning](https://semver.org/).

## Unreleased


### Added

- [#2389](https://github.com/plotly/dash/pull/2389) Added `disable_n_clicks` prop to all html components to make it possible to remove onclick event listeners

## Fixed

- [#2388](https://github.com/plotly/dash/pull/2388) Fix [#2368](https://github.com/plotly/dash/issues/2368) ordering or Pattern Matching ALL after update to the subtree.

### Updated

- [#2367](https://github.com/plotly/dash/pull/2367) Updated the default `favicon.ico` to the current Plotly logo
Expand Down
13 changes: 11 additions & 2 deletions dash/dash-renderer/src/actions/paths.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import {
filter,
find,
forEachObjIndexed,
insert,
path,
propEq,
props
props,
indexOf
} from 'ramda';

import {crawlLayout} from './utils';
Expand Down Expand Up @@ -46,7 +48,14 @@ export function computePaths(subTree, startingPath, oldPaths, events) {
const values = props(keys, id);
const keyStr = keys.join(',');
const paths = (objs[keyStr] = objs[keyStr] || []);
paths.push({values, path: concat(startingPath, itempath)});
const oldie = oldObjs[keyStr] || [];
const item = {values, path: concat(startingPath, itempath)};
const index = indexOf(item, oldie);
if (index === -1) {
paths.push(item);
} else {
objs[keyStr] = insert(index, item, paths);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't quite put my finger on it, but I think there's a situation here where either the index you end up inserting at isn't what it should be anymore, or the item looks new - so gets put at the end instead of in the middle - but it's just a modification of the old item.

What I think we implicitly really want is for objs[keystr] to wind up sorted by path (ie in increasing value of the first item in the path that differs between any two elements). And if I'm reading this correctly, the only case in which this matters is when we saved some of the old paths (line 35 above) and added more items with the same keyStr here.

So perhaps we could do something like save a record of which keyStr's (oldKeys) we pre-populated above, then when we get here if we find a keyStr in that set we insert the new item in the list before the first item with a later path, if any; otherwise we push the new item on the end.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure there is way currently to trigger the situation you are describing, the issue this fix is that the fix for pattern matching callback with component as props reevaluate paths of the parent of the prop and thus was updating the existing pmc indexes. Otherwise currently the subtree is updated entirely from the callback and evaluated properly.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK - I can't construct one either. Maybe partial props will expose something new... we'll see. Just keep this in mind as we go along in case any new bug reports pop up!

} else {
strs[id] = concat(startingPath, itempath);
}
Expand Down
69 changes: 69 additions & 0 deletions tests/integration/callbacks/test_wildcards.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,3 +483,72 @@ def assert_callback_context(items_text):
dash_duo.wait_for_text_to_equal("#totals", "3 total item(s)")
assert_count(3)
assert_callback_context(["apples", "bananas", "carrots"])


def test_cbwc007_pmc_update_subtree_ordering(dash_duo):
# Test for regression bug #2368, updated pmc subtree should keep order.
app = dash.Dash(__name__)

app.layout = html.Div(
[
html.Button("refresh options", id="refresh-options"),
html.Br(),
html.Div(
[
*[
dcc.Dropdown(
id={"type": "demo-options", "index": i},
placeholder=f"dropdown-{i}",
style={"width": "200px"},
)
for i in range(2)
],
dcc.Dropdown(
id={"type": "demo-options", "index": 2},
options=[f"option2-{i}" for i in range(3)],
placeholder="dropdown-2",
style={"width": "200px"},
),
],
id="dropdown-container",
),
html.Br(),
html.Pre(id="selected-values"),
],
style={"padding": "50px"},
)

@app.callback(
[
Output({"type": "demo-options", "index": 0}, "options"),
Output({"type": "demo-options", "index": 1}, "options"),
],
Input("refresh-options", "n_clicks"),
prevent_initial_call=True,
)
def refresh_options(_):
return [[f"option0-{i}" for i in range(3)], [f"option1-{i}" for i in range(3)]]

@app.callback(
Output("selected-values", "children"),
Input({"type": "demo-options", "index": ALL}, "value"),
)
def update_selected_values(values):
return str(values)

dash_duo.start_server(app)
dash_duo.select_dcc_dropdown(".dash-dropdown:nth-child(3)", index=2)

dash_duo.wait_for_text_to_equal("#selected-values", "[None, None, 'option2-2']")

dash_duo.wait_for_element("#refresh-options").click()

dash_duo.select_dcc_dropdown(".dash-dropdown:nth-child(2)", index=2)
dash_duo.wait_for_text_to_equal(
"#selected-values", "[None, 'option1-2', 'option2-2']"
)

dash_duo.select_dcc_dropdown(".dash-dropdown:nth-child(1)", index=2)
dash_duo.wait_for_text_to_equal(
"#selected-values", "['option0-2', 'option1-2', 'option2-2']"
)