@cyber-harbour/ui 1.0.34 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -29,6 +29,7 @@
   "dependencies": {
     "@types/d3-force": "^3.0.10",
     "d3-force": "^3.0.0",
+    "react-content-loader": "^7.0.2",
     "react-force-graph-2d": "^1.27.1",
     "react-tiny-popover": "^8.1.6",
     "styled-components": "^6.1.18"

package/src/FullscreenCard/FullscreenCard.tsx

@@ -1,26 +1,57 @@
 import styled from 'styled-components';
+import { pxToRem } from '../Theme';
 
 interface FullscreenCardProps {
   children: any;
+  className?: string;
   position: 'absolute' | 'fixed';
   isActive: boolean;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
 }
 
-export const FullscreenCard = ({ isActive, position, ...props }: FullscreenCardProps) => {
-  return <StyledContainer $isActive={isActive} $position={position} {...props} />;
+export const FullscreenCard = ({
+  isActive,
+  position,
+  top = 0,
+  left = 0,
+  right,
+  bottom,
+  ...props
+}: FullscreenCardProps) => {
+  return (
+    <StyledContainer
+      $isActive={isActive}
+      $position={position}
+      $top={top}
+      $left={left}
+      $right={right}
+      $bottom={bottom}
+      {...props}
+    />
+  );
 };
 
-const StyledContainer = styled.div<{ $isActive: boolean; $position: 'absolute' | 'fixed' }>(
-  ({ $isActive, $position }) => `
+const StyledContainer = styled.div<{
+  $isActive: boolean;
+  $top?: number;
+  $left?: number;
+  $right?: number;
+  $bottom?: number;
+  $position: 'absolute' | 'fixed';
+}>(
+  ({ $isActive, $top, $left, $right, $bottom, $position, theme }) => `
 ${
   $isActive
     ? `
       position: ${$position};
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
       z-index: 1000;
+      ${$top ? `top: ${pxToRem($top, theme.baseSize)};` : ''}
+      ${$left ? `left: ${pxToRem($left, theme.baseSize)};` : ''}
+      ${$right ? `right: ${pxToRem($right, theme.baseSize)};` : ''}
+      ${$bottom ? `bottom: ${pxToRem($bottom, theme.baseSize)};` : ''}
     `
     : ''
 }

package/src/Graph2D/Graph2D.tsx

@@ -5,10 +5,9 @@ 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 ALPHA_MIN = 0.5;
+import groupLightIcon from './group_light.png';
+import groupLightHoverIcon from './group_light_hover.png';
+import GraphLoader from './GraphLoader';
 
 // Створюємо та налаштовуємо об'єкти зображень
 const imgEyeLightIcon = new Image();
@@ -17,11 +16,11 @@ imgEyeLightIcon.src = eyeLightIcon;
 const imgEyeLightHoverIcon = new Image();
 imgEyeLightHoverIcon.src = eyeLightHoverIcon;
 
-const imgCrossLightIcon = new Image();
-imgCrossLightIcon.src = crossLightIcon;
+const imgGroupLightIcon = new Image();
+imgGroupLightIcon.src = groupLightIcon;
 
-const imgCrossLightHoverIcon = new Image();
-imgCrossLightHoverIcon.src = crossLightHoverIcon;
+const imgGroupLightHoverIcon = new Image();
+imgGroupLightHoverIcon.src = groupLightHoverIcon;
 
 export const Graph2D = ({
   graphData,
@@ -29,6 +28,7 @@ export const Graph2D = ({
   height,
   linkTarget,
   linkSource,
+  loading = false,
   config = {
     fontSize: 3, // Максимальний розмір шрифту при максимальному зумі
     nodeSizeBase: 30, // Базовий розмір вузла
@@ -83,7 +83,7 @@ export const Graph2D = ({
   };
 
   // Обробка подій наведення на вузол
-  const handleNodeHover = useCallback((node: NodeObject | null, _: NodeObject | null) => {
+  const handleNodeHover = (node: NodeObject | null, _: NodeObject | null) => {
     const newHighlightNodes = new Set();
     const newHighlightLinks = new Set();
 
@@ -106,10 +106,10 @@ export const Graph2D = ({
     setHoverNode(node || null);
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
-  }, []);
+  };
 
   // Обробка подій наведення на зв'язок
-  const handleLinkHover = useCallback((link: any) => {
+  const handleLinkHover = (link: any) => {
     const newHighlightNodes = new Set();
     const newHighlightLinks = new Set();
 
@@ -122,7 +122,7 @@ export const Graph2D = ({
 
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
-  }, []);
+  };
 
   const handleEngineTick = useCallback(() => {
     if (isRendering)
@@ -131,7 +131,7 @@ export const Graph2D = ({
         fgRef.current &&
         fgRef.current.tick &&
         graphData.nodes.length > 0 &&
-        graphData.nodes.length * ALPHA_MIN <= fgRef.current.tick
+        graphData.nodes.length <= fgRef.current.tick
       ) {
         if (tickTimerRef.current) {
           clearTimeout(tickTimerRef.current);
@@ -152,7 +152,7 @@ export const Graph2D = ({
   }, [graphData]);
 
   // Створення взаємозв'язків між вузлами
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!graphData) return;
 
     // Прив'язка вузлів до їхніх сусідів та зв'язків
@@ -176,33 +176,14 @@ export const Graph2D = ({
       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); // Максимальна дистанція, на якій діє ця сила
+          .strength(config.nodeSizeBase) // Збільшуємо силу відштовхування (negative for repulsion)
+          .distanceMax(50); // Максимальна дистанція, на якій діє ця сила
       }
 
       // 2. Додаємо силу центрування для кращої організації графа
@@ -222,13 +203,21 @@ export const Graph2D = ({
           .iterations(3) // Більше ітерацій для точнішого розрахунку
           .strength(1); // Максимальна сила (1 - тверде обмеження)
 
-        fgRef.current.pauseAnimation().d3Force('collide', collideForce).resumeAnimation();
+        fgRef.current.d3Force('collide', collideForce);
       } catch (err) {
         console.error('Error setting up collision force:', err);
       }
     }
   }, [graphData]);
 
+  useEffect(() => {
+    if (!isRendering && fgRef.current) {
+      setIsRendering(true);
+      fgRef.current.tick = 0;
+      fgRef.current.d3ReheatSimulation();
+    }
+  }, [graphData]);
+
   // Функція для малювання кільця навколо підсвічених вузлів
   const paintRing = useCallback(
     (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
@@ -283,51 +272,52 @@ export const Graph2D = ({
       const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
 
       // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
-      const crossIcon = hoverTopButton ? imgCrossLightHoverIcon : imgCrossLightIcon;
-      const renderCrossIcon = () => {
+      const groupIcon = hoverTopButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
+      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
+      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
+
+      const renderEyeIcon = () => {
         try {
-          ctx.drawImage(crossIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
+          ctx.drawImage(eyeIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
         } catch (error) {
-          console.log('Error rendering cross icon:', error);
+          console.warn('Error rendering group icon:', error);
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (crossIcon.complete) {
+      if (eyeIcon.complete) {
         // Розміщуємо іконку в центрі верхньої половини кнопки
-        renderCrossIcon();
+        renderEyeIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        crossIcon.onload = () => {
-          renderCrossIcon();
+        eyeIcon.onload = () => {
+          renderEyeIcon();
         };
 
-        crossIcon.onerror = () => {
-          console.log('Error loading cross icon image');
+        eyeIcon.onerror = () => {
+          console.warn('Error loading group icon image');
         };
       }
 
-      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
-      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
-      const renderEyeIcon = () => {
+      const renderGroupIcon = () => {
         try {
-          ctx.drawImage(eyeIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
+          ctx.drawImage(groupIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
         } catch (error) {
-          console.log('Error rendering eye icon:', error);
+          console.warn('Error rendering eye icon:', error);
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
       if (eyeIcon.complete) {
         // Розміщуємо іконку в центрі нижньої половини кнопки
 
-        renderEyeIcon();
+        renderGroupIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
         eyeIcon.onload = () => {
-          renderEyeIcon();
+          renderGroupIcon();
         };
 
         eyeIcon.onerror = () => {
-          console.log('Error loading eye icon image');
+          console.warn('Error loading eye icon image');
         };
       }
 
@@ -921,10 +911,12 @@ export const Graph2D = ({
 
   const handleBackgroundClick = (event: MouseEvent) => {
     setSelectedNode(null);
+    onBackgroundClick?.();
   };
 
   return (
     <Wrapper ref={wrapperRef}>
+      {(loading || isRendering) && <GraphLoader width={width} height={height} />}
       <ForceGraph2D
         ref={fgRef}
         width={width}
@@ -948,7 +940,7 @@ export const Graph2D = ({
         onNodeHover={handleNodeHover}
         onLinkHover={handleLinkHover}
         onEngineTick={handleEngineTick}
-        d3AlphaMin={ALPHA_MIN}
+        d3AlphaMin={0.001}
         d3VelocityDecay={0.4}
         d3AlphaDecay={0.038}
         // Виділення зв'язків при наведенні
@@ -984,5 +976,8 @@ export const Graph2D = ({
 };
 
 const Wrapper = styled.div`
-  display: inline-block;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  position: relative;
 `;

package/src/Graph2D/GraphLoader.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import styled from 'styled-components';
+
+const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+`;
+
+interface GraphLoaderProps {
+  width?: number;
+  height?: number;
+}
+
+const GraphLoader: React.FC<GraphLoaderProps> = ({ width = 280, height = 280 }) => {
+  // Helper function to create a rect from line coordinates
+  const lineToRect = (x1: number, y1: number, x2: number, y2: number, thickness: number = 1) => {
+    // Calculate length and angle of the line
+    const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+    const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
+
+    // Calculate center point of the line
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+
+    return (
+      <rect
+        x={centerX - length / 2}
+        y={centerY - thickness / 2}
+        width={length}
+        height={thickness}
+        transform={`rotate(${angle}, ${centerX}, ${centerY})`}
+      />
+    );
+  };
+
+  return (
+    <LoaderWrapper>
+      <ContentLoader width={width} height={height} viewBox="0 0 280 280">
+        <path d="m55 38-0.97266 0.22852 7.0801 30.092-18.355-20.979-0.75195 0.6582 19.596 22.395 0.43164 1.834 0.97266-0.22852 0.75195-0.6582-0.37695-0.42969 9.625-27.912-0.94531-0.32617-9.4375 27.371-0.10547-0.12109zm8 34-0.78516 0.61914 0.0957 0.12305-12.311 13.258 0.73242 0.67969 12.205-13.145 14.277 18.084 0.78516-0.61914-14.373-18.207 0.10547-0.11328zm15 19-0.48438 0.875 46.992 25.996 8e-3 4e-3 20.506 11.592-28.182 4.5449 0.15998 0.98819 29.418-4.7441 0.25 0.14062-12.555 24.143 0.88672 0.46094 13-25 15 25 26 30v18l-11 18 0.85352 0.52148 9.8008-16.039-4.6543 33.518 0.99023 0.13867 4.7793-34.408 7.2305 16.27 0.91406-0.40625-7.9141-17.807v-17.104l18 12.316 0.56445-0.82617-18.896-12.928-25.855-29.836-14.633-24.387 0.01562-0.02344h23.805v-1h-23.152l13.848-21.234 55.201-28.791-0.45898-0.88476 0.77734 0.62305 11.402-14.25 16.668-11.842-0.58008-0.81641-16.785 11.928-11.486 14.355-55.434 28.912-14.277 21.893-7.7617-27.166-0.96094 0.27344 7.7227 27.031-1.1191 0.17969-21.604-12.211zm140.43-12.912-6.957-17.338-0.92773 0.37305 6.957 17.338zm-6.957-17.338 0.72266 0.69336 16.232-16.896-0.7207-0.69336zm-3.4766 137.25 5 15 0.94922-0.31641-5-15zm-91-63-0.48047-0.87695-31 17 0.48047 0.87695zm-31 17 5 18 0.96289-0.26758-5-18zm0 0-0.70703-0.70703-12.898 12.898-17.881 9.9336 0.48633 0.875 18-10zm5 18-0.64062-0.76758-18 15 0.64062 0.76758z" />
+        <circle cx="229.92" cy="63.7318" r="5" transform="rotate(173.661 229.92 63.7318)" />
+        <circle cx="227.711" cy="43.8541" r="5" transform="rotate(173.661 227.711 43.8541)" />
+        <circle cx="211.478" cy="60.7499" r="5" transform="rotate(173.661 211.478 60.7499)" />
+        <circle cx="218.434" cy="78.0877" r="5" transform="rotate(173.661 218.434 78.0877)" />
+        <circle cx="246.705" cy="51.8054" r="5" transform="rotate(173.661 246.705 51.8054)" />
+        <circle cx="42" cy="48" r="5" />
+        <circle cx="55" cy="38" r="5" />
+        <circle cx="73" cy="43" r="5" />
+        <circle cx="63" cy="72" r="5" />
+        <circle cx="50" cy="86" r="5" />
+        <circle cx="78" cy="91" r="5" />
+        <circle cx="73" cy="165" r="5" />
+        <circle cx="73" cy="185" r="5" />
+        <circle cx="91" cy="170" r="5" />
+        <circle cx="86" cy="152" r="5" />
+        <circle cx="148" cy="130" r="5" />
+        <circle cx="189" cy="185" r="5" />
+        <circle cx="163" cy="107" r="5" />
+        <circle cx="140" cy="102" r="5" />
+        <circle cx="117" cy="135" r="5" />
+        <circle cx="125" cy="117" r="5" />
+        <circle cx="208" cy="198" r="5" />
+        <circle cx="189" cy="203" r="5" />
+        <circle cx="198" cy="221" r="5" />
+        <circle cx="178" cy="221" r="5" />
+        <circle cx="184" cy="239" r="5" />
+        <circle cx="213" cy="213" r="5" />
+        <circle cx="173" cy="130" r="5" />
+        <circle cx="163" cy="155" r="5" />
+        <circle cx="135" cy="155" r="5" />
+        <circle cx="55" cy="175" r="5" />
+      </ContentLoader>
+    </LoaderWrapper>
+  );
+};
+
+export default GraphLoader;

package/src/Graph2D/types.ts

@@ -4,6 +4,7 @@ export interface Graph2DProps {
   graphData?: GraphData;
   linkSource?: string;
   linkTarget?: string;
+  loading?: boolean;
 
   // Container layout
   width?: number;