fix: review fixes

sareyu · sareyu · commit 613fbe6b6ee0 · 2025-09-30T16:54:43.000+03:00
diff --git a/src/components/Graph/BlockComponents/StageBlockComponent.tsx b/src/components/Graph/BlockComponents/StageBlockComponent.tsx
@@ -1,6 +1,7 @@
 import {Text} from '@gravity-ui/uikit';
 
 import {TooltipComponent} from '../TooltipComponent';
+import i18n from '../i18n';
 import type {ExtendedTBlock} from '../types';
 
 type Props = {
@@ -16,7 +17,7 @@ export const StageBlockComponent = ({className, block}: Props) => {
                 : block.name}
             {block.tables ? (
                 <div>
-                    <Text color="secondary">Tables: </Text>
+                    <Text color="secondary">{i18n('label_tables')}: </Text>
                     {block.tables.join(', ')}
                 </div>
             ) : null}
diff --git a/src/components/Graph/GraphControls.tsx b/src/components/Graph/GraphControls.tsx
@@ -1,3 +1,5 @@
+import {useCallback} from 'react';
+
 import type {Graph} from '@gravity-ui/graph';
 import {Button, Icon} from '@gravity-ui/uikit';
 
@@ -15,19 +17,19 @@ interface Props {
 }
 
 export const GraphControls = ({graph}: Props) => {
-    const onZoomInClick = () => {
+    const onZoomInClick = useCallback(() => {
         const cameraScale = graph.cameraService.getCameraScale();
         graph.zoom({scale: cameraScale * ZOOM_STEP});
-    };
+    }, [graph]);
 
-    const onZoomOutClick = () => {
+    const onZoomOutClick = useCallback(() => {
         const cameraScale = graph.cameraService.getCameraScale();
         graph.zoom({scale: cameraScale / ZOOM_STEP});
-    };
+    }, [graph]);
 
-    const onResetZoomClick = () => {
+    const onResetZoomClick = useCallback(() => {
         graph.zoom({scale: 1});
-    };
+    }, [graph]);
 
     return (
         <div className={b('zoom-controls')}>
diff --git a/src/components/Graph/GravityGraph.tsx b/src/components/Graph/GravityGraph.tsx
@@ -66,7 +66,7 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
     const {graph, start} = useGraph(config);
 
     React.useEffect(() => {
-        // на всякий случай, хотя маунт больше времени занимает, чем расчёт
+        // Just in case, although mounting takes more time than calculation
         const worker = new Worker(new URL('./treeLayout', import.meta.url));
         worker.postMessage({
             nodes: data.nodes,
diff --git a/src/components/Graph/TooltipComponent.tsx b/src/components/Graph/TooltipComponent.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 
 import {Popover, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';
 
@@ -43,21 +43,24 @@ const useTooltipContent = (block: ExtendedTBlock) => {
     const firstTab = block?.stats?.[0]?.group || '';
     const [activeTab, setActiveTab] = useState(firstTab);
 
-    return (
-        <TabProvider value={activeTab} onUpdate={setActiveTab}>
-            <TabList className={b('tooltip-tabs')}>
+    return useMemo(
+        () => (
+            <TabProvider value={activeTab} onUpdate={setActiveTab}>
+                <TabList className={b('tooltip-tabs')}>
+                    {block?.stats?.map((item) => (
+                        <Tab value={item.group} key={item.group}>
+                            {item.group}
+                        </Tab>
+                    ))}
+                </TabList>
                 {block?.stats?.map((item) => (
-                    <Tab value={item.group} key={item.group}>
-                        {item.group}
-                    </Tab>
+                    <TabPanel value={item.group} key={item.group}>
+                        {item.stats?.map(getStatsContent)}
+                    </TabPanel>
                 ))}
-            </TabList>
-            {block?.stats?.map((item) => (
-                <TabPanel value={item.group} key={item.group}>
-                    {item.stats?.map(getStatsContent)}
-                </TabPanel>
-            ))}
-        </TabProvider>
+            </TabProvider>
+        ),
+        [block?.stats, activeTab],
     );
 };
 
diff --git a/src/components/Graph/i18n/en.json b/src/components/Graph/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "label_tables": "Tables"
+}
diff --git a/src/components/Graph/i18n/index.ts b/src/components/Graph/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-gravity-graph';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/components/Graph/treeLayout.ts b/src/components/Graph/treeLayout.ts
@@ -14,29 +14,27 @@ class TreeLayoutEngine {
         this.blocks = new Map(blocks.map((block: any) => [block.id, {...block}]));
         this.connections = connections;
 
-        // Настройки отступов
+        // Layout settings
         this.options = {
-            horizontalSpacing: options.horizontalSpacing || 40, // расстояние между блоками по горизонтали
-            verticalSpacing: options.verticalSpacing || 20, // расстояние между уровнями
+            horizontalSpacing: options.horizontalSpacing || 40, // horizontal distance between blocks
+            verticalSpacing: options.verticalSpacing || 20, // vertical distance between levels
             ...options,
         };
 
         this.tree = null;
         this.levels = [];
     }
 
-    // Построение структуры дерева
+    // Building a tree structure
     buildTree() {
-        // Создаем карты родителей и детей
         const childrenMap = new Map();
         const parentMap = new Map();
 
-        // Инициализируем карты
         for (const block of this.blocks.values()) {
             childrenMap.set(block.id, []);
         }
 
-        // Заполняем связи
+        // Setting connections
         for (const connection of this.connections) {
             const parent = connection.sourceBlockId;
             const child = connection.targetBlockId;
@@ -45,14 +43,14 @@ class TreeLayoutEngine {
             parentMap.set(child, parent);
         }
 
-        // Находим корневой узел (узел без родителя)
+        // Find root (a node without a parent)
         const rootId = Array.from(this.blocks.keys()).find((id) => !parentMap.has(id));
 
         if (!rootId) {
             throw new Error('Root node not found');
         }
 
-        // Рекурсивно строим дерево
+        // Recursively building a tree
         const buildNode = (nodeId: string, level = 0): TreeNode => {
             const block = this.blocks.get(nodeId);
             const children = childrenMap
@@ -74,7 +72,7 @@ class TreeLayoutEngine {
         return this.tree;
     }
 
-    // Группировка узлов по уровням
+    // Grouping nodes by levels
     groupByLevels(node: TreeNode | null = this.tree, levels: TreeNode[][] = []): TreeNode[][] {
         if (!node) {
             return levels;
@@ -93,65 +91,65 @@ class TreeLayoutEngine {
         return levels;
     }
 
-    // Вычисление ширины поддерева для каждого узла
+    // Calculating the width of the subtree for each node
     calculateSubtreeWidths(node: TreeNode = this.tree!): number {
         if (node.children.length === 0) {
-            // Листовой узел - ширина равна ширине блока
+            // Leaf node - width is equal to the width of the block
             node.subtreeWidth = node.block.width;
         } else {
-            // Рекурсивно вычисляем ширину для детей
+            // Recursively calculating the width for children
             for (const child of node.children) {
                 this.calculateSubtreeWidths(child);
             }
 
-            // Ширина поддерева = сумма ширин поддеревьев детей + отступы между ними
+            // Subtree width = sum of the widths of the children's subtrees + the margins between them
             const childrenWidth = node.children.reduce(
                 (sum: number, child: TreeNode) => sum + child.subtreeWidth,
                 0,
             );
             const spacingWidth = (node.children.length - 1) * this.options.horizontalSpacing;
             const totalChildrenWidth = childrenWidth + spacingWidth;
 
-            // Ширина поддерева = максимум из ширины самого узла и суммарной ширины детей
+            // Subtree width = the maximum of the width of the node itself and the total width of the children
             node.subtreeWidth = Math.max(node.block.width, totalChildrenWidth);
         }
 
         return node.subtreeWidth;
     }
 
-    // Размещение узлов по позициям
+    // Placement of nodes by position
     positionNodes() {
         if (!this.tree) {
             return;
         }
 
-        // Вычисляем Y координаты для каждого уровня
+        // Calculating the Y coordinates for each level
         let currentY = 0;
         const levelY: number[] = [];
 
         for (let level = 0; level < this.levels.length; level++) {
             levelY[level] = currentY;
 
-            // Находим максимальную высоту блоков на этом уровне
+            // We find the maximum height of the blocks at this level
             const maxHeight = Math.max(
                 ...this.levels[level].map((node: TreeNode) => node.block.height),
             );
             currentY += maxHeight + this.options.verticalSpacing;
         }
 
-        // Рекурсивно размещаем узлы
+        // Recursively placing nodes
         const positionNode = (node: TreeNode, leftX: number): void => {
-            // Устанавливаем Y координату
+            // Setting the Y coordinate
             node.y = levelY[node.level];
 
             if (node.children.length === 0) {
-                // Листовой узел - размещаем в текущей позиции
+                // The leaf node is placed in the current position.
                 node.x = leftX;
             } else {
-                // Размещаем детей
+                // Place children
                 let childX = leftX;
 
-                // Если ширина узла больше суммарной ширины детей, добавляем отступ
+                // If the node width is greater than the total width of the children, add an indentation.
                 const childrenWidth = node.children.reduce(
                     (sum: number, child: TreeNode) => sum + child.subtreeWidth,
                     0,
@@ -164,13 +162,13 @@ class TreeLayoutEngine {
                     childX += extraSpace;
                 }
 
-                // Размещаем каждого ребенка
+                // Place each child
                 for (const child of node.children) {
                     positionNode(child, childX);
                     childX += child.subtreeWidth + this.options.horizontalSpacing;
                 }
 
-                // Центрируем родительский узел относительно детей
+                // Center the parent node relative to the children
                 const firstChild = node.children[0];
                 const lastChild = node.children[node.children.length - 1];
                 const childrenCenter = (firstChild.x + lastChild.x + lastChild.block.width) / 2;
@@ -181,7 +179,7 @@ class TreeLayoutEngine {
         positionNode(this.tree, 0);
     }
 
-    // Нормализация координат (чтобы минимальные координаты были >= 0)
+    // Normalization of coordinates (so that the minimum coordinates are >= 0)
     normalizeCoordinates() {
         if (!this.tree) {
             return;
@@ -201,7 +199,7 @@ class TreeLayoutEngine {
         const minX = Math.min(...allNodes.map((node) => node.x));
         const minY = Math.min(...allNodes.map((node) => node.y));
 
-        // Сдвигаем все координаты так, чтобы минимальные были равны 0
+        // Shift all coordinates so that the minimum ones are equal to 0
         const offsetX = minX < 0 ? -minX : 0;
         const offsetY = minY < 0 ? -minY : 0;
 
@@ -211,7 +209,7 @@ class TreeLayoutEngine {
         }
     }
 
-    // Основной метод компоновки
+    // Main method of composition
     layout() {
         this.buildTree();
         this.groupByLevels();
@@ -222,7 +220,7 @@ class TreeLayoutEngine {
         return this.getLayoutResult();
     }
 
-    // Получение результата компоновки
+    // Getting the result of composition
     getLayoutResult(): ExtendedTBlock[] {
         if (!this.tree) {
             return [];
@@ -252,17 +250,17 @@ class TreeLayoutEngine {
     }
 }
 
-// Функция для использования алгоритма
+// Function for using the algorithm
 function calculateTreeLayout(blocks: TBlock[], connections: TConnection[], options = {}) {
     const engine = new TreeLayoutEngine(blocks, connections, options);
     return engine.layout();
 }
 
 function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnection[]) {
-    // Создаем карту позиций для удобства поиска
+    // Create a position map for convenience of search
     const positionMap = new Map(layoutResult.map((item) => [item.id, item]));
 
-    // Группируем связи по родительскому блоку
+    // Group connections by parent block
     const connectionsByParent = new Map();
 
     for (const connection of connections) {
@@ -280,19 +278,19 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
         points: {x: number; y: number}[];
     }[] = [];
 
-    // Для каждого родительского блока рассчитываем пути к детям
+    // For each parent block, we calculate the paths to the children
     for (const [parentId, parentConnections] of connectionsByParent) {
         const parent = positionMap.get(parentId);
         if (!parent) {
             continue;
         }
 
-        // Координаты начальной точки (центр нижней части родителя)
+        // Coordinates of the initial point (center of the lower part of the parent)
         const startX = parent.x + parent.width / 2;
         const startY = parent.y + parent.height;
 
         if (parentConnections.length === 1) {
-            // Один дочерний блок - простая прямая линия
+            // One child block - simple straight line
             const connection = parentConnections[0];
             const child = positionMap.get(connection.targetBlockId);
 
@@ -311,9 +309,9 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
                 });
             }
         } else {
-            // Несколько дочерних блоков - ломаные линии
+            // Several child blocks - broken lines
 
-            // Находим вертикальное расстояние между родителем и ближайшим ребенком
+            // We find the vertical distance between the parent and the nearest child
             const children = parentConnections
                 .map((conn: TConnection) => positionMap.get(conn.targetBlockId))
                 .filter(
@@ -325,13 +323,13 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
                 continue;
             }
 
-            // Находим минимальное расстояние до детей по Y
+            // We find the minimum distance to the children by Y
             const minChildY = Math.min(...children.map((child: ExtendedTBlock) => child.y));
 
-            // Точка разветвления - посередине между родителем и детьми
+            // The point of branching - in the middle between the parent and the children
             const branchY = startY + (minChildY - startY) / 2;
 
-            // Для каждого дочернего блока создаем ломаную линию
+            // For each child block, we create a broken line
             for (const connection of parentConnections) {
                 const child = positionMap.get(connection.targetBlockId);
                 if (!child) {
@@ -342,10 +340,10 @@ function calculateTreeEdges(layoutResult: ExtendedTBlock[], connections: TConnec
                 const endY = child.y;
 
                 const points = [
-                    {x: startX, y: startY}, // Начало - центр нижней части родителя
-                    {x: startX, y: branchY}, // Вертикально вниз до точки разветвления
-                    {x: endX, y: branchY}, // Горизонтально до центра дочернего блока
-                    {x: endX, y: endY}, // Вертикально вниз до центра верхней части дочернего блока
+                    {x: startX, y: startY}, // Start - center of the lower part of the parent
+                    {x: startX, y: branchY}, // Vertically down to the point of branching
+                    {x: endX, y: branchY}, // Horizontally to the center of the child block
+                    {x: endX, y: endY}, // Vertically down to the center of the upper part of the child block
                 ];
 
                 connectionPaths.push({

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "label_tables": "Tables"`
	`3`	`+}`