Fix intermittent flicker after run from canvas, close run panel (#4628)

* close run panel after successful click

* fix race condition

* close run panel after run

* CL

Author: taylordowns2000

CHANGELOG.md

@@ -42,6 +42,9 @@ and this project adheres to
 
 ### Fixed
 
+- Flickering/disappearing visualization on
+  [#4198](https://github.com/OpenFn/lightning/issues/4198) fixed in
+  [PR#4628](https://github.com/OpenFn/lightning/pull/4628)
 - AI-generated workflows can now be saved when the workflow name collides with
   an existing workflow or when jobs have duplicate names
   [#4607](https://github.com/OpenFn/lightning/issues/4607)

assets/js/collaborative-editor/components/ManualRunPanel.tsx

@@ -149,7 +149,7 @@ export function ManualRunPanel({
   const { canRun: canRunWorkflow, tooltipMessage: workflowRunTooltipMessage } =
     useCanRun();
 
-  const { params } = useURLState();
+  const { params, updateSearchParams } = useURLState();
   const followedRunId = params.run ?? null;
 
   // Connect to run channel when following a run in standalone mode
@@ -449,10 +449,17 @@ export function ManualRunPanel({
     25 // RUN_PANEL priority
   );
 
+  // Close the run panel and clear the URL param so the URL→state sync
+  // in WorkflowEditor doesn't immediately reopen it.
+  const closeAfterRun = useCallback(() => {
+    updateSearchParams({ panel: null });
+    onClose();
+  }, [updateSearchParams, onClose]);
+
   // Run/retry shortcuts (standalone mode only - embedded uses IDEHeader)
   useRunRetryShortcuts({
-    onRun: () => void handleRun(),
-    onRetry: () => void handleRetry(),
+    onRun: () => void handleRun().then(ok => ok && closeAfterRun()),
+    onRetry: () => void handleRetry().then(ok => ok && closeAfterRun()),
     canRun,
     isRunning: isSubmitting || runIsProcessing,
     isRetryable,
@@ -634,10 +641,10 @@ export function ManualRunPanel({
               isDisabled={!canRun}
               isSubmitting={isSubmitting || runIsProcessing}
               onRun={() => {
-                void handleRun();
+                void handleRun().then(ok => ok && closeAfterRun());
               }}
               onRetry={() => {
-                void handleRetry();
+                void handleRetry().then(ok => ok && closeAfterRun());
               }}
               buttonText={{
                 run: 'Run',

assets/js/collaborative-editor/hooks/useRunRetry.ts

@@ -79,8 +79,8 @@ export interface UseRunRetryOptions {
 }
 
 export interface UseRunRetryReturn {
-  handleRun: () => Promise<void>;
-  handleRetry: () => Promise<void>;
+  handleRun: () => Promise<boolean>;
+  handleRetry: () => Promise<boolean>;
   isSubmitting: boolean;
   isRetryable: boolean;
   runIsProcessing: boolean;
@@ -237,7 +237,7 @@ export function useRunRetry({
     const contextId = runContext.id;
     if (!contextId) {
       logger.error('No context ID available');
-      return;
+      return false;
     }
 
     // Check workflow-level permissions before running
@@ -246,7 +246,7 @@ export function useRunRetry({
         title: 'Cannot run workflow',
         description: workflowRunTooltipMessage,
       });
-      return;
+      return false;
     }
 
     setIsSubmitting(true);
@@ -297,6 +297,8 @@ export function useRunRetry({
         updateSearchParams({ run: response.data.run_id });
         setIsSubmitting(false);
       }
+
+      return true;
     } catch (error) {
       logger.error('Failed to submit run:', error);
       notifications.alert({
@@ -305,6 +307,7 @@ export function useRunRetry({
           error instanceof Error ? error.message : 'An unknown error occurred',
       });
       setIsSubmitting(false);
+      return false;
     }
   }, [
     workflowId,
@@ -326,14 +329,14 @@ export function useRunRetry({
   const handleRetry = useCallback(async () => {
     // Guard against double-calls (e.g., from rapid keyboard shortcuts)
     if (isRetryingRef.current) {
-      return;
+      return false;
     }
     isRetryingRef.current = true;
 
     if (!followedRunId || !followedRunStep) {
       logger.error('Cannot retry: missing run or step data');
       isRetryingRef.current = false;
-      return;
+      return false;
     }
 
     if (!canRunWorkflow) {
@@ -342,7 +345,7 @@ export function useRunRetry({
         description: workflowRunTooltipMessage,
       });
       isRetryingRef.current = false;
-      return;
+      return false;
     }
 
     setIsSubmitting(true);
@@ -396,6 +399,8 @@ export function useRunRetry({
         setIsSubmitting(false);
         isRetryingRef.current = false;
       }
+
+      return true;
     } catch (error) {
       logger.error('Failed to retry run:', error);
       notifications.alert({
@@ -404,6 +409,7 @@ export function useRunRetry({
       });
       setIsSubmitting(false);
       isRetryingRef.current = false;
+      return false;
     }
   }, [
     followedRunId,

assets/js/collaborative-editor/stores/createHistoryStore.ts

@@ -336,13 +336,10 @@ export const createHistoryStore = (
     });
     notify('handleHistoryUpdated');
 
-    // Fallback cache invalidation: If a run has completed (reached final state)
-    // and there are active subscribers watching it, invalidate the cache to ensure
-    // they get the complete final data on next read.
-    //
-    // This provides a safety net for components that use useRunSteps() without
-    // useFollowRun() - they won't get real-time step updates, but will get
-    // refreshed data when the run completes.
+    // Stale-while-revalidate: If a run has completed (reached final state)
+    // and there are active subscribers watching it, refetch the complete
+    // final data in the background. We keep the existing cache entry visible
+    // so the canvas highlighting doesn't flash/disappear during the refetch.
 
     if ((action === 'run_updated' || action === 'run_created') && run) {
       const currentState = getSnapshot();
@@ -353,11 +350,6 @@ export const createHistoryStore = (
         subscribersForThisRun.size > 0 &&
         isFinalState(run.state)
       ) {
-        state = produce(state, draft => {
-          Reflect.deleteProperty(draft.runStepsCache, run.id);
-        });
-        notify('cacheInvalidated');
-
         void requestRunSteps(run.id);
       }
     }