From 7067a3f2086b8b36329bcdd808cae5d32b31c542 Mon Sep 17 00:00:00 2001
From: Nicholas Nelson <nelsonni@oregonstate.edu>
Date: Mon, 15 Mar 2021 22:29:48 -0700
Subject: [PATCH] Commit hash display on hover for GitGraph commit nodes

---
 src/components/GitNode.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/GitNode.tsx b/src/components/GitNode.tsx
index 9e962045c..3924d06ac 100644
--- a/src/components/GitNode.tsx
+++ b/src/components/GitNode.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Handle, NodeProps, Position } from 'react-flow-renderer';
 import { ColorSet } from '../containers/colors';
-import { OutlinedCard } from './GitGraphBranchTag';
+import { OutlinedCard } from './GitGraphTag';
 
 const customNodeStyles = (color: ColorSet, border: string, opacity?: string) => ({
   borderRadius: '50%',
@@ -25,10 +25,15 @@ type GitNodeProps = NodeProps & {
 }
 
 export const GitNode: React.FunctionComponent<GitNodeProps> = props => {
+  const [isHovering, setIsHovering] = useState(false);
+
   return (
     <>
       { props.data.branch ? <OutlinedCard content={props.data.branch} placement='right' /> : null}
-      <div style={customNodeStyles(props.data.color, props.data.border, props.data.opacity)}>
+      { isHovering ? <OutlinedCard content={props.id} placement='bottom' /> : null}
+      <div style={customNodeStyles(props.data.color, props.data.border, props.data.opacity)}
+        onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}
+      >
         <Handle type='target' position={Position.Top} style={{ visibility: 'hidden' }} />
         <div>{props.data.text}</div>
         <Handle type='source' position={Position.Bottom} style={{ visibility: 'hidden' }} />