added nesting for deeply nested properties

Author: garrettlchow

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

@@ -8,14 +8,46 @@ const ToolTipDataDisplay = ({ data }) => {
     scheme: 'custom',
     base00: 'transparent',
     base0B: '#1f2937', // dark navy for strings
-    base0D: '#60a5fa', // Blue for keys
-    base09: '#f59e0b', // Orange for numbers
-    base0C: '#EF4444', // red for nulls
+    base0D: '#60a5fa', // Keys
+    base09: '#f59e0b', // Numbers
+    base0C: '#EF4444', // Null values
+  };
+
+  // Helper function to parse stringified JSON in object values
+  const parseStringifiedValues = (obj) => {
+    if (!obj || typeof obj !== 'object') return obj;
+
+    const parsed = { ...obj };
+    for (const key in parsed) {
+      if (typeof parsed[key] === 'string') {
+        try {
+          // Check if the string looks like JSON
+          if (parsed[key].startsWith('{') || parsed[key].startsWith('[')) {
+            const parsedValue = JSON.parse(parsed[key]);
+            parsed[key] = parsedValue;
+          }
+        } catch (e) {
+          // If parsing fails, keep original value
+          continue;
+        }
+      } else if (typeof parsed[key] === 'object') {
+        parsed[key] = parseStringifiedValues(parsed[key]);
+      }
+    }
+    return parsed;
   };
 
   const formatReducerData = (reducerStates) => {
+    // Check if reducerStates exists and is an array
+    if (!Array.isArray(reducerStates)) {
+      return {};
+    }
+
     return reducerStates.reduce((acc, reducer) => {
-      acc[reducer.hookName || 'Reducer'] = reducer.state;
+      // Add additional type checking for reducer object
+      if (reducer && typeof reducer === 'object') {
+        acc[reducer.hookName || 'Reducer'] = reducer.state;
+      }
       return acc;
     }, {});
   };
@@ -29,8 +61,18 @@ const ToolTipDataDisplay = ({ data }) => {
       return null;
     }
 
-    if (isReducer) {
-      const formattedData = formatReducerData(content);
+    // Parse any stringified JSON before displaying
+    const parsedContent = parseStringifiedValues(content);
+
+    if (isReducer && parsedContent) {
+      // Only try to format if we have valid content
+      const formattedData = formatReducerData(parsedContent);
+
+      // Check if we have any formatted data to display
+      if (Object.keys(formattedData).length === 0) {
+        return null;
+      }
+
       return (
         <div className='tooltip-section'>
           {Object.entries(formattedData).map(([hookName, state]) => (
@@ -49,17 +91,17 @@ const ToolTipDataDisplay = ({ data }) => {
       <div className='tooltip-section'>
         <div className='tooltip-section-title'>{title}</div>
         <div className='tooltip-data'>
-          <JSONTree data={content} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
+          <JSONTree data={parsedContent} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
         </div>
       </div>
     );
   };
 
   return (
     <div className='tooltip-container'>
-      {renderSection('Props', data.componentData.props)}
-      {renderSection('State', data.componentData.state || data.componentData.hooksState)}
-      {renderSection(null, data.componentData.reducerStates, true)}
+      {renderSection('Props', data.componentData?.props)}
+      {renderSection('State', data.componentData?.state || data.componentData?.hooksState)}
+      {renderSection(null, data.componentData?.reducerStates, true)}
     </div>
   );
 };