Skip to content

Store callback Output value in persistence storage #3279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 30, 2025
Merged

Store callback Output value in persistence storage #3279

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc6522c
Store callback Output value in persistence storage
petar-qb Apr 16, 2025
11f94f2
Linting minor change
petar-qb Apr 16, 2025
e1327a8
Removing unnecessary comment
petar-qb Apr 17, 2025
f5068f6
Merge branch 'dev' of github.com:petar-qb/dash into fix/store-output-…
petar-qb Apr 17, 2025
af9bbc7
Merge branch 'dev' of github.com:petar-qb/dash into fix/store-output-…
petar-qb Apr 29, 2025
72cdc37
Fix rdps011 failing test
petar-qb Apr 29, 2025
fc5eea6
Adding a changelog
petar-qb Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions dash/dash-renderer/src/actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -7,6 +7,7 @@ import cookie from 'cookie';
import {validateCallbacksToLayout} from './dependencies';
import {includeObservers, getLayoutCallbacks} from './dependencies_ts';
import {computePaths, getPath} from './paths';
import {recordUiEdit} from '../persistence';

export const onError = createAction(getAction('ON_ERROR'));
export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
Expand All @@ -17,10 +18,20 @@ 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'));
export const insertComponent = createAction(getAction('INSERT_COMPONENT'));
export const removeComponent = createAction(getAction('REMOVE_COMPONENT'));

// 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 addComponentToLayout = payload => (dispatch, getState) => {
const {paths} = getState();
dispatch(insertComponent(payload));
Expand Down
5 changes: 4 additions & 1 deletion dash/dash-renderer/src/observers/executedCallbacks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import {
pathOr
} from 'ramda';

import {ThunkDispatch} from 'redux-thunk';
import {AnyAction} from 'redux';

import {IStoreState} from '../store';

import {
Expand Down Expand Up @@ -63,7 +66,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
// 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);
dispatch(
(dispatch as ThunkDispatch<any, any, AnyAction>)(
updateProps({
itempath,
props,
Expand Down
53 changes: 14 additions & 39 deletions dash/dash-renderer/src/persistence.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,46 +501,21 @@ export function prunePersistence(layout, newProps, dispatch) {
depersistedProps = mergeRight(props, update);
}

if (finalPersistence) {
if (finalPersistence && persistenceChanged) {
const finalStorage = getStore(finalPersistenceType, dispatch);

if (persistenceChanged) {
// apply new persistence
forEach(
persistedProp =>
modProp(
getValsKey(id, persistedProp, finalPersistence),
finalStorage,
element,
depersistedProps,
persistedProp,
update
),
filter(notInNewProps, finalPersistedProps)
);
}

// now the main point - clear any edit of a prop that changed
// note that this is independent of the new prop value.
const transforms = element.persistenceTransforms || {};
for (const propName in newProps) {
const propTransforms = transforms[propName];
if (propTransforms) {
for (const propPart in propTransforms) {
finalStorage.removeItem(
getValsKey(
id,
`${propName}.${propPart}`,
finalPersistence
)
);
}
} else {
finalStorage.removeItem(
getValsKey(id, propName, finalPersistence)
);
}
Comment on lines -525 to -542
Copy link
Contributor

@T4rk1n T4rk1n Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What did this do? It's inclusion/removal doesn't seem to have an effect.

Copy link
Contributor Author

@petar-qb petar-qb Apr 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue with this code is that it clears the persisted value before the new selection is written via recordUiEdit, once the callback is triggered. For example, if the storage initially contains [[1, 2], []] and callback_select_all (which selects [1, 2, 3]) is triggered:

  1. The removed code clears the persistence storage prematurely which causes the original value (originalVal) to be lost, which is problematic.
  2. Then recordUiEdit writes [[1, 2, 3], [1, 2]] into storage.

This is incorrect because what should be persisted is [[1, 2, 3], []].

I might need to handle this differently. What do you think?

}
// apply new persistence
forEach(
persistedProp =>
modProp(
getValsKey(id, persistedProp, finalPersistence),
finalStorage,
element,
depersistedProps,
persistedProp,
update
),
filter(notInNewProps, finalPersistedProps)
);
}
return persistenceChanged ? mergeRight(newProps, update) : newProps;
}
5 changes: 0 additions & 5 deletions dash/dash-renderer/src/wrapper/DashWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {DashLayoutPath, UpdatePropsPayload} from '../types/component';
import {DashConfig} from '../config';
import {notifyObservers, onError, updateProps} from '../actions';
import {getWatchedKeys, stringifyId} from '../actions/dependencies';
import {recordUiEdit} from '../persistence';
import {
createElement,
getComponentLayout,
Expand Down Expand Up @@ -131,10 +130,6 @@ function DashWrapper({
const watchedKeys = getWatchedKeys(id, keys(changedProps), graphs);

batch(() => {
// setProps here is triggered by the UI - record these changes
// for persistence
recordUiEdit(renderComponent, newProps, dispatch);

// Only dispatch changes to Dash if a watched prop changed
if (watchedKeys.length) {
dispatch(
Expand Down