fix(Canvas): Increase hoverOut timing

Currently, when opening the Step toolbar, the hover area is the same
size as the node size and this is problematic for steps that generates a
wider toolbar than the node itself, as in order to keep the toolbar
open, the user need to follow a `L` shaped path.

The fix is to increase the hoverOut delay time upon hovering the node, so the
user have more time to get to the rightmost or leftmost
button in the toolbar.

fix: #1631

packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts

@@ -15,4 +15,7 @@ export class CanvasDefaults {
 
   static readonly STEP_TOOLBAR_WIDTH = 350;
   static readonly STEP_TOOLBAR_HEIGHT = 60;
+
+  static readonly HOVER_DELAY_IN = 200;
+  static readonly HOVER_DELAY_OUT = 500;
 }

packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx

@@ -48,8 +48,11 @@ const CustomNode: FunctionComponent<CustomNodeProps> = observer(({ element, onCo
   const validationText = vizNode?.getNodeValidationText();
   const doesHaveWarnings = !isDisabled && !!validationText;
   const [isSelected, onSelect] = useSelection();
-  const [isGHover, gHoverRef] = useHover<SVGGElement>();
-  const [isToolbarHover, toolbarHoverRef] = useHover<SVGForeignObjectElement>();
+  const [isGHover, gHoverRef] = useHover<SVGGElement>(CanvasDefaults.HOVER_DELAY_IN, CanvasDefaults.HOVER_DELAY_OUT);
+  const [isToolbarHover, toolbarHoverRef] = useHover<SVGForeignObjectElement>(
+    CanvasDefaults.HOVER_DELAY_IN,
+    CanvasDefaults.HOVER_DELAY_OUT,
+  );
   const childCount = element.getAllNodeChildren().length;
   const boxRef = useRef<Rect>(element.getBounds());
   const shouldShowToolbar =