added reducer state data to tool tip display

Author: garrettlchow

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -9,6 +9,7 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { ToolTipStyles } from '../../../FrontendTypes';
 import { localPoint } from '@visx/event';
+import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const defaultMargin = {
   top: 30,
@@ -293,17 +294,16 @@ export default function AxTree(props) {
                     <Group top={top} left={left} key={key} className='rect'>
                       {node.depth === 0 && (
                         <rect
-                          className={node.children ? 'compMapParent' : 'compMapChild'}
+                          className={'compMapRoot'}
                           height={height}
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
                           strokeWidth={1.5}
                           strokeOpacity='1'
-                          rx={node.children ? 4 : 10}
+                          rx={10}
                           onClick={() => {
-                            node.data.isExpanded = !node.data.isExpanded;
+                            dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
                         />
@@ -315,12 +315,11 @@ export default function AxTree(props) {
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
                           strokeWidth={1.5}
                           strokeOpacity='1'
-                          rx={node.children ? 4 : 10}
+                          rx={10}
                           onClick={() => {
-                            node.data.isExpanded = !node.data.isExpanded;
+                            dispatch(toggleExpanded(node.data));
                             hideTooltip();
                           }}
                           // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------

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

@@ -260,14 +260,23 @@ export default function ComponentMap({
       <svg ref={containerRef} width={totalWidth} height={totalHeight + 0}>
         <LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
         <LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
+        <rect
+          className='componentMapContainer'
+          onClick={() => {
+            hideTooltip();
+          }}
+          width={sizeWidth / aspect}
+          height={sizeHeight / aspect + 0}
+          rx={14}
+        />
         <Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
           <Tree
             root={hierarchy(startNode, (d) => (d.isExpanded ? d.children : null))}
             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}>
+              <Group top={origin.y + 35} left={origin.x + 50}>
                 {tree.links().map((link, i) => {
                   const linkName = link.source.data.name;
                   const propsObj = link.source.data.componentData.props;
@@ -448,7 +457,7 @@ export default function ComponentMap({
                       }
                     }
                   } else {
-                    aspect = Math.max(aspect, 1);
+                    aspect = Math.max(aspect, 0.8);
                   }
 
                   // mousing controls & Tooltip display logic

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

@@ -38,12 +38,15 @@ const ToolTipDataDisplay = ({ data }) => {
   };
 
   const formatReducerData = (reducerStates) => {
-    // Check if reducerStates exists and is an array
-    if (!Array.isArray(reducerStates)) {
+    // Check if reducerStates exists and is an object
+    if (!reducerStates || typeof reducerStates !== 'object') {
       return {};
     }
 
-    return reducerStates.reduce((acc, reducer) => {
+    // Handle both array and object formats
+    const statesArray = Array.isArray(reducerStates) ? reducerStates : Object.values(reducerStates);
+
+    return statesArray.reduce((acc, reducer) => {
       // Add additional type checking for reducer object
       if (reducer && typeof reducer === 'object') {
         acc[reducer.hookName || 'Reducer'] = reducer.state;
@@ -67,9 +70,11 @@ const ToolTipDataDisplay = ({ data }) => {
     if (isReducer && parsedContent) {
       // Only try to format if we have valid content
       const formattedData = formatReducerData(parsedContent);
+      console.log('formatted data', formattedData);
 
       // Check if we have any formatted data to display
       if (Object.keys(formattedData).length === 0) {
+        console.log('formatted data length', Object.keys(formattedData).length);
         return null;
       }
 

src/app/styles/layout/_stateContainer.scss

@@ -8,7 +8,7 @@
 .app-content,
 .app-body {
   height: 100%;
-  overflow: hidden; /* Prevent double scrollbars */
+  overflow: hidden;
 }
 
 .main-navbar-container--structural {