moved all information into one tool tip display

Author: garrettlchow

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

@@ -514,25 +514,11 @@ export default function ComponentMap({
           }}
         >
           <div>
-            <div>
-              <strong>{tooltipData.name}</strong>
+            <div className='tooltip-header'>
+              <h3 className='tooltip-title'>{tooltipData.name}</h3>
             </div>
             <div>
-              <ToolTipDataDisplay containerName='Props' dataObj={tooltipData.componentData.props} />
-              <ToolTipDataDisplay
-                containerName='State'
-                dataObj={
-                  tooltipData.componentData.state || // for class components
-                  tooltipData.componentData.hooksState // for functional components
-                }
-              />
-              {/* Add this new container for reducer state */}
-              {tooltipData.componentData.reducerStates && (
-                <ToolTipDataDisplay
-                  containerName='Reducers'
-                  dataObj={tooltipData.componentData.reducerStates}
-                />
-              )}
+              <ToolTipDataDisplay data={tooltipData} />
             </div>
           </div>
         </TooltipInPortal>

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

@@ -1,80 +1,65 @@
 import React from 'react';
 import { JSONTree } from 'react-json-tree';
 
-const ToolTipDataDisplay = ({ containerName, dataObj }) => {
-  if (
-    !dataObj ||
-    (Array.isArray(dataObj) && dataObj.length === 0) ||
-    Object.keys(dataObj).length === 0
-  ) {
-    return null;
-  }
+const ToolTipDataDisplay = ({ data }) => {
+  if (!data) return null;
+
+  const jsonTheme = {
+    scheme: 'custom',
+    base00: 'transparent',
+    base0B: '#14b8a6', // Teal for strings
+    base0D: '#60a5fa', // Blue for keys
+    base09: '#f59e0b', // Orange for numbers
+    base0C: '#EF4444', // red for nulls
+  };
 
   const formatReducerData = (reducerStates) => {
-    // Transform the array of reducers into an object with hook names as keys
     return reducerStates.reduce((acc, reducer) => {
-      // Use the hookName as the key and only include the state
       acc[reducer.hookName || 'Reducer'] = reducer.state;
       return acc;
     }, {});
   };
 
-  const renderValue = (value) => {
-    if (typeof value === 'object' && value !== null) {
-      return (
-        <JSONTree
-          data={value}
-          theme={{
-            scheme: 'custom',
-            base00: 'transparent',
-            base0B: '#14b8a6', // Teal for strings
-            base0D: '#60a5fa', // Blue for keys
-            base09: '#f59e0b', // Orange for numbers
-            base0C: '#EF4444', // red for nulls
-          }}
-          hideRoot
-          shouldExpandNode={() => true}
-        />
-      );
+  const renderSection = (title, content, isReducer = false) => {
+    if (
+      !content ||
+      (Array.isArray(content) && content.length === 0) ||
+      Object.keys(content).length === 0
+    ) {
+      return null;
     }
-    return <span className='tooltip-value'>{String(value)}</span>;
-  };
 
-  const renderContent = () => {
-    if (containerName === 'Reducers') {
-      const formattedData = formatReducerData(dataObj);
+    if (isReducer) {
+      const formattedData = formatReducerData(content);
       return (
-        <div className='tooltip-content'>
+        <div className='tooltip-section'>
           {Object.entries(formattedData).map(([hookName, state]) => (
-            <div key={hookName} className='tooltip-reducer-item'>
-              <div className='tooltip-reducer-name'>{hookName}</div>
-              <div className='tooltip-reducer-state'>{renderValue(state)}</div>
+            <div key={hookName}>
+              <div className='tooltip-section-title'>{hookName}</div>
+              <div className='tooltip-data'>
+                <JSONTree data={state} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
+              </div>
             </div>
           ))}
         </div>
       );
     }
 
     return (
-      <div className='tooltip-content'>
-        {Object.entries(dataObj).map(([key, value]) => (
-          <div key={key} className='tooltip-item'>
-            <div className='tooltip-data'>
-              <span className='tooltip-key'>{key}</span>
-              {renderValue(value)}
-            </div>
-          </div>
-        ))}
+      <div className='tooltip-section'>
+        <div className='tooltip-section-title'>{title}</div>
+        <div className='tooltip-data'>
+          <JSONTree data={content} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
+        </div>
       </div>
     );
   };
 
   return (
     <div className='tooltip-container'>
-      <div className='tooltip-header'>
-        <h3 className='tooltip-title'>{containerName}</h3>
-      </div>
-      {renderContent()}
+      {renderSection('Props', data.componentData.props)}
+      {renderSection('State', data.componentData.state || data.componentData.hooksState)}
+      {renderSection(null, data.componentData.reducerStates, true)}
     </div>
   );
 };

src/app/styles/layout/_stateContainer.scss

@@ -101,7 +101,7 @@
 // tool tip styles
 .tooltip-container {
   width: 300px;
-  background-color: #1f2937;
+  background-color: #111827;
   border-radius: 8px;
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
@@ -112,47 +112,41 @@
   margin: 4px 0;
 }
 
-.tooltip-header {
+.tooltip-section {
   padding: 12px 16px;
-  background-color: #111827;
   border-bottom: 1px solid rgba(107, 114, 128, 0.2);
 }
 
-.tooltip-title {
-  margin: 0;
-  font-size: 16px;
+.tooltip-section:last-child {
+  border-bottom: none;
+}
+
+.tooltip-section-title {
+  font-size: 14px;
   font-weight: 500;
-  color: #f9fafb;
+  color: #14b8a6;
+  margin-bottom: 8px;
 }
 
 .tooltip-content {
   max-height: 400px;
   overflow-y: auto;
 }
 
-/* Reducer specific styling */
-.tooltip-reducer-item {
-  padding: 12px 16px;
-  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+.tooltip-item {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(107, 114, 128, 0.1);
 }
 
-.tooltip-reducer-item:last-child {
+.tooltip-item:last-child {
   border-bottom: none;
 }
 
-.tooltip-reducer-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #14b8a6;
-  margin-bottom: 8px;
-}
-
-.tooltip-reducer-state {
+.tooltip-data {
   padding-left: 12px;
   border-left: 2px solid rgba(20, 184, 166, 0.4);
 }
 
-/* Scrollbar styling */
 .tooltip-content::-webkit-scrollbar {
   width: 4px;
 }
@@ -178,9 +172,3 @@
   margin: 0 !important;
   padding-left: 16px !important;
 }
-
-.tooltip-value {
-  font-size: 14px;
-  color: #e5e7eb;
-  word-break: break-word;
-}