class state and funcitonal states rendering correctly on hover

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -28,7 +28,7 @@ const nodeParentFill = '#161521'; //#161521 original
 const nodeChildFill = '#62d6fb'; //#62d6fb original
 const nodeParentStroke = '#F00008'; //#F00008 original
 const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
-let stroke = ''; 
+let stroke = '';
 
 /* Heat Map Colors (for links) */
 const lightOrange = '#F1B476';
@@ -196,7 +196,7 @@ export default function ComponentMap({
     linkType,
     orientation,
   });
-  return totalWidth < 10 ? null : ( 
+  return totalWidth < 10 ? null : (
     <div>
       <LinkControls
         layout={layout}
@@ -231,11 +231,10 @@ export default function ComponentMap({
             size={[sizeWidth / aspect, sizeHeight / aspect]}
             separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
           >
-
             {(tree) => (
               <Group top={origin.y + 35} left={origin.x + 50 / aspect}>
                 {tree.links().map((link, i) => {
-                  const linkName = link.source.data.name; 
+                  const linkName = link.source.data.name;
                   const propsObj = link.source.data.componentData.props;
                   const childPropsObj = link.target.data.componentData.props;
                   let propsLength;
@@ -246,15 +245,15 @@ export default function ComponentMap({
                   }
                   if (childPropsObj) {
                     childPropsLength = Object.keys(childPropsObj).length;
-
                   }
-                  // go to https://en.wikipedia.org/wiki/Logistic_function 
+                  // go to https://en.wikipedia.org/wiki/Logistic_function
                   // for an explanation of Logistic functions and parameters used
                   const yshift = -3;
                   const x0 = 5;
                   const L = 25;
-                  const k = .4;
-                  const strokeWidthIndex = yshift + L / (1 + Math.exp(-k * (childPropsLength - x0)));
+                  const k = 0.4;
+                  const strokeWidthIndex =
+                    yshift + L / (1 + Math.exp(-k * (childPropsLength - x0)));
 
                   if (strokeWidthIndex <= 1) {
                     stroke = '#808080';
@@ -272,18 +271,17 @@ export default function ComponentMap({
                   }
 
                   return (
-                  <LinkComponent
-                    className='compMapLink'
-                    key={i}
-                    data={link}
-                    percent={stepPercent}
-                    stroke={stroke} // color of the link --not used--
-                    strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
-                    fill='none'
-                  />
-                  )
-                })
-                }
+                    <LinkComponent
+                      className='compMapLink'
+                      key={i}
+                      data={link}
+                      percent={stepPercent}
+                      stroke={stroke} // color of the link --not used--
+                      strokeWidth={strokeWidthIndex} /* strokeWidth */ // width of the link
+                      fill='none'
+                    />
+                  );
+                })}
 
                 {tree.descendants().map((node, key) => {
                   const widthFunc: number = (name) => {
@@ -496,20 +494,14 @@ export default function ComponentMap({
       </svg>
       {tooltipOpen && tooltipData && (
         <TooltipInPortal
-          // set this to random so it correctly updates with parent bounds
           key={Math.random()}
           top={tooltipTop}
           left={tooltipLeft}
           style={tooltipStyles}
-          //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
-          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
-           *  that would've unmounted it */
           onMouseEnter={() => {
             clearTimeout(toolTipTimeoutID.current);
             toolTipTimeoutID.current = null;
           }}
-          //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
-          /** When the mouse leaves the tooltip, the tooltip unmounts */
           onMouseLeave={() => {
             hideTooltip();
           }}
@@ -518,21 +510,22 @@ export default function ComponentMap({
             <div>
               <strong>{tooltipData.name}</strong>
             </div>
-            <div className='tooltipKey'>
-              Key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
-            </div>
-            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
-
             <div>
               <ToolTipDataDisplay containerName='Props' dataObj={tooltipData.componentData.props} />
               <ToolTipDataDisplay
                 containerName='State'
                 dataObj={
-                  tooltipData.componentData.hooksIndex
-                    ? tooltipData.componentData.hooksState
-                    : tooltipData.componentData.state
+                  tooltipData.componentData.state || // for class components
+                  tooltipData.componentData.hooksState // for functional components
                 }
               />
+              {/* Add this new container for reducer state */}
+              {tooltipData.componentData.reducerState && (
+                <ToolTipDataDisplay
+                  containerName='Reducer State'
+                  dataObj={tooltipData.componentData.reducerState}
+                />
+              )}
             </div>
           </div>
         </TooltipInPortal>

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -28,42 +28,41 @@ const colors = {
 };
 
 const ToolTipDataDisplay = ({ containerName, dataObj }) => {
-  const printableObject = {}; // The key:value properties of printableObject will be rendered in the JSON Tree
+  const printableObject = {};
 
   if (!dataObj) {
-    // If state is null rather than an object, print "State: null" in tooltip
     printableObject[containerName] = dataObj;
   } else {
-    /*
-      Props often contain circular references. 
-      Messages from the backend must be sent as JSON objects (strings). 
-      JSON objects can't contain circular ref's, so the backend filters out problematic values by stringifying the values of object properties and ignoring any values that fail the conversion due to a circular ref. The following logic converts these values back to JS so they display clearly and are collapsible.
-    */
     const data = {};
-    for (const key in dataObj) {
-      if (typeof dataObj[key] === 'string') {
-        try {
-          data[key] = JSON.parse(dataObj[key]);
-        } catch {
+
+    // Handle reducer state if present
+    if (containerName === 'State' && dataObj.reducerState) {
+      printableObject[containerName] = dataObj.reducerState;
+    }
+    // Otherwise handle normal state/props
+    else {
+      for (const key in dataObj) {
+        if (typeof dataObj[key] === 'string') {
+          try {
+            data[key] = JSON.parse(dataObj[key]);
+          } catch {
+            data[key] = dataObj[key];
+          }
+        } else {
           data[key] = dataObj[key];
         }
-      } else {
-        data[key] = dataObj[key];
       }
+      printableObject[containerName] = data;
     }
-    /*
-      Adds container name (State, Props, future different names for hooks) at top of object so everything nested in it will collapse when you click on it.
-    */
-    printableObject[containerName] = data;
   }
 
   return (
     <div className='tooltipData' key={`${containerName}-data-container`}>
       <JSONTree
-        data={printableObject} // data to be rendered, a snapshot object
-        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
-        shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
-        hideRoot={true} // hides the root node
+        data={printableObject}
+        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }}
+        shouldExpandNodeInitially={() => true}
+        hideRoot={true}
       />
     </div>
   );

src/backend/controllers/createTree.ts

@@ -193,57 +193,41 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
     // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
     if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) {
-      // Save component's state and setState() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
       componentData.index = componentActionsRecord.saveNew(stateNode);
-      // Save state information in componentData.
       componentData.state = stateNode.state;
-      // Pass to front end
       newState = componentData.state;
     }
 
     // --------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT--------
     // Check if currentFiberNode is a stateful functional component when user use useState hook.
     // If user use useState to define/manage state, the state object will be stored in memoizedState => grab the state object & its update method (dispatch) from memoizedState
     // Example: for Stateful buttons demo-app: Increment is a stateful component that use useState hook to store state data.
-    if (
-      (tag === FunctionComponent ||
-        tag === IndeterminateComponent ||
-        //TODO: Need reasoning for why we evaluate context provider
-        /**
-         * So far I haven't seen a case where hook data is stored for ContextProviders in memoized state. So far
-         * I've seen some data a non-null memoize state on browser router, but queue is null. Routes has some good info on memoized props,
-         * but that's not being addressed here. useContext providers also have null for memoized state.
-         */
-        tag === ContextProvider) &&
-      memoizedState
-    ) {
-      if (memoizedState) {
-        console.log('memoizedState structure:', {
-          queue: memoizedState.queue,
-          state: memoizedState.memoizedState,
-          next: memoizedState.next,
-        });
-      }
+    // Inside the _createTree function where we handle functional components
+    if ((tag === FunctionComponent || tag === IndeterminateComponent) && memoizedState) {
       if (memoizedState.queue) {
         try {
-          // Obtain all hooksStates & the corresponding udpate method from memoizedState
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
-          // Obtain variable names by parsing the function definition stored in elementType.
-          console.log('Component definition:', elementType.toString());
+          // Get the hooks names by parsing the elementType
           const hooksNames = getHooksNames(elementType.toString());
-          console.log('Extracted hook names:', hooksNames);
-          // Intialize state & index:
+
           componentData.hooksState = {};
+          componentData.reducerState = null;
           componentData.hooksIndex = [];
 
-          hooksStates.forEach(({ state, component }, i) => {
-            // Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
+          hooksStates.forEach(({ state, component, isReducer }, i) => {
             componentData.hooksIndex.push(componentActionsRecord.saveNew(component));
-            // Save state information in componentData.
-            componentData.hooksState[hooksNames[i].varName] = state;
+
+            if (isReducer) {
+              // If it's a reducer, store its state
+              componentData.reducerState = state;
+            } else {
+              // Otherwise treat as useState
+              componentData.hooksState[hooksNames[i]?.varName || `state${i}`] = state;
+            }
           });
+
           // Pass to front end
-          newState = componentData.hooksState;
+          newState = componentData.reducerState || componentData.hooksState;
         } catch (err) {
           console.log('Error extracting functional component state:', {
             componentName,

src/backend/controllers/statePropExtractors.ts

@@ -69,7 +69,20 @@ export function getHooksStateAndUpdateMethod(
 ): Array<HookStateItem> {
   const hooksStates: Array<HookStateItem> = [];
   while (memoizedState) {
-    if (memoizedState.queue) {
+    // Check for useReducer hook
+    if (
+      memoizedState.queue &&
+      memoizedState.memoizedState &&
+      typeof memoizedState.queue.dispatch === 'function'
+    ) {
+      hooksStates.push({
+        component: memoizedState.queue,
+        state: memoizedState.memoizedState,
+        isReducer: true,
+      });
+    }
+    // Existing useState check
+    else if (memoizedState.queue) {
       hooksStates.push({
         component: memoizedState.queue,
         state: memoizedState.memoizedState,

src/backend/types/backendTypes.ts

@@ -67,6 +67,7 @@ export interface ComponentData {
   index: number | null;
   /** {functional component only} - An object contains all states of the current functional component */
   hooksState: {} | null;
+  reducerState?: {} | null;
   /** {functional component only} - An array of index of the bound dispatch method stored in `componentActionsRecord` */
   hooksIndex: number[] | null;
   /** An object contains all props of the current component */
@@ -88,6 +89,7 @@ export interface HookStateItem {
   state: any;
   /** an object contains bound dispatch method to update state of the current functional component */
   component: any;
+  isReducer?: boolean;
 }
 
 export type WorkTag =