@cyber-harbour/ui 1.0.25 → 1.0.26

package/src/Graph2D/Graph2D.tsx

@@ -1,6 +1,25 @@
-import ForceGraph2D, { ForceGraphMethods } from 'react-force-graph-2d';
+import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-force-graph-2d';
 import { Graph2DProps } from './types';
-import { useEffect, useRef, MutableRefObject } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { forceCollide } from 'd3-force';
+import { styled } from 'styled-components';
+import eyeLightIcon from './eye_light.png';
+import eyeLightHoverIcon from './eye_light_hover.png';
+import crossLightIcon from './cross_light.png';
+import crossLightHoverIcon from './cross_light_hover.png';
+
+// Створюємо та налаштовуємо об'єкти зображень
+const imgEyeLightIcon = new Image();
+imgEyeLightIcon.src = eyeLightIcon;
+
+const imgEyeLightHoverIcon = new Image();
+imgEyeLightHoverIcon.src = eyeLightHoverIcon;
+
+const imgCrossLightIcon = new Image();
+imgCrossLightIcon.src = crossLightIcon;
+
+const imgCrossLightHoverIcon = new Image();
+imgCrossLightHoverIcon.src = crossLightHoverIcon;
 
 export const Graph2D = ({
   graphData,
@@ -9,178 +28,734 @@ export const Graph2D = ({
   linkTarget,
   linkSource,
   config = {
-    nodeSizeFactor: 2, // Множник для розміру вузла
-    fontSize: 14, // Базовий розмір шрифту
-    nodeSizeBase: 5, // Базовий розмір вузла (перед застосуванням множника)
-    textPaddingFactor: 0.95, // Скільки разів текст може бути ширший за розмір вузла
+    fontSize: 3, // Максимальний розмір шрифту при максимальному зумі
+    nodeSizeBase: 30, // Базовий розмір вузла
+    nodeAreaFactor: 2, // Фактор збільшення розміру вузла для відображення області (hover)
+    textPaddingFactor: 0.9, // Скільки разів текст може бути ширшим за розмір вузла
+    gridSpacing: 20, // Відстань між точками сітки
+    dotSize: 1, // Розмір точки сітки,
+    maxZoom: 4, // Максимальний зум
   },
   onNodeClick,
   onLinkClick,
 }: Graph2DProps) => {
-  // Максимальний рівень зуму
-  const MAX_ZOOM = 4;
-  // Максимальний розмір шрифту при максимальному зумі
-  const MAX_FONT_SIZE = 8;
+  // Стан для підсвічування вузлів і зв'язків
+  const [highlightNodes, setHighlightNodes] = useState(new Set());
+  const [highlightLinks, setHighlightLinks] = useState(new Set());
+  const [hoverNode, setHoverNode] = useState<any>(null);
+  const [hiddenNodes, setHiddenNodes] = useState(new Set<string>());
+  const [collapsedNodes, setCollapsedNodes] = useState(new Set<string>());
+  // Стани для відстеження наведення на кнопки
+  const [hoverTopButton, setHoverTopButton] = useState(false);
+  const [hoverBottomButton, setHoverBottomButton] = useState(false);
+
+  const fgRef = useRef<ForceGraphMethods>(null) as React.MutableRefObject<ForceGraphMethods<NodeObject, LinkObject>>;
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   // Функція для реверсивного масштабування тексту
-  // При максимальному зумі текст має розмір MAX_FONT_SIZE
+  // При максимальному зумі текст має розмір config.fontSize
   // При зменшенні зуму текст також зменшується
   const calculateFontSize = (scale: number): number => {
-    // Обмежуємо масштаб до MAX_ZOOM
-    const limitedScale = Math.min(scale, MAX_ZOOM);
+    // Обмежуємо масштаб до config.maxZoom
+    const limitedScale = Math.min(scale, config.maxZoom);
 
     // Обчислюємо коефіцієнт масштабування: при максимальному зумі = 1, при мінімальному - менше
-    const fontSizeRatio = limitedScale / MAX_ZOOM;
+    const fontSizeRatio = limitedScale / config.maxZoom;
 
-    // Розраховуємо розмір шрифту в діапазоні від (MAX_FONT_SIZE / MAX_ZOOM) до MAX_FONT_SIZE
-    return Math.max(MAX_FONT_SIZE * fontSizeRatio, MAX_FONT_SIZE / MAX_ZOOM);
+    return Math.max(config.fontSize * fontSizeRatio, config.fontSize);
   };
 
-  const fgRef = useRef<ForceGraphMethods>(null) as MutableRefObject<ForceGraphMethods | undefined>;
+  // Обробка подій наведення на вузол
+  const handleNodeHover = useCallback((node: NodeObject | null, _: NodeObject | null) => {
+    const newHighlightNodes = new Set();
+    const newHighlightLinks = new Set();
+
+    if (node) {
+      newHighlightNodes.add(node);
+
+      // Додавання сусідніх вузлів і зв'язків до підсвічування
+      // Перевіряємо наявність сусідів і зв'язків
+      if (node.neighbors) {
+        node.neighbors.forEach((neighbor: any) => newHighlightNodes.add(neighbor));
+      }
+
+      if (node.links) {
+        node.links.forEach((link: any) => newHighlightLinks.add(link));
+      }
+    }
 
+    setHoverNode(node || null);
+    setHighlightNodes(newHighlightNodes);
+    setHighlightLinks(newHighlightLinks);
+  }, []);
+
+  // Обробка подій наведення на зв'язок
+  const handleLinkHover = useCallback((link: any) => {
+    const newHighlightNodes = new Set();
+    const newHighlightLinks = new Set();
+
+    if (link) {
+      newHighlightLinks.add(link);
+      newHighlightNodes.add(link.source);
+      newHighlightNodes.add(link.target);
+    }
+
+    setHighlightNodes(newHighlightNodes);
+    setHighlightLinks(newHighlightLinks);
+  }, []);
+
+  // Створення взаємозв'язків між вузлами
   useEffect(() => {
-    fgRef.current?.d3Force('link')?.distance(() => {
-      return 100; // Set a constant distance of 100 for all links
-      // Or use a function for dynamic distance based on link properties:
-      // return link.value * 50;
+    if (!graphData) return;
+
+    // Прив'язка вузлів до їхніх сусідів та зв'язків
+    graphData.links.forEach((link: any) => {
+      const source =
+        typeof link.source === 'object' ? link.source : graphData.nodes.find((n: any) => n.id === link.source);
+      const target =
+        typeof link.target === 'object' ? link.target : graphData.nodes.find((n: any) => n.id === link.target);
+
+      if (!source || !target) return;
+
+      // Ініціалізація масивів, якщо вони відсутні
+      !source.neighbors && (source.neighbors = []);
+      !target.neighbors && (target.neighbors = []);
+      source.neighbors.push(target);
+      target.neighbors.push(source);
+
+      !source.links && (source.links = []);
+      !target.links && (target.links = []);
+      source.links.push(link);
+      target.links.push(link);
+    });
+
+    // Налаштування відстані між вузлами
+    fgRef.current?.d3Force('link')?.distance((link: any) => {
+      // Отримуємо вузли на кінцях зв'язку
+      const source = link.source;
+      const target = link.target;
+
+      // Базова відстань
+      const baseDistance = config.nodeSizeBase * 2;
+
+      // Динамічна відстань на основі розміру вузлів
+      // Більші вузли повинні бути далі один від одного
+      const sourceSizeBase = source.size || config.nodeSizeBase;
+      const targetSizeBase = target.size || config.nodeSizeBase;
+
+      // Відстань залежить від суми розмірів вузлів
+      // Додаємо базову відстань 100
+      return baseDistance + (sourceSizeBase + targetSizeBase);
     });
+
+    // Додаємо різні сили для уникнення перекриття вузлів
+    if (fgRef.current) {
+      // 1. Додаємо силу відштовхування між всіма вузлами (charge force)
+      const chargeForce = fgRef.current.d3Force('charge');
+      if (chargeForce) {
+        chargeForce
+          .strength(-100) // Збільшуємо силу відштовхування (negative for repulsion)
+          .distanceMax(100); // Максимальна дистанція, на якій діє ця сила
+      }
+
+      // 2. Додаємо силу центрування для кращої організації графа
+      const centerForce = fgRef.current.d3Force('center');
+      if (centerForce) {
+        centerForce.strength(0.05); // Невелике притягування до центру
+      }
+
+      // 3. Додаємо силу колізії через імпортовану функцію forceCollide
+      try {
+        const collideForce = forceCollide()
+          .radius((node: any) => {
+            // Визначаємо радіус колізії на основі розміру вузла
+            const nodeSize = node.size || config.nodeSizeBase;
+            return nodeSize * 1.5; // Більший відступ для кращої сепарації
+          })
+          .iterations(3) // Більше ітерацій для точнішого розрахунку
+          .strength(1); // Максимальна сила (1 - тверде обмеження)
+
+        fgRef.current.d3Force('collide', collideForce);
+      } catch (err) {
+        console.error('Error setting up collision force:', err);
+      }
+
+      // Перезапустити симуляцію для застосування змін
+      fgRef.current.resumeAnimation();
+    }
   }, [graphData]);
 
-  return (
-    <ForceGraph2D
-      ref={fgRef}
-      width={width}
-      height={height}
-      graphData={graphData}
-      linkTarget={linkTarget}
-      linkSource={linkSource}
-      onNodeClick={onNodeClick}
-      onLinkClick={onLinkClick}
-      nodeLabel={(node: any) => `${node.label}`} // Показуємо повний текст у тултіпі
-      linkLabel={(link: any) => link.label}
-      nodeAutoColorBy="label"
-      linkDirectionalArrowLength={3.5}
-      linkDirectionalArrowRelPos={1}
-      linkCurvature={0}
-      // Обмеження максимального зуму
-      maxZoom={MAX_ZOOM}
-      linkCanvasObjectMode={() => 'after'}
-      linkCanvasObject={(link: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
-        // Отримуємо позиції початку і кінця зв'язку
-        const { source, target, label } = link;
-        if (!label) return; // Пропускаємо, якщо немає мітки
-
-        // Координати початку і кінця зв'язку
-        const start = { x: source.x, y: source.y };
-        const end = { x: target.x, y: target.y };
-
-        // Знаходимо середину лінії для розміщення тексту
-        const middleX = start.x + (end.x - start.x) / 2;
-        const middleY = start.y + (end.y - start.y) / 2;
-
-        // Використовуємо реверсивне масштабування для тексту
-        const scaledFontSize = calculateFontSize(globalScale);
-        ctx.font = `${scaledFontSize}px Sans-Serif`;
-        ctx.fillStyle = '#666'; // Колір тексту
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-
-        // Визначення кута нахилу лінії для повороту тексту
-        const angle = Math.atan2(end.y - start.y, end.x - start.x);
-
-        // Збереження поточного стану контексту
-        ctx.save();
-
-        // Переміщення до центру лінії та поворот тексту
-        ctx.translate(middleX, middleY);
-
-        // Якщо кут близький до вертикального або перевернутий, коригуємо його
-        if (Math.abs(angle) > Math.PI / 2) {
-          ctx.rotate(angle + Math.PI);
-          ctx.textAlign = 'center';
-        } else {
-          ctx.rotate(angle);
-          ctx.textAlign = 'center';
+  // Функція для малювання кільця навколо підсвічених вузлів
+  const paintRing = useCallback(
+    (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
+      // Отримуємо розмір вузла
+      const radius = (config.nodeSizeBase * config.nodeAreaFactor * 0.75) / 2;
+
+      // Малюємо кільце навколо вузла
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
+      ctx.fillStyle = 'rgba(255, 165, 0, 0.3)';
+      ctx.fill();
+    },
+    [config]
+  );
+
+  // Функція для малювання кнопок навколо вузла при наведенні
+  const paintNodeButtons = useCallback(
+    (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
+      const { x, y } = node;
+      const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+
+      // Зберігаємо стан контексту
+      ctx.save();
+
+      // Кнопка "сховати" (верхня частина кільця)
+      ctx.beginPath();
+      ctx.arc(x, y, buttonRadius, Math.PI, Math.PI * 2, false);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = '#e5e5e5';
+      ctx.stroke();
+      ctx.fillStyle = hoverTopButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fill();
+
+      // Лінія розділення між кнопками
+      ctx.beginPath();
+      ctx.moveTo(x - buttonRadius, y);
+      ctx.lineTo(x + buttonRadius, y);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = '#e5e5e5';
+      ctx.stroke();
+
+      // Кнопка "згорнути" (нижня частина кільця)
+      ctx.beginPath();
+      ctx.arc(x, y, buttonRadius, Math.PI * 2, Math.PI, false);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = '#e5e5e5';
+      ctx.stroke();
+      ctx.fillStyle = hoverBottomButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fill();
+
+      // Додаємо іконку хрестика для кнопки "сховати вузол"
+      const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
+
+      // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
+      const crossIcon = hoverTopButton ? imgCrossLightHoverIcon : imgCrossLightIcon;
+      const renderCrossIcon = () => {
+        ctx.drawImage(crossIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
+      };
+      // Використовуємо безпосередньо зображення, якщо воно вже завантажене
+      if (crossIcon.complete) {
+        // Розміщуємо іконку в центрі верхньої половини кнопки
+        renderCrossIcon();
+      } else {
+        // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
+        crossIcon.onload = () => {
+          renderCrossIcon();
+        };
+      }
+
+      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
+      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
+      const renderEyeIcon = () => {
+        ctx.drawImage(eyeIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
+      };
+      // Використовуємо безпосередньо зображення, якщо воно вже завантажене
+      if (eyeIcon.complete) {
+        // Розміщуємо іконку в центрі нижньої половини кнопки
+        renderEyeIcon();
+      } else {
+        // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
+        eyeIcon.onload = () => {
+          renderEyeIcon();
+        };
+      }
+
+      ctx.restore();
+    },
+    [config, hoverTopButton, hoverBottomButton]
+  );
+
+  const collapseNode = (collapsed: Set<string>, node: NodeObject) => {
+    if (node && node.id && !collapsed.has(`${node.id}`) && graphData) {
+      // Прив'язка вузлів до їхніх сусідів та зв'язків
+      const targets = graphData.links.filter((link: any) => {
+        return link.source.id === node.id && link.label !== 'MATCH';
+      });
+      targets.forEach((link: any) => {
+        collapsed.add(`${link.target.id}`);
+        collapseNode(collapsed, link.target);
+      });
+    }
+  };
+
+  // Функція для обробки кліку на кнопку "сховати вузол"
+  const handleHideNode = (node: any) => {
+    const newHiddenNodes = new Set(hiddenNodes);
+    collapseNode(newHiddenNodes, node);
+    newHiddenNodes.add(node.id);
+
+    setHiddenNodes(newHiddenNodes);
+  };
+
+  // Функція для обробки кліку на кнопку "згорнути дочірні вузли"
+  const handleCollapseChildren = (node: any) => {
+    const newCollapsedNodes = new Set(collapsedNodes);
+
+    collapseNode(newCollapsedNodes, node);
+    setCollapsedNodes(newCollapsedNodes);
+  };
+
+  // Функція для визначення, чи знаходиться точка в межах сектора кола (кнопки)
+  const isPointInButtonArea = useCallback(
+    (
+      x: number, // X координата точки кліку в системі координат canvas
+      y: number, // Y координата точки кліку в системі координат canvas
+      buttonX: number, // X координата центра вузла в системі координат canvas
+      buttonY: number, // Y координата центра вузла в системі координат canvas
+      buttonRadius: number, // Радіус кнопки (з урахуванням зуму)
+      startAngle: number, // Початковий кут сектора
+      endAngle: number // Кінцевий кут сектора
+    ): boolean => {
+      // Обчислюємо відстань від точки кліку до центру вузла
+      const dx = x - buttonX;
+      const dy = y - buttonY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      // Обчислюємо кут між точкою та горизонтальною віссю
+      let angle = Math.atan2(dy, dx);
+      if (angle < 0) angle += 2 * Math.PI; // Конвертуємо у діапазон [0, 2π]
+
+      // Розширюємо діапазон радіусу для легшого потрапляння по кнопці
+      // При більшому зумі можна зменшити цей діапазон для більшої точності
+      const minRadiusRatio = 0.5; // Більш точне значення
+      const maxRadiusRatio = 1.5; // Більш точне значення
+      const isInRadius = distance >= buttonRadius * minRadiusRatio && distance <= buttonRadius * maxRadiusRatio;
+
+      // Перевіряємо чи знаходиться кут у межах сектора
+      let isInAngle = false;
+
+      // Верхня півкуля: від Math.PI до Math.PI * 2
+      if (startAngle === Math.PI && endAngle === Math.PI * 2) {
+        isInAngle = angle >= Math.PI && angle <= Math.PI * 2;
+      }
+      // Нижня півкуля: від 0 до Math.PI
+      else if (startAngle === 0 && endAngle === Math.PI) {
+        isInAngle = angle >= 0 && angle <= Math.PI;
+      }
+      // Загальний випадок
+      else {
+        isInAngle =
+          (startAngle <= endAngle && angle >= startAngle && angle <= endAngle) ||
+          (startAngle > endAngle && (angle >= startAngle || angle <= endAngle));
+      }
+
+      return isInRadius && isInAngle;
+    },
+    []
+  );
+
+  // Додаємо обробник руху миші для відстеження наведення на кнопки
+  useEffect(() => {
+    const handleCanvasMouseMove = (event: MouseEvent) => {
+      if (!hoverNode || !fgRef.current || !wrapperRef.current) {
+        // Скидаємо стани наведення, якщо немає активного вузла
+        if (hoverTopButton) setHoverTopButton(false);
+        if (hoverBottomButton) setHoverBottomButton(false);
+        return;
+      }
+
+      const nodeSize = config.nodeSizeBase;
+      const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+      const zoom = fgRef.current.zoom() || 1; // Отримуємо поточний зум
+
+      // Координати вузла в системі координат графа
+      const nodeX = hoverNode.x;
+      const nodeY = hoverNode.y;
+
+      // Отримуємо позицію canvas відносно вікна
+      const canvasRect = wrapperRef.current.getBoundingClientRect();
+
+      // Координати миші відносно canvas
+      const mouseX = event.clientX - canvasRect.left;
+      const mouseY = event.clientY - canvasRect.top;
+
+      // Враховуємо співвідношення між реальними розмірами canvas та його відображенням на екрані
+      const canvasScaleX = wrapperRef.current.clientWidth / canvasRect.width;
+      const canvasScaleY = wrapperRef.current.clientHeight / canvasRect.height;
+
+      // Масштабовані координати миші у внутрішній системі координат canvas
+      const scaledMouseX = mouseX * canvasScaleX;
+      const scaledMouseY = mouseY * canvasScaleY;
+
+      // Отримуємо параметри трансформації графа
+      const graphCenter = {
+        x: wrapperRef.current.clientWidth / 2,
+        y: wrapperRef.current.clientHeight / 2,
+      };
+
+      // Визначаємо координати вузла на екрані
+      let nodeScreenX, nodeScreenY;
+
+      if (typeof fgRef.current.graph2ScreenCoords === 'function') {
+        // Використовуємо API графа для перетворення координат
+        const screenPos = fgRef.current.graph2ScreenCoords(nodeX, nodeY);
+        if (screenPos) {
+          nodeScreenX = screenPos.x;
+          nodeScreenY = screenPos.y;
         }
+      }
+
+      // Якщо метод не доступний, спробуємо обчислити позицію
+      if (nodeScreenX === undefined || nodeScreenY === undefined) {
+        nodeScreenX = graphCenter.x + nodeX * zoom;
+        nodeScreenY = graphCenter.y + nodeY * zoom;
+      }
+
+      // Перевіряємо наведення на верхню кнопку (hide)
+      const isOverTopButton = isPointInButtonArea(
+        scaledMouseX,
+        scaledMouseY,
+        nodeScreenX,
+        nodeScreenY,
+        buttonRadius * zoom,
+        Math.PI,
+        Math.PI * 2
+      );
+
+      // Перевіряємо наведення на нижню кнопку (collapse)
+      const isOverBottomButton = isPointInButtonArea(
+        scaledMouseX,
+        scaledMouseY,
+        nodeScreenX,
+        nodeScreenY,
+        buttonRadius * zoom,
+        0,
+        Math.PI
+      );
+
+      // Оновлюємо стани наведення
+      setHoverTopButton(isOverTopButton);
+      setHoverBottomButton(isOverBottomButton);
+    };
+
+    if (wrapperRef.current) {
+      wrapperRef.current.addEventListener('mousemove', handleCanvasMouseMove);
+    }
+
+    return () => {
+      if (wrapperRef.current) {
+        wrapperRef.current.removeEventListener('mousemove', handleCanvasMouseMove);
+      }
+    };
+  }, [hoverNode, config, isPointInButtonArea, hoverTopButton, hoverBottomButton]);
+
+  const truncateText = (text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
+    if (!text) return '';
+
+    // Вимірюємо ширину тексту
+    const textWidth = ctx.measureText(text).width;
 
-        // Рисуємо фон для тексту для кращої читаємості
-        const textWidth = ctx.measureText(label).width;
-        const padding = 2;
-        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
-        ctx.fillRect(
-          -textWidth / 2 - padding,
-          -scaledFontSize / 2 - padding,
-          textWidth + padding * 2,
-          scaledFontSize + padding * 2
-        );
-
-        // Малюємо текст
-        ctx.fillStyle = '#666';
-        ctx.fillText(label, 0, 0);
-
-        // Відновлення стану контексту
-        ctx.restore();
-      }}
-      nodeCanvasObject={(node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
-        // Отримуємо дані вузла та конфігурацію
-        const { x, y, color, label } = node;
-
-        // Розраховуємо розмір вузла
-        const nodeSize = config.nodeSizeBase * config.nodeSizeFactor;
-
-        // Малюємо коло
+    // Якщо текст коротший за максимальну ширину, повертаємо як є
+    if (textWidth <= maxWidth) return text;
+
+    // Інакше обрізаємо текст і додаємо трикрапку
+    let truncated = text;
+    const ellipsis = '...';
+
+    // Поступово скорочуємо текст, поки він не поміститься
+    while (ctx.measureText(truncated + ellipsis).width > maxWidth && truncated.length > 0) {
+      truncated = truncated.slice(0, -1);
+    }
+
+    return truncated + ellipsis;
+  };
+
+  const renderGrid = (ctx: CanvasRenderingContext2D, globalScale: number) => {
+    // This will be called before each rendering frame
+    ctx.getTransform();
+    ctx.save();
+
+    // Reset transform to draw the background in screen coordinates
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+    // Draw background dots
+    const { width, height } = ctx.canvas;
+    const gridSpacing = config.gridSpacing;
+    const dotSize = config.dotSize;
+
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+
+    for (let x = 0; x < width; x += gridSpacing) {
+      for (let y = 0; y < height; y += gridSpacing) {
         ctx.beginPath();
-        ctx.arc(x, y, nodeSize, 0, 2 * Math.PI);
-        ctx.fillStyle = color;
+        ctx.arc(x, y, dotSize, 0, 2 * Math.PI);
         ctx.fill();
+      }
+    }
 
-        // Зберігаємо стан контексту перед поворотом
-        ctx.save();
-        // Переміщуємось до позиції вузла
-        ctx.translate(x, y);
+    // Restore original transform for the graph rendering
+    ctx.restore();
+  };
 
-        // Функція для обрізання тексту з трикрапкою (аналог text-overflow: ellipsis)
-        const truncateText = (text: string, maxWidth: number): string => {
-          if (!text) return '';
+  const renderNodePointerAreaPaint = (
+    node: NodeObject,
+    color: string,
+    ctx: CanvasRenderingContext2D,
+    globalScale: number
+  ) => {
+    const { x, y } = node;
+    const radius = config.nodeSizeBase;
 
-          // Вимірюємо ширину тексту
-          const textWidth = ctx.measureText(text).width;
+    ctx.beginPath();
+    ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = color; //має бути обовʼязково колір що прийшов з параметрів ForceGraph
+    ctx.fill();
+  };
 
-          // Якщо текст коротший за максимальну ширину, повертаємо як є
-          if (textWidth <= maxWidth) return text;
+  const renderNodeCanvasObject = (node: NodeObject, ctx: CanvasRenderingContext2D, globalScale: number) => {
+    // Функція для обрізання тексту з трикрапкою (аналог text-overflow: ellipsis)
 
-          // Інакше обрізаємо текст і додаємо трикрапку
-          let truncated = text;
-          const ellipsis = '...';
+    // Якщо вузол підсвічений, малюємо кільце
+    if (highlightNodes.has(node)) {
+      // Якщо це наведений вузол, малюємо кнопки
+      if (node === hoverNode) {
+        paintNodeButtons(node, ctx, globalScale);
+      } else {
+        paintRing(node, ctx, globalScale);
+      }
+    }
 
-          // Поступово скорочуємо текст, поки він не поміститься
-          while (ctx.measureText(truncated + ellipsis).width > maxWidth && truncated.length > 0) {
-            truncated = truncated.slice(0, -1);
-          }
+    const { x, y, color, label } = node;
 
-          return truncated + ellipsis;
-        };
+    const size = config.nodeSizeBase;
+    const radius = config.nodeSizeBase / 2;
+
+    // Малюємо коло
+    ctx.beginPath();
+    ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = color; // Колір контуру TODO: додати прив'язку до значення label
+    ctx.fill();
+
+    // пігтовока до малювання тексту
+    ctx.save();
+    ctx.translate(x as number, y as number);
+
+    const scaledFontSize = calculateFontSize(globalScale);
+    const maxWidth = size * config.textPaddingFactor;
+    // Розрахунок максимальної ширини тексту на основі розміру вузла
+    // Ширина тексту = діаметр вузла * коефіцієнт розширення
+    // Використовуємо globalScale для визначення пропорцій тексту
+    ctx.font = `${scaledFontSize}px Sans-Serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = 'black';
 
-        // Використовуємо реверсивне масштабування для тексту вузлів
-        const scaledFontSize = calculateFontSize(globalScale);
-        ctx.font = `${scaledFontSize}px Sans-Serif`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = 'black';
-
-        // Розрахунок максимальної ширини тексту на основі розміру вузла
-        // Ширина тексту = діаметр вузла * коефіцієнт розширення
-        // Використовуємо globalScale для визначення пропорцій тексту
-        const maxWidth = (nodeSize * config.textPaddingFactor) / globalScale;
-
-        // Малюємо тип вузла з обрізанням (з меншою шириною)
-        ctx.font = `${scaledFontSize * 0.8}px Sans-Serif`;
-        const truncatedLabel = truncateText(label, maxWidth);
-        ctx.fillText(truncatedLabel, 0, 0);
-
-        // Відновлюємо стан контексту
-        ctx.restore();
-      }}
-    />
+    const truncatedLabel = truncateText(label, maxWidth, ctx);
+    ctx.fillText(truncatedLabel, 0, 0);
+
+    ctx.restore();
+  };
+
+  const renderLinkCanvasObject = (link: NodeObject, ctx: CanvasRenderingContext2D, globalScale: number) => {
+    // Отримуємо позиції початку і кінця зв'язку
+    const { source, target, label } = link;
+
+    if (!label) return; // Пропускаємо, якщо немає мітки
+
+    // Координати початку і кінця зв'язку
+    const start = { x: source.x, y: source.y };
+    const end = { x: target.x, y: target.y };
+    // Знаходимо середину лінії для розміщення тексту
+    const middleX = start.x + (end.x - start.x) / 2;
+    const middleY = start.y + (end.y - start.y) / 2;
+
+    // Використовуємо реверсивне масштабування для тексту
+    const scaledFontSize = calculateFontSize(globalScale);
+    ctx.font = `${scaledFontSize}px Sans-Serif`;
+    ctx.fillStyle = '#666'; // Колір тексту
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Визначення кута нахилу лінії для повороту тексту
+    const angle = Math.atan2(end.y - start.y, end.x - start.x);
+    ctx.save();
+    // Переміщення до центру лінії та поворот тексту
+    ctx.translate(middleX, middleY);
+    // Якщо кут близький до вертикального або перевернутий, коригуємо його
+    if (Math.abs(angle) > Math.PI / 2) {
+      ctx.rotate(angle + Math.PI);
+      ctx.textAlign = 'center';
+    } else {
+      ctx.rotate(angle);
+      ctx.textAlign = 'center';
+    }
+
+    // Рисуємо фон для тексту для кращої читаємості
+    const textWidth = ctx.measureText(label).width;
+    const padding = 2;
+    ctx.fillStyle = highlightLinks.has(link) ? 'rgba(255, 230, 204, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+    ctx.fillRect(
+      -textWidth / 2 - padding,
+      -scaledFontSize / 2 - padding,
+      textWidth + padding * 2,
+      scaledFontSize + padding * 2
+    );
+
+    // Малюємо текст
+    ctx.fillStyle = highlightLinks.has(link) ? '#663300' : '#666';
+    ctx.fillText(label, 0, 0);
+
+    // Відновлення стану контексту
+    ctx.restore();
+  };
+
+  const handleNodeClick = (node: NodeObject, event: MouseEvent) => {
+    if (!node || !fgRef.current) return;
+
+    const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+    const zoom = fgRef.current.zoom() || 1; // Отримуємо поточний зум
+    const canvas = event.target as HTMLCanvasElement;
+    // Координати вузла в системі координат графа
+    const nodeX = node.x as number;
+    const nodeY = node.y as number;
+
+    // // Отримуємо позицію canvas відносно вікна
+    const canvasRect = canvas.getBoundingClientRect();
+
+    // Координати кліку відносно canvas
+    // event.clientX/Y - це координати кліку відносно вікна браузера
+    // віднімаємо координати canvas щоб отримати координати відносно canvas
+    // враховуємо також можливий скролінг сторінки
+    const clickX = event.clientX - canvasRect.left;
+    const clickY = event.clientY - canvasRect.top;
+
+    // Враховуємо співвідношення між реальними розмірами canvas та його відображенням на екрані
+    // це важливо якщо canvas відмальовується з відмінним від реального розміру
+    const canvasScaleX = canvas.width / canvasRect.width;
+    const canvasScaleY = canvas.height / canvasRect.height;
+
+    // Масштабовані координати кліку у внутрішній системі координат canvas
+    const scaledClickX = clickX * canvasScaleX;
+    const scaledClickY = clickY * canvasScaleY;
+
+    // Отримуємо параметри трансформації графа
+    // ForceGraph використовує центр канваса як початок координат
+    // і застосовує зум і панорамування до всіх координат
+    const graphCenter = {
+      x: canvas.width / 2,
+      y: canvas.height / 2,
+    };
+
+    // Спробуємо отримати реальні координати вузла на екрані
+    // Якщо доступний метод перетворення координат
+    let nodeScreenX, nodeScreenY;
+
+    if (typeof fgRef.current.graph2ScreenCoords === 'function') {
+      // Використовуємо API графа для перетворення координат
+      const screenPos = fgRef.current.graph2ScreenCoords(nodeX, nodeY);
+      if (screenPos) {
+        nodeScreenX = screenPos.x;
+        nodeScreenY = screenPos.y;
+      }
+    }
+
+    // Якщо метод не доступний, спробуємо обчислити позицію
+    if (nodeScreenX === undefined || nodeScreenY === undefined) {
+      // Це наближене обчислення, яке може бути неточним, але краще ніж нічого
+      // Ми припускаємо, що граф знаходиться в центрі канваса і застосовується масштабування
+      nodeScreenX = graphCenter.x + nodeX * zoom;
+      nodeScreenY = graphCenter.y + nodeY * zoom;
+    }
+
+    // Перевіряємо клік на верхній кнопці (hide)
+    if (
+      isPointInButtonArea(
+        scaledClickX,
+        scaledClickY,
+        nodeScreenX,
+        nodeScreenY,
+        buttonRadius * zoom, // Масштабуємо радіус відповідно до зуму
+        Math.PI, // Початковий кут для верхньої півсфери
+        Math.PI * 2 // Кінцевий кут для верхньої півсфери
+      )
+    ) {
+      handleHideNode(hoverNode);
+      event.stopPropagation();
+      return;
+    }
+
+    // Перевіряємо клік на нижній кнопці (collapse)
+    if (
+      isPointInButtonArea(
+        scaledClickX,
+        scaledClickY,
+        nodeScreenX,
+        nodeScreenY,
+        buttonRadius * zoom, // Масштабуємо радіус відповідно до зуму
+        0, // Початковий кут для нижньої півсфери
+        Math.PI // Кінцевий кут для нижньої півсфери
+      )
+    ) {
+      handleCollapseChildren(hoverNode);
+      event.stopPropagation();
+      return;
+    }
+
+    // Якщо клік не на кнопках, обробляємо клік на вузлі
+    if (onNodeClick) onNodeClick(node);
+  };
+
+  return (
+    <Wrapper ref={wrapperRef}>
+      <ForceGraph2D
+        ref={fgRef}
+        width={width}
+        height={height}
+        graphData={graphData}
+        linkTarget={linkTarget}
+        linkSource={linkSource}
+        onLinkClick={onLinkClick}
+        onNodeClick={handleNodeClick}
+        nodeLabel={(node: any) => `${node.label || ''}`} // Показуємо повний текст у тултіпі
+        linkLabel={(link: any) => link.label}
+        nodeAutoColorBy="label"
+        linkDirectionalArrowLength={3.5}
+        linkDirectionalArrowRelPos={1}
+        linkCurvature={0}
+        // Обмеження максимального зуму
+        maxZoom={config.maxZoom}
+        minZoom={1}
+        // Додавання обробників наведення
+        onNodeHover={handleNodeHover}
+        onLinkHover={handleLinkHover}
+        // Виділення зв'язків при наведенні
+        linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
+        linkColor={(link: any) => (highlightLinks.has(link) ? '#ff9900' : '#999')}
+        onRenderFramePre={renderGrid}
+        nodePointerAreaPaint={renderNodePointerAreaPaint}
+        nodeCanvasObject={renderNodeCanvasObject}
+        linkCanvasObjectMode={() => 'after'}
+        linkCanvasObject={renderLinkCanvasObject}
+        linkVisibility={(link: any) => {
+          // Перевіряємо, чи вузол прихований
+          if (hiddenNodes.has(link.source.id) || hiddenNodes.has(link.target.id)) return false;
+          // Перевіряємо, чи вузол згорнутий
+          if (collapsedNodes.has(link.source.id) || collapsedNodes.has(link.target.id)) return false;
+
+          return true; // Показуємо вузол, якщо не прихований і не згорнутий
+        }}
+        nodeVisibility={(node: NodeObject) => {
+          // Перевіряємо, чи вузол прихований
+          if (hiddenNodes.has(node.id as string)) return false;
+          // Перевіряємо, чи вузол згорнутий
+          if (collapsedNodes.has(node.id as string)) return false;
+          return true; // Показуємо вузол, якщо не прихований і не згорнутий
+        }}
+      />
+    </Wrapper>
   );
 };
+
+const Wrapper = styled.div`
+  display: inline-block;
+`;