Merge pull request #22142 from ahmedhamidawan/add_focus_mode_to_workflow_graph

Add an "Isolate" (focus) mode to workflow graph

Author: ahmedhamidawan

client/src/components/Workflow/Editor/Node.vue

@@ -212,6 +212,7 @@ const props = defineProps({
     isInvocation: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     populatedInputs: { type: Boolean, default: false },
+    isOutOfFocus: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -275,6 +276,7 @@ const classes = computed(() => {
         "node-highlight": props.highlight || isActive.value,
         "is-active": isActive.value,
         "node-multi-selected": stateStore.getStepMultiSelected(props.id),
+        "node-not-in-focus": props.isOutOfFocus && !isActive.value,
     };
 });
 
@@ -447,6 +449,12 @@ function toggleSelected() {
 
     $multi-selected: lighten($brand-info, 20%);
 
+    transition: opacity 0.2s ease;
+
+    &.node-not-in-focus {
+        opacity: 0.7;
+    }
+
     &.node-multi-selected {
         box-shadow:
             0 0 0 2px $white,

client/src/components/Workflow/Editor/SVGConnection.vue

@@ -17,6 +17,10 @@ const props = defineProps({
         type: Object as PropType<TerminalPosition | null>,
         default: null,
     },
+    focusedNodeIds: {
+        type: Object as PropType<Set<number> | null>,
+        default: null,
+    },
 });
 
 const ribbonMargin = 4;
@@ -172,6 +176,27 @@ const lineWidth = computed(() => {
     }
 });
 
+/**
+ * The connection is considered out of focus if either the input or output node is not focused.
+ * The connection will never be considered out of focus if there are no focused nodes
+ * (i.e. in non-focus mode).
+ */
+const isOutOfFocus = computed(() => {
+    const ids = props.focusedNodeIds;
+    if (!ids) {
+        return false;
+    }
+
+    // make sure dragging connections are never dimmed (though we aren't passing the `focusedNodeIds`
+    // prop to dragging connections for now, we add this check just in case)
+    if (props.terminalPosition) {
+        return false;
+    }
+
+    const { output, input } = props.connection;
+    return !ids.has(output.stepId) || !ids.has(input.stepId);
+});
+
 const connectionClass = computed(() => {
     const classList = ["connection"];
 
@@ -183,6 +208,10 @@ const connectionClass = computed(() => {
         classList.push("invalid");
     }
 
+    if (isOutOfFocus.value) {
+        classList.push("out-of-focus");
+    }
+
     return classList.join(" ");
 });
 
@@ -239,6 +268,7 @@ function keyForIndex(index: number) {
 .workflow-editor-drawable-connection {
     .connection {
         stroke: #{$brand-primary};
+        transition: opacity 0.2s ease;
 
         &.optional {
             stroke-dasharray: 5 3;
@@ -247,6 +277,10 @@ function keyForIndex(index: number) {
         &.invalid {
             stroke: #{$brand-warning};
         }
+
+        &.out-of-focus {
+            opacity: 0.2;
+        }
     }
 }
 </style>

client/src/components/Workflow/Editor/WorkflowEdges.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
     draggingConnection: TerminalPosition | null;
     draggingTerminal: OutputTerminals | null;
     transform: WorkflowTransform;
+    focusedNodeIds: Set<number> | null;
 }>();
 
 const { connectionStore } = useWorkflowStores();
@@ -57,7 +58,8 @@ function id(connection: Connection) {
                 v-for="connection in connections"
                 :id="id(connection)"
                 :key="key(connection)"
-                :connection="connection" />
+                :connection="connection"
+                :focused-node-ids="props.focusedNodeIds" />
         </svg>
     </div>
 </template>

client/src/components/Workflow/Editor/WorkflowGraph.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementBounding, useScroll } from "@vueuse/core";
+import { useElementBounding, useEventListener, useScroll } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed, type PropType, provide, reactive, type Ref, ref, watch, watchEffect } from "vue";
 
@@ -10,6 +10,7 @@ import type { Step } from "@/stores/workflowStepStore";
 import { assertDefined } from "@/utils/assertions";
 
 import { useD3Zoom } from "./composables/d3Zoom";
+import { useFocusedNodes } from "./composables/useFocusedNodes";
 import { useViewportBoundingBox } from "./composables/viewportBoundingBox";
 import { useWorkflowBoundingBox } from "./composables/workflowBoundingBox";
 import type { Rectangle, Vector } from "./modules/geometry";
@@ -44,8 +45,10 @@ const props = defineProps({
     detailedView: { type: Boolean, default: false },
 });
 
-const { stateStore, stepStore } = useWorkflowStores();
+const { stateStore, stepStore, connectionStore } = useWorkflowStores();
 const { scale, activeNodeId, draggingPosition, draggingTerminal } = storeToRefs(stateStore);
+
+const { focusedNodeIds } = useFocusedNodes(activeNodeId, connectionStore);
 const canvas: Ref<HTMLElement | null> = ref(null);
 
 const elementBounding = useElementBounding(canvas, { windowResize: false, windowScroll: false });
@@ -148,6 +151,46 @@ function onDeactivate() {
     stateStore.activeNodeId = null;
 }
 
+/**
+ * Max total pixel movement (|dx| + |dy|) between pointerdown and pointerup
+ * that still counts as a "click" rather than a pan/drag.
+ */
+const mouseMovementThreshold = 9;
+
+/** The position of the last pointerdown event, or null if there hasn't been one yet. */
+let canvasPointerDownPos: { x: number; y: number } | null = null;
+
+// capture: true makes these fire in the capture phase, before D3 zoom's bubble-phase
+// listeners on the same element — so D3 cannot stopImmediatePropagation us out.
+useEventListener(
+    canvas,
+    "pointerdown",
+    (e: PointerEvent) => {
+        canvasPointerDownPos = { x: e.clientX, y: e.clientY };
+    },
+    { capture: true },
+);
+
+useEventListener(
+    canvas,
+    "pointerup",
+    (e: PointerEvent) => {
+        if (!canvasPointerDownPos) {
+            return;
+        }
+        const dx = Math.abs(e.clientX - canvasPointerDownPos.x);
+        const dy = Math.abs(e.clientY - canvasPointerDownPos.y);
+        canvasPointerDownPos = null;
+        // walk up the DOM from the release target — if we hit a node, this was a node click
+        const clickedOnNode = !!(e.target as HTMLElement).closest(".workflow-node");
+        // only deactivate on a clean click (no pan) on the canvas background
+        if (dx + dy <= mouseMovementThreshold && !clickedOnNode) {
+            onDeactivate();
+        }
+    },
+    { capture: true },
+);
+
 watch(
     () => transform.value.k,
     () => (stateStore.scale = transform.value.k),
@@ -211,7 +254,8 @@ defineExpose({
                 <WorkflowEdges
                     :transform="transform"
                     :dragging-terminal="draggingTerminal"
-                    :dragging-connection="draggingPosition" />
+                    :dragging-connection="draggingPosition"
+                    :focused-node-ids="focusedNodeIds" />
                 <WorkflowNode
                     v-for="(step, key) in steps"
                     :id="step.id"
@@ -227,6 +271,7 @@ defineExpose({
                     :readonly="readonly"
                     :is-invocation="props.isInvocation && (!props.detailedView || activeNodeId !== step.id)"
                     :populated-inputs="props.populatedInputs"
+                    :is-out-of-focus="focusedNodeIds !== null && !focusedNodeIds.has(step.id)"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"

client/src/components/Workflow/Editor/composables/useFocusedNodes.test.ts

@@ -0,0 +1,106 @@
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it } from "vitest";
+import { ref } from "vue";
+
+import { useConnectionStore } from "@/stores/workflowConnectionStore";
+import { type NewStep, useWorkflowStepStore } from "@/stores/workflowStepStore";
+import type { Connection } from "@/stores/workflowStoreTypes";
+
+import { useFocusedNodes } from "./useFocusedNodes";
+
+const WORKFLOW_ID = "test-workflow";
+
+const baseStep: NewStep = {
+    input_connections: {},
+    inputs: [],
+    name: "step",
+    outputs: [],
+    post_job_actions: {},
+    tool_state: {},
+    type: "tool",
+    workflow_outputs: [],
+};
+
+/** Build a connection from outputStepId → inputStepId */
+function conn(outputStepId: number, inputStepId: number): Connection {
+    return {
+        output: { stepId: outputStepId, name: "out", connectorType: "output" },
+        input: { stepId: inputStepId, name: "in", connectorType: "input" },
+    };
+}
+
+describe("useFocusedNodes", () => {
+    let connectionStore: ReturnType<typeof useConnectionStore>;
+    let stepStore: ReturnType<typeof useWorkflowStepStore>;
+
+    beforeEach(() => {
+        setActivePinia(createPinia());
+        stepStore = useWorkflowStepStore(WORKFLOW_ID);
+        connectionStore = useConnectionStore(WORKFLOW_ID);
+    });
+
+    /** Add n steps to the store (IDs are assigned 0..n-1) */
+    function addSteps(n: number) {
+        for (let i = 0; i < n; i++) {
+            stepStore.addStep({ ...baseStep, name: `Step ${i}` });
+        }
+    }
+
+    /** Convenience: call the composable and return the computed value */
+    function focused(activeNodeId: number | null): Set<number> | null {
+        const { focusedNodeIds } = useFocusedNodes(ref(activeNodeId), connectionStore);
+        return focusedNodeIds.value;
+    }
+
+    it("returns null when no node is active", () => {
+        addSteps(2);
+        connectionStore.addConnection(conn(0, 1));
+        expect(focused(null)).toBeNull();
+    });
+
+    it("includes only the active node when it has no connections", () => {
+        addSteps(1);
+        expect(focused(0)).toEqual(new Set([0]));
+    });
+
+    it("includes full linear chain when focusing the middle node (A→B→C, focus B)", () => {
+        addSteps(3);
+        connectionStore.addConnection(conn(0, 1)); // A→B
+        connectionStore.addConnection(conn(1, 2)); // B→C
+        expect(focused(1)).toEqual(new Set([0, 1, 2]));
+    });
+
+    it("includes full linear chain when focusing the start node (A→B→C, focus A)", () => {
+        addSteps(3);
+        connectionStore.addConnection(conn(0, 1)); // A→B
+        connectionStore.addConnection(conn(1, 2)); // B→C
+        expect(focused(0)).toEqual(new Set([0, 1, 2]));
+    });
+
+    it("excludes sibling inputs — A→C and B→C: focusing A should not include B", () => {
+        // A(0) → C(2) ← B(1)
+        addSteps(3);
+        connectionStore.addConnection(conn(0, 2)); // A→C
+        connectionStore.addConnection(conn(1, 2)); // B→C
+        expect(focused(0)).toEqual(new Set([0, 2]));
+    });
+
+    it("excludes sibling outputs — A→B and A→C: focusing C should not include B", () => {
+        // B(1) ← A(0) → C(2)
+        addSteps(3);
+        connectionStore.addConnection(conn(0, 1)); // A→B
+        connectionStore.addConnection(conn(0, 2)); // A→C
+        expect(focused(2)).toEqual(new Set([0, 2]));
+    });
+
+    it("handles diamond — A→B→D and A→C→D: focusing B excludes C", () => {
+        // A(0) → B(1) → D(3)
+        //      ↘ C(2) ↗
+        addSteps(4);
+        connectionStore.addConnection(conn(0, 1)); // A→B
+        connectionStore.addConnection(conn(0, 2)); // A→C
+        connectionStore.addConnection(conn(1, 3)); // B→D
+        connectionStore.addConnection(conn(2, 3)); // C→D
+        expect(focused(1)).toEqual(new Set([0, 1, 3])); // A, B, D — not C
+    });
+});

client/src/components/Workflow/Editor/composables/useFocusedNodes.ts

@@ -0,0 +1,56 @@
+import { computed, type Ref } from "vue";
+
+import type { WorkflowConnectionStore } from "@/stores/workflowConnectionStore";
+
+/**
+ * Given an active node and the connection store, returns the set of step IDs
+ * that are in the upstream/downstream pipeline of the active node.
+ * Returns `null` when no node is active (no filtering needed).
+ */
+export function useFocusedNodes(activeNodeId: Ref<number | null>, connectionStore: WorkflowConnectionStore) {
+    const focusedNodeIds = computed((): Set<number> | null => {
+        if (activeNodeId.value === null) {
+            return null;
+        }
+
+        const visited = new Set<number>();
+        visited.add(activeNodeId.value);
+
+        // Two separate directional traversals are used to avoid including "sibling" steps:
+        // e.g. if A→C and B→C, focusing on A should NOT include B (even though B feeds the same step C).
+
+        // Upstream: walk backwards through output→input connections (find all ancestors)
+        const upstreamQueue = [activeNodeId.value];
+        while (upstreamQueue.length) {
+            const stepId = upstreamQueue.shift()!;
+            for (const conn of connectionStore.getConnectionsForStep(stepId)) {
+                if (conn.input.stepId === stepId) {
+                    const upstream = conn.output.stepId;
+                    if (!visited.has(upstream)) {
+                        visited.add(upstream);
+                        upstreamQueue.push(upstream);
+                    }
+                }
+            }
+        }
+
+        // Downstream: walk forwards through output→input connections (find all descendants)
+        const downstreamQueue = [activeNodeId.value];
+        while (downstreamQueue.length) {
+            const stepId = downstreamQueue.shift()!;
+            for (const conn of connectionStore.getConnectionsForStep(stepId)) {
+                if (conn.output.stepId === stepId) {
+                    const downstream = conn.input.stepId;
+                    if (!visited.has(downstream)) {
+                        visited.add(downstream);
+                        downstreamQueue.push(downstream);
+                    }
+                }
+            }
+        }
+
+        return visited;
+    });
+
+    return { focusedNodeIds };
+}