Merge pull request #5 from oslabs-beta/staging

Integrates Visx Tooltip functionality into the Map component

Author: demircaner

src/app/components/ComponentMap.tsx

@@ -7,7 +7,9 @@ import { pointRadial } from 'd3-shape';
 import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
-import { onHover, onHoverExit } from '../actions/actions';
+import { localPoint } from '@visx/event';
+import { useTooltip, useTooltipInPortal, TooltipWithBounds } from '@visx/tooltip';
+import { onHover, onHoverExit } from '../actions/actions'; 
 import { useStoreContext } from '../store';
 
 const root = hierarchy({
@@ -30,6 +32,7 @@ interface TreeNode {
   children?: TreeNode[];
 }
 
+
 type HierarchyNode = HierarchyPointNode<TreeNode>;
 
 const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70 };
@@ -89,6 +92,33 @@ export default function ComponentMap({
       sizeHeight = innerWidth;
     }
   }
+
+
+  //Tooltip stuff: 
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  } = useTooltip();
+
+  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"
+    });
+  }
+
+
   // controls for the map
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
   return totalWidth < 10 ? null : (
@@ -104,7 +134,7 @@ export default function ComponentMap({
         setStepPercent={setStepPercent}
       />
 
-      <svg width={totalWidth} height={totalHeight}>
+      <svg ref={containerRef} width={totalWidth} height={totalHeight}>
         <LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
         <rect width={totalWidth} height={totalHeight} rx={14} fill="#242529" />
         <Group top={margin.top} left={margin.left}>
@@ -180,31 +210,10 @@ export default function ComponentMap({
                             node.data.isExpanded = !node.data.isExpanded;
                             forceUpdate();
                           }}
-                          //check with recoil
-                          onMouseLeave={() => {
-                            if (
-                              Object.keys(node.data.recoilDomNode).length > 0
-                            ) {
-                              dispatch(
-                                onHoverExit(
-                                  node.data.recoilDomNode[node.data.name]
-                                )
-                              );
-                            } else {
-                              dispatch(onHoverExit(node.data.rtid));
-                            }
-                          }}
-                          onMouseEnter={() => {
-                            if (
-                              Object.keys(node.data.recoilDomNode).length > 0
-                            ) {
-                              dispatch(
-                                onHover(node.data.recoilDomNode[node.data.name])
-                              );
-                            } else {
-                              dispatch(onHover(node.data.rtid));
-                            }
-                          }}
+                          //Tooltip event handlers
+                          //test feature
+                          onMouseOver={handleMouseOver}
+                          onMouseOut={hideTooltip}
                         />
                       )}
                       {/* Display text inside of each component node */}
@@ -232,6 +241,16 @@ export default function ComponentMap({
           </Tree>
         </Group>
       </svg>
+     tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          // set this to random so it correctly updates with parent bounds
+          key={Math.random()}
+          top={tooltipTop}
+          left={tooltipLeft}
+        >
+          Tooltip Data: <strong>{tooltipData}</strong>
+        </TooltipInPortal>
+     )
     </div>
   );
 }