chore: do not hide pdisk and vdisk popups if mouse on popup content

Author: astandrik

src/components/PDiskPopup/PDiskPopup.tsx

@@ -70,6 +70,14 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
     const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
     const info = React.useMemo(() => preparePDiskData(data, nodeHost), [data, nodeHost]);
 
+    const [isPopupOpen, setIsPopupOpen] = React.useState(props.open);
+    const onMouseLeave = React.useCallback(() => {
+        setIsPopupOpen(false);
+    }, []);
+    const onMouseEnter = React.useCallback(() => {
+        setIsPopupOpen(true);
+    }, []);
+
     return (
         <Popup
             contentClassName={b()}
@@ -78,7 +86,10 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
+            onMouseLeave={onMouseLeave}
+            onMouseEnter={onMouseEnter}
             {...props}
+            open={isPopupOpen || props.open}
         >
             <InfoViewer title="PDisk" info={info} size="s" />
         </Popup>

src/components/VDisk/VDisk.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {debounce} from 'lodash';
+
 import {STRUCTURE} from '../../containers/Node/NodePages';
 import routes, {createHref, getVDiskPagePath} from '../../routes';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
@@ -15,6 +17,8 @@ import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
 
+const DEBOUNCE_TIMEOUT = 100;
+
 export interface VDiskProps {
     data?: PreparedVDisk;
     compact?: boolean;
@@ -52,6 +56,9 @@ export const VDisk = ({
         onHidePopup?.();
     };
 
+    const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT);
+    const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT);
+
     let vDiskPath: string | undefined;
 
     if (
@@ -77,8 +84,8 @@ export const VDisk = ({
             <div
                 className={b()}
                 ref={anchor}
-                onMouseEnter={handleShowPopup}
-                onMouseLeave={handleHidePopup}
+                onMouseEnter={debouncedHandleShowPopup}
+                onMouseLeave={debouncedHandleHidePopup}
             >
                 <InternalLink to={vDiskPath} className={b('content')}>
                     <DiskStateProgressBar

src/components/VDiskPopup/VDiskPopup.tsx

@@ -133,6 +133,13 @@ interface VDiskPopupProps extends PopupProps {
 
 export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
+    const [isPopupOpen, setIsPopupOpen] = React.useState(props.open);
+    const onMouseLeave = React.useCallback(() => {
+        setIsPopupOpen(false);
+    }, []);
+    const onMouseEnter = React.useCallback(() => {
+        setIsPopupOpen(true);
+    }, []);
 
     const vdiskInfo = React.useMemo(
         () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
@@ -154,7 +161,10 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
             {...props}
+            open={isPopupOpen || props.open}
         >
             {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
             <InfoViewer title="VDisk" info={vdiskInfo} size="s" />

src/containers/Storage/PDisk/PDisk.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {debounce} from 'lodash';
+
 import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {InternalLink} from '../../../components/InternalLink';
 import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
@@ -17,6 +19,8 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
+const DEBOUNCE_TIMEOUT = 100;
+
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -57,6 +61,9 @@ export const PDisk = ({
         onHidePopup?.();
     };
 
+    const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT);
+    const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT);
+
     const renderVDisks = () => {
         if (!vDisks?.length) {
             return null;
@@ -105,8 +112,8 @@ export const PDisk = ({
                 <InternalLink
                     to={pDiskPath}
                     className={b('content')}
-                    onMouseEnter={handleShowPopup}
-                    onMouseLeave={handleHidePopup}
+                    onMouseEnter={debouncedHandleShowPopup}
+                    onMouseLeave={debouncedHandleHidePopup}
                 >
                     <DiskStateProgressBar
                         diskAllocatedPercent={data.AllocatedPercent}