initial tooltip rendered for ax

Author: evaSUry

src/app/FrontendTypes.ts

@@ -54,6 +54,7 @@ export interface TooltipData {
   x: number;
   y: number;
   color: string;
+  name?: string;
 }
 
 export interface snapshot {

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

@@ -1,11 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
 import { pointRadial } from 'd3-shape';
 import LinkControls from './axLinkControls';
 import getLinkComponent from './getAxLinkComponents';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import ToolTipDataDisplay from '../ComponentMap/ToolTipDataDisplay';
+import { ToolTipStyles } from '../../../FrontendTypes';
+import { localPoint } from '@visx/event';
 
+//still using below themes?
 const theme = {
   scheme: 'monokai',
   author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -153,6 +158,50 @@ export default function AxTree(props, {
   height: totalHeight,
   margin = defaultMargin,
 }: LinkTypesProps) {
+
+
+  const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
+  const {
+    tooltipData, // value/data that tooltip may need to render
+    tooltipLeft, // number used for tooltip positioning
+    tooltipTop, // number used for tooltip positioning
+    tooltipOpen, // boolean whether the tooltip state is open or closed
+    showTooltip, // function to set tooltip state
+    hideTooltip, // function to close a tooltip
+  } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
+  console.log('tool tip data: ', tooltipData);
+  // let nameVal = JSON.stringify(tooltipData)
+  // console.log('nameVal', nameVal);
+  const {
+    containerRef, // Access to the container's bounding box. This will be empty on first render.
+    TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
+  } = useTooltipInPortal({
+    // Visx hook
+    detectBounds: true, // use TooltipWithBounds
+    scroll: true, // when tooltip containers are scrolled, this will correctly update the Tooltip position
+  });
+
+  const tooltipStyles: ToolTipStyles = {
+    ...defaultStyles,
+    minWidth: 60,
+    maxWidth: 300,
+    backgroundColor: 'rgb(15,15,15)',
+    color: 'white',
+    fontSize: '16px',
+    lineHeight: '18px',
+    fontFamily: 'Roboto',
+    zIndex: 100,
+    pointerEvents: 'all !important',
+  };
+
+  const formatRenderTime = (time: number): string => {
+    if (!time) return 'No time information';
+    const renderTime = time.toFixed(3);
+    return `${renderTime} ms `;
+  };
+
+
+
   const [layout, setLayout] = useState('cartesian');
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
@@ -284,7 +333,9 @@ export default function AxTree(props, {
       />
       <svg width={totalWidth} height={totalHeight + 0}>
         <LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
-        <rect width={totalWidth} height={totalHeight} rx={14} fill="#272b4d" />
+        <rect width={totalWidth} height={totalHeight} rx={14} fill="#272b4d" onClick={() => {
+            hideTooltip();
+          }}/>
         <Group top={margin.top} left={margin.left}>
           <Tree
             root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
@@ -398,6 +449,19 @@ export default function AxTree(props, {
                   } else {
                     aspect = Math.max(aspect, 0.2);
                   }
+                  const handleMouseAndClickOver = (event): void => {
+                    const coords = localPoint(event.target.ownerSVGElement, event);
+                    const tooltipObj = { ...node.data };
+                    console.log("tooltipobj: ", tooltipObj);
+
+                    showTooltip({
+                      tooltipLeft: coords.x,
+                      tooltipTop: coords.y,
+                      tooltipData: tooltipObj,
+                      // this is where the data for state and render time is displayed
+                      // but does not show props functions and etc
+                    });
+                  };
 
                   return (
                     <Group top={top} left={left} key={key} className='rect'>
@@ -408,6 +472,7 @@ export default function AxTree(props, {
                           fill="url('#root-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
+                            hideTooltip();
                           }}
                         />
                       )}
@@ -431,6 +496,40 @@ export default function AxTree(props, {
                           rx={node.children ? 4 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
+                            hideTooltip();
+                          }}
+                          // Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
+                          /** This onMouseEnter event fires when the mouse first moves/hovers over a component node.
+                           * The supplied event listener callback produces a Tooltip element for the current node. */
+
+                          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). 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();
+                            }
+                            // Removes the previous timeoutID to avoid errors
+                            toolTipTimeoutID.current = null;
+                            //This generates a tooltip for the component node the mouse has entered.
+                            handleMouseAndClickOver(event);
+                          }}
+                          // Mouse Leave Rect (Component Node) --------------------------------------------------------------------------
+                          /** This onMouseLeave event fires when the mouse leaves a component node.
+                           * The supplied event listener callback generates a setTimeout call which gives the
+                           * mouse a certain amount of time between leaving the current component node and
+                           * closing the tooltip for that node.
+                           * If the mouse enters the tooltip before the timeout delay has passed, the
+                           * setTimeout event will be canceled. */
+                          onMouseLeave={() => {
+                            // Store setTimeout ID so timeout can be cleared if necessary
+                            toolTipTimeoutID.current = setTimeout(() => {
+                              // hideTooltip unmounts the tooltip
+                              hideTooltip();
+                              toolTipTimeoutID.current = null;
+                            }, 300);
                           }}
                         />
                       )}
@@ -459,6 +558,42 @@ export default function AxTree(props, {
           </Tree>
         </Group>
       </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          // set this to random so it correctly updates with parent bounds
+          key={Math.random()}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={tooltipStyles}
+          //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
+          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
+           *  that would've unmounted it */
+          onMouseEnter={() => {
+            clearTimeout(toolTipTimeoutID.current);
+            toolTipTimeoutID.current = null;
+          }}
+          //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
+          /** When the mouse leaves the tooltip, the tooltip unmounts */
+          onMouseLeave={() => {
+            hideTooltip();
+          }}
+        >
+          <div>
+            <div>
+                <strong>{JSON.stringify(tooltipData['name'].value)}</strong>
+              </div>
+            <div>
+              <ToolTipDataDisplay containerName='Props' dataObj={tooltipData} />
+              <ToolTipDataDisplay
+                containerName='State'
+                dataObj={
+                  tooltipData
+                }
+              />
+            </div>
+          </div>
+        </TooltipInPortal>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { JSONTree } from 'react-json-tree';
+
+/*
+  Code that show's the tooltip of our 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', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
+  // base09: '#592bad', // alternative purple
+  base0A: '#fec418',
+  base0B: '#48b685',
+  base0C: '#5bc4bf',
+  base0D: '#06b6ef',
+  base0E: '#815ba4',
+  base0F: '#e96ba8',
+};
+
+const ToolTipDataDisplay = ({ containerName, dataObj }) => {
+  const printableObject = {}; // The key:value properties of printableObject will be rendered in the JSON Tree
+
+  if (!dataObj) {
+    // If state is null rather than an object, print "State: null" in tooltip
+    printableObject[containerName] = dataObj;
+  } else {
+    /*
+      Props often contain circular references. 
+      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} // data to be rendered, a snapshot object
+        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include  "className: 'json-tree'"
+        shouldExpandNodeInitially={() => true} // determines if node should be expanded when it first renders (root is expanded by default)
+        hideRoot={true} // hides the root node
+      />
+    </div>
+  );
+};
+
+export default ToolTipDataDisplay;

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

@@ -57,8 +57,6 @@ export default function ComponentMap({
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'.
   const dispatch = useDispatch();
 
-  console.log('totalHeight: ', totalHeight);
-
   const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
 
   useEffect(() => {
@@ -111,6 +109,7 @@ export default function ComponentMap({
     hideTooltip, // function to close a tooltip
   } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
 
+  console.log('tooltipData component map: ', tooltipData);
   const {
     containerRef, // Access to the container's bounding box. This will be empty on first render.
     TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
@@ -184,10 +183,6 @@ export default function ComponentMap({
 
   findSelectedNode(); // locates the rootNode... do we really need this? This function is only used once... it's here.
 
-  console.log('startNode:', startNode);
-  console.log('nodelist:', nodeList);
-  console.log('nodelist length:', nodeList.length);
-
   // controls for the map
   const LinkComponent: React.ComponentType<unknown> = getLinkComponent({
     layout,