Fix collapsed grid width, line up selected bar with gantt (apache#37205)

abhishekbhakat · Mar 5, 2024 · b5f18c3 · b5f18c3
1 parent 43a674c
commit b5f18c3
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 6 deletions.
diff --git a/airflow/www/static/js/dag/Main.tsx b/airflow/www/static/js/dag/Main.tsx
@@ -38,7 +38,7 @@ import keyboardShortcutIdentifier from "./keyboardShortcutIdentifier";
 
 const detailsPanelKey = "hideDetailsPanel";
 const minPanelWidth = 300;
-const collapsedWidth = "28px";
+const collapsedWidth = "32px";
 
 const gridWidthKey = "grid-width";
 const saveWidth = debounce(

diff --git a/airflow/www/static/js/dag/details/Header.tsx b/airflow/www/static/js/dag/details/Header.tsx
@@ -87,7 +87,7 @@ const Header = () => {
   const isMappedTaskDetails = runId && taskId && mapIndex !== undefined;
 
   return (
-    <Breadcrumb separator={<Text color="gray.300">/</Text>}>
+    <Breadcrumb ml={3} separator={<Text color="gray.300">/</Text>}>
       <BreadcrumbItem isCurrentPage={isDagDetails} mt={4}>
         <BreadcrumbLink
           onClick={clearSelection}

diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
@@ -197,7 +197,7 @@ const Details = ({
       : group?.instances.find((ti) => ti.runId === runId);
 
   return (
-    <Flex flexDirection="column" pl={3} height="100%">
+    <Flex flexDirection="column" height="100%">
       <Flex
         alignItems="center"
         justifyContent="space-between"

diff --git a/airflow/www/static/js/dag/grid/dagRuns/index.tsx b/airflow/www/static/js/dag/grid/dagRuns/index.tsx
@@ -147,11 +147,21 @@ const DagRuns = ({
           </Flex>
         </Th>
       )}
-      <Th align="right" verticalAlign="bottom">
+      <Th
+        align="right"
+        verticalAlign="bottom"
+        borderRightWidth="16px"
+        borderRightColor="white"
+      >
         <Flex
           justifyContent="flex-end"
           borderBottomWidth={3}
           position="relative"
+          borderRightWidth="16px"
+          borderRightColor="white"
+          marginRight="-16px"
+          borderTopWidth="50px"
+          borderTopColor="white"
         >
           {runs.map((run: RunWithDuration, index) => (
             <DagRunBar

diff --git a/airflow/www/static/js/dag/grid/index.tsx b/airflow/www/static/js/dag/grid/index.tsx
@@ -165,11 +165,10 @@ const Grid = ({
         ref={gridScrollRef}
         overflow="auto"
         position="relative"
-        pr={4}
         mt={8}
         overscrollBehavior="auto"
       >
-        <Table pr="10px" borderRightWidth="14px" borderColor="transparent">
+        <Table borderRightWidth="16px" borderColor="transparent">
           <Thead>
             <DagRuns
               groups={groups}

diff --git a/airflow/www/static/js/dag/grid/renderTaskRows.tsx b/airflow/www/static/js/dag/grid/renderTaskRows.tsx
@@ -146,6 +146,8 @@ const Row = (props: RowProps) => {
         bg={isSelected ? "blue.100" : "inherit"}
         borderBottomWidth={1}
         borderBottomColor={isGroup && isOpen ? "gray.400" : "gray.200"}
+        borderRightWidth="16px"
+        borderRightColor={isSelected ? "blue.100" : "transparent"}
         role="group"
         _hover={!isSelected ? { bg: hoverBlue } : undefined}
         transition="background-color 0.2s"