fix: simplify nodes pdisks svg rendering

Author: StekPerepolnen

src/containers/Configs/components/Startup/Startup.tsx

@@ -1,8 +1,8 @@
 import {useThemeValue} from '@gravity-ui/uikit';
+import MonacoEditor from 'react-monaco-editor';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
-import {MonacoEditor} from '../../../../components/MonacoEditor/MonacoEditor';
 import {configsApi} from '../../../../store/reducers/configs';
 import {useAutoRefreshInterval} from '../../../../utils/hooks/useAutoRefreshInterval';
 

src/containers/Storage/PDisk/PDiskSvg.tsx

@@ -90,9 +90,8 @@ interface PDiskSvgProps {
     viewContext?: StorageViewContext;
     width: number;
     inactive?: boolean;
-    delayClose?: number;
     activeDiskKey?: string;
-    setActiveDiskKey?: (id?: string) => void;
+    setActiveDiskKey: (id?: string) => void;
     inverted?: boolean;
 }
 
@@ -403,7 +402,6 @@ export function PDiskSvg({
     viewContext,
     width,
     inactive,
-    delayClose = DISKS_POPUP_DEBOUNCE_TIMEOUT,
     activeDiskKey,
     setActiveDiskKey,
     inverted,
@@ -413,9 +411,7 @@ export function PDiskSvg({
     const anchorRef = React.useRef<HTMLDivElement>(null);
     const popupContentRef = React.useRef<HTMLDivElement>(null);
     const patternIdPrefix = React.useId().replace(/:/g, '');
-    const [innerActiveDiskKey, setInnerActiveDiskKey] = React.useState<string | undefined>();
     const [isPopupPositionReady, setIsPopupPositionReady] = React.useState(false);
-    const resolvedActiveDiskKey = setActiveDiskKey ? activeDiskKey : innerActiveDiskKey;
 
     const vDiskAreas = React.useMemo(
         () => getVDiskAreas({vDisks, viewContext, width}),
@@ -427,16 +423,16 @@ export function PDiskSvg({
     );
     const vDiskPaths = React.useMemo(() => getVDiskPaths(vDiskAreas), [vDiskAreas]);
     const activeArea = React.useMemo<DiskArea | undefined>(() => {
-        if (!resolvedActiveDiskKey) {
+        if (!activeDiskKey) {
             return undefined;
         }
 
-        if (pDiskArea.key === resolvedActiveDiskKey) {
+        if (pDiskArea.key === activeDiskKey) {
             return pDiskArea;
         }
 
-        return vDiskAreas.find((area) => area.key === resolvedActiveDiskKey);
-    }, [pDiskArea, resolvedActiveDiskKey, vDiskAreas]);
+        return vDiskAreas.find((area) => area.key === activeDiskKey);
+    }, [activeDiskKey, pDiskArea, vDiskAreas]);
     const hasActiveArea = Boolean(activeArea);
     const activePath = React.useMemo(() => {
         if (!activeArea) {
@@ -453,24 +449,13 @@ export function PDiskSvg({
         });
     }, [activeArea, getVDiskLink]);
 
-    const setActiveDisk = React.useCallback(
-        (key?: string) => {
-            if (setActiveDiskKey) {
-                setActiveDiskKey(key);
-            } else {
-                setInnerActiveDiskKey(key);
-            }
-        },
-        [setActiveDiskKey],
-    );
-
     const closePopup = React.useCallback(() => {
-        setActiveDisk(undefined);
-    }, [setActiveDisk]);
+        setActiveDiskKey(undefined);
+    }, [setActiveDiskKey]);
 
     const debouncedClosePopup = React.useMemo(
-        () => debounce(closePopup, delayClose),
-        [closePopup, delayClose],
+        () => debounce(closePopup, DISKS_POPUP_DEBOUNCE_TIMEOUT),
+        [closePopup],
     );
 
     React.useEffect(() => {
@@ -539,14 +524,14 @@ export function PDiskSvg({
             }
 
             debouncedClosePopup.cancel();
-            if (area.key === resolvedActiveDiskKey) {
+            if (area.key === activeDiskKey) {
                 return;
             }
 
             closeOtherPopups(patternIdPrefix);
-            setActiveDisk(area.key);
+            setActiveDiskKey(area.key);
         },
-        [debouncedClosePopup, patternIdPrefix, resolvedActiveDiskKey, setActiveDisk],
+        [activeDiskKey, debouncedClosePopup, patternIdPrefix, setActiveDiskKey],
     );
 
     const handleMouseMove = React.useCallback(

src/containers/Storage/PDisks/PDisks.tsx

@@ -2,23 +2,25 @@ import React from 'react';
 
 import {cn} from '../../../utils/cn';
 import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
-import {PDisk} from '../PDisk/';
+import {PDiskSvg} from '../PDisk/PDiskSvg';
 import type {StorageViewContext} from '../types';
 import {isPdiskActive} from '../utils';
 
 import './PDisks.scss';
 
 const b = cn('ydb-storage-pdisks');
+const PDISK_MIN_WIDTH = 165;
 
 interface PDisksProps {
     pDisks?: PreparedPDisk[];
     vDisks?: PreparedVDisk[];
     viewContext?: StorageViewContext;
     pDiskWidth?: number;
+    inverted?: boolean;
 }
 
-export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDisksProps) {
-    const [highlightedDisk, setHighlightedDisk] = React.useState<string | undefined>();
+export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth, inverted}: PDisksProps) {
+    const [activeDiskKey, setActiveDiskKey] = React.useState<string | undefined>();
 
     if (!pDisks.length) {
         return null;
@@ -31,22 +33,17 @@ export function PDisks({pDisks = [], vDisks = [], viewContext, pDiskWidth}: PDis
 
                 const relatedVDisks = vDisks.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
 
-                const highlighted = highlightedDisk === id;
-
                 return (
                     <div className={b('pdisks-item')} key={id}>
-                        <PDisk
+                        <PDiskSvg
                             data={pDisk}
                             inactive={!isPdiskActive(pDisk, viewContext)}
                             vDisks={relatedVDisks}
                             viewContext={viewContext}
-                            width={pDiskWidth}
-                            showPopup={highlighted}
-                            onShowPopup={() => setHighlightedDisk(id)}
-                            onHidePopup={() => setHighlightedDisk(undefined)}
-                            highlighted={highlighted}
-                            highlightedDisk={highlightedDisk}
-                            setHighlightedDisk={setHighlightedDisk}
+                            width={pDiskWidth ?? PDISK_MIN_WIDTH}
+                            inverted={inverted}
+                            activeDiskKey={activeDiskKey}
+                            setActiveDiskKey={setActiveDiskKey}
                         />
                     </div>
                 );