Merge pull request #21145 from ahmedhamidawan/fix_invocation_view_connection_animations

[25.1] Remove invocation view connection animations

Author: mvdbeek

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

@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import { curveBasis, line } from "d3";
-import { computed } from "vue";
+import { computed, type PropType } from "vue";
 
 import { useWorkflowStores } from "@/composables/workflowStores";
 import { getConnectionId } from "@/stores/workflowConnectionStore";
 import type { TerminalPosition } from "@/stores/workflowEditorStateStore";
 import type { Connection } from "@/stores/workflowStoreTypes";
 
-interface Props {
-    id: string;
-    connection: Connection;
-    terminalPosition?: TerminalPosition | null;
-    flowing?: boolean;
-    breathing?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    terminalPosition: null,
-    flowing: false,
-    breathing: false,
+const props = defineProps({
+    id: String,
+    connection: {
+        type: Object as PropType<Connection>,
+        required: true,
+    },
+    terminalPosition: {
+        type: Object as PropType<TerminalPosition | null>,
+        default: null,
+    },
 });
 
 const ribbonMargin = 4;
@@ -166,24 +164,6 @@ const paths = computed(() => {
     return lines.map((l) => curve(l)!);
 });
 
-// Estimate path length for animation timing on flowing connections
-const estimatedPathLength = computed(() => {
-    if (!props.flowing) {
-        return 0;
-    }
-
-    if (!connectionPosition.value) {
-        return 100;
-    }
-
-    const deltaX = connectionPosition.value.endX - connectionPosition.value.startX;
-    const deltaY = connectionPosition.value.endY - connectionPosition.value.startY;
-    const straightDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-    // Add some extra length to account for curves
-    return Math.max(100, straightDistance * 1.3);
-});
-
 const lineWidth = computed(() => {
     if (inputIsMappedOver.value || outputIsMappedOver.value) {
         return 2;
@@ -203,10 +183,6 @@ const connectionClass = computed(() => {
         classList.push("invalid");
     }
 
-    if (props.breathing) {
-        classList.push("breathing");
-    }
-
     return classList.join(" ");
 });
 
@@ -253,22 +229,6 @@ function keyForIndex(index: number) {
             :stroke-width="lineWidth"
             fill="none">
         </path>
-
-        <template v-if="props.flowing">
-            <path
-                v-for="(path, index) in paths"
-                :key="`particle-${keyForIndex(index)}`"
-                class="connection-particle"
-                :d="path"
-                :stroke-width="lineWidth * 2"
-                :style="{
-                    '--path-length': `${estimatedPathLength}px`,
-                    '--animation-duration': `${Math.max(2, estimatedPathLength / 80)}s`,
-                }"
-                stroke-linecap="round"
-                fill="none">
-            </path>
-        </template>
     </g>
 </template>
 
@@ -287,45 +247,6 @@ function keyForIndex(index: number) {
         &.invalid {
             stroke: #{$brand-warning};
         }
-
-        &.breathing {
-            animation: breathe 2s ease-in-out infinite;
-        }
-    }
-
-    .connection-particle {
-        stroke: white;
-        stroke-dasharray: 0 calc(var(--path-length, 100px) / 2) 0 var(--path-length, 100px);
-        animation: flow var(--animation-duration, 1s) linear infinite;
-    }
-}
-
-@keyframes flow {
-    0% {
-        stroke-dashoffset: 0;
-    }
-    100% {
-        stroke-dashoffset: calc(-2 * var(--path-length, 100px) - 8px);
-    }
-}
-
-@keyframes breathe {
-    0%,
-    100% {
-        stroke-width: var(--stroke-width, 4px);
-        opacity: 0.8;
-    }
-    25% {
-        stroke-width: calc(var(--stroke-width, 4px) * 1.2);
-        opacity: 0.9;
-    }
-    50% {
-        stroke-width: calc(var(--stroke-width, 4px) * 1.4);
-        opacity: 1;
-    }
-    75% {
-        stroke-width: calc(var(--stroke-width, 4px) * 1.2);
-        opacity: 0.9;
     }
 }
 </style>

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

@@ -14,13 +14,6 @@ const props = defineProps<{
     draggingConnection: TerminalPosition | null;
     draggingTerminal: OutputTerminals | null;
     transform: { x: number; y: number; k: number };
-    /** Stores the step IDs for steps in the invocation which should have a
-     * "breathing" or "flowing" animation applied to their connections.
-     */
-    stepConnectionClasses?: {
-        breathing: number[];
-        flowing: number[];
-    };
 }>();
 
 const { connectionStore } = useWorkflowStores();
@@ -50,36 +43,20 @@ function key(connection: Connection) {
 function id(connection: Connection) {
     return `connection-node-${connection.input.stepId}-input-${connection.input.name}-node-${connection.output.stepId}-output-${connection.output.name}`;
 }
-
-/** Checks the connection's input and output step IDs to determine if a "breathing"
- * or "flowing" class should be applied in the `SVGConnection` component.
- */
-function getConnectionState(connection: Connection, stateType: "breathing" | "flowing") {
-    if (props.stepConnectionClasses) {
-        return (
-            props.stepConnectionClasses[stateType].includes(connection.output.stepId) ||
-            props.stepConnectionClasses[stateType].includes(connection.input.stepId)
-        );
-    }
-    return false;
-}
 </script>
 
 <template>
     <div class="workflow-edges">
         <svg class="workflow-edges">
             <SVGConnection
                 v-if="draggingConnection"
-                id="dragging-connection"
                 :connection="draggingConnection[0]"
                 :terminal-position="draggingConnection[1]" />
             <SVGConnection
                 v-for="connection in connections"
                 :id="id(connection)"
                 :key="key(connection)"
-                :connection="connection"
-                :flowing="getConnectionState(connection, 'flowing')"
-                :breathing="getConnectionState(connection, 'breathing')" />
+                :connection="connection" />
         </svg>
     </div>
 </template>

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

@@ -4,7 +4,6 @@ import { storeToRefs } from "pinia";
 import { computed, type PropType, provide, reactive, type Ref, ref, watch, watchEffect } from "vue";
 
 import { DatatypesMapperModel } from "@/components/Datatypes/model";
-import { isGraphStep } from "@/composables/useInvocationGraph";
 import { useWorkflowStores } from "@/composables/workflowStores";
 import type { TerminalPosition, XYPosition } from "@/stores/workflowEditorStateStore";
 import type { Step } from "@/stores/workflowStepStore";
@@ -73,24 +72,6 @@ const { viewportBoundingBox, updateViewportBaseBoundingBox } = useViewportBoundi
 );
 const { getWorkflowBoundingBox } = useWorkflowBoundingBox();
 
-const stepConnectionClasses = computed<{
-    breathing: number[];
-    flowing: number[];
-}>(() => {
-    const retVal: { breathing: number[]; flowing: number[] } = { breathing: [], flowing: [] };
-    for (const stepId in props.steps) {
-        const step = props.steps[stepId];
-        if (step && isGraphStep(step) && step.state) {
-            if (["queued", "new", "waiting"].includes(step.state)) {
-                retVal.breathing.push(step.id);
-            } else if (step.state === "running") {
-                retVal.flowing.push(step.id);
-            }
-        }
-    }
-    return retVal;
-});
-
 function fitWorkflow(minimumFitZoom = 0.5, maximumFitZoom = 1.0, padding = 50.0) {
     if (!Object.keys(props.steps).length) {
         // If there are no steps, we cannot fit the workflow.
@@ -225,8 +206,7 @@ defineExpose({
                 <WorkflowEdges
                     :transform="transform"
                     :dragging-terminal="draggingTerminal"
-                    :dragging-connection="draggingPosition"
-                    :step-connection-classes="stepConnectionClasses" />
+                    :dragging-connection="draggingPosition" />
                 <WorkflowNode
                     v-for="(step, key) in steps"
                     :id="step.id"

client/src/composables/useInvocationGraph.ts

@@ -366,7 +366,3 @@ export function getHeaderClass(state: string) {
         [`header-${state}`]: !!state,
     };
 }
-
-export function isGraphStep(step: Step | GraphStep): step is GraphStep {
-    return "jobs" in step;
-}