Issue 1350 - Multi-input callback with sync event handling

dash-renderer/src/APIController.react.js

@@ -20,6 +20,7 @@ import {applyPersistence} from './persistence';
 import {getAppState} from './reducers/constants';
 import {STATUS} from './constants/constants';
 import {getLoadingState, getLoadingHash} from './utils/TreeContainer';
+import wait from './utils/wait';
 
 export const DashContext = createContext({});
 
@@ -63,8 +64,11 @@ const UnconnectedContainer = props => {
 
     useEffect(() => {
         if (renderedTree.current) {
-            renderedTree.current = false;
-            events.current.emit('rendered');
+            (async () => {
+                renderedTree.current = false;
+                await wait(0);
+                events.current.emit('rendered');
+            })();
         }
     });
 

dash-renderer/src/AppContainer.react.js

@@ -2,7 +2,6 @@ import {connect} from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 import APIController from './APIController.react';
-import DocumentTitle from './components/core/DocumentTitle.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
 import Reloader from './components/core/Reloader.react';
@@ -48,7 +47,6 @@ class UnconnectedAppContainer extends React.Component {
             <React.Fragment>
                 {show_undo_redo ? <Toolbar /> : null}
                 <APIController />
-                <DocumentTitle />
                 <Loading />
                 <Reloader />
             </React.Fragment>

dash-renderer/src/StoreObserver.ts

@@ -21,6 +21,7 @@ interface IStoreObserverState<TStore> {
 export interface IStoreObserverDefinition<TStore> {
     observer: Observer<Store<TStore>>;
     inputs: string[]
+    [key: string]: any;
 }
 
 export default class StoreObserver<TStore> {

dash-renderer/src/observers/documentTitle.ts

@@ -0,0 +1,54 @@
+import { IStoreObserverDefinition } from '../StoreObserver';
+import { IStoreState } from '../store';
+
+const updateTitle = (getState: () => IStoreState) => {
+    const {
+        config,
+        isLoading
+    } = getState();
+
+    const { update_title } = config;
+
+    if (!update_title) {
+        return;
+    }
+
+    if (isLoading) {
+        if (document.title !== update_title) {
+            observer.title = document.title;
+            document.title = update_title;
+        }
+    } else {
+        if (document.title === update_title) {
+            document.title = observer.title;
+        } else {
+            observer.title = document.title;
+        }
+    }
+};
+
+const observer: IStoreObserverDefinition<IStoreState> = {
+    inputs: ['isLoading'],
+    mutationObserver: undefined,
+    observer: ({
+        getState
+    }) => {
+        const {
+            config
+        } = getState();
+
+        if (observer.config !== config) {
+            observer.config = config;
+            observer.mutationObserver?.disconnect();
+            observer.mutationObserver = new MutationObserver(() => updateTitle(getState));
+            observer.mutationObserver.observe(
+                document.querySelector('title'),
+                { subtree: true, childList: true, attributes: true, characterData: true }
+            );
+        }
+
+        updateTitle(getState);
+    }
+};
+
+export default observer;

dash-renderer/src/observers/requestedCallbacks.ts

@@ -1,5 +1,6 @@
 import {
     all,
+    assoc,
     concat,
     difference,
     filter,
@@ -10,6 +11,9 @@ import {
     isEmpty,
     isNil,
     map,
+    mergeAll,
+    partition,
+    pluck,
     values
 } from 'ramda';
 
@@ -45,14 +49,18 @@ import {
     IBlockedCallback
 } from '../types/callbacks';
 
+import wait from './../utils/wait';
+
 import { getPendingCallbacks } from '../utils/callbacks';
 import { IStoreObserverDefinition } from '../StoreObserver';
 
 const observer: IStoreObserverDefinition<IStoreState> = {
-    observer: ({
+    observer: async ({
         dispatch,
         getState
     }) => {
+        await wait(0);
+
         const { callbacks, callbacks: { prioritized, blocked, executing, watched, stored }, paths } = getState();
         let { callbacks: { requested } } = getState();
 
@@ -79,25 +87,35 @@ const observer: IStoreObserverDefinition<IStoreState> = {
         */
 
         /*
-            Extract all but the first callback from each IOS-key group
-            these callbacks are duplicates.
+            Group callbacks by identifier and partition based on whether there are duplicates or not.
         */
-        const rDuplicates = flatten(map(
-            group => group.slice(0, -1),
-            values(
-                groupBy<ICallback>(
-                    getUniqueIdentifier,
-                    requested
-                )
+        const [rWithoutDuplicates, rWithDuplicates] = partition(rdg => rdg.length === 1, values(
+            groupBy<ICallback>(
+                getUniqueIdentifier,
+                requested
             )
         ));
 
+        /*
+            Flatten all duplicated callbacks into a list for removal
+        */
+        const rDuplicates = flatten(rWithDuplicates);
+
+        /*
+            Merge duplicate groups into a single callback - merge by giving priority to newer callbacks
+        */
+        const rMergedDuplicates = map(group => assoc(
+            'changedPropIds',
+            mergeAll(pluck('changedPropIds', group)),
+            group[0]
+        ), rWithDuplicates);
+
         /*
             TODO?
             Clean up the `requested` list - during the dispatch phase,
             duplicates will be removed for real
         */
-        requested = difference(requested, rDuplicates);
+        requested = concat(flatten(rWithoutDuplicates), rMergedDuplicates);
 
         /*
             2. Remove duplicated `prioritized`, `executing` and `watching` callbacks
@@ -319,6 +337,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             bDuplicates.length ? removeBlockedCallbacks(bDuplicates) : null,
             eDuplicates.length ? removeExecutingCallbacks(eDuplicates) : null,
             wDuplicates.length ? removeWatchedCallbacks(wDuplicates) : null,
+            // Add merged-duplicated callbacks
+            rMergedDuplicates.length ? addRequestedCallbacks(rMergedDuplicates): null,
             // Prune callbacks
             rRemoved.length ? removeRequestedCallbacks(rRemoved) : null,
             rAdded.length ? addRequestedCallbacks(rAdded) : null,

dash-renderer/src/store.ts

@@ -7,6 +7,7 @@ import { ICallbacksState } from './reducers/callbacks';
 import { LoadingMapState } from './reducers/loadingMap';
 import { IsLoadingState } from './reducers/isLoading';
 
+import documentTitle from './observers/documentTitle';
 import executedCallbacks from './observers/executedCallbacks';
 import executingCallbacks from './observers/executingCallbacks';
 import isLoading from './observers/isLoading'
@@ -33,6 +34,7 @@ const storeObserver = new StoreObserver<IStoreState>();
 const setObservers = once(() => {
     const observe = storeObserver.observe;
 
+    observe(documentTitle);
     observe(isLoading);
     observe(loadingMap);
     observe(requestedCallbacks);

dash-renderer/src/utils/wait.ts

@@ -0,0 +1,8 @@
+export default async (duration: number) => {
+    let _resolve: any;
+    const p = new Promise(resolve => _resolve = resolve);
+
+    setTimeout(_resolve, duration);
+
+    return p;
+}

tests/integration/devtools/test_callback_validation.py

@@ -677,7 +677,7 @@ def c2(children):
 
     @app.callback([Output("a", "children")], [Input("c", "children")])
     def c3(children):
-        return children
+        return (children,)
 
     dash_duo.start_server(app, **debugging)