From a7c1cfebed74e76998fe50d83bf5961102c4b87e Mon Sep 17 00:00:00 2001
From: Christian Lechner <lechnerc77@users.noreply.github.com>
Date: Tue, 16 Apr 2024 12:23:42 +0200
Subject: [PATCH] feat: add tooltip

---
 .../src/components/resourcenode/ResourceNode.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
index 6ea8528..ac8f7e1 100644
--- a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
+++ b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Resource } from '../../graph';
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, Position, NodeToolbar } from 'reactflow';
+import { parseResourceId } from '@radapp.io/rad-components';
 
 //  Note: the default style assigned to a node gives it a 150px width
 // from style: .react-flow__node-default.
@@ -8,8 +9,19 @@ import { Handle, NodeProps, Position } from 'reactflow';
 export type ResourceNodeProps = Pick<NodeProps<Resource>, 'data'>;
 
 function ResourceNode(props: ResourceNodeProps) {
+
+  const group = parseResourceId(props.data.id)?.group
+
   return (
     <>
+      <NodeToolbar position={Position.Left} align={"center"}>
+      <div style={{ padding: '4px', backgroundColor: 'grey', fontSize: '.6rem'}}>
+        <p style={{ textAlign: 'left' }}>Name: {props.data.name}</p>
+        <p style={{ textAlign: 'left' }}>Type: {props.data.type}</p>
+        <p style={{ textAlign: 'left' }}>Group: {group}</p>
+      </div>
+      </NodeToolbar>
+
       <Handle type="target" position={Position.Top} />
       <div style={{ padding: '2px', fontSize: '.6rem' }}>
         <h3 style={{ textAlign: 'center' }}>{props.data.name}</h3>
@@ -21,4 +33,4 @@ function ResourceNode(props: ResourceNodeProps) {
   );
 }
 
-export default ResourceNode;
+export default React.memo(ResourceNode);