Issue 1350 - Multi-input callback with sync event handling

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/observers/documentTitle.ts

@@ -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/requestedCallbacks.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/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;
+}