wip: tooltip

Author: sareyu

src/components/Graph/GravityGraph.scss

@@ -13,7 +13,12 @@
         box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
         border: 1px solid var(--g-color-line-generic);
         font-size: var(--g-text-body-short-font-size);
+        font-family: var(--g-font-family);
         line-height: var(--g-text-body-short-line-height);
+
+        &[aria-haspopup='dialog'] {
+            cursor: pointer;
+        }
     }
 
     &__block-id {
@@ -52,10 +57,37 @@
     }
 
     &__tooltip-content {
-        padding: 8px;
+        padding: 0 8px 8px;
         width: 300px;
         font-size: var(--g-text-body-short-font-size);
+        font-family: var(--g-font-family);
         line-height: var(--g-text-body-short-line-height);
+    }
+
+    &__tooltip-tabs {
+        margin-bottom: 8px;
+    }
+
+    &__tooltip-stat-row {
+        display: grid;
+        grid-template-columns: 100px auto;
+        gap: 8px;
+        margin: 4px 0 0;
+
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        span:nth-child(2) {
+            word-wrap: break-word;
+        }
+    }
+
+    &__tooltip-stat-group {
+        margin-top: 8px;
+    }
 
+    &__tooltip-stat-group-name {
+        font-weight: bold;
     }
 }

src/components/Graph/GravityGraph.tsx

@@ -53,10 +53,26 @@ const config = {
         showConnectionArrows: false,
     },
 };
+
+const baseElkConfig = {
+    id: 'root',
+    layoutOptions: {
+        'elk.algorithm': 'layered',
+        'elk.direction': 'DOWN',
+        // 'elk.spacing.edgeNode': '50',
+        'elk.layered.spacing.nodeNodeBetweenLayers': '20',
+        'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+        'elk.layered.nodePlacement.bk.ordering': 'INTERACTIVE',
+        // 'elk.debugMode': true,
+        // 'elk.alignment': 'CENTER'
+    },
+};
+
+
 const elk = new ELK();
 
 const renderBlockFn = (graph, block) => {
-    // console.log('===', block);
+    console.log('===', block);
 
     const map = {
         query: QueryBlockComponent,
@@ -83,52 +99,7 @@ const renderBlockFn = (graph, block) => {
     );
 };
 
-// const _blocks: TBlock[] = [
-//     {
-//         width: 200,
-//         height: 160,
-//         id: 'Left',
-//         is: 'block-action',
-//         selected: false,
-//         name: 'Left block',
-//         anchors: [],
-//     },
-//     {
-//         width: 200,
-//         height: 160,
-//         id: 'Right',
-//         is: 'block-action',
-//         selected: false,
-//         name: 'Right block',
-//         anchors: [],
-//     },
-// ];
-
-// const _connections = [
-//     {
-//         id: 'c1',
-//         sourceBlockId: 'Left',
-//         targetBlockId: 'Right',
-//     },
-// ];
-
-const baseElkConfig = {
-    id: 'root',
-    layoutOptions: {
-        'elk.algorithm': 'layered',
-        'elk.direction': 'DOWN',
-        // 'elk.spacing.edgeNode': '50',
-        'elk.layered.spacing.nodeNodeBetweenLayers': '20',
-        'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
-        'elk.layered.nodePlacement.bk.ordering': 'INTERACTIVE',
-        'elk.debugMode': true,
-        // 'elk.alignment': 'CENTER'
-    },
-};
-
 export function GravityGraph<T>({data, theme}: Props<T>) {
-    // console.log('997', data);
-
     const _blocks = useMemo(() => prepareBlocks(data.nodes), [data.nodes]);
     const _connections = useMemo(() => prepareConnections(data.links), [data.links]);
     const elkConfig = useMemo(
@@ -147,26 +118,15 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
             return;
         }
 
-        // console.log('result', result);
-
-        const blocks = _blocks.map((block) => {
-            return {
-                ...block,
-                ...result.blocks[block.id],
-            };
-        });
+        const blocks = _blocks.map((block) => ({
+            ...block,
+            ...result.blocks[block.id],
+        }));
 
-        const connections = _connections.reduce((acc, connection) => {
-            if (connection.id in result.edges) {
-                acc.push({
-                    ...connection,
-                    ...result.edges[connection.id],
-                });
-            }
-            return acc;
-        }, []);
-
-        // console.log('connections', connections);
+        const connections = _connections.map((connection) => ({
+            ...connection,
+            ...(connection.id? result.edges[connection.id] : {}),
+        }));
 
         graph.setEntities({
             blocks,

src/components/Graph/TooltipComponent.tsx

@@ -2,31 +2,36 @@ import React, { useState, useMemo } from 'react';
 import type { TBlock } from '@gravity-ui/graph';
 import { Text, Popover, TabProvider, TabList, Tab, TabPanel } from '@gravity-ui/uikit';
 
+import {cn} from '../../utils/cn';
+const b = cn('ydb-gravity-graph');
 type Props = {
     block: TBlock;
     children: React.ReactNode;
 };
 
+const getStatsContent = (stat) => {
+    if (!stat.items) {
+        return <p className={b('tooltip-stat-row')} key={stat.name}><span>{stat.name}:</span><span>{stat.value}</span></p>;    
+    }
+
+    return (
+        <section className={b('tooltip-stat-group')} key={stat.name}>
+            <div className={b('tooltip-stat-group-name')}>{stat.name}:</div>
+            {stat.items?.map(({ name, value }) => <p className={b('tooltip-stat-row')} key={name}><span>{name}:</span><span>{value}</span></p>)}
+        </section>
+    );
+}
+
 const getTooltipContent = (block: TBlock) => {
     const [activeTab, setActiveTab] = useState(block?.stats[0]?.group);
 
     return (
         <TabProvider value={activeTab} onUpdate={setActiveTab}>
-            <TabList>
+            <TabList className={b('tooltip-tabs')}>
                 {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>)}
+                {item.stats?.map(getStatsContent)}
             </TabPanel>)}
         </TabProvider>
     );