Tooltip json tree integration and styling

Co-authored-by: Jasmine Noor <[email protected]>
Co-authored-by: Minzo Kim <[email protected]>
Co-authored-by: Jackie Yuan <[email protected]>

Author: 4 people

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

@@ -17,6 +17,7 @@ import { localPoint } from '@visx/event';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
+import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 
@@ -122,19 +123,6 @@ export default function ComponentMap({
     return `${renderTime} ms `;
   };
 
-  const formatData = (data, type) => {
-    const contextFormat = [];
-    for (const key in data) {
-      // Suggestion: update the front end to display as a list if we have object
-      let inputData = data[key];
-      if (inputData !== null && typeof inputData === 'object') {
-        inputData = JSON.stringify(inputData);
-      }
-      contextFormat.push(<p className={`${type}-item`}>{`${key}: ${inputData}`}</p>);
-    }
-    return contextFormat;
-  };
-
   const formatState = (state) => {
     if (state === 'stateless') return ['stateless'];
     return ['stateful'];
@@ -296,19 +284,13 @@ export default function ComponentMap({
                           onMouseEnter={(event) => {
                             /** This 'if' statement block checks to see if you've just left another component node
                              * by seeing if there's a current setTimeout waiting to close that component node's 
-                             * tooltip (see onMouseLeave immediately below).
-                             * This setTimeout gives the mouse time to enter the tooltip element so the tooltip 
-                             * can persist. If instead of entering said tooltip element you've left the previous 
-                             * component node to enter this component node, this logic will clear the timeout event,
-                             * and close the tooltip. */
+                             * tooltip (see onMouseLeave immediately below). If so it clears the tooltip generated 
+                             * from that component node so a new tooltip for the node you've just entered can render. */
                             if (toolTipTimeoutID.current !== null) {
                               clearTimeout(toolTipTimeoutID.current);
                               hideTooltip();
                             }
-                            /** The following line resets the toolTipTimeoutID.current to null, showing that there
-                            * are no current setTimeouts running. I placed this outside of the above if statement  
-                            * to make sure there are no edge cases that would allow for the toolTipTimeoutID.current
-                            * to hold onto an old reference. */
+                            // Removes the previous timeoutID to avoid errors
                             toolTipTimeoutID.current = null;
                             //This generates a tooltip for the component node the mouse has entered.
                             handleMouseAndClickOver(event);
@@ -322,13 +304,11 @@ export default function ComponentMap({
                            * If the mouse enters the tooltip before the timeout delay has passed, the 
                            * setTimeout event will be canceled. */
                           onMouseLeave={() => {
-                            // This line invokes setTimeout and saves its ID to the useRef var toolTipTimeoutID
+                            // Store setTimeout ID so timeout can be cleared if necessary
                             toolTipTimeoutID.current = setTimeout(() => {
                               // hideTooltip unmounts the tooltip
                               hideTooltip();
-                              // As the timeout has been executed, the timeoutID can be reset to null
                               toolTipTimeoutID.current = null;
-                              //There is a delay of 300 ms
                             }, 300);
                           }}
                         />
@@ -361,23 +341,16 @@ export default function ComponentMap({
           style={tooltipStyles}
 
           //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
-          /** This onMouseEnter fires when the mouse first moves/hovers over the tooltip
-           * The supplied event listener callback stops the setTimeout that was going to 
-           * close the tooltip from firing */ 
-          
+          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
+           *  that would've unmounted it */ 
           onMouseEnter={() => {
-            // The setTimeoutID stored in toolTipTimeoutID.current is from the setTimeout initiated by leaving the 
-            // component node that generated the tooltip. If you've triggered an onMouseEnter event in that tooltip,
             clearTimeout(toolTipTimeoutID.current);
-            // This line resets the timeoutID to null
             toolTipTimeoutID.current = null;
           }}
 
           //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
-          /** This onMouseLeave event fires when the mouse leaves the tooltip 
-           * The supplied event listener callback unmounts the tooltip */
+          /** When the mouse leaves the tooltip, the tooltip unmounts */
           onMouseLeave={() => {
-            // hideTooltip unmounts the tooltip
             hideTooltip();
           }}
         >
@@ -391,26 +364,18 @@ export default function ComponentMap({
               State: {formatState(tooltipData.state)}
             </div>
             <div style={React.scrollStyle}>
-              <div className='tooltipWrapper'>
-                <h2>Props:</h2>
-                {formatData(tooltipData.componentData.props, 'props')}
-              </div>
 
-              {/* Currently no use for this field
-              <div className='tooltipWrapper'>
-                <h2>Initial Context:</h2>
-                {formatData(tooltipData.componentData.context, 'context')}
-              </div> */}
+              <ToolTipDataDisplay
+                containerName='Props' 
+                dataObj={tooltipData.componentData.props}
+              />
 
-              <div className='tooltipWrapper'>
-                <h2>State:</h2>
-                {formatData(
-                  tooltipData.componentData.hooksIndex
-                    ? tooltipData.componentData.hooksState
-                    : tooltipData.componentData.state,
-                  'state',
-                )}
-              </div>
+              <ToolTipDataDisplay
+                containerName='State'
+                dataObj={tooltipData.componentData.hooksIndex
+                  ? tooltipData.componentData.hooksState
+                  : tooltipData.componentData.state}
+              />
             </div>
           </div>
         </TooltipInPortal>

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

@@ -0,0 +1,73 @@
+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 is orange for booleans and numbers. This base in particular fails to match the entered color.
+  base09: '#824508', 
+// base09: '#592bad', // alternative purple
+  base0A: '#fec418',
+  base0B: '#48b685',
+  base0C: '#5bc4bf',
+  base0D: '#06b6ef',
+  base0E: '#815ba4',
+  base0F: '#e96ba8',
+};
+
+
+const ToolTipDataDisplay = ({ containerName, dataObj }) => {
+  //The key:value properties of printableObject will be rendered in the JSON Tree
+  const printableObject = {}
+  //If state is null rather than an object, print "State: null" in tooltip
+  if (!dataObj) {
+      printableObject[containerName] = dataObj;
+  } else {
+    // Props often contain circular references and 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 {
+          data[key] = dataObj[key];
+        }
+      } else {
+        data[key] = dataObj[key];
+      }
+    }
+    // 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}
+        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }}
+        shouldExpandNode={() => true}
+        hideRoot={true}
+        />
+    </div>
+  )
+};
+
+export default ToolTipDataDisplay;

src/app/styles/layout/_stateContainer.scss

@@ -219,41 +219,63 @@
 
 // tool tip styles
 
-
 .visx-tooltip{
   overflow-y: auto;
   overflow-wrap: break-word;
   pointer-events:all !important;
 }
-.props, .stateTip{
+
+.stateTip{
   margin-top: 3px;
   line-height: 1;
   height: 100%;
   overflow-y: hidden;
   max-height: 400px;
 }
-.props{
-  margin-top: 3px;
-}
-.props p{
-  line-height:1;
-  margin-top: 3px;
-  margin-bottom: 0px;
-}
-.stateTip p{
+
+.stateTip p {
   line-height:1;
   margin-top: 3px;
   margin-bottom: 0px;
 }
+
 .historyToolTip{
   z-index: 2;
 }
 
-
 .state-container .router-link {
   border: 0.5px solid black;
 }
-/* if state view is  width is less than 500px, stack the body containers */
-// @media (max-width: 500px) {
 
-// }
+.tooltipData {
+  background-color: #373737;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  padding: 2px;
+  max-height: 30vh;
+  // border: 5px solid rgba(0, 0, 0, 0.9);
+}
+
+.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;
+
+}
+
+.tooltipData-JSONTree::-webkit-scrollbar-thumb {
+  background:#919499;
+
+}
+
+.tooltipData-JSONTree::-webkit-scrollbar-track{
+  background:#51565e;
+}
+
+

src/app/styles/main.scss

@@ -5,29 +5,6 @@
   font-family: 'Roboto', sans-serif;
 }
 
-.tooltipWrapper {
-  background-color: #505050;
-  color: rgb(216, 216, 216);
-  margin-top: 3px;
-  margin-bottom: 3px;
-  padding: 2px;
-}
-
-.tooltipWrapper h2 {
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-left: 1px;
-  font-size: small;
-  font-weight: bolder;
-}
-
-.tooltipWrapper p {
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-left: 10px;
-  margin-right: 3px;
-}
-
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -50,8 +27,6 @@
   background: rgb(97, 97, 97);
 }
 
-// fixing the tooltip display for overflow scrolling
-
 // 1. Configuration and helpers
 @import 'abstracts/variables';