From dcfd64858a914ef0e013a5134237a2f12171ca40 Mon Sep 17 00:00:00 2001
From: C-STYR <colestyron@gmail.com>
Date: Tue, 19 Jan 2021 14:41:08 -0900
Subject: [PATCH 1/3] MESSAGE > > Co-authored-by: kev-ngo
 <kevinngo.cal@gmail.com> Co-authored-by: CourageWolf
 <marchofthepenguins1@gmail.com> Co-authored-by: DennisLpz
 <dnnis.lpz@gmail.com> Co-authored-by: demircaner <canerdemir62@gmail.com>

---
 src/app/components/ComponentMap.tsx | 40 +++++++++++++++++++----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index ba80e3909..e3684fa27 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -8,7 +8,7 @@ import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import { localPoint } from '@visx/event';
-import { useTooltip, useTooltipInPortal, TooltipWithBounds } from '@visx/tooltip';
+import { useTooltip, useTooltipInPortal, TooltipWithBounds, defaultStyles } from '@visx/tooltip';
 import { onHover, onHoverExit } from '../actions/actions'; 
 import { useStoreContext } from '../store';
 
@@ -106,17 +106,15 @@ export default function ComponentMap({
 
   const { containerRef, TooltipInPortal } = useTooltipInPortal();
 
-  //mousing controls
-  const handleMouseOver = (event) => {
-    console.log("mouse entered");
-    const coords = localPoint(event.target.ownerSVGElement, event);
-    console.log("I'm coords", coords);
-    showTooltip({
-      tooltipLeft: coords.x,
-      tooltipTop: coords.y,
-      tooltipData: "test"
-    });
-  }
+  const tooltipStyles = {
+    ...defaultStyles,
+    minWidth: 60,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    color: 'white',
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontFamily: 'Roboto',
+  };
 
 
   // controls for the map
@@ -180,6 +178,19 @@ export default function ComponentMap({
                     left = node.y;
                   }
 
+                  //mousing controls
+                  const handleMouseOver = (event) => {
+                    () => dispatch(onHover(node.data.rtid));
+                    const coords = localPoint(event.target.ownerSVGElement, event);
+                    console.log("I'm node.data.rtid", node.data.rtid);
+                    showTooltip({
+                      tooltipLeft: coords.x,
+                      tooltipTop: coords.y,
+                      tooltipData: "test"
+                    });
+                  }
+
+
                   return (
                     <Group top={top} left={left} key={key}>
                       {node.depth === 0 && (
@@ -241,16 +252,17 @@ export default function ComponentMap({
           </Tree>
         </Group>
       </svg>
-     tooltipOpen && tooltipData && (
+     {tooltipOpen && tooltipData && (
         <TooltipInPortal
           // set this to random so it correctly updates with parent bounds
           key={Math.random()}
           top={tooltipTop}
           left={tooltipLeft}
+          style={tooltipStyles}
         >
           Tooltip Data: <strong>{tooltipData}</strong>
         </TooltipInPortal>
-     )
+     )}
     </div>
   );
 }

From 9b402658c44b9dd52ffb61ae17862bbbedbf6f8e Mon Sep 17 00:00:00 2001
From: C-STYR <colestyron@gmail.com>
Date: Tue, 19 Jan 2021 14:45:01 -0900
Subject: [PATCH 2/3] Implemented Tooltip in Bounds > > Co-authored-by: kev-ngo
 <kevinngo.cal@gmail.com> Co-authored-by: CourageWolf
 <marchofthepenguins1@gmail.com> Co-authored-by: DennisLpz
 <dnnis.lpz@gmail.com> Co-authored-by: demircaner <canerdemir62@gmail.com>

---
 src/app/components/ComponentMap.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index e3684fa27..7e14bef16 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -104,7 +104,10 @@ export default function ComponentMap({
     hideTooltip,
   } = useTooltip();
 
-  const { containerRef, TooltipInPortal } = useTooltipInPortal();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
 
   const tooltipStyles = {
     ...defaultStyles,

From 61e67830c03ce5e15cc8cbd5fa05540a93bde49f Mon Sep 17 00:00:00 2001
From: C-STYR <colestyron@gmail.com>
Date: Tue, 19 Jan 2021 16:11:06 -0900
Subject: [PATCH 3/3] Implemented tooltip render times and statefulness and
 component name; > > Co-authored-by: kev-ngo <kevinngo.cal@gmail.com>
 Co-authored-by: CourageWolf <marchofthepenguins1@gmail.com> Co-authored-by:
 DennisLpz <dnnis.lpz@gmail.com> Co-authored-by: demircaner
 <canerdemir62@gmail.com>

---
 src/app/components/ComponentMap.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 7e14bef16..da4d927de 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -119,6 +119,11 @@ export default function ComponentMap({
     fontFamily: 'Roboto',
   };
 
+  const formatRenderTime = (time) => {
+    time = time.toFixed(3);
+    return `${time} ms `;
+  }
+
 
   // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
@@ -167,6 +172,8 @@ export default function ComponentMap({
                   const width = widthFunc(node.data.name);
                   const height = 25;
 
+
+
                   let top: number;
                   let left: number;
                   if (layout === 'polar') {
@@ -185,11 +192,13 @@ export default function ComponentMap({
                   const handleMouseOver = (event) => {
                     () => dispatch(onHover(node.data.rtid));
                     const coords = localPoint(event.target.ownerSVGElement, event);
-                    console.log("I'm node.data.rtid", node.data.rtid);
+                    const tooltipObj = Object.assign({}, node.data);
+                    if (typeof tooltipObj.state === 'object') tooltipObj.state = 'stateful';
+                    console.log("tooltipObj", tooltipObj)
                     showTooltip({
                       tooltipLeft: coords.x,
                       tooltipTop: coords.y,
-                      tooltipData: "test"
+                      tooltipData: tooltipObj
                     });
                   }
 
@@ -263,7 +272,13 @@ export default function ComponentMap({
           left={tooltipLeft}
           style={tooltipStyles}
         >
-          Tooltip Data: <strong>{tooltipData}</strong>
+            <div style={{ }}>
+            {' '}
+            <strong>{tooltipData.name}</strong>{' '}
+          </div>
+          <div>State: {tooltipData.state}</div>
+          <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
+
         </TooltipInPortal>
      )}
     </div>