Generalized persistence

dash-renderer/src/APIController.react.js

@@ -10,6 +10,7 @@ import {
  hydrateInitialOutputs,
  setLayout,
 } from './actions/index';
+import {applyPersistence} from './persistence';
 import apiThunk from './actions/api';
 import {getAppState} from './reducers/constants';
 import {STATUS} from './constants/constants';
@@ -48,7 +49,7 @@ class UnconnectedContainer extends Component {
  dispatch(apiThunk('_dash-layout', 'GET', 'layoutRequest'));
  } else if (layoutRequest.status === STATUS.OK) {
  if (isEmpty(layout)) {
- dispatch(setLayout(layoutRequest.content));
+ dispatch(setLayout(applyPersistence(layoutRequest.content)));
  } else if (isNil(paths)) {
  dispatch(computePaths({subTree: layout, startingPath: []}));
  }

dash-renderer/src/TreeContainer.js

@@ -22,6 +22,7 @@ import {
  type,
 } from 'ramda';
 import {notifyObservers, updateProps} from './actions';
+import {recordUiEdit} from './persistence';
 import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
 import checkPropTypes from 'check-prop-types';
 
@@ -164,6 +165,7 @@ class TreeContainer extends Component {
  _dashprivate_dependencies,
  _dashprivate_dispatch,
  _dashprivate_path,
+ _dashprivate_layout,
  } = this.props;
 
  const id = this.getLayoutProps().id;
@@ -185,6 +187,10 @@ class TreeContainer extends Component {
  )
  )(keysIn(newProps));
 
+ // setProps here is triggered by the UI - record these changes
+ // for persistence
+ recordUiEdit(_dashprivate_layout, newProps);
+
  // Always update this component's props
  _dashprivate_dispatch(
  updateProps({

dash-renderer/src/actions/index.js

@@ -16,6 +16,7 @@ import {
  lensPath,
  mergeLeft,
  mergeDeepRight,
+ path,
  pluck,
  propEq,
  reject,
@@ -31,6 +32,7 @@ import {getAction} from './constants';
 import cookie from 'cookie';
 import {uid, urlBase, isMultiOutputProp, parseMultipleOutputs} from '../utils';
 import {STATUS} from '../constants/constants';
+import {applyPersistence, prunePersistence} from '../persistence';
 
 export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
 export const setRequestQueue = createAction(getAction('SET_REQUEST_QUEUE'));
@@ -530,6 +532,32 @@ function updateOutput(
  });
  }
 
+ function doUpdateProps(id, updatedProps) {
+ const {layout, paths} = getState();
+ const itempath = paths[id];
+ if (!itempath) {
+ return false;
+ }
+
+ // This is a callback-generated update.
+ // Check if this invalidates existing persisted prop values,
+ prunePersistence(path(itempath, layout), updatedProps);
+
+ // In case the update contains whole components, see if any of
+ // those components have props to update to persist user edits.
+ const finalProps = applyPersistence(updatedProps);
+
+ dispatch(
+ updateProps({
+ itempath,
+ props: finalProps,
+ source: 'response',
+ })
+ );
+
+ return finalProps;
+ }
+
  // Clientside hook
  if (clientside_function) {
  let returnValue;
@@ -587,24 +615,20 @@ function updateOutput(
  updateRequestQueue(false, STATUS.OK);
 
  // Update the layout with the new result
- dispatch(
- updateProps({
- itempath: getState().paths[outputId],
- props: updatedProps,
- source: 'response',
- })
- );
+ const appliedProps = doUpdateProps(outputId, updatedProps);
 
  /*
  * This output could itself be a serverside or clientside input
  * to another function
  */
- dispatch(
- notifyObservers({
- id: outputId,
- props: updatedProps,
- })
- );
+ if (appliedProps) {
+ dispatch(
+ notifyObservers({
+ id: outputId,
+ props: appliedProps,
+ })
+ );
+ }
  }
 
  if (isMultiOutputProp(payload.output)) {
@@ -717,20 +741,16 @@ function updateOutput(
  const handleResponse = ([outputIdAndProp, props]) => {
  // Backward compatibility
  const pathKey = multi ? outputIdAndProp : outputComponentId;
- const observerUpdatePayload = {
- itempath: getState().paths[pathKey],
- props,
- source: 'response',
- };
- if (!observerUpdatePayload.itempath) {
+
+ const appliedProps = doUpdateProps(pathKey, props);
+ if (!appliedProps) {
  return;
  }
- dispatch(updateProps(observerUpdatePayload));
 
  dispatch(
  notifyObservers({
  id: pathKey,
- props: props,
+ props: appliedProps,
  })
  );
 
@@ -739,10 +759,11 @@ function updateOutput(
  * paths store.
  * TODO - Do we need to wait for updateProps to finish?
  */
- if (has('children', observerUpdatePayload.props)) {
+ if (has('children', appliedProps)) {
+ const newChildren = appliedProps.children;
  dispatch(
  computePaths({
- subTree: observerUpdatePayload.props.children,
+ subTree: newChildren,
  startingPath: concat(
  getState().paths[pathKey],
  ['props', 'children']
@@ -756,11 +777,8 @@ function updateOutput(
  * new children components
  */
  if (
- contains(
- type(observerUpdatePayload.props.children),
- ['Array', 'Object']
- ) &&
- !isEmpty(observerUpdatePayload.props.children)
+ contains(type(newChildren), ['Array', 'Object']) &&
+ !isEmpty(newChildren)
  ) {
  /*
  * TODO: We're just naively crawling
@@ -770,32 +788,27 @@ function updateOutput(
  * to compute the subtree
  */
  const newProps = {};
- crawlLayout(
- observerUpdatePayload.props.children,
- function appendIds(child) {
- if (hasId(child)) {
- keys(child.props).forEach(childProp => {
- const componentIdAndProp = `${child.props.id}.${childProp}`;
- if (
- has(
- componentIdAndProp,
- InputGraph.nodes
- )
- ) {
- newProps[componentIdAndProp] = {
- id: child.props.id,
- props: {
- [childProp]:
- child.props[
- childProp
- ],
- },
- };
- }
- });
- }
+ crawlLayout(newChildren, function appendIds(child) {
+ if (hasId(child)) {
+ keys(child.props).forEach(childProp => {
+ const componentIdAndProp = `${child.props.id}.${childProp}`;
+ if (
+ has(
+ componentIdAndProp,
+ InputGraph.nodes
+ )
+ ) {
+ newProps[componentIdAndProp] = {
+ id: child.props.id,
+ props: {
+ [childProp]:
+ child.props[childProp],
+ },
+ };
+ }
+ });
  }
- );
+ });
 
  /*
  * Organize props by shared outputs so that we