feat: add from/to, color and fix tooltip

libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx

@@ -20,6 +20,7 @@ export const SchemaNode: Story = {
   },
   args: {
     type: 'schema',
+    typeOfSchema: 'node',
     name: 'Person',
     data: {
       born: 'int',
@@ -40,6 +41,7 @@ export const SchemaRelationship: Story = {
   },
   args: {
     type: 'schema',
+    typeOfSchema: 'relationship',
     name: 'Directed',
     data: {
       born: 'int',

libs/shared/lib/components/CardToolTipVis/index.tsx

@@ -8,42 +8,68 @@ export type CardToolTipVisProps = {
   type: string;
   name: string;
   data: Record<string, any>;
+  typeOfSchema?: string;
   colorHeader: string;
   connectedTo?: string;
   connectedFrom?: string;
+  maxVisibleItems?: number;
 };
 
-export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ type, name, data, colorHeader }) => {
+export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
+  type,
+  name,
+  data,
+  colorHeader,
+  maxVisibleItems = 5,
+  connectedFrom,
+  connectedTo,
+  typeOfSchema,
+}) => {
+  const itemsToShow = Object.entries(data).slice(0, maxVisibleItems);
   return (
     <div className="border-2 border-sec-200 bg-white ">
       <div className="flex m-0 items-center border-b-2 border-sec-200">
-        <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96% 60%)' }}></div>
+        <div className="h-9 w-4" style={{ backgroundColor: colorHeader }}></div>
         <span className="text-xl ml-2">{name}</span>
       </div>
+      {type === 'schema' && typeOfSchema === 'relationship' && (
+        <div className="px-4 py-1 border-b-2 border-sec-200">
+          <div className="flex flex-row gap-3 items-center justify-between">
+            <span className="font-semibold">From</span>
+            <span className="ml-auto text-right">{connectedFrom}</span>
+          </div>
+
+          <div className="flex flex-row gap-3 items-center justify-between">
+            <span className="font-semibold">To</span>
+            <span className="ml-auto text-right">{connectedTo}</span>
+          </div>
+        </div>
+      )}
+
       <TooltipProvider delayDuration={300}>
-        <div className="px-4 py-2 ">
+        <div className={`px-4 py-2 ${data.length > maxVisibleItems ? 'max-h-20 overflow-y-auto' : ''}`}>
           {data &&
             Object.entries(data).map(([k, v]) => (
               <Tooltip key={k}>
-                <TooltipTrigger asChild>
-                  <div className="flex flex-row gap-3 items-center">
-                    <span className="font-semibold">{k}</span>
+                <div className="flex flex-row gap-3 items-center">
+                  <span className="font-semibold">{k}</span>
+                  <TooltipTrigger asChild>
                     <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
                       {type === 'schema' ? (
-                        <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
+                        <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" />
                       ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
                         <span>{v.toString()}</span>
                       ) : (
                         <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
                       )}
                     </span>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div>
-                    <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? v : 'noData'}</span>
-                  </div>
-                </TooltipContent>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">
+                    <div>
+                      <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? v : 'noData'}</span>
+                    </div>
+                  </TooltipContent>
+                </div>
               </Tooltip>
             ))}
         </div>

libs/shared/lib/components/icon/index.tsx

@@ -14,5 +14,5 @@ export const Icon: React.FC<IconProps> = ({ component, size = 24, color, ...prop
     return <div></div>;
   }
 
-  return React.cloneElement(component, { style: { fontSize: size }, width: size, height: size, ...props });
+  return React.cloneElement(component, { style: { fontSize: size, color: color }, width: size, height: size, ...props });
 };