Enable storing the callback outputs in the persistence storage

dash/dash-renderer/src/TreeContainer.js

@@ -26,7 +26,6 @@ import {
 } from 'ramda';
 import {notifyObservers, updateProps, onError} from './actions';
 import isSimpleComponent from './isSimpleComponent';
-import {recordUiEdit} from './persistence';
 import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
 import checkPropTypes from './checkPropTypes';
 import {getWatchedKeys, stringifyId} from './actions/dependencies';
@@ -132,8 +131,7 @@ class BaseTreeContainer extends Component {
     }
 
     setProps(newProps) {
-        const {_dashprivate_dispatch, _dashprivate_path, _dashprivate_layout} =
-            this.props;
+        const {_dashprivate_dispatch, _dashprivate_path} = this.props;
 
         const oldProps = this.getLayoutProps();
         const {id} = oldProps;
@@ -163,10 +161,6 @@ class BaseTreeContainer extends Component {
                 );
 
                 batch(() => {
-                    // setProps here is triggered by the UI - record these changes
-                    // for persistence
-                    recordUiEdit(_dashprivate_layout, newProps, dispatch);
-
                     // Only dispatch changes to Dash if a watched prop changed
                     if (watchedKeys.length) {
                         dispatch(

dash/dash-renderer/src/actions/index.js

@@ -1,4 +1,4 @@
-import {once} from 'ramda';
+import {once, path} from 'ramda';
 import {createAction} from 'redux-actions';
 import {addRequestedCallbacks} from './callbacks';
 import {getAppState} from '../reducers/constants';
@@ -7,6 +7,7 @@ import cookie from 'cookie';
 import {validateCallbacksToLayout} from './dependencies';
 import {includeObservers, getLayoutCallbacks} from './dependencies_ts';
 import {getPath} from './paths';
+import {recordUiEdit} from '../persistence';
 
 export const onError = createAction(getAction('ON_ERROR'));
 export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
@@ -17,7 +18,17 @@ export const setHooks = createAction(getAction('SET_HOOKS'));
 export const setLayout = createAction(getAction('SET_LAYOUT'));
 export const setPaths = createAction(getAction('SET_PATHS'));
 export const setRequestQueue = createAction(getAction('SET_REQUEST_QUEUE'));
-export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
+
+// Change the variable name of the action
+export const onPropChange = createAction(getAction('ON_PROP_CHANGE'));
+
+export function updateProps(payload) {
+    return (dispatch, getState) => {
+        const component = path(payload.itempath, getState().layout);
+        recordUiEdit(component, payload.props, dispatch);
+        dispatch(onPropChange(payload));
+    };
+}
 
 export const dispatchError = dispatch => (message, lines) =>
     dispatch(

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

@@ -11,6 +11,9 @@ import {
     pathOr
 } from 'ramda';
 
+import {ThunkDispatch} from 'redux-thunk';
+import {AnyAction} from 'redux';
+
 import {IStoreState} from '../store';
 
 import {
@@ -50,21 +53,24 @@ const observer: IStoreObserverDefinition<IStoreState> = {
             if (!itempath) {
                 return false;
             }
-
             // This is a callback-generated update.
-            // Check if this invalidates existing persisted prop values,
-            // or if persistence changed, whether this updates other props.
-            updatedProps = prunePersistence(
-                path(itempath, layout),
-                updatedProps,
-                dispatch
-            );
+            let props = updatedProps;
+
+            if (id === '_pages_content') {
+                // Check if this invalidates existing persisted prop values,
+                // or if persistence changed, whether this updates other props.
+                updatedProps = prunePersistence(
+                    path(itempath, layout),
+                    updatedProps,
+                    dispatch
+                );
 
-            // In case the update contains whole components, see if any of
-            // those components have props to update to persist user edits.
-            const {props} = applyPersistence({props: updatedProps}, dispatch);
+                // In case the update contains whole components, see if any of
+                // those components have props to update to persist user edits.
+                props = applyPersistence({props: updatedProps}, dispatch).props;
+            }
 
-            dispatch(
+            (dispatch as ThunkDispatch<any, any, AnyAction>)(
                 updateProps({
                     itempath,
                     props,

dash/dash-renderer/src/persistence.js

@@ -307,6 +307,10 @@ const getProps = layout => {
 };
 
 export function recordUiEdit(layout, newProps, dispatch) {
+    if (newProps === undefined) {
+        return;
+    }
+
     const {
         canPersist,
         id,
@@ -316,35 +320,47 @@ export function recordUiEdit(layout, newProps, dispatch) {
         persisted_props,
         persistence_type
     } = getProps(layout);
-    if (!canPersist || !persistence) {
-        return;
-    }
 
-    forEach(persistedProp => {
-        const [propName, propPart] = persistedProp.split('.');
-        if (newProps[propName] !== undefined) {
-            const storage = getStore(persistence_type, dispatch);
-            const {extract} = getTransform(element, propName, propPart);
-
-            const valsKey = getValsKey(id, persistedProp, persistence);
-            let originalVal = extract(props[propName]);
-            const newVal = extract(newProps[propName]);
-
-            // mainly for nested props with multiple persisted parts, it's
-            // possible to have the same value as before - should not store
-            // in this case.
-            if (originalVal !== newVal) {
-                if (storage.hasItem(valsKey)) {
-                    originalVal = storage.getItem(valsKey)[1];
-                }
+    if (canPersist && persistence) {
+        forEach(persistedProp => {
+            const [propName, propPart] = persistedProp.split('.');
+            if (newProps[propName] !== undefined) {
+                const storage = getStore(persistence_type, dispatch);
+                const {extract} = getTransform(element, propName, propPart);
+                const valsKey = getValsKey(id, persistedProp, persistence);
+
+                let originalVal = storage.hasItem(valsKey)
+                    ? storage.getItem(valsKey)[1]
+                    : extract(props[propName]);
+                let newVal = extract(newProps[propName]);
+
                 const vals =
                     originalVal === undefined
                         ? [newVal]
                         : [newVal, originalVal];
+
                 storage.setItem(valsKey, vals, dispatch);
             }
+        }, persisted_props);
+    }
+
+    // Recursively record UI edits for children
+    const {children} = props;
+    if (!newProps?.children) {
+        return;
+    }
+    if (Array.isArray(children)) {
+        if (children.length !== newProps['children'].length) {
+            return;
         }
-    }, persisted_props);
+        children.forEach((child, i) => {
+            if (type(child) === 'Object' && child.props) {
+                recordUiEdit(child, newProps['children'][i]['props'], dispatch);
+            }
+        });
+    } else if (type(children) === 'Object' && children.props) {
+        recordUiEdit(children, newProps['children']['props'], dispatch);
+    }
 }
 
 /*