(airflow) branch v3-1-test updated: [v3-1-test] Better highlighting of selected task instance and edges in grid view (#57275) (#57560)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-1-test by this push:
     new 5b5142a307a [v3-1-test] Better highlighting of selected task instance 
and edges in grid view  (#57275) (#57560)
5b5142a307a is described below

commit 5b5142a307aebe8105a563bf4149e279b0fcf28b
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Thu Oct 30 10:51:04 2025 -0400

    [v3-1-test] Better highlighting of selected task instance and edges in grid 
view  (#57275) (#57560)
    
    * The previous bold border didn't provide enough visual distinction for
      selected tasks and their connections. This change adds a blue glow effect
      and color highlighting to make selected elements stand out clearly.
    
    * Brett's suggestions, remove box shadow and override border color when 
task is selected
    (cherry picked from commit 9111175e17a33bf7259dc3f31bfb8092b6c004b2)
    
    Co-authored-by: Dheeraj Turaga <dheerajtur...@gmail.com>
---
 airflow-core/src/airflow/ui/src/components/Graph/Edge.tsx     | 6 +++---
 airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/Graph/Edge.tsx 
b/airflow-core/src/airflow/ui/src/components/Graph/Edge.tsx
index 156384d1138..a337572797d 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/Edge.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/Edge.tsx
@@ -27,7 +27,7 @@ import type { EdgeData } from "./reactflowUtils";
 type Props = EdgeType<EdgeData>;
 
 const CustomEdge = ({ data }: Props) => {
-  const [strokeColor] = useToken("colors", ["border.inverted"]);
+  const [strokeColor, blueColor] = useToken("colors", ["border.inverted", 
"blue.500"]);
 
   if (data === undefined) {
     return undefined;
@@ -60,9 +60,9 @@ const CustomEdge = ({ data }: Props) => {
         <LinePath
           data={[section.startPoint, ...(section.bendPoints ?? []), 
section.endPoint]}
           key={section.id}
-          stroke={strokeColor}
+          stroke={rest.isSelected ? blueColor : strokeColor}
           strokeDasharray={rest.isSetupTeardown ? "10,5" : undefined}
-          strokeWidth={rest.isSelected ? 2 : 1}
+          strokeWidth={rest.isSelected ? 3 : 1}
           x={(point: ElkPoint) => point.x}
           y={(point: ElkPoint) => point.y}
         />
diff --git a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx 
b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
index 803a19959ea..2674d32a953 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
@@ -75,7 +75,7 @@ export const TaskNode = ({
             // Alternate background color for nested open groups
             bg={isOpen && depth !== undefined && depth % 2 === 0 ? "bg.muted" 
: "bg"}
             borderColor={
-              taskInstance?.state ? `${taskInstance.state}.solid` : isSelected 
? "border.inverted" : "border"
+              isSelected ? "blue.500" : taskInstance?.state ? 
`${taskInstance.state}.solid` : "border"
             }
             borderRadius={5}
             borderWidth={isSelected ? 4 : 2}