Add subgraph navigation with double-click and auto-fit view (#1019)

## Description

Added support for subgraph node navigation by implementing double-click functionality on subgraph nodes. When a user double-clicks on a subgraph node, they will be navigated to that subgraph. Additionally, modified the TaskConfiguration component to handle subgraph nodes differently by:

1. Adding an `isSubgraphNode` prop to TaskConfiguration
2. Setting "details" as the default tab for subgraph nodes instead of "io"
3. Adding a visual cursor pointer indicator for subgraph nodes

Also implemented automatic view fitting when navigating between subgraphs, which ensures the graph is properly centered and zoomed after navigation.

## Type of Change

- [x] New feature
- [x] Improvement

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [x] I have tested the changes on staging

## Test Instructions

1. Create a pipeline with a subgraph node
2. Run the pipeline
3. Double-click on the subgraph node to navigate to the subgraph
4. Verify that the subgraph node shows the details tab by default
5. Confirm the cursor changes to a pointer when hovering over subgraph nodes
6. Navigate between subgraphs and verify the view automatically fits to show all nodes

Author: Mbeaulne

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -763,17 +763,22 @@ const FlowCanvas = ({
     initialCanvasLoaded.current = true;
   }, [componentSpec, currentSubgraphPath, preserveIOSelectionOnSpecChange]);
 
+  useEffect(() => {
+    reactFlowInstance?.fitView({
+      maxZoom: 1,
+      duration: 300,
+    });
+  }, [currentSubgraphPath, reactFlowInstance]);
+
   // Reset when loading a new component file
   useEffect(() => {
     resetPrevSpec();
   }, [componentSpec?.name, resetPrevSpec]);
 
   const fitView = useCallback(() => {
-    if (reactFlowInstance) {
-      reactFlowInstance.fitView({
-        maxZoom: 1,
-      });
-    }
+    reactFlowInstance?.fitView({
+      maxZoom: 1,
+    });
   }, [reactFlowInstance]);
 
   useScheduleExecutionOnceWhenConditionMet(

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx

@@ -163,6 +163,12 @@ const TaskNodeCard = () => {
     setExpandedOutputs((prev) => !prev);
   }, []);
 
+  const handleDoubleClick = useCallback(() => {
+    if (isSubgraphNode && taskId && isSubgraphNavigationEnabled) {
+      navigateToSubgraph(taskId);
+    }
+  }, [isSubgraphNode, taskId, navigateToSubgraph, isSubgraphNavigationEnabled]);
+
   useEffect(() => {
     if (nodeRef.current) {
       setScrollHeight(nodeRef.current.scrollHeight);
@@ -201,13 +207,15 @@ const TaskNodeCard = () => {
         "rounded-2xl border-gray-200 border-2 break-words p-0 drop-shadow-none gap-2",
         selected ? "border-gray-500" : "hover:border-slate-200",
         (highlighted || highlightedState) && "border-orange-500!",
+        isSubgraphNode && "cursor-pointer",
       )}
       style={{
         width: dimensions.w + "px",
         height: condensed || !dimensions.h ? "auto" : dimensions.h + "px",
         transition: "height 0.2s",
       }}
       ref={nodeRef}
+      onDoubleClick={handleDoubleClick}
     >
       <CardHeader className="border-b border-slate-200 px-2 py-2.5 flex flex-row justify-between items-start">
         <BlockStack>

src/routes/PipelineRun/PipelineRun.test.tsx

@@ -49,6 +49,15 @@ vi.mock("@/providers/BackendProvider", () => ({
 }));
 
 vi.mock("@/services/executionService", () => ({
+  useFetchExecutionInfo: vi.fn(),
+  useFetchPipelineRun: () => ({
+    data: null,
+    isLoading: false,
+    error: null,
+    isFetching: false,
+    refetch: () => {},
+    enabled: false,
+  }),
   countTaskStatuses: vi.fn(),
   getRunStatus: vi.fn(),
   STATUS: {