adjustments from feedback

Author: BSd3v

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

@@ -34,7 +34,6 @@ import {
     CallbackResponseData,
     SideUpdateOutput
 } from '../types/callbacks';
-import {getComponentLayout} from '../wrapper/wrapping';
 import {isMultiValued, stringifyId, isMultiOutputProp} from './dependencies';
 import {urlBase} from './utils';
 import {getCSRFHeader, dispatchError} from '.';
@@ -359,13 +358,10 @@ function updateComponent(component_id: any, props: any, cb: ICallbackPayload) {
             // error.
             return;
         }
-        const component = getComponentLayout(componentPath, _state);
         dispatch(
             updateProps({
                 props,
                 itempath: componentPath,
-                component,
-                config,
                 renderType: 'callback'
             })
         );

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

@@ -34,7 +34,6 @@ import {ICallback, IStoredCallback} from '../types/callbacks';
 
 import {updateProps, setPaths, handleAsyncError} from '../actions';
 import {getPath, computePaths} from '../actions/paths';
-import {getComponentLayout} from '../wrapper/wrapping';
 
 import {applyPersistence, prunePersistence} from '../persistence';
 import {IStoreObserverDefinition} from '../StoreObserver';
@@ -47,7 +46,7 @@ const observer: IStoreObserverDefinition<IStoreState> = {
 
         function applyProps(id: any, updatedProps: any) {
             const _state = getState();
-            const {layout, paths, config} = _state;
+            const {layout, paths} = _state;
             const itempath = getPath(paths, id);
             if (!itempath) {
                 return false;
@@ -65,14 +64,11 @@ 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);
-            const component = getComponentLayout(itempath, _state);
             dispatch(
                 updateProps({
                     itempath,
                     props,
                     source: 'response',
-                    component,
-                    config,
                     renderType: 'callback'
                 })
             );

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

@@ -27,22 +27,6 @@ export const apiRequests = [
     'loginRequest'
 ];
 
-function adjustHashes(state, action) {
-    const actionPath = action.payload.itempath;
-    const strPath = stringifyPath(actionPath);
-    const prev = pathOr(0, [strPath, 'hash'], state);
-    state = assoc(
-        strPath,
-        {
-            hash: prev + 1,
-            changedProps: action.payload.props,
-            renderType: action.payload.renderType
-        },
-        state
-    );
-    return state;
-}
-
 const layoutHashes = (state = {}, action) => {
     if (
         includes(action.type, [
@@ -53,7 +37,18 @@ const layoutHashes = (state = {}, action) => {
     ) {
         // Let us compare the paths sums to get updates without triggering
         // render on the parent containers.
-        return adjustHashes(state, action);
+        const actionPath = action.payload.itempath;
+        const strPath = stringifyPath(actionPath);
+        const prev = pathOr(0, [strPath, 'hash'], state);
+        state = assoc(
+            strPath,
+            {
+                hash: prev + 1,
+                changedProps: action.payload.props,
+                renderType: action.payload.renderType
+            },
+            state
+        );
     }
     return state;
 };

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

@@ -1,7 +1,6 @@
 import {updateProps, notifyObservers} from '../actions/index';
 import {getPath} from '../actions/paths';
 import {getStores} from './stores';
-import {getComponentLayout} from '../wrapper/wrapping';
 
 /**
  * Set the props of a dash component by id or path.
@@ -18,19 +17,16 @@ function set_props(
         const {dispatch, getState} = ds[y];
         let componentPath;
         const _state = getState();
-        const {paths, config} = _state;
+        const {paths} = _state;
         if (!Array.isArray(idOrPath)) {
             componentPath = getPath(paths, idOrPath);
         } else {
             componentPath = idOrPath;
         }
-        const component = getComponentLayout(componentPath, _state);
         dispatch(
             updateProps({
                 props,
                 itempath: componentPath,
-                component,
-                config,
                 renderType: 'clientsideApi'
             })
         );

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

@@ -63,8 +63,8 @@ type MemoizedPropsType = {
 function DashWrapper({
     componentPath,
     _dashprivate_error,
-    _passedComponent,
-    _newRender,
+    _passedComponent, // pass component to the DashWrapper in the event that it is a newRender and there are no layouthashes
+    _newRender, // this is to force the component to newly render regardless of props (redraw and component as props) is passed from the parent
     ...extras
 }: DashWrapperProps) {
     const dispatch = useDispatch();
@@ -84,7 +84,7 @@ function DashWrapper({
 
     /* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
     // @ts-ignore
-    const newlyRendered = useMemo(() => {
+    const newlyRendered: any = useMemo(() => {
         if (_newRender) {
             memoizedProps.current = {};
             newRender.current = true;
@@ -154,8 +154,6 @@ function DashWrapper({
                     updateProps({
                         props: changedProps,
                         itempath: componentPath,
-                        component,
-                        config,
                         renderType: 'internal'
                     })
                 );
@@ -461,14 +459,12 @@ function DashWrapper({
             hydratedChildren = wrapChildrenProp(
                 componentProps.children,
                 ['children'],
-                !h || newRender.current || 'children' in changedProps
-                    ? {}
-                    : 0
+                !h || newRender.current || 'children' in changedProps ? {} : 0
             );
         }
         newRender.current = false;
 
-        const rendered = config.props_check ? (
+        return config.props_check ? (
             <CheckedComponent
                 element={element}
                 props={hydratedProps}
@@ -484,8 +480,6 @@ function DashWrapper({
         ) : (
             createElement(element, hydratedProps, extraProps, hydratedChildren)
         );
-
-        return rendered;
     };
 
     let hydrated = null;

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

@@ -67,10 +67,7 @@ export function checkRenderTypeProp(componentDefinition: any) {
         'dashRenderType' in
         pathOr(
             {},
-            [
-                componentDefinition?.namespace,
-                componentDefinition?.type
-            ],
+            [componentDefinition?.namespace, componentDefinition?.type],
             window as any
         )
     );