Re: [PR] UI: Make duration charts readable at a glance [airflow]

[via GitHub]

eddiesr93 commented on code in PR #70142:
URL: https://github.com/apache/airflow/pull/70142#discussion_r3617037882


##########
airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx:
##########
@@ -103,8 +103,8 @@ export const Overview = () => {
           startDate={startDate}
         />
       </HStack>
-      <SimpleGrid columns={3} gap={5} my={5}>
-        <Box borderRadius={4} borderStyle="solid" borderWidth={1} p={2} 
width="350px">
+      <SimpleGrid columns={1} gap={5} my={5}>
+        <Box borderRadius={4} borderStyle="solid" borderWidth={1} 
maxWidth="900px" p={2}>

Review Comment:
   Screenshots below, measured rather than eyeballed. Both pages now share one 
Box, so the only difference between them is whether Asset Events is in the row.
   
   Canvas is **280px tall in every case** — that is the fixed height from the 
follow-up commit.
   
   | Case | chart width | Asset Events |
   |---|---|---|
   | Dag overview, 1900px viewport | 882 (capped) | 380 |
   | Dag overview, 1280px viewport | 820 | 380 |
   | Dag overview, 900px viewport | 840 (row wrapped) | 380, below |
   | Task overview, 1900px viewport | 882 (capped) | — |
   | Task overview, 420px viewport | 360 (at `minWidth`) | — |
   
   **Dag overview — wide (1900px):** chart stops at `maxWidth`, Asset Events 
keeps its natural width.
   
   <img width="900" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/sizing-dag-overview-wide.png";>
   
   **Dag overview — medium (1280px):**
   
   <img width="900" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/sizing-dag-overview-medium.png";>
   
   **Dag overview — narrow (900px):** the row wraps, chart takes the full width 
and Asset Events drops below.
   
   <img width="900" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/sizing-dag-overview-narrow.png";>
   
   **Task overview — wide (1900px):** same Box, no sibling, so the cap is what 
stops it spanning the page.
   
   <img width="900" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/sizing-task-overview-wide.png";>
   
   **Task overview — narrow (420px):** at `minWidth=320px`, the narrowest it 
renders.
   
   <img width="420" 
src="https://raw.githubusercontent.com/eddiesr93/airflow/pr-63582-screenshots/sizing-task-overview-narrow.png";>
   
   Worth noting on Asset Events: it measures 380px in every variant, including 
against the old fixed-width card, because it sizes to its content and there is 
spare room in the row either way. The flexed chart does not squeeze it.
   
   ---
   Drafted-by: Claude Code (Opus 4.8) (no human review before posting)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@airflow.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org