Merge pull request #1815 from plotly/embedded-app-switching

callback_resolved hook, added DESTROYED app state

Author: alexcjohnson

dash/dash-renderer/src/APIController.react.js

@@ -184,7 +184,8 @@ function storeEffect(props, events, setErrorLoading) {
 UnconnectedContainer.propTypes = {
     appLifecycle: PropTypes.oneOf([
         getAppState('STARTED'),
-        getAppState('HYDRATED')
+        getAppState('HYDRATED'),
+        getAppState('DESTROYED')
     ]),
     dispatch: PropTypes.func,
     dependenciesRequest: PropTypes.object,

dash/dash-renderer/src/AppContainer.react.js

@@ -14,6 +14,7 @@ class UnconnectedAppContainer extends React.Component {
         if (
             props.hooks.request_pre !== null ||
             props.hooks.request_post !== null ||
+            props.hooks.callback_resolved !== null ||
             props.hooks.request_refresh_jwt !== null
         ) {
             let hooks = props.hooks;

dash/dash-renderer/src/AppProvider.react.tsx

@@ -19,6 +19,7 @@ AppProvider.propTypes = {
     hooks: PropTypes.shape({
         request_pre: PropTypes.func,
         request_post: PropTypes.func,
+        callback_resolved: PropTypes.func,
         request_refresh_jwt: PropTypes.func
     })
 };
@@ -27,6 +28,7 @@ AppProvider.defaultProps = {
     hooks: {
         request_pre: null,
         request_post: null,
+        callback_resolved: null,
         request_refresh_jwt: null
     }
 };

dash/dash-renderer/src/observers/executingCallbacks.ts

@@ -10,6 +10,7 @@ import {
 
 import {IStoreObserverDefinition} from '../StoreObserver';
 import {IStoreState} from '../store';
+import {getAppState} from '../reducers/constants';
 
 const observer: IStoreObserverDefinition<IStoreState> = {
     observer: ({dispatch, getState}) => {
@@ -44,9 +45,19 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             const result = await cb.executionPromise;
 
             const {
-                callbacks: {watched}
+                callbacks: {watched},
+                appLifecycle,
+                hooks: {callback_resolved}
             } = getState();
 
+            if (appLifecycle !== getAppState('HYDRATED')) {
+                return;
+            }
+
+            if (callback_resolved) {
+                callback_resolved(cb.callback, result);
+            }
+
             // Check if it's been removed from the `watched` list since - on callback completion, another callback may be cancelled
             // Find the callback instance or one that matches its promise (eg. could have been pruned)
             const currentCb = find(

dash/dash-renderer/src/observers/prioritizedCallbacks.ts

@@ -24,6 +24,7 @@ import {
     IPrioritizedCallback
 } from '../types/callbacks';
 import {IStoreObserverDefinition} from '../StoreObserver';
+import {getAppState} from '../reducers/constants';
 
 const sortPriority = (c1: ICallback, c2: ICallback): number => {
     return (c1.priority ?? '') > (c2.priority ?? '') ? -1 : 1;
@@ -67,12 +68,17 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             config,
             hooks,
             layout,
-            paths
+            paths,
+            appLifecycle
         } = getState();
         let {
             callbacks: {prioritized}
         } = getState();
 
+        if (appLifecycle !== getAppState('HYDRATED')) {
+            return;
+        }
+
         const available = Math.max(0, 12 - executing.length - watched.length);
 
         // Order prioritized callbacks based on depth and breadth of callback chain

dash/dash-renderer/src/reducers/constants.js

@@ -1,7 +1,8 @@
 export function getAppState(state) {
     const stateList = {
         STARTED: 'STARTED',
-        HYDRATED: 'HYDRATED'
+        HYDRATED: 'HYDRATED',
+        DESTROYED: 'DESTROYED'
     };
     if (stateList[state]) {
         return stateList[state];

dash/dash-renderer/src/reducers/hooks.js

@@ -2,6 +2,7 @@ const customHooks = (
     state = {
         request_pre: null,
         request_post: null,
+        callback_resolved: null,
         request_refresh_jwt: null,
         bear: false
     },