Skip to content

fix multiple concurrent loading states #1310

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
Jun 25, 2020
Merged

fix multiple concurrent loading states #1310

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b673e3
fix multiple concurrnt loading states
alexcjohnson Jun 24, 2020
b012fd6
changelog for loading states fix
alexcjohnson Jun 24, 2020
32939ef
move new loading state test to its own file
alexcjohnson Jun 25, 2020
a225922
add chained loading states test and format
alexcjohnson Jun 25, 2020
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
19 changes: 7 additions & 12 deletions dash-renderer/src/observers/loadingMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
equals,
flatten,
forEach,
isEmpty,
map,
reduce
Expand Down Expand Up @@ -43,26 +42,22 @@ const observer: IStoreObserverDefinition<IStoreState> = {
const nextMap: any = isEmpty(loadingPaths) ?
null :
reduce(
(res, path) => {
(res, {id, property, path}) => {
let target = res;
const idprop = {
id: path.id,
property: path.property
};
const idprop = {id, property};

// Assign all affected props for this path and nested paths
target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
target.__dashprivate__idprops__.push(idprop);

forEach(p => {
target = (target[p] =
target[p] ??
p === 'children' ? [] : {}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.

Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

)
path.forEach((p, i) => {
target = (target[p] = target[p] ??
(p === 'children' && typeof path[i + 1] === 'number' ? [] : {})
);

target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
target.__dashprivate__idprops__.push(idprop);
}, path.path);
});

// Assign one affected prop for this path
target.__dashprivate__idprop__ = target.__dashprivate__idprop__ || idprop;
Expand Down
63 changes: 62 additions & 1 deletion tests/integration/renderer/test_multi_output.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from multiprocessing import Value
from multiprocessing import Value, Lock

import dash
from dash.dependencies import Input, Output
Expand Down Expand Up @@ -164,3 +164,64 @@ def test_rdmo005_set_props_behavior(dash_duo):

dash_duo.find_element("#container input").send_keys("hello input w/o ID")
dash_duo.wait_for_text_to_equal("#container input", "hello input w/o ID")


def test_rdmo006_multi_loading_components(dash_duo):
lock = Lock()

app = dash.Dash(__name__)

app.layout = html.Div(
children=[
html.H3("Edit text input to see loading state"),
dcc.Input(id="input-3", value='Input triggers the loading states'),
dcc.Loading(className="loading-1", children=[
html.Div(id="loading-output-1")
], type="default"),
html.Div(
[
dcc.Loading(
className="loading-2",
children=[html.Div([html.Div(id="loading-output-2")])],
type="circle",
),
dcc.Loading(
className="loading-3",
children=dcc.Graph(id='graph'),
type="cube",
)
]
),
],
)

@app.callback(
[
Output("graph", "figure"),
Output("loading-output-1", "children"),
Output("loading-output-2", "children"),
],
[Input("input-3", "value")])
def input_triggers_nested(value):
with lock:
return dict(data=[dict(y=[1, 4, 2, 3])]), value, value

def wait_for_all_spinners():
dash_duo.find_element('.loading-1 .dash-spinner.dash-default-spinner')
dash_duo.find_element('.loading-2 .dash-spinner.dash-sk-circle')
dash_duo.find_element('.loading-3 .dash-spinner.dash-cube-container')

def wait_for_no_spinners():
dash_duo.wait_for_no_elements('.dash-spinner')

with lock:
dash_duo.start_server(app)
wait_for_all_spinners()

wait_for_no_spinners()

with lock:
dash_duo.find_element('#input-3').send_keys('X')
wait_for_all_spinners()

wait_for_no_spinners()