fix context panel on node dragging (#709)

## Description

Closes Shopify/oasis-frontend#202

This PR improves performance and code quality through several optimizations:

1. Removed unnecessary `isDragging` check in TaskNodeCard that was causing performance issues
2. Optimized the `useToastNotification` hook with `useCallback` to prevent unnecessary re-renders
3. Fixed a memory leak in ContextPanelProvider by using a ref for defaultContent
4. Refactored TaskNodeProvider to extract callbacks from data with a fallback to default no-op functions

## Type of Change

- [x] Improvement
- [x] Cleanup/Refactor
- [x] Bug fix

## Checklist

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

## Test Instructions

1. Verify task nodes can still be selected and manipulated without issues
2. Check that toast notifications work properly
3. Confirm context panel content updates correctly when selecting nodes
4. Verify task node callbacks (delete, duplicate, upgrade) function as expected

[Screen Recording 2025-12-04 at 3.33.30 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/eeb09801-784c-409f-9774-60b1a9615b5e.mov" />](https://app.graphite.com/user-attachments/video/eeb09801-784c-409f-9774-60b1a9615b5e.mov)

Author: maxy-shpfy

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

@@ -1,5 +1,4 @@
 import { useNavigate } from "@tanstack/react-router";
-import { useStore } from "@xyflow/react";
 import { CircleFadingArrowUp, CopyIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -51,11 +50,6 @@ const TaskNodeCard = () => {
   const rootExecutionId = executionData?.rootExecutionId;
   const details = executionData?.details;
 
-  const isDragging = useStore((state) => {
-    const thisNode = state.nodes.find((node) => node.id === taskNode.nodeId);
-    return thisNode?.dragging || false;
-  });
-
   const nodeRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -241,7 +235,7 @@ const TaskNodeCard = () => {
   }, [scrollHeight, dimensions.h]);
 
   useEffect(() => {
-    if (selected && !isDragging) {
+    if (selected) {
       setContent(taskConfigMarkup);
       setContextPanelOpen(true);
     }

src/hooks/useToastNotification.ts

@@ -1,26 +1,29 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { Bounce, type Id, toast } from "react-toastify";
 
 const useToastNotification = () => {
   const toastId = useRef<Id | null>(null);
 
-  const notify = (
-    message: string | React.ReactNode,
-    type: "success" | "warning" | "error" | "info" = "info",
-  ) => {
-    toastId.current = toast(message, {
-      position: "bottom-right",
-      autoClose: 3000,
-      hideProgressBar: false,
-      closeOnClick: false,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "colored",
-      transition: Bounce,
-      type,
-    });
-  };
+  const notify = useCallback(
+    (
+      message: string | React.ReactNode,
+      type: "success" | "warning" | "error" | "info" = "info",
+    ) => {
+      toastId.current = toast(message, {
+        position: "bottom-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+        transition: Bounce,
+        type,
+      });
+    },
+    [],
+  );
 
   return notify;
 };

src/providers/ContextPanelProvider.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 
@@ -40,7 +41,7 @@ export const ContextPanelProvider = ({
   children: ReactNode;
 }) => {
   const { setNodes } = useReactFlow();
-
+  const defaultContentRef = useRef<ReactNode>(defaultContent);
   const [content, setContentState] = useState<ReactNode>(defaultContent);
   const [open, setOpen] = useState(true);
 
@@ -49,10 +50,12 @@ export const ContextPanelProvider = ({
   }, []);
 
   const clearContent = useCallback(() => {
-    setContentState(defaultContent);
-  }, [defaultContent]);
+    setContentState(defaultContentRef.current);
+  }, []);
 
   useEffect(() => {
+    defaultContentRef.current = defaultContent;
+
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         clearContent();

src/providers/TaskNodeProvider.tsx

@@ -7,7 +7,11 @@ import { useTaskNodeDimensions } from "@/hooks/useTaskNodeDimensions";
 import useToastNotification from "@/hooks/useToastNotification";
 import type { Annotations } from "@/types/annotations";
 import type { RunStatus } from "@/types/pipelineRun";
-import type { TaskNodeData, TaskNodeDimensions } from "@/types/taskNode";
+import {
+  DEFAULT_TASK_NODE_CALLBACKS,
+  type TaskNodeData,
+  type TaskNodeDimensions,
+} from "@/types/taskNode";
 import type {
   ArgumentType,
   ComponentReference,
@@ -82,6 +86,15 @@ export const TaskNodeProvider = ({
   const taskId = data.taskId;
   const nodeId = taskId ? taskIdToNodeId(taskId) : "";
 
+  const {
+    onDelete,
+    onDuplicate,
+    onUpgrade,
+    setArguments,
+    setAnnotations,
+    setCacheStaleness,
+  } = data.callbacks ?? DEFAULT_TASK_NODE_CALLBACKS;
+
   const componentRef = taskSpec?.componentRef ?? EMPTY_COMPONENT_REF;
   const inputs = componentRef.spec?.inputs ?? EMPTY_INPUTS;
   const outputs = componentRef.spec?.outputs ?? EMPTY_OUTPUTS;
@@ -100,41 +113,41 @@ export const TaskNodeProvider = ({
 
   const handleSetArguments = useCallback(
     (args: Record<string, ArgumentType>) => {
-      data.callbacks?.setArguments(args);
+      setArguments(args);
     },
-    [data.callbacks],
+    [setArguments],
   );
 
   const handleSetAnnotations = useCallback(
     (annotations: Annotations) => {
-      data.callbacks?.setAnnotations(annotations);
+      setAnnotations(annotations);
     },
-    [data.callbacks],
+    [setAnnotations],
   );
 
   const handleSetCacheStaleness = useCallback(
     (cacheStaleness: string | undefined) => {
-      data.callbacks?.setCacheStaleness(cacheStaleness);
+      setCacheStaleness(cacheStaleness);
     },
-    [data.callbacks],
+    [setCacheStaleness, notify],
   );
 
   const handleDeleteTaskNode = useCallback(() => {
-    data.callbacks?.onDelete();
-  }, [data.callbacks]);
+    onDelete();
+  }, [onDelete]);
 
   const handleDuplicateTaskNode = useCallback(() => {
-    data.callbacks?.onDuplicate();
-  }, [data.callbacks]);
+    onDuplicate();
+  }, [onDuplicate]);
 
   const handleUpgradeTaskNode = useCallback(() => {
     if (!isOutdated) {
       notify("Component version already matches source URL", "info");
       return;
     }
 
-    data.callbacks?.onUpgrade(mostRecentComponentRef);
-  }, [data.callbacks, isOutdated, mostRecentComponentRef, notify]);
+    onUpgrade(mostRecentComponentRef);
+  }, [onUpgrade, isOutdated, mostRecentComponentRef, notify]);
 
   const select = useCallback(() => {
     reactFlowInstance.setNodes((nodes) =>

src/types/taskNode.ts

@@ -34,6 +34,17 @@ interface TaskNodeCallbacks {
   onUpgrade: (newComponentRef: ComponentReference) => void;
 }
 
+function noop() {}
+
+export const DEFAULT_TASK_NODE_CALLBACKS: TaskNodeCallbacks = {
+  setArguments: noop,
+  setAnnotations: noop,
+  onDelete: noop,
+  onDuplicate: noop,
+  onUpgrade: noop,
+  setCacheStaleness: noop,
+};
+
 // Dynamic Node Callback types - every callback has a version with the node & task id added to it as an input parameter
 export type CallbackWithIds<K extends keyof TaskNodeCallbacks> =
   TaskNodeCallbacks[K] extends (...args: infer A) => infer R