Merge remote-tracking branch 'origin/fix/improveTooltipPerformanceReplacement-CMEM-6784' into fix/improveTooltipPerformanceReplacement-CMEM-6784-on-next

Author: haschek

src/components/Icon/IconButton.tsx

@@ -50,6 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
+        swapPlaceholderDelay: 1,
     };
     const iconProps = {
         small: restProps.small,

src/components/Tooltip/Tooltip.tsx

@@ -42,6 +42,10 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * You can prevent it in any case by setting it to `false`.
      */
     usePlaceholder?: boolean;
+    /**
+     * Time after the placeholder element is replaced by the actual tooltip component. Must be greater than 0.
+     */
+    swapPlaceholderDelay?: number;
 }
 
 export const Tooltip = ({
@@ -53,18 +57,21 @@ export const Tooltip = ({
     markdownEnabler = "\n\n",
     markdownProps,
     usePlaceholder,
+    swapPlaceholderDelay = 100,
     hoverOpenDelay = 500,
     ...otherTooltipProps
 }: TooltipProps) => {
     const placeholderRef = React.useRef(null);
     const eventMemory = React.useRef<null | "afterhover" | "afterfocus">(null);
     const searchId = React.useRef<null | string>(null);
-    const swapDelayTime = 100;
+    const swapDelay = React.useRef<null | NodeJS.Timeout>(null);
+    const swapDelayTime = swapPlaceholderDelay;
     const [placeholder, setPlaceholder] = React.useState<boolean>(
         !otherTooltipProps.disabled &&
             !otherTooltipProps.defaultIsOpen &&
             !otherTooltipProps.isOpen &&
             otherTooltipProps.renderTarget === undefined &&
+            swapDelayTime > 0 &&
             hoverOpenDelay > swapDelayTime &&
             (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
     );
@@ -77,7 +84,10 @@ export const Tooltip = ({
     React.useEffect(() => {
         if (placeholderRef.current !== null) {
             const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
-                const swapDelay = setTimeout(() => {
+                if (swapDelay.current) {
+                    clearTimeout(swapDelay.current);
+                }
+                swapDelay.current = setTimeout(() => {
                     // we delay the swap to prevent unwanted effects
                     // (e.g. forced mouseover after the swap but the cursor is already somewhere else)
                     eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
@@ -93,7 +103,7 @@ export const Tooltip = ({
                         ) {
                             eventMemory.current = null;
                         }
-                        clearTimeout(swapDelay);
+                        clearTimeout(swapDelay.current as NodeJS.Timeout);
                     });
                 }
             };
@@ -166,7 +176,9 @@ export const Tooltip = ({
     ) : (
         <BlueprintTooltip
             lazy={true}
-            hoverOpenDelay={hoverOpenDelay - swapDelayTime}
+            hoverOpenDelay={
+                swapDelayTime > 0 && hoverOpenDelay > swapDelayTime ? hoverOpenDelay - swapDelayTime : hoverOpenDelay
+            }
             {...otherTooltipProps}
             content={tooltipContent}
             className={targetClassName}

src/extensions/react-flow/nodes/NodeContent.tsx

@@ -661,7 +661,7 @@ export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
                         )}
                     </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                        <div className={`${eccgui}-graphviz__node__header-menu`}>
+                        <div className={`${eccgui}-graphviz__node__header-menu nodrag`}>
                             {showExecutionButtons && typeof executionButtons === "function"
                                 ? executionButtons(adjustedContentProps, setAdjustedContentProps)
                                 : null}