@cyber-harbour/ui 1.0.40 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/IconComponents/CloseCircleIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface CloseCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const CloseCircleIcon = ({ fill = 'currentColor', ...props }: CloseCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M7.99992 15.1654C4.04659 15.1654 0.833252 11.952 0.833252 7.9987C0.833252 4.04536 4.04659 0.832031 7.99992 0.832031C11.9533 0.832031 15.1666 4.04536 15.1666 7.9987C15.1666 11.952 11.9533 15.1654 7.99992 15.1654ZM7.99992 1.83203C4.59992 1.83203 1.83325 4.5987 1.83325 7.9987C1.83325 11.3987 4.59992 14.1654 7.99992 14.1654C11.3999 14.1654 14.1666 11.3987 14.1666 7.9987C14.1666 4.5987 11.3999 1.83203 7.99992 1.83203Z"
+        fill={fill}
+      />
+      <path
+        d="M6.11332 10.3849C5.98666 10.3849 5.85999 10.3383 5.75999 10.2383C5.56666 10.0449 5.56666 9.72495 5.75999 9.53161L9.53332 5.75828C9.72666 5.56495 10.0467 5.56495 10.24 5.75828C10.4333 5.95161 10.4333 6.27161 10.24 6.46495L6.46666 10.2383C6.37332 10.3383 6.23999 10.3849 6.11332 10.3849Z"
+        fill={fill}
+      />
+      <path
+        d="M9.88666 10.3849C9.75999 10.3849 9.63332 10.3383 9.53332 10.2383L5.75999 6.46495C5.56666 6.27161 5.56666 5.95161 5.75999 5.75828C5.95332 5.56495 6.27332 5.56495 6.46666 5.75828L10.24 9.53161C10.4333 9.72495 10.4333 10.0449 10.24 10.2383C10.14 10.3383 10.0133 10.3849 9.88666 10.3849Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -6,6 +6,7 @@ export { BugReportIcon } from './BugReportIcon';
 export { CalendarIcon } from './CalendarIcon';
 export { ChevronLeftIcon } from './ChevronLeftIcon';
 export { ChevronRightIcon } from './ChevronRightIcon';
+export { CloseCircleIcon } from './CloseCircleIcon';
 export { ClosedLockIcon } from './ClosedLockIcon';
 export { DataSetsIcon } from './DataSetsIcon';
 export { DeepSearchIcon } from './DeepSearchIcon';

package/src/Graph2D/Graph2D.tsx

@@ -43,6 +43,7 @@ export const Graph2D = ({
   onLinkHover,
   onLinkClick,
   onBackgroundClick,
+  onClickLoadNodes,
 }: Graph2DProps) => {
   const theme = useTheme();
 
@@ -53,7 +54,6 @@ export const Graph2D = ({
   const [selectedNode, setSelectedNode] = useState<any>(null);
   const [unVisibleNodes, setUnVisibleNodes] = useState(new Set<string>());
   const [hiddenNodes, setHiddenNodes] = useState(new Set<string>());
-  const [collapsedNodes, setCollapsedNodes] = useState(new Set<string>());
   // Стани для відстеження наведення на кнопки
   const [hoverTopButton, setHoverTopButton] = useState(false);
   const [hoverBottomButton, setHoverBottomButton] = useState(false);
@@ -142,14 +142,26 @@ export const Graph2D = ({
           }
           tickTimerRef.current = setTimeout(() => {
             //force tick check
-            fgRef.current.zoomToFit(0, 20);
-            setIsRendering(false);
+            if (fgRef.current) {
+              fgRef.current.zoomToFit(0, 20);
+              setIsRendering(false);
+            }
           }, 1500);
         }
       }
     }
   };
 
+  useEffect(() => {
+    const timeoutRef = tickTimerRef.current;
+
+    return () => {
+      if (timeoutRef) {
+        clearTimeout(timeoutRef);
+      }
+    };
+  }, []);
+
   // Створення взаємозв'язків між вузлами
   useEffect(() => {
     if (!graphData) return;
@@ -349,9 +361,7 @@ export const Graph2D = ({
         if (unvisibles.has(`${link.target.id}`)) {
           if (!hiddenNodes.has(`${link.target.id}`)) {
             unvisibles.delete(`${link.target.id}`);
-            if (!collapsedNodes.has(`${link.target.id}`)) {
-              showNode(unvisibles, link.target);
-            }
+            showNode(unvisibles, link.target);
           }
         }
       });
@@ -373,21 +383,6 @@ export const Graph2D = ({
     setUnVisibleNodes(newUnVisibleNodes);
   };
 
-  // Функція для обробки кліку на кнопку "згорнути дочірні вузли"
-  const handleCollapseChildren = (node: any) => {
-    const newCollapsedNodes = new Set(collapsedNodes);
-    const newUnVisibleNodes = new Set(unVisibleNodes);
-    if (newCollapsedNodes.has(node.id)) {
-      newCollapsedNodes.delete(node.id);
-      showNode(newUnVisibleNodes, node);
-    } else {
-      newCollapsedNodes.add(node.id);
-      hideNode(newUnVisibleNodes, node);
-    }
-    setCollapsedNodes(newCollapsedNodes);
-    setUnVisibleNodes(newUnVisibleNodes);
-  };
-
   // Функція для визначення, чи знаходиться точка в межах сектора кола (кнопки)
   const isPointInButtonArea = useCallback(
     (
@@ -493,7 +488,7 @@ export const Graph2D = ({
         nodeScreenY = graphCenter.y + nodeY * zoom;
       }
 
-      // Перевіряємо наведення на верхню кнопку (hide)
+      // Перевіряємо наведення на верхню кнопку
       const isOverTopButton = isPointInButtonArea(
         scaledMouseX,
         scaledMouseY,
@@ -504,7 +499,7 @@ export const Graph2D = ({
         Math.PI * 2
       );
 
-      // Перевіряємо наведення на нижню кнопку (collapse)
+      // Перевіряємо наведення на нижню кнопку
       const isOverBottomButton = isPointInButtonArea(
         scaledMouseX,
         scaledMouseY,
@@ -620,7 +615,7 @@ export const Graph2D = ({
     // Малюємо коло
     ctx.beginPath();
     ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = collapsedNodes.has(node.id as string) ? `${color}50` : color; // Колір контуру з opacity для згорнутих вузлів
+    ctx.fillStyle = color;
 
     ctx.fill();
 
@@ -889,7 +884,7 @@ export const Graph2D = ({
       return;
     }
 
-    // Перевіряємо клік на нижній кнопці (collapse)
+    // Перевіряємо клік на нижній кнопці
     if (
       isPointInButtonArea(
         scaledClickX,
@@ -901,7 +896,7 @@ export const Graph2D = ({
         Math.PI // Кінцевий кут для нижньої півсфери
       )
     ) {
-      handleCollapseChildren(hoverNode);
+      onClickLoadNodes?.(hoverNode);
       event.stopPropagation();
       return;
     }
@@ -960,7 +955,6 @@ export const Graph2D = ({
           // Перевіряємо, чи вузол прихований
           if (hiddenNodes.has(link.source.id) || hiddenNodes.has(link.target.id)) return false;
           // Перевіряємо, чи вузол згорнутий
-          if (collapsedNodes.has(link.source.id)) return false;
           if (unVisibleNodes.has(link.source.id) || unVisibleNodes.has(link.target.id)) return false;
 
           return true; // Показуємо вузол, якщо не прихований і не згорнутий

package/src/Graph2D/types.ts

@@ -25,4 +25,5 @@ export interface Graph2DProps {
   onNodeHover?: (node: NodeObject | null) => void;
   onLinkHover?: (link: NodeObject | null) => void;
   onBackgroundClick?: () => void;
+  onClickLoadNodes?: (node: NodeObject) => void;
 }