adjustments for how children are added when the prop was changed

Author: BSd3v

dash/dash-renderer/src/actions/callbacks.ts

@@ -336,8 +336,8 @@ async function handleClientside(
 
 function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
     return function (dispatch: any, getState: any) {
-        const _state = getState()
-        const {paths, config} = getState();
+        const _state = getState();
+        const {paths, config} = _state;
         const componentPath = getPath(paths, component_id);
         if (!componentPath) {
             if (!config.suppress_callback_exceptions) {
@@ -361,8 +361,7 @@ function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
         dispatch(
             updateProps({
                 props,
-                itempath: componentPath,
-                state: _state
+                itempath: componentPath
             })
         );
         dispatch(notifyObservers({id: component_id, props}));

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

@@ -45,7 +45,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
         } = getState();
 
         function applyProps(id: any, updatedProps: any) {
-            const _state = getState()
+            const _state = getState();
             const {layout, paths} = _state;
             const itempath = getPath(paths, id);
             if (!itempath) {
@@ -69,8 +69,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
                 updateProps({
                     itempath,
                     props,
-                    source: 'response',
-                    state: _state
+                    source: 'response'
                 })
             );
 

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

@@ -1,6 +1,5 @@
 import {forEach, includes, isEmpty, keys, path, assoc, pathOr} from 'ramda';
 import {combineReducers} from 'redux';
-import {batch} from 'react-redux';
 
 import {getCallbacksByInput} from '../actions/dependencies_ts';
 
@@ -19,7 +18,7 @@ import layout from './layout';
 import paths from './paths';
 import callbackJobs from './callbackJobs';
 import loading from './loading';
-import {stringifyPath, getComponentLayout} from '../wrapper/wrapping';
+import {stringifyPath} from '../wrapper/wrapping';
 
 export const apiRequests = [
     'dependenciesRequest',
@@ -29,28 +28,31 @@ export const apiRequests = [
 ];
 
 function adjustHashes(state, action) {
-    const actionPath = action.payload.itempath
+    const actionPath = action.payload.itempath;
     const strPath = stringifyPath(actionPath);
     const prev = pathOr(0, [strPath], state);
     state = assoc(strPath, prev + 1, state);
 
     // check if children was adjusted
     if ('children' in pathOr({}, ['payload', 'props'], action)) {
-        const children = pathOr({}, ['payload', 'props', 'children'], action)
-        const basePath = [...actionPath, 'props', 'children']
+        const children = pathOr({}, ['payload', 'props', 'children'], action);
+        const basePath = [...actionPath, 'props', 'children'];
         if (Array.isArray(children)) {
             children.forEach((v, i) => {
-                state = adjustHashes(state, { payload: { itempath: [...basePath, i], props: v?.props } });
-            })
+                state = adjustHashes(state, {
+                    payload: {itempath: [...basePath, i], props: v?.props}
+                });
+            });
         } else if (children) {
-            state = adjustHashes(state, { payload: { itempath: basePath }, props: children?.props });
+            state = adjustHashes(state, {
+                payload: {itempath: [...basePath], props: children?.props}
+            });
         }
-
     }
-    return state
+    return state;
 }
 
-const layoutHashes = batch(() => (state = {}, action) => {
+const layoutHashes = (state = {}, action) => {
     if (
         includes(action.type, [
             'UNDO_PROP_CHANGE',
@@ -63,7 +65,7 @@ const layoutHashes = batch(() => (state = {}, action) => {
         return adjustHashes(state, action);
     }
     return state;
-})
+};
 
 function mainReducer() {
     const parts = {

dash/dash-renderer/src/utils/clientsideFunctions.ts

@@ -26,8 +26,7 @@ function set_props(
         dispatch(
             updateProps({
                 props,
-                itempath: componentPath,
-                state: _state
+                itempath: componentPath
             })
         );
         dispatch(notifyObservers({id: idOrPath, props}));

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -43,7 +43,6 @@ type DashWrapperProps = {
     _dashprivate_error?: any;
 };
 
-
 function DashWrapper({
     componentPath,
     _dashprivate_error,
@@ -69,13 +68,10 @@ function DashWrapper({
         dispatch((dispatch, getState) => {
             const currentState = getState();
             const {graphs} = currentState;
-            const oldLayout = getComponentLayout(
-                componentPath,
-                currentState
-            )
-            if (!oldLayout) return
+            const oldLayout = getComponentLayout(componentPath, currentState);
+            if (!oldLayout) return;
             const {props: oldProps} = oldLayout;
-            if (!oldProps) return
+            if (!oldProps) return;
             const changedProps = pickBy(
                 (val, key) => !equals(val, oldProps[key]),
                 restProps
@@ -115,8 +111,7 @@ function DashWrapper({
                 dispatch(
                     updateProps({
                         props: changedProps,
-                        itempath: componentPath,
-                        state: currentState
+                        itempath: componentPath
                     })
                 );
             });
@@ -381,7 +376,9 @@ function DashWrapper({
 
         let hydratedChildren: any;
         if (componentProps.children !== undefined) {
-            hydratedChildren = wrapChildrenProp(componentProps.children, ['children']);
+            hydratedChildren = wrapChildrenProp(componentProps.children, [
+                'children'
+            ]);
         }
 
         const rendered = config.props_check ? (
@@ -390,17 +387,22 @@ function DashWrapper({
                 props={hydratedProps}
                 component={component}
             >
-                {createElement(element, hydratedProps, extraProps, hydratedChildren)}
+                {createElement(
+                    element,
+                    hydratedProps,
+                    extraProps,
+                    hydratedChildren
+                )}
             </CheckedComponent>
         ) : (
             createElement(element, hydratedProps, extraProps, hydratedChildren)
         );
 
-        return rendered
+        return rendered;
     }, [h]);
 
     if (!component) {
-        return null
+        return null;
     }
 
     return (
@@ -415,7 +417,7 @@ function DashWrapper({
             dispatch={dispatch}
         >
             <DashContextProvider componentPath={componentPath}>
-                {hydrated ? hydrated : <div/>}
+                {hydrated ? hydrated : <div />}
             </DashContextProvider>
         </ComponentErrorBoundary>
     );

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

@@ -12,9 +12,9 @@ export const selectDashProps =
         // Then it can be easily compared without having to compare the props.
         const strPath = stringifyPath(componentPath);
 
-        const h = state.layoutHashes[strPath]
+        const h = state.layoutHashes[strPath];
         if (!c) {
-            return [c, {}, -100]
+            return [c, {}, -100];
         }
         return [c, c?.props, h];
     };
@@ -24,7 +24,7 @@ export function selectDashPropsEqualityFn(
     [___, ____, previousHash]: SelectDashProps
 ) {
     // Only need to compare the hash as any change is summed up
-    return (hash === previousHash);
+    return hash === previousHash;
 }
 
 export function selectConfig(state: any) {