Refactor wrapper selectors to use path sums as equality comparator

Author: T4rk1n

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

@@ -1,4 +1,4 @@
-import {includes, mergeRight, path} from 'ramda';
+import {includes, mergeRight, append, view, lensPath, assocPath} from 'ramda';
 
 import {getAction} from '../actions/constants';
 
@@ -15,8 +15,10 @@ const layout = (state = {}, action) => {
             getAction('ON_PROP_CHANGE')
         ])
     ) {
-        const component = path(action.payload.itempath, state);
-        component.props = mergeRight(component.props, action.payload.props);
+        const propPath = append('props', action.payload.itempath);
+        const existingProps = view(lensPath(propPath), state);
+        const mergedProps = mergeRight(existingProps, action.payload.props);
+        return assocPath(propPath, mergedProps, state);
     }
 
     return state;

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

@@ -1,4 +1,4 @@
-import {forEach, isEmpty, keys, path} from 'ramda';
+import {forEach, includes, isEmpty, keys, path, assoc, pathOr} from 'ramda';
 import {combineReducers} from 'redux';
 
 import {getCallbacksByInput} from '../actions/dependencies_ts';
@@ -26,14 +26,19 @@ export const apiRequests = [
     'loginRequest'
 ];
 
-function callbackNum(state = 0, action) {
-    // With the refactor of TreeContainer to DashWrapper
-    // The props are updated partially and no longer
-    // trigger the selectors on change.
-    // By changing this store value we circumvent
-    // the issue.
-    if (action.type === 'ON_PROP_CHANGE') {
-        return state + 1;
+function layoutHashes(state = {}, action) {
+    if (
+        includes(action.type, [
+            'UNDO_PROP_CHANGE',
+            'REDO_PROP_CHANGE',
+            'ON_PROP_CHANGE'
+        ])
+    ) {
+        // Let us compare the paths sums to get updates without triggering
+        // render on the parent containers.
+        const jsonPath = JSON.stringify(action.payload.itempath);
+        const prev = pathOr(0, [jsonPath], state);
+        return assoc(jsonPath, prev + 1, state);
     }
     return state;
 }
@@ -52,7 +57,7 @@ function mainReducer() {
         isLoading,
         layout,
         paths,
-        callbackNum,
+        layoutHashes,
         loading
     };
     forEach(r => {

dash/dash-renderer/src/wrapper/selectors.ts

@@ -2,20 +2,34 @@ import {path} from 'ramda';
 
 import {DashLayoutPath, DashComponent, BaseDashProps} from '../types/component';
 
-type SelectDashProps = [DashComponent, BaseDashProps];
+type SelectDashProps = [DashComponent, BaseDashProps, number];
 
 export const selectDashProps =
     (componentPath: DashLayoutPath) =>
     (state: any): SelectDashProps => {
         const c = path(componentPath, state.layout) as DashComponent;
-        return [c, c.props];
+        // Layout hashes records the number of times a path has been updated.
+        // sum with the parents hash (match without the last ']') to get the real hash
+        // Then it can be easily compared without having to compare the props.
+        let jsonPath = JSON.stringify(componentPath);
+        jsonPath = jsonPath.substring(0, jsonPath.length - 1);
+
+        const h = Object.entries(state.layoutHashes).reduce(
+            (acc, [path, pathHash]) =>
+                jsonPath.startsWith(path.substring(0, path.length - 1))
+                    ? (pathHash as number) + acc
+                    : acc,
+            0
+        );
+        return [c, c.props, h];
     };
 
 export function selectDashPropsEqualityFn(
-    [c, p]: SelectDashProps,
-    [oc, op]: SelectDashProps
+    [_, __, hash]: SelectDashProps,
+    [___, ____, previousHash]: SelectDashProps
 ) {
-    return p === op && c === oc;
+    // Only need to compare the hash as any change is summed up
+    return hash === previousHash;
 }
 
 export function selectConfig(state: any) {