wip: tooltip

Author: sareyu

src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx

@@ -2,6 +2,8 @@ import type {TBlock} from '@gravity-ui/graph';
 import { Icon } from '@gravity-ui/uikit';
 import {CodeMerge, Shuffle, VectorCircle, MapPin, BroadcastSignal} from '@gravity-ui/icons';
 
+import { TooltipComponent } from '../TooltipComponent';
+
 type Props = {
     block: TBlock;
     className: string;
@@ -24,9 +26,18 @@ const getIcon = (name: string) => {
 
 export const ConnectionBlockComponent = ({className, block}: Props) => {
     const icon = getIcon(block.name);
-    return (
+    const content = (
         <div className={className}>
             {icon && <Icon data={icon}/>} {block.name}
         </div>
     );
+
+    if (!block.stats?.length) {
+        return content;
+    }
+
+    return (
+        <TooltipComponent block={block}>{content}</TooltipComponent>
+            
+    );
 };

src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -1,16 +1,25 @@
-import type {TBlock} from '@gravity-ui/graph';
+import type { TBlock } from '@gravity-ui/graph';
 import { Text } from '@gravity-ui/uikit';
 
+import { TooltipComponent } from '../TooltipComponent';
+
 type Props = {
     block: TBlock;
     className: string;
 };
 
-export const StageBlockComponent = ({className, block}: Props) => {
+export const StageBlockComponent = ({ className, block }: Props) => {
+    const content = <div className={className}>
+        {block.operators ? block.operators.map((item) => <div key={item}>{item}</div>) : block.name}
+        {block.tables ? <div><Text color='secondary'>Tables: </Text>{block.tables.join(', ')}</div> : null}
+    </div>;
+
+    if (!block.stats?.length) {
+        return content;
+    }
+
     return (
-        <div className={className}>
-            {block.operators ? block.operators.map((item) => <div key={item}>{item}</div>) : block.name}
-            {block.tables ? <div><Text color='secondary'>Tables: </Text>{block.tables.join(', ')}</div> : null}
-        </div>
+        <TooltipComponent block={block}>{content}</TooltipComponent>
+            
     );
 };

src/components/Graph/GravityGraph.scss

@@ -41,10 +41,21 @@
     }
 
     &__block-content.connection {
+        display: flex;
+        align-items: center;
+        gap: 4px;
         border-radius: 6px;
         box-shadow: none;
         background: var(--g-color-base-info-light);
         border: 1px solid var(--g-color-line-info);
         color: var(--g-color-text-info-heavy);
     }
+
+    &__tooltip-content {
+        padding: 8px;
+        width: 300px;
+        font-size: var(--g-text-body-short-font-size);
+        line-height: var(--g-text-body-short-line-height);
+
+    }
 }

src/components/Graph/GravityGraph.tsx

@@ -56,7 +56,7 @@ const config = {
 const elk = new ELK();
 
 const renderBlockFn = (graph, block) => {
-    console.log('===', block);
+    // console.log('===', block);
 
     const map = {
         query: QueryBlockComponent,

src/components/Graph/TooltipComponent.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useMemo } from 'react';
+import type { TBlock } from '@gravity-ui/graph';
+import { Text, Popover, TabProvider, TabList, Tab, TabPanel } from '@gravity-ui/uikit';
+
+type Props = {
+    block: TBlock;
+    children: React.ReactNode;
+};
+
+const getTooltipContent = (block: TBlock) => {
+    const [activeTab, setActiveTab] = useState(block?.stats[0]?.group);
+
+    return (
+        <TabProvider value={activeTab} onUpdate={setActiveTab}>
+            <TabList>
+                {block?.stats?.map((item) => <Tab value={item.group}>{item.group}</Tab>)}
+            </TabList>
+            {block?.stats?.map((item) => <TabPanel value={item.group}>
+                {item.stats?.map((stat) => <div key={stat.name}>
+                    {Boolean(stat.items) && 
+                        <>
+                            <strong>{stat.name}</strong>
+                            {stat.items?.map(({ name, value }) => <div key={value}>{name}: {value}</div>)}
+                        </>
+                    }
+                    {!stat.items && <div>{stat.name}: {stat.value}</div>}
+
+                    
+                </div>)}
+            </TabPanel>)}
+        </TabProvider>
+    );
+}
+
+export const TooltipComponent = ({ block, children }: Props) => {
+    return (
+        <Popover content={getTooltipContent(block)}
+            hasArrow
+            trigger='click'
+            placement='right-start'
+            className='ydb-gravity-graph__tooltip-content'
+            disablePortal
+            strategy='fixed'>
+            {children}
+        </Popover>
+    );
+};