allow multiple pieces of persistence for one prop

Author: alexcjohnson

dash-renderer/src/persistence.js

@@ -43,7 +43,11 @@
  *   }
  * }
  * - `extract` turns a prop value into a reduced value to store.
- * - `apply` puts an extracted value back into the prop.
+ * - `apply` puts an extracted value back into the prop. Make sure this creates
+ *   a new object rather than mutating `proValue`, and that if there are
+ *   multiple `piece` entries for one `propName`, their `apply` functions
+ *   commute - which should not be an issue if they extract and apply
+ *   non-intersecting parts of the full prop.
  * You only need to define these for the props that need them.
  * It's important that `extract` pulls out *only* the relevant pieces of the
  * prop, because persistence is only maintained if the extracted value of the
@@ -52,13 +56,13 @@
  */
 
 import {
-    difference,
     equals,
     filter,
     forEach,
     keys,
     lensPath,
     set,
+    symmetricDifference,
     type,
 } from 'ramda';
 
@@ -159,10 +163,12 @@ const noopTransform = {
     apply: (storedValue, _propValue) => storedValue,
 };
 
-const getTransform = (element, propName) =>
-    (element.persistenceTransforms || {})[propName] || noopTransform;
+const getTransform = (element, propName, propPart) =>
+    propPart
+        ? element.persistenceTransforms[propName][propPart]
+        : noopTransform;
 
-const getNewValKey = (id, propName) => id + '.' + propName;
+const getNewValKey = (id, persistedProp) => id + '.' + persistedProp;
 const getOriginalValKey = newValKey => newValKey + '.orig';
 const getPersistIdKey = newValKey => newValKey + '.id';
 
@@ -202,41 +208,37 @@ export function recordUiEdit(layout, newProps) {
         return;
     }
 
-    forEach(propName => {
-        // TODO: this only supports specifying top-level props to persist
-        // DO we need nested specification?
-        // This *does* support custom methods to save/restore these props,
-        // so if we persist `columns` on a table, the component can specify
-        // to only keep & restore the names, associating them with IDs.
-        // It just wouldn't allow us to separately enable/disable persisting
-        // something else inside columns.
+    forEach(persistedProp => {
+        const [propName, propPart] = persistedProp.split('.');
         if (newProps[propName]) {
             const storage = stores[persistence_type];
-            const transform = getTransform(element, propName);
+            const {extract} = getTransform(element, propName, propPart);
 
-            const newValKey = getNewValKey(id, propName);
+            const newValKey = getNewValKey(id, persistedProp);
             const persistIdKey = getPersistIdKey(newValKey);
-            const setOriginalAndId = () => {
-                storage.setItem(
-                    getOriginalValKey(newValKey),
-                    transform.extract(props[propName])
-                );
-                storage.setItem(persistIdKey, persistence);
-            };
-            if (
-                !storage.hasItem(newValKey) ||
-                storage.getItem(persistIdKey) !== persistence
-            ) {
-                setOriginalAndId();
+            const previousVal = 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 (previousVal !== newVal) {
+                if (
+                    !storage.hasItem(newValKey) ||
+                    storage.getItem(persistIdKey) !== persistence
+                ) {
+                    storage.setItem(getOriginalValKey(newValKey), previousVal);
+                    storage.setItem(persistIdKey, persistence);
+                }
+                storage.setItem(newValKey, newVal);
             }
-            storage.setItem(newValKey, transform.extract(newProps[propName]));
         }
     }, persisted_props);
 }
 
-function clearUIEdit(id, persistence_type, propName) {
+function clearUIEdit(id, persistence_type, persistedProp) {
     const storage = stores[persistence_type];
-    const newValKey = getNewValKey(id, propName);
+    const newValKey = getNewValKey(id, persistedProp);
 
     if (storage.hasItem(newValKey)) {
         storage.removeItem(newValKey);
@@ -270,10 +272,13 @@ function persistenceMods(layout, component, path) {
     let layoutOut = layout;
     if (persistence) {
         const storage = stores[persistence_type];
-        forEach(propName => {
-            const newValKey = getNewValKey(id, propName);
+        const update = {};
+        forEach(persistedProp => {
+            const [propName, propPart] = persistedProp.split('.');
+            const newValKey = getNewValKey(id, persistedProp);
             const storedPersistID = storage.getItem(getPersistIdKey(newValKey));
-            const transform = getTransform(element, propName);
+            const transform = getTransform(element, propName, propPart);
+
             if (storedPersistID) {
                 if (
                     storedPersistID === persistence &&
@@ -282,19 +287,25 @@ function persistenceMods(layout, component, path) {
                         transform.extract(props[propName])
                     )
                 ) {
-                    layoutOut = set(
-                        lensPath(path.concat('props', propName)),
-                        transform.apply(
-                            storage.getItem(newValKey),
-                            props[propName]
-                        ),
-                        layoutOut
+                    // To handle multiple nested props, apply each stored value
+                    // in turn; then at the end we'll push these into the layout
+                    update[propName] = transform.apply(
+                        storage.getItem(newValKey),
+                        propName in update ? update[propName] : props[propName]
                     );
                 } else {
-                    clearUIEdit(id, persistence_type, propName);
+                    clearUIEdit(id, persistence_type, persistedProp);
                 }
             }
         }, persisted_props);
+
+        for (const propName in update) {
+            layoutOut = set(
+                lensPath(path.concat('props', propName)),
+                update[propName],
+                layoutOut
+            );
+        }
     }
 
     // recurse inward
@@ -326,9 +337,13 @@ function persistenceMods(layout, component, path) {
  * but not for props nested inside children
  */
 export function prunePersistence(layout, newProps) {
-    const {id, persistence, persisted_props, persistence_type} = getProps(
-        layout
-    );
+    const {
+        id,
+        persistence,
+        persisted_props,
+        persistence_type,
+        element,
+    } = getProps(layout);
     if (!persistence) {
         return;
     }
@@ -343,15 +358,26 @@ export function prunePersistence(layout, newProps) {
         return;
     }
 
+    // if the persisted props list itself changed, clear any props not
+    // present in both the new and old
     if ('persisted_props' in newProps) {
         forEach(
-            prevPropName => clearUIEdit(id, persistence_type, prevPropName),
-            difference(persisted_props, newProps.persisted_props)
+            persistedProp => clearUIEdit(id, persistence_type, persistedProp),
+            symmetricDifference(persisted_props, newProps.persisted_props)
         );
     }
 
-    forEach(
-        propName => clearUIEdit(id, persistence_type, propName),
-        difference(keys(newProps), persisted_props)
-    );
+    // now the main point - clear any edit associated with 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) {
+                clearUIEdit(id, persistence_type, `${propName}.${propPart}`);
+            }
+        } else {
+            clearUIEdit(id, persistence_type, propName);
+        }
+    }
 }