began styling tool tip display

Author: garrettlchow

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

@@ -435,9 +435,6 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill="url('#parent-gradient')"
-                          strokeWidth={1.5}
-                          strokeOpacity='1'
                           rx={node.children ? 4 : 10}
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
@@ -489,8 +486,6 @@ export default function ComponentMap({
                               : 'compMapChildText'
                         }
                         dy='.33em'
-                        fontSize='20px'
-                        fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
                       >

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

@@ -1,29 +1,7 @@
 import React from 'react';
 import { JSONTree } from 'react-json-tree';
 
-const colors = {
-  scheme: 'paraiso',
-  author: 'jan t. sott',
-  base00: '#2f1e2e',
-  base01: '#41323f',
-  base02: '#4f424c',
-  base03: '#776e71',
-  base04: '#8d8687',
-  base05: '#a39e9b',
-  base06: '#b9b6b0',
-  base07: '#e7e9db',
-  base08: '#ef6155',
-  base09: '#824508',
-  base0A: '#fec418',
-  base0B: '#48b685',
-  base0C: '#5bc4bf',
-  base0D: '#06b6ef',
-  base0E: '#815ba4',
-  base0F: '#e96ba8',
-};
-
 const ToolTipDataDisplay = ({ containerName, dataObj }) => {
-  // If there's no data to display, don't render anything
   if (
     !dataObj ||
     (Array.isArray(dataObj) && dataObj.length === 0) ||
@@ -35,45 +13,68 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
   const formatReducerData = (reducerStates) => {
     // Transform the array of reducers into an object with hook names as keys
     return reducerStates.reduce((acc, reducer) => {
-      acc[reducer.hookName || 'Reducer'] = {
-        state: reducer.state,
-      };
+      // Use the hookName as the key and only include the state
+      acc[reducer.hookName || 'Reducer'] = reducer.state;
       return acc;
     }, {});
   };
 
-  const printableObject = {};
-
-  if (containerName === 'Reducers') {
-    if (!dataObj || dataObj.length === 0) {
-      return null;
+  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: '#06b6d4', // Cyan for nulls
+          }}
+          hideRoot
+          shouldExpandNode={() => true}
+        />
+      );
     }
-    printableObject[containerName] = formatReducerData(dataObj);
-  } else {
-    // Handle normal state/props
-    const data = {};
-    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];
-      }
+    return <span className='tooltip-value'>{String(value)}</span>;
+  };
+
+  const renderContent = () => {
+    if (containerName === 'Reducers') {
+      const formattedData = formatReducerData(dataObj);
+      return (
+        <div className='tooltip-content'>
+          {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>
+          ))}
+        </div>
+      );
     }
-    printableObject[containerName] = data;
-  }
+
+    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>
+    );
+  };
 
   return (
-    <div className='tooltipData' key={`${containerName}-data-container`}>
-      <JSONTree
-        data={printableObject}
-        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }}
-        shouldExpandNodeInitially={() => true}
-        hideRoot={true}
-      />
+    <div className='tooltip-container'>
+      <div className='tooltip-header'>
+        <h3 className='tooltip-title'>{containerName}</h3>
+      </div>
+      {renderContent()}
     </div>
   );
 };

src/app/styles/layout/_stateContainer.scss

@@ -2,6 +2,14 @@
   overflow: auto;
 }
 
+.app-body {
+  height: 100%;
+}
+
+.app-content {
+  height: 100%;
+}
+
 .main-navbar-container--structural {
   height: 0;
   padding: 0;
@@ -91,53 +99,88 @@
 }
 
 // tool tip styles
+.tooltip-container {
+  width: 300px;
+  background-color: #1f2937;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  font-family: 'Outfit', sans-serif;
+  color: #f9fafb;
+  overflow: hidden;
+  margin: 4px 0;
+}
+
+.tooltip-header {
+  padding: 12px 16px;
+  background-color: #111827;
+  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+}
 
-.visx-tooltip {
+.tooltip-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #f9fafb;
+}
+
+.tooltip-content {
+  max-height: 400px;
   overflow-y: auto;
-  overflow-wrap: break-word;
-  pointer-events: all !important;
 }
 
-.tooltipKey {
-  margin-bottom: -1px;
+/* Reducer specific styling */
+.tooltip-reducer-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
 }
 
-.historyToolTip {
-  z-index: 2;
+.tooltip-reducer-item:last-child {
+  border-bottom: none;
 }
 
-.tooltipData {
-  background-color: #373737;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  padding: 2px;
-  max-height: 30vh;
+.tooltip-reducer-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #14b8a6;
+  margin-bottom: 8px;
 }
 
-.tooltipData-JSONTree {
-  list-style: none;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-left: 2px;
-  margin-right: 2px;
-  padding: 0px;
-  overflow-y: auto;
-  max-height: 30vh;
-  scrollbar-color: #919499 #51565e;
+.tooltip-reducer-state {
+  padding-left: 12px;
+  border-left: 2px solid rgba(20, 184, 166, 0.4);
 }
 
-.tooltipData-JSONTree::-webkit-scrollbar-thumb {
-  background: #919499;
+/* Scrollbar styling */
+.tooltip-content::-webkit-scrollbar {
+  width: 4px;
 }
 
-.tooltipData-JSONTree::-webkit-scrollbar-track {
-  background: #51565e;
+.tooltip-content::-webkit-scrollbar-track {
+  background: rgba(107, 114, 128, 0.1);
 }
 
-.app-body {
-  height: 100%;
+.tooltip-content::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 2px;
 }
 
-.app-content {
-  height: 100%;
+/* JSON Tree overrides */
+.json-tree {
+  background-color: transparent !important;
+  margin: 0 !important;
+  padding: 4px 0 !important;
+}
+
+.json-tree ul {
+  background-color: transparent !important;
+  margin: 0 !important;
+  padding-left: 16px !important;
+}
+
+.tooltip-value {
+  font-size: 14px;
+  color: #e5e7eb;
+  word-break: break-word;
 }