Issue 1350 - Multi-input callback with sync event handling (#1385)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -3,6 +3,9 @@ All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
+### Changed
+- [#1385](https://github.com/plotly/dash/pull/1385) Closes [#1350](https://github.com/plotly/dash/issues/1350) and fixes a previously undefined callback behavior when multiple elements are stacked on top of one another and their `n_clicks` props are used as inputs of the same callback. The callback will now trigger once with all the triggered `n_clicks` props changes.
+
 ### Fixed
 - [#1384](https://github.com/plotly/dash/pull/1384) Fixed a bug introduced by [#1180](https://github.com/plotly/dash/pull/1180) breaking use of `prevent_initial_call` as a positional arg in callback definitions
 

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/components/core/DocumentTitle.react.js

@@ -0,0 +1,58 @@
+import { IStoreObserverDefinition } from '../StoreObserver';
+import { IStoreState } from '../store';
+
+const updateTitle = (getState: () => IStoreState) => {
+    const {
+        config,
+        isLoading
+    } = getState();
+
+    const update_title = config?.update_title;
+
+    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));
+
+            const title = document.querySelector('title');
+            if (title) {
+                observer.mutationObserver.observe(
+                    title,
+                    { subtree: true, childList: true, attributes: true, characterData: true }
+                );
+            }
+        }
+
+        updateTitle(getState);
+    }
+};
+
+export default observer;

dash-renderer/src/observers/documentTitle.ts

@@ -4,29 +4,34 @@ import {
     difference,
     filter,
     flatten,
+    forEach,
     groupBy,
     includes,
     intersection,
     isEmpty,
     isNil,
     map,
+    mergeLeft,
+    mergeWith,
+    pluck,
+    reduce,
     values
 } from 'ramda';
 
 import { IStoreState } from '../store';
 
 import {
     aggregateCallbacks,
-    removeRequestedCallbacks,
     removePrioritizedCallbacks,
     removeExecutingCallbacks,
     removeWatchedCallbacks,
-    addRequestedCallbacks,
     addPrioritizedCallbacks,
     addExecutingCallbacks,
     addWatchedCallbacks,
     removeBlockedCallbacks,
-    addBlockedCallbacks
+    addBlockedCallbacks,
+    addRequestedCallbacks,
+    removeRequestedCallbacks
 } from '../actions/callbacks';
 
 import { isMultiValued } from '../actions/dependencies';
@@ -45,17 +50,23 @@ 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();
 
+        const initialRequested = requested.slice(0);
+
         const pendingCallbacks = getPendingCallbacks(callbacks);
 
         /*
@@ -78,17 +89,37 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             1. Remove duplicated `requested` callbacks - give precedence to newer callbacks over older ones
         */
 
-        /*
-            Extract all but the first callback from each IOS-key group
-            these callbacks are duplicates.
-        */
-        const rDuplicates = flatten(map(
-            group => group.slice(0, -1),
-            values(
-                groupBy<ICallback>(
-                    getUniqueIdentifier,
-                    requested
-                )
+        let rDuplicates: ICallback[] = [];
+        let rMergedDuplicates: ICallback[] = [];
+
+        forEach(group => {
+            if (group.length === 1) {
+                // keep callback if its the only one of its kind
+                rMergedDuplicates.push(group[0]);
+            } else {
+                const initial = group.find(cb => cb.initialCall);
+                if (initial) {
+                    // drop the initial callback if it's not alone
+                    rDuplicates.push(initial);
+                }
+
+                const groupWithoutInitial = group.filter(cb => cb !== initial);
+                if (groupWithoutInitial.length === 1) {
+                    // if there's only one callback beside the initial one, keep that callback
+                    rMergedDuplicates.push(groupWithoutInitial[0]);
+                } else {
+                    // otherwise merge all remaining callbacks together
+                    rDuplicates = concat(rDuplicates, groupWithoutInitial);
+                    rMergedDuplicates.push(mergeLeft({
+                        changedPropIds: reduce(mergeWith(Math.max), {}, pluck('changedPropIds', groupWithoutInitial)),
+                        executionGroup: filter(exg => !!exg, pluck('executionGroup', groupWithoutInitial)).slice(-1)[0]
+                    }, groupWithoutInitial.slice(-1)[0]) as ICallback);
+                }
+            }
+        }, values(
+            groupBy<ICallback>(
+                getUniqueIdentifier,
+                requested
             )
         ));
 
@@ -97,7 +128,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             Clean up the `requested` list - during the dispatch phase,
             duplicates will be removed for real
         */
-        requested = difference(requested, rDuplicates);
+        requested = rMergedDuplicates;
 
         /*
             2. Remove duplicated `prioritized`, `executing` and `watching` callbacks
@@ -312,16 +343,24 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             dropped
         );
 
+        requested = difference(
+            requested,
+            readyCallbacks
+        );
+
+        const added = difference(requested, initialRequested);
+        const removed = difference(initialRequested, requested);
+
         dispatch(aggregateCallbacks([
+            // Clean up requested callbacks
+            added.length ? addRequestedCallbacks(added) : null,
+            removed.length ? removeRequestedCallbacks(removed) : null,
             // Clean up duplicated callbacks
-            rDuplicates.length ? removeRequestedCallbacks(rDuplicates) : null,
             pDuplicates.length ? removePrioritizedCallbacks(pDuplicates) : null,
             bDuplicates.length ? removeBlockedCallbacks(bDuplicates) : null,
             eDuplicates.length ? removeExecutingCallbacks(eDuplicates) : null,
             wDuplicates.length ? removeWatchedCallbacks(wDuplicates) : null,
             // Prune callbacks
-            rRemoved.length ? removeRequestedCallbacks(rRemoved) : null,
-            rAdded.length ? addRequestedCallbacks(rAdded) : null,
             pRemoved.length ? removePrioritizedCallbacks(pRemoved) : null,
             pAdded.length ? addPrioritizedCallbacks(pAdded) : null,
             bRemoved.length ? removeBlockedCallbacks(bRemoved) : null,
@@ -330,15 +369,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             eAdded.length ? addExecutingCallbacks(eAdded) : null,
             wRemoved.length ? removeWatchedCallbacks(wRemoved) : null,
             wAdded.length ? addWatchedCallbacks(wAdded) : null,
-            // Prune circular callbacks
-            rCirculars.length ? removeRequestedCallbacks(rCirculars) : null,
-            // Prune circular assumptions
-            oldBlocked.length ? removeRequestedCallbacks(oldBlocked) : null,
-            newBlocked.length ? addRequestedCallbacks(newBlocked) : null,
-            // Drop non-triggered initial callbacks
-            dropped.length ? removeRequestedCallbacks(dropped) : null,
             // Promote callbacks
-            readyCallbacks.length ? removeRequestedCallbacks(readyCallbacks) : null,
             readyCallbacks.length ? addPrioritizedCallbacks(readyCallbacks) : null
         ]));
     },

dash-renderer/src/observers/requestedCallbacks.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/store.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;
+}