This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new c03e6ec3b3e Rearrange Dag details view (#46939)
c03e6ec3b3e is described below
commit c03e6ec3b3e91a81f72e61108e43f997aff36638
Author: Brent Bovenzi <[email protected]>
AuthorDate: Tue Feb 25 15:46:14 2025 -0500
Rearrange Dag details view (#46939)
* Rearrange Dag details view
* Address PR feedback
---
airflow/ui/package.json | 3 +-
airflow/ui/pnpm-lock.yaml | 1257 ++++++++++----------
airflow/ui/src/components/HeaderCard.tsx | 81 ++
airflow/ui/src/components/Stat.tsx | 12 +-
.../index.ts => components/TruncatedText.tsx} | 19 +-
airflow/ui/src/layouts/BaseLayout.tsx | 6 +-
airflow/ui/src/layouts/Details/DagBreadcrumb.tsx | 143 +++
airflow/ui/src/layouts/Details/DagVizModal.tsx | 105 --
airflow/ui/src/layouts/Details/DetailsLayout.tsx | 149 ++-
airflow/ui/src/layouts/Details/Graph/Graph.tsx | 68 +-
airflow/ui/src/layouts/Details/Graph/TaskNode.tsx | 2 +-
airflow/ui/src/layouts/Details/Grid/Bar.tsx | 3 +-
airflow/ui/src/layouts/Details/Grid/Grid.tsx | 6 +-
airflow/ui/src/layouts/Details/Grid/GridButton.tsx | 6 +-
airflow/ui/src/layouts/Details/Grid/GridTI.tsx | 52 +-
airflow/ui/src/layouts/Details/Grid/TaskNames.tsx | 1 +
airflow/ui/src/layouts/Details/NavTabs.tsx | 72 +-
airflow/ui/src/pages/Dag/Dag.tsx | 35 +-
airflow/ui/src/pages/Dag/Header.tsx | 152 ++-
airflow/ui/src/pages/Run/Header.tsx | 67 +-
airflow/ui/src/pages/Run/Run.tsx | 42 +-
airflow/ui/src/pages/Task/Header.tsx | 40 +-
airflow/ui/src/pages/Task/Task.tsx | 44 +-
airflow/ui/src/pages/TaskInstance/Header.tsx | 95 +-
airflow/ui/src/pages/TaskInstance/TaskInstance.tsx | 66 +-
airflow/ui/src/pages/TaskInstances.tsx | 6 +-
airflow/ui/src/queries/useClearRun.ts | 2 +
airflow/ui/src/queries/useClearTaskInstances.ts | 2 +
airflow/ui/src/queries/usePatchDagRun.ts | 2 +
airflow/ui/src/queries/usePatchTaskInstance.ts | 2 +
airflow/ui/src/queries/useTrigger.ts | 2 +
airflow/ui/src/utils/index.ts | 1 +
.../Stat.tsx => utils/useContainerWidth.ts} | 36 +-
33 files changed, 1348 insertions(+), 1231 deletions(-)
diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index 80a856114a0..f7a0931f78c 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -17,7 +17,7 @@
},
"dependencies": {
"@chakra-ui/anatomy": "^2.2.2",
- "@chakra-ui/react": "^3.1.1",
+ "@chakra-ui/react": "^3.8.1",
"@codemirror/lang-json": "^6.0.1",
"@emotion/react": "^11.13.3",
"@tanstack/react-query": "^5.52.1",
@@ -44,6 +44,7 @@
"react-icons": "^5.4.0",
"react-json-view": "^1.21.3",
"react-markdown": "^9.0.1",
+ "react-resizable-panels": "^2.1.7",
"react-router-dom": "^6.26.2",
"react-syntax-highlighter": "^15.5.6",
"remark-gfm": "^4.0.0",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index f47b63f2911..fe27afe69f4 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
specifier: ^2.2.2
version: 2.2.2
'@chakra-ui/react':
- specifier: ^3.1.1
- version:
3.1.1(@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])
+ specifier: ^3.8.1
+ version:
3.8.1(@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])
'@codemirror/lang-json':
specifier: ^6.0.1
version: 6.0.1
@@ -49,7 +49,7 @@ importers:
version: 1.7.7
chakra-react-select:
specifier: 6.0.0-next.2
- version:
6.0.0-next.2(@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected]))(@types/[email protected])([email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])
+ version:
6.0.0-next.2(@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected]))(@types/[email protected])([email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])
chart.js:
specifier: ^4.4.6
version: 4.4.6
@@ -92,6 +92,9 @@ importers:
react-markdown:
specifier: ^9.0.1
version: 9.0.1(@types/[email protected])([email protected])
+ react-resizable-panels:
+ specifier: ^2.1.7
+ version: 2.1.7([email protected]([email protected]))([email protected])
react-router-dom:
specifier: ^6.26.2
version: 6.26.2([email protected]([email protected]))([email protected])
@@ -234,8 +237,8 @@ packages:
resolution: {integrity:
sha512-9K6xOqeevacvweLGik6LnZCb1fBtCOSIWQs8d096XGeqoLKC33UVMGz9+77Gw44KvbH4pKcQPWo4ZpxkXYj05w==}
engines: {node: '>= 16'}
- '@ark-ui/[email protected]':
- resolution: {integrity:
sha512-7Y8NToONNbfDngQh15GNzn4i4RLJTRRmXm9tXB09a1nKbuYICbxFcX+5IgdhvRudoIFR9r2sCbeEy69I6T13gg==}
+ '@ark-ui/[email protected]':
+ resolution: {integrity:
sha512-grnfoSUrGxN0VMgtf4yvpMgin2T4ERINqYm3x/XKny+q2iIO76PD7yjNP7IW+CDmNxy3QPOidcvRiCyy6x0LGA==}
peerDependencies:
react: '>=18.0.0'
react-dom: '>=18.0.0'
@@ -349,8 +352,8 @@ packages:
'@chakra-ui/[email protected]':
resolution: {integrity:
sha512-MV6D4VLRIHr4PkW4zMyqfrNS1mPlCTiCXwvYGtDFQYr+xHFfonhAuf9WjsSc0nyp2m0OdkSLnzmVKkZFLo25Tg==}
- '@chakra-ui/[email protected]':
- resolution: {integrity:
sha512-n7sDBwr99nUNJiLYy6WOIXZr5Sn9W5myo982MGuo5GieFxrP40uH8VyXbq9XaQk+KiZiF4PleQd4R/7yG597RA==}
+ '@chakra-ui/[email protected]':
+ resolution: {integrity:
sha512-U1SIjSENiJ62tVKGq/fLDcQWSnzjVAsKCqNNIfg5RtPOP4y7j0k//n9HPsmGVLrBEJb5JGSTsudfFen0t/dHBQ==}
peerDependencies:
'@emotion/react': '>=11'
react: '>=18'
@@ -421,6 +424,9 @@ packages:
'@emotion/[email protected]':
resolution: {integrity:
sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
+ '@emotion/[email protected]':
+ resolution: {integrity:
sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
'@emotion/[email protected]':
resolution: {integrity:
sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
@@ -432,12 +438,20 @@ packages:
peerDependencies:
react: '>=16.8.0'
+ '@emotion/[email protected]':
+ resolution: {integrity:
sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+ peerDependencies:
+ react: '>=16.8.0'
+
'@emotion/[email protected]':
resolution: {integrity:
sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==}
'@emotion/[email protected]':
resolution: {integrity:
sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
+ '@emotion/[email protected]':
+ resolution: {integrity:
sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
'@emotion/[email protected]':
resolution: {integrity:
sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
@@ -619,8 +633,8 @@ packages:
'@floating-ui/[email protected]':
resolution: {integrity:
sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
- '@floating-ui/[email protected]':
- resolution: {integrity:
sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
+ '@floating-ui/[email protected]':
+ resolution: {integrity:
sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
'@floating-ui/[email protected]':
resolution: {integrity:
sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
@@ -660,11 +674,11 @@ packages:
peerDependencies:
'@types/node': '>=18'
- '@internationalized/[email protected]':
- resolution: {integrity:
sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
+ '@internationalized/[email protected]':
+ resolution: {integrity:
sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
- '@internationalized/[email protected]':
- resolution: {integrity:
sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==}
+ '@internationalized/[email protected]':
+ resolution: {integrity:
sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
'@isaacs/[email protected]':
resolution: {integrity:
sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -1409,212 +1423,206 @@ packages:
'@xyflow/[email protected]':
resolution: {integrity:
sha512-bmFXvboVdiydIFZmDCjrbBCYgB0d5pYdkcZPWbAxGmhMRUZ+kW3CksYgYxWabrw51rwpWitLEadvLrivG0mVfA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-0E6LpQgmcbDe12akh2sKYVvk+fwxVUwjVdclj8ntzlkAYy8PNTTbd9kfNB6rX9+lJUXk/Iqb5+Qgy9RjWplnNw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-DWaElpm6RhntW8zVPMfd+s461FuXi6rv4pDPpXb4xCAJ0KTkBzS6PFxoBLL+11Mjv9XioaBoJatIGOCF8GAtTA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-wIJQGBiSHYB94UA7k7o4a8xbyqDwIQ0dG52xcD7+eV1ypT+dP+BtxQKmS5w06aghNdHs8b4F2hVLDVSdyLqRkQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-wpgU7LyU9St3o/ft8Nkundi7MkW37vN1hYc2E7VA/R6mun0qiANsEf83ymIlAYnovLC6WUlBso9xwqejr6wRCg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-F4dkdLZ3Qeu6Er9rwl8IWEAdhAjcOTRKsE1Otoi0SKjcQKlQfLTPutVDVaZQxz1ZNXNlyq3YUgFE+EiwMV7jxA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-KSz9oMY9rn1N3k3tFTKHlU66eQf8XZ/gy/ex27J0ykZoaYJplWQerSZvVakbILeh+rtpvdiTNaSgrCAwYwvAPA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-h7gR3LCcxgURg/Xz4IoI4ccN/A+u63zNT8HoXjBWezy050YsItj20q2Yelm6ADT9qcbC+a6W83j4C43ejy5Q5w==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-adOB7Y4p4i6b8GJv4V6qhlK1YRj4Ejs5I+eWFd8Rx535uQIcxEEVtpEAD5SRYg5PNk1ikaT+GCoHnTadGj6PuA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Ctk/r+rbA0ZvdORRKyLMvtxxulda5m0moa5NtT2TuZe3WlTmJRYBMlSQzXwfOAXCjQlLp+zkeyyriP441sm9OQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-XjRvDRmBxwy5OtIzlQOpf7zNk4g0b/uA7qZve5Hz0R7yWOu+NFlbFv0GsvRfgyYMCT5J0xBu271EG9FJq3QKyw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-EAM3hHXlC5HNcT7D2IaX7p4aOaXLaLYkSCJcMqqo9H3CxVWa7Kfw00yTG1Z0HcRNKiPYTBF/W9fqtHwfpa5s+w==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-MO9+9oedxdKynxgvLLzXs+VQSOhu+GvsCLV4fBt7nMBMGIRHtRSzXHRNRkO0aqbsO/nKQ8TFH7GYzI1NqT/y4A==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-bmF1I179fhEvEXBJU5yzHi+W2Oett0PUVUw2GFFzfIn6w0AgZKNIr8+NLtEWR0Wn0UELXNhLnBSqZC3j2jZHlA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-yD/h8ao/JTljEo+zthpKzTy/f9fqOlJ7Nd6psPoSKZy2MRGD0TDUbOjravb3icVgjTLCiaPVWMWdonny08Me6A==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-0D7sIBilV+KTMwArmfa73uJUtDbAqHH3g5o3RFJ+RYpAIYQTINGLw13tsmUK7xQ8gd6M8ARAcAv1khZdwO4ykA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-r1r3vwozs+lyNgccR3OfmYAydP0cJbIHGsgDKGuempinqv6xIoptHOkFgWNd6Kxz/3MnxP+BMEy6fZzECXkhdQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-wZI57xWU2tlcJDPlQBUyBxg39PUkY12H6MKcf/+1KBOpJiWc87+4HDBCVSt31diUAhJwcbNsYFwJg3BA4vTw7Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-TuggUoXRVBOwACksi63TsN2rOukzUpe6oVMUvp9MaQaDbg9gpw0JzLTrdAaHfE+bhgXAb3EjN6wcZjq8zBctZQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-8Ls5TR1kKPLDucuJJ0kuwJ45jOEzhcVN4T/mbkShUrgRSB4FrcNzwdpMrKqidNz8OrtphgYYcn3xx/gGUIHLRQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-uteM+xWZlWhRQe5biA5QWyva9PdzXONs+bpycUtZt8MakQgPmhW2whY9r1aW5NFVb/ScTwGAIGB3Eyc6Npz7Wg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-l5YAxXjSNWT++gCBLkP/qKwdHpNSxZYGdLU5f1fNupFSSZgZlNTz99ArxsypqFrJKTVvPjDSoOhjG4BeKHAAdg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-/MShDVBFNnXResLzeyWyKApeHuB9rmUeJo3WD/Bl6rTwjmvVCKRYguIe1SQviOokMLjuAyh0YWXdKMQw0HvMqQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-yoavZXIGuVXi/QCO89hBu9Ni0xH7o8ZcDFX/CIjr3S9sI3fjNak9efkfPFx0Ooo9x0Fvz8mpu+DPB2uk7voXDA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-BMSYcBeypGX0wCLszU2jxWBRUmd5/wPDJ59Y3Zwl9yNld0gtMnuBLSUeokMcG0UVQ/BxkyrWu3VDkKTUYKprqQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-NqG2R01NjZz5a3hGYI0Ok7MNM7OkMlYlTI5fJXDgkkhgXi5Mk87R4+AQNjP7xzSEI35rSlVIJt4ecW59cklHng==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-Me3a0Sw4dTtmBRmbLGO/C1LJ4btZwbd5RLYnf8RPhEnqGJ5Z05i+ffWEe+SNBvpQO14njqBcF6P8VypVD/Ro1A==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-UAnj9WJdFYeTxbwSCdX8zRYhtLvlJqfqy9cn2NEugpxf+9W/GA89JzH1ZdKLyVJUIuIPoqGd4ZaAgv2p64DZ1Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-Ux0fkt1PumcqLwExcEozCMEfKBxtd2JlnitXo4hR3lJW5q9G52FkgWDyPSrhblyTkX+7RgxViZTMnHxaXs99jg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-iIVQLEAV1FKM+aB7v7Xk5o4w95vdmJhe3aTYDxc6Xo+Fw4tsdUmg/UtQ1ScPzbagBo8Cut2krvkG/8SrlCRMyw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-f+4CV29+hcQ3Yw9hh0yyVRANONIUEWIrPS1fpnrrUNtIC0Y7f1Ajx+x089X9VxgQhwreK1sEwpnrL2vIqy+9+A==}
peerDependencies:
'@internationalized/date': '>=3.0.0'
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Pb7FggFOTzCTyo+ap4uuA6vBFrYDSoqW/sMI6kwuOBWL3IjFKfmmSVaem6MYycycWN8d7on4IOp0muWCcJaDUQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-z9sHtgV4fvtXsqLaTD4/o+D+H5wumLYhIw/Bj3yC41gR5oa4Wo9QifRT9DBfvuokmXsrnRZ8k32hUtWoYb6M/A==}
peerDependencies:
'@internationalized/date': '>=3.0.0'
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-2kYqFSqpa1SShS2Z8cVqtoOML3uiwIUOZxNVKIea3ItdlMTqHJI+X/NudFvgpUvVj4NMLbUhwIgC+jN2SWDL7g==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-oqi+6Y/rx6ZKxg3s9r6bIuo33x+5+UDhvrlk31kE3LWgU1KJjVV0VEkFMK9B1SJTY7IizhlWMyDx+JXJ+jOy5Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Wl6n1lW1eTKKu5Kg+6jum9nZDXYGA86XL24Rip2aOScrAo2UGCA+nSIgg7GGO5qGs52iawITba38tAe6maZQLw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-vs+zkORzaeNzX4Wsy4OkW1AVce7l4Tc6DHZq8gqNB5SvhK+5wEPl6EmacQRvZyoCxi2m6xpaI98UkLCmVJKU+Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-duuwxowflkY7UUI+1vHr9ttzqn2JtJ+mgAS0cBeNmqtvK6XrNaHSrm0B4u4R/KIJ73Tx8TZGbmgN9Vwj/U2FrA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-KFtbqDUykQur587hyrGi8LL8GfTS2mqBpIT0kL3E+S63Mq7U84i+hGf3VyNuInMB5ONpkNEk5JN4G9/HWQ6pAQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-g+7wIdhT1nlY5yhQWoMDzin8uYoBXeQk8TNUj3GZH/1dTX9YC0vs7vz7rotzunLkEA7nEGfLNzdO5CRQBhGp0w==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-V5i3kYSHFJYj8914nBf4VKKtm6m59gG482vm20As4EnLcwGFrOBbm4HXUgsKq0wYSLy/lTtvMrUT8Iqudye2gw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-SXSaAmaqvhFPJmX25tz487skF+GTIGAmp0Y6iHqDUsUh0qDncUPOr90M+kFtud/6YUPFkzEpKQtmeczJR0LURw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-xXUjmeIUdxkxic5bepp6fVqN9Qs+54PXCAUl6g/DtJecQVmVooIfa3SLSULhany4aR4mlGojp5TJxvSpUBA58Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-FK+bQ4nhdcR52868uE0rlmmq4+un5P++WDoe6S4Aldrx7FJS2XTtWMBdx09zBe48DvUYjGM4o3RbuxbCQoD0BQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-k1rOE6NhoULI9d5pt2qVUxWCQVEf3OTPH8UDnbsdf11xn+hMCzRYd9lekUdVGrcHHGvEK+W6iAfWZnlwsJsmow==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-mqw0PLdPs17zrolZBlsYby5kUfo8+QpaU/HAVQavnHQZwNiX4CRBvG1YeqSP699Mvh6QDKc0JhchwAfh+eGGnA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-6cgJsy9bf2DB0v+CVq1L4g4aCePTpfWsV4C0HC+82K+OSPomiIPsQS87wo4+eAcy3z+80Qh+uglZCFAwkW8W+g==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-VVko5ojAoRQsalsaQxGwTt5ONcYaHuw6yFL/HqPKNzGyyG8zPBl0nRGMSZQprTyUSMDtsxNp8ydL1cbauDqU3Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-/u86hMd+E5UCrrY9akDAExkO7sgPA1lXzWC9gSX4LSxHATk7Vo4o5+4LiE1MX4WZRytOhtxAycJzNDVpqzmppQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-pTyU33Ag7533X3/RCBvfbGBHFMncg5x2/3n1htSxEVLIIHxbRvvDab2IN550n3OIjMzBLfM4xjNu1R87ed2hlQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-z5OzmR8O3n2043Lwhp1qcizNHXvzc/Xteb3hWmxbX9hR3k0wHJeMXMj3GTDO0FBixRt+d8iHEmt3/8CkI72mqw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-CO5x3uCGKgigQ91S3c3vy/KEKyXK+eTveIzprFTxlQs4Zu2qMe/nJCIhIkG54fhvW/a5F9wY7Ox1f8hGZ1Z1fA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-b87FqZO6e9RmTY4msEzwZ3hZ8pRuPd2vbR2b6SlXr6ohtmGKlGgBGO4kmarZN/ClE+7VOnOEqIicatRBEgX9bw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-LPaZfDhQmhyL4fMMKm4gZGUg6vwcSzaHOVlQHdAR8yoSqvO4yXEdxr2xz4civNNknD0crST2erfexGHEY6Oa/Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-lS5r3V0l7Z53QyNwkxulYp5QYA9mFkU+3XsZqfM6cBjh+wmGE1xeIwknAmFtYvuYNK37AwT7pp5z0Rm1Ep6WVQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-zuy2E62F/w3G94kh4l3iEAtNxqwuAdNkMwcS8EhT6mnzNcf4BgzW7Ne+O1fRb4IGazZwHPaWC0rYdTUuErK9IA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-fp9t/PNXODwxXR1X+VzgYeSpgoJ+M3W/qvuA2stgPI4kEinwKEssSlP2sH6gTmQVZKL8SV1jiNQinVh00NE85g==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Li1lrePYcTC2UqAP/oOLcK4syyBomTmAp06CJukSXpGcYe6qUD4CqhLva0qYjvZ6SKaB9Y3BryD9RTjFvZOuZA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-YcTIqka6+/YoH2VRBMnv3CvTjHdUo/NG2nMenAB9Wq0MLTn+TAtcsujenz7ckJcgayVhFAchWNhwK9+/cs1dAw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-S+ZJ3OFUtCoUdKkDfiF3sgXr+98rhVV+BmHgfAiEYRQA7RjeHDB3jX+eBbeZTLFqvHGtaGWCRE3knto3Ed7YvQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-WcWJB5kM41fDM6YMGC3ZEPVn1q3Nrm+cAFkllRJrRY4+bUKXmtN8bqDaRKghP+dG5CXz66SiM6xBvDE4nqtK5Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-58ilkSC2UQw9PsFo4HKBrYcWC1+WRA8M6MqNf9MnxxOvAq+Y8APH0I6ExxAfUhLsk9v+6kPf0txM9MDoB0iNFA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-BmSXc41y1uOra/UV1lt8BurWkuwne/+c371IJCK6l+MWsO0ufq1lrjfx4cyFf5yhVcPRkhv/b/0i+7RxfDSK1A==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-l9cipG1hykvSWIbKc3/3imFQ+Sp3u2VjZirmdM2K9julo7DKxU3r63aQI2s6SpD4tfQPq4AcoXqzZBF0RnQRUg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-faAlQZYeWHcGH8nIxBYh7HHfVjSKsHV8yUsbhMD0XkePWM6eB+dPRd/Fc3DeT8ieM8+sUODnTHEuxar0i48v4w==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-dEBerxdgPH4dGWEbFM/aY8zYtUAQL7hopv4iWPHv1NMFhWu7IShmKe2xm/4ZSKaOkiWZ2CJyMI0oHr+qQ+ZhWg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-QIQlxlxM78+TkEhPEGlTbkBR3G2ngm5vhc3BFw4sG6ABMyre8TiIH37EqQB7EGKyAcuz6QwPk3AervHMFKe4YQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-I889jfoTiKX9gRbyZCgKDyBj1+VgFCKyELbFVJhgnWQhip4MLjzI0YjWWp/wgHs/ZwEBaxvy6CRq1KOtvGkQNg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-1Rsd3cSnlewefNB1RBI0ymK5wlgiBcK42H1IrJIhly6+SXDAhp0Oc45ofsCzpfhkQ4be+A9Cb30ayc6J4ZU2kA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-wNaixDQDotwUUKtpA524tfDvsiQQroDFZYFPZfnwKq89rPT0Zlh8LMKLL/Mfi32Zqp8UP9srdcMEy1XEGrIiNA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-P7UN7rIt03YHt05SuK+kZ9mhl4AfvCvaSGB/9KzEq5r6p1D3lc4+0LVkkOvL2EEB8vbGY/y5BNcvaF2jPQPH5Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-sm2xlc03Zy4DdCRNmr7jUgL9s34rK0bVDezn35TCq3QMPWQndIlsCbywcmxqxxtUymwnSwizWenZaWVlspFlgg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-zZ8H/jcjaXcLRX4dBcmandexeKV/5cBOt4AUVEnd3/X5NFFkA2Njz8rpQFcNRZl814NxG4RCchIu8kmonmUKCA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-aqwqxHrgvfm6rAcxIRTSRFaWA9/UCQGiLP+P01Hg+/+IkVJeJIdxN10ImSOL4Sl9zvsu3jVCXg6xLh4ydnaWqw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-vQTmVUs6aLGqKmWb+FnLDntsulvd/sCvgndeTmwOHRW8PBwPb86aDnvNrNosBSS+Kk9p6CMJwWZ6CuPWR5Kf7Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-1LxK/VSU8t9w9/c726gZNHXnawU4SnN0DxsYQa4YxN1RDwFp/RwKp0hLAsunKx7yBdyC1VVyqVPYZdZYQotdQg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-eZeAkq2s7NYCiNVMvkWL2Or458hZj71u7ygCt6skA18sO1ZksY+qIFqj99leCov+fesz06Hf8bxZz5029t/Wjg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-B0U2/XJ630kWYY1x5UTBMxXjy2EfbH9T3eRQlSXZS/uToEzvhsYvw/YaIRqyvYxPyrnmB72to6r5Kw8omryw4Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-Fy1EjUda7o7e/yTKbZgKKayGOsHxkjLG+x0AakHmbR/k2VKbM4QuFHB9RJLlqNd9a+m/BzS1kEKWzCJ7/mXL9Q==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-gsS32rxw+bSKOLOtF/VPNNafzO/fEU58OYIfM7yA4swrEupUqdfAF/ihNH+Uj/AZQKj2tnwLTR1fJ1w3czpY9w==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-E1N1o1dPVuhWkcrg6urut2aaCqrc16OeE9VJh1mAGIUknF3p0QScH+ql7J/n9r8WOa21xyF6HLKhnWVPRQmHGg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-57eBd5C205jYUQ7Rsbft9YRy4euNDdxKDpdLdInqk8egf2vFaUWIV152pm5iOGRVidDGgcIunTFvHFCT1rbATQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-YTqP4Ok2YEmEXCEiNW2tufZ6svt4sh7KHqrHZq81vPAJMKKhVosP6LnZvmt4dVn6tKJ0OU8idwFVtPM5jSAWoA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-4LNhFP18g21ni4Hv0RQEYqcMhiyMzTsu1IPizy8I5l3mJvsV6b7w591K2iC4mybLynPBodvkl+fLKqKm3Z+1IA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-ULl0OA207b6Ilsr2QWt4dbx58hA/NnyCmHpvv1pAYSlH3K0Es5b25B80Cc5jM/3NK3yqoY81OkS9U8lxmpWo+A==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-GHAmnHz9pdaP0c5/n4aPSo67Bk1Cvv9PIHuOKKLyalRcao/ARvtiS6371logfB1l9DHtMSARWaZXDrIdNZx/gQ==}
-
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Ntbi21CTqXIVMrGccVSefwCapACSTOy4XFDM9/piTLeRlfmNxsy7j9hl7EFBpovbe4WYLHjNQaL3MM+hXEjRRQ==}
-
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Yg30ph9YMy5g6TPHU9MD/NEheaz8qOsVVkefG2EvRVfO2ZGXJclqZHg8/TW8nzUGp3Mt/fAq0A7jfeKvJBcNng==}
-
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Vli4cigN032dQM69Dr/2rR5FSSN+rzYJUiqAo3oNyvvWSSsgLvoNYcfltxY0Tah/PIftbF1NBUNYaUtv3OJgzA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-CZivUTFQ4TdRKTN+9wpWAo0lEZlMnbjJPVn2VJVpcz+eRNUeoVzevkNY/OzAqdV3mp+VtdNabQn1fAz8ngViPQ==}
peerDependencies:
react: '>=18.0.0'
react-dom: '>=18.0.0'
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-bG48u1NsWBRx/fTQfDFskOkwKzpROVhuzJQi/OtnugHQj1nFfZ5CMpEX3BPv5PGwvOia2ZDm84+e12WucFhr0g==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-gXmvj1wK9FeToOCzvoZ5gycqUNRzfeqd84uwJeG9zA8SVdoyEnoAji8IAynneq8t3LbiNUcu37wjTw0dcWM6ig==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-aEuspeZ98eAEGlAfnCh0syzbmFnMuov9yJc8Ud//pbXd+96J7X1xa4TilHZ+ppm8IZZLGc91axXHwkbIINC1Qw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-68cvXvqgNOlucbnGKRyephk8Qg8wb4xpjgUdmF9xQwICdY/uhW2p4ZGJ4471TDCDIlpoBrJPYsWqV2oWH3QNfA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Xl3CV1ONpQG3Ah0sriiuCFHXuiuzYz9KQkmEapcE+O5kzLADheIvgFRQYiMdLCltEfSBSBJvPrRM08aGyQgSpw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-HL3MkBpWx4Cw0+h1UP/PnvLP3Z1T+F5mkeS8HWmiP+KPzhtFiEBRrve+xk7h7BMXifteg2UZy53ZiZfJeGsd3w==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Ba5v3J/fQWVR81wvhHAfwbCjqJlv/15If0SCbKiTA879I5s9dZVYAkvibeGlIEK46SEKbeUpAewE/+eGgrrE6A==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-cc6D8Iz+Ewnx9L0J63QGqC2bbiwzCEcJVE/j4OZDcy4Qk3lqr3qA09uuJbQxAi7yvIeB44DIEt9ryTZPkZbgiw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-aDuzKySgFOm/D0opDyQOo2KMWFN9ZHuF50rG5cfIgl9dzo447iJfLzObcpAwNpQJq5P7/q+23K+sh+/NRGoUbw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-s8ae88OpAafkpuqimO9beUiVTn3FG+bnWeWnYQOLtNYMCNHzQbVZp9QBNbOoUpNcDT14mx9rfZe98BqfiMohFw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-2PHBD4Y8h4ZcVphMWSDP6EsSamLYburQDDgJTSN5npcWsLu4iZ45T1U8bV0uICs+UJP9fko4YvjABrPv42asLQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-qXVvXbDRq6Cla036M9OH6plO7ubefM7k65NJQKjtITDua+VliKQLXj9BrdPLT9K96wWntW+D/TiZXE+JNbR4ow==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-UTf5SIvfIfuAuGxRZLi5zDN3LGWQp2jdycS9JnKwL+KJKeHPmTu4OtXbRc2c4lEO0z1T9sVOHB0GPwBGK4+c3Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-eMNncj+pcepYTf+51s4ysDS/tjtKXswpwsSQR0AeNqCE3SW3TGzHOM0+uheyjgv9EmDGDrr3Imdo0PCkq3bqug==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-LXCSyIVf6G4SvoPojNxOUiK45Lg1Qo/I8NCIoWAgSh6WgthuyEP05oLlW0OdvfHWLsnSwUjJmfuoRQAQNS3M8Q==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-N/LVOPbpQGtqpnNsdgZsQytpvXVoJ9Uldo8G38Q7892wwhVx63L0qLaiOK+SkU7kUTueOh109HezZ67nq3sadw==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-I5OTZ26Rp3ADySnzpIlI47+BiUAhSIXLMpQQ/T2XCpF9hsrxmAwmpyyJ+48L7aLHtzeEusBOATU+CWMEgycRPQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-uWlVivLZBCuAEXrXOITM1srwfBtAnT8kBYVPElrT5aSO9gkV1YC/g+YdFRol7KKOg12qO561CPKReVfilmtAKg==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-e/xkk4aihOikJsw47Q8nwAm/vUlfgXkkGxydquZg4Z42EDNYt5XcxPpIW+7gbzK+ergDYN7JyHQ4+sIRRPA/jg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-lIZsOs5nG9TkPs75+OK5THprEO0u3NAiLnEJ489KEFautVX/GMwAWvGHNFS7CcCpLZv+EpVKAPAdmGfEphrzhA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-bE1Z2dANz7f734AuX2b4RtGk6/L8Nf44Q1wxCZ++3CLYV6EBBBDb2kNWr/Pz23md58ve+AcFcd/pzKtoXfWcdw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-1uwNRvy8LyUTCAWjL1kD7BexOZ0sHrZ4OnUwDNuaWbqxUjtzoe+ftvcLXvmwFMmrns7o1SVnjqkgSVKuE4mcDA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-c7fLss1VyFnQzs5f5HNMD3qyJczH+SNzOgqMwU6apKpgYRLMMI0S4F03I/cyDQrCPZMcy6F/bl6zlQmdqb6WLQ==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-1mY8nCNMQgMwWBV5zX0bUcIgstqKjvFOAuYhGLIxbQPbgX7lP8Kr3nuhABh0oC0KnWaKfOMlItir2k795G4KMQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-VSsIQ+RUKo1hC+ip2Hq2jsiBTZNV+cuRntGXvVFegI1VG8W2ug6CtW5ilfxcQte8dfn1s6g2F4TY0g79F7svgA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-nWKx3yyHFBUBPOTDFhi3du4wWlQe8wY0EoeWLQN6bpJSF4qo/BosTZJkUHm//FgUdwdhQBFOAsrlrJ0vL4qvNA==}
peerDependencies:
'@internationalized/date': '>=3.0.0'
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-T8JGTNd9tJXUZqerBSDVsv1upD0vpccZqXZthpl8u4KFXj8vR/CZ9fW00linc+tR9XdxvBbkxk3EW/BPbNvoDw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-uG4xCrYHgDZJgvW+71ROQX0xIkqMup37ZpNSLS2f5eD5DO1n/9NYLztA1YyeCJyv1aEDsZreeJLJvNDElgXA2A==}
+
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-4dL99zHXQg8j7ReJAR9zLAp5lNKMS4Nm+THnJaKsA0TF5QkELGnsZz47oKhFY0aQn46paxMLVagLqQ0+2i6D1w==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-Xt4F1BxP0U15WoNx73gIpnFRkCB3/dRkA5zQPECzR/U2drN2JAoCdb9wNQjxmR/6DWkT4PuCeWliUcskHDY8Wg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-8YaYKFz3ciiQhlTFScrvqH3Ke6UMDQLSgMEsCcERBYatd6TxkJwlFiBzpksIDsZpmloBrylyItJvqmzj9jt6Ig==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-4wAsl33rP/LQq052sE+UYn0tfiJtZeINishI+0xrWc7iQY61F6l6UtZUR4I/NT3sa8XV2xSgunVPP4dVN0JlpA==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-ewF/1h2INDJlzYnoIigcWFWim56ezhfl7YGKgqLBdxBoRvZHyhRIfR8bbddVZk4k144gXsMVMeXwS6VEt6D0eQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-lHs7dp1wUK4B+iY227ZfsQelVcRrad7ZVAh27ZzRdCkUE7KMi8ev45YudbnSM3ltCMGe6F+it7jWcalccFad4w==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-Oo4ZA3vG2sYEotfrWVXfIV1KW0Z+s91U+2YPtM2sOLnhetEVXxj/AwAruZfvS6WOcTI7D9UBrrQolY94fdZeOA==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-oLizz/iU5xj3KCIy/oADAIhs2NjLl3LawYYktD8k02JF2XRPi8bDnRF96E0YPeLOnf5XdEEXmDD2A1l+gWrReg==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-xvYwaL49ffC8nnb+ENgNtkSZE1jMh8tm1E777AqBqnrhJZ28+FA9Sk8YDuWIWhNOV/r4n97jTXqj4SAGCrlAMQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-UYdHh5Jj2LZZwP8Amm9YEoj9f/zYNWuuw+HRGCLZew6moHvKj/HHKJHLooPPjGztFIeRsnicE1mJ9E2bDllBaw==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-Nr/CU/z/SZWDL92P2u9VDZL9JUxY8L1P7dGI0CmDKHlEHk1+vzqg3UnVkUKkZ5eVMNLtloHbrux5X9Gmkl39WQ==}
- '@zag-js/[email protected]':
- resolution: {integrity:
sha512-WtIsNyDvnslCjtIIP/bRzx3bJMaT0cIgI3f+TgiFWhtQMlUZMpBkwkKVfvUwI5qcZ+ZOMeoonAWFqFECCb3h3g==}
+ '@zag-js/[email protected]':
+ resolution: {integrity:
sha512-JUGdEjstrzB0G2AJqzQiURIl6UZ1ONYgby/pqBKX57LO5LxasQXk9oNZh8+ZAvePNC/lKqqTtyyI02YQB4XwkA==}
[email protected]:
resolution: {integrity:
sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -1664,10 +1672,6 @@ packages:
[email protected]:
resolution: {integrity:
sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
- [email protected]:
- resolution: {integrity:
sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
- engines: {node: '>=10'}
-
[email protected]:
resolution: {integrity:
sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
@@ -2374,6 +2378,9 @@ packages:
[email protected]:
resolution: {integrity:
sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+ [email protected]:
+ resolution: {integrity:
sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
+
[email protected]:
resolution: {integrity:
sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
@@ -2420,9 +2427,6 @@ packages:
peerDependencies:
react: ^15.0.2 || ^16.0.0 || ^17.0.0
- [email protected]:
- resolution: {integrity:
sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==}
-
[email protected]:
resolution: {integrity:
sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
engines: {node: '>=4.0'}
@@ -2870,10 +2874,6 @@ packages:
[email protected]:
resolution: {integrity:
sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
- [email protected]:
- resolution: {integrity:
sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
- engines: {node: '>= 8'}
-
[email protected]:
resolution: {integrity:
sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
@@ -3422,6 +3422,9 @@ packages:
[email protected]:
resolution: {integrity:
sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w==}
+ [email protected]:
+ resolution: {integrity:
sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==}
+
[email protected]:
resolution: {integrity:
sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
@@ -3499,6 +3502,12 @@ packages:
'@types/react': '>=18'
react: '>=18'
+ [email protected]:
+ resolution: {integrity:
sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==}
+ peerDependencies:
+ react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+ react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
[email protected]:
resolution: {integrity:
sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==}
engines: {node: '>=14.0.0'}
@@ -3808,9 +3817,6 @@ packages:
resolution: {integrity:
sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
engines: {node: ^14.18.0 || >=16.0.0}
- [email protected]:
- resolution: {integrity:
sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-
[email protected]:
resolution: {integrity:
sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
engines: {node: '>=10'}
@@ -4253,57 +4259,60 @@ snapshots:
'@types/json-schema': 7.0.15
js-yaml: 4.1.0
- '@ark-ui/[email protected]([email protected]([email protected]))([email protected])':
- dependencies:
- '@internationalized/date': 3.5.6
- '@zag-js/accordion': 0.74.2
- '@zag-js/anatomy': 0.74.2
- '@zag-js/avatar': 0.74.2
- '@zag-js/carousel': 0.74.2
- '@zag-js/checkbox': 0.74.2
- '@zag-js/clipboard': 0.74.2
- '@zag-js/collapsible': 0.74.2
- '@zag-js/collection': 0.74.2
- '@zag-js/color-picker': 0.74.2
- '@zag-js/color-utils': 0.74.2
- '@zag-js/combobox': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/date-picker': 0.74.2(@internationalized/[email protected])
- '@zag-js/date-utils': 0.74.2(@internationalized/[email protected])
- '@zag-js/dialog': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/editable': 0.74.2
- '@zag-js/file-upload': 0.74.2
- '@zag-js/file-utils': 0.74.2
- '@zag-js/highlight-word': 0.74.2
- '@zag-js/hover-card': 0.74.2
- '@zag-js/i18n-utils': 0.74.2
- '@zag-js/menu': 0.74.2
- '@zag-js/number-input': 0.74.2
- '@zag-js/pagination': 0.74.2
- '@zag-js/pin-input': 0.74.2
- '@zag-js/popover': 0.74.2
- '@zag-js/presence': 0.74.2
- '@zag-js/progress': 0.74.2
- '@zag-js/qr-code': 0.74.2
- '@zag-js/radio-group': 0.74.2
- '@zag-js/rating-group': 0.74.2
- '@zag-js/react': 0.74.2([email protected]([email protected]))([email protected])
- '@zag-js/select': 0.74.2
- '@zag-js/signature-pad': 0.74.2
- '@zag-js/slider': 0.74.2
- '@zag-js/splitter': 0.74.2
- '@zag-js/steps': 0.74.2
- '@zag-js/switch': 0.74.2
- '@zag-js/tabs': 0.74.2
- '@zag-js/tags-input': 0.74.2
- '@zag-js/time-picker': 0.74.2(@internationalized/[email protected])
- '@zag-js/timer': 0.74.2
- '@zag-js/toast': 0.74.2
- '@zag-js/toggle-group': 0.74.2
- '@zag-js/tooltip': 0.74.2
- '@zag-js/tree-view': 0.74.2
- '@zag-js/types': 0.74.2
+ '@ark-ui/[email protected]([email protected]([email protected]))([email protected])':
+ dependencies:
+ '@internationalized/date': 3.7.0
+ '@zag-js/accordion': 0.82.1
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/auto-resize': 0.82.1
+ '@zag-js/avatar': 0.82.1
+ '@zag-js/carousel': 0.82.1
+ '@zag-js/checkbox': 0.82.1
+ '@zag-js/clipboard': 0.82.1
+ '@zag-js/collapsible': 0.82.1
+ '@zag-js/collection': 0.82.1
+ '@zag-js/color-picker': 0.82.1
+ '@zag-js/color-utils': 0.82.1
+ '@zag-js/combobox': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/date-picker': 0.82.1(@internationalized/[email protected])
+ '@zag-js/date-utils': 0.82.1(@internationalized/[email protected])
+ '@zag-js/dialog': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/editable': 0.82.1
+ '@zag-js/file-upload': 0.82.1
+ '@zag-js/file-utils': 0.82.1
+ '@zag-js/focus-trap': 0.82.1
+ '@zag-js/highlight-word': 0.82.1
+ '@zag-js/hover-card': 0.82.1
+ '@zag-js/i18n-utils': 0.82.1
+ '@zag-js/menu': 0.82.1
+ '@zag-js/number-input': 0.82.1
+ '@zag-js/pagination': 0.82.1
+ '@zag-js/pin-input': 0.82.1
+ '@zag-js/popover': 0.82.1
+ '@zag-js/presence': 0.82.1
+ '@zag-js/progress': 0.82.1
+ '@zag-js/qr-code': 0.82.1
+ '@zag-js/radio-group': 0.82.1
+ '@zag-js/rating-group': 0.82.1
+ '@zag-js/react': 0.82.1([email protected]([email protected]))([email protected])
+ '@zag-js/select': 0.82.1
+ '@zag-js/signature-pad': 0.82.1
+ '@zag-js/slider': 0.82.1
+ '@zag-js/splitter': 0.82.1
+ '@zag-js/steps': 0.82.1
+ '@zag-js/switch': 0.82.1
+ '@zag-js/tabs': 0.82.1
+ '@zag-js/tags-input': 0.82.1
+ '@zag-js/time-picker': 0.82.1(@internationalized/[email protected])
+ '@zag-js/timer': 0.82.1
+ '@zag-js/toast': 0.82.1
+ '@zag-js/toggle-group': 0.82.1
+ '@zag-js/tooltip': 0.82.1
+ '@zag-js/tour': 0.82.1
+ '@zag-js/tree-view': 0.82.1
+ '@zag-js/types': 0.82.1
react: 18.3.1
react-dom: 18.3.1([email protected])
@@ -4451,17 +4460,17 @@ snapshots:
'@chakra-ui/[email protected]': {}
-
'@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])':
+
'@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])':
dependencies:
- '@ark-ui/react': 4.1.2([email protected]([email protected]))([email protected])
+ '@ark-ui/react': 4.9.1([email protected]([email protected]))([email protected])
'@emotion/is-prop-valid': 1.3.1
'@emotion/react': 11.13.3(@types/[email protected])([email protected])
- '@emotion/serialize': 1.3.2
- '@emotion/use-insertion-effect-with-fallbacks': 1.1.0([email protected])
- '@emotion/utils': 1.4.1
+ '@emotion/serialize': 1.3.3
+ '@emotion/use-insertion-effect-with-fallbacks': 1.2.0([email protected])
+ '@emotion/utils': 1.4.2
'@pandacss/is-valid-prop': 0.41.0
- '@zag-js/anatomy': 0.74.2
csstype: 3.1.3
+ fast-safe-stringify: 2.1.1
react: 18.3.1
react-dom: 18.3.1([email protected])
@@ -4591,6 +4600,14 @@ snapshots:
'@emotion/utils': 1.4.1
csstype: 3.1.3
+ '@emotion/[email protected]':
+ dependencies:
+ '@emotion/hash': 0.9.2
+ '@emotion/memoize': 0.9.0
+ '@emotion/unitless': 0.10.0
+ '@emotion/utils': 1.4.2
+ csstype: 3.1.3
+
'@emotion/[email protected]': {}
'@emotion/[email protected]': {}
@@ -4599,10 +4616,16 @@ snapshots:
dependencies:
react: 18.3.1
+ '@emotion/[email protected]([email protected])':
+ dependencies:
+ react: 18.3.1
+
'@emotion/[email protected]': {}
'@emotion/[email protected]': {}
+ '@emotion/[email protected]': {}
+
'@emotion/[email protected]': {}
'@esbuild/[email protected]':
@@ -4715,14 +4738,17 @@ snapshots:
'@floating-ui/[email protected]':
dependencies:
- '@floating-ui/utils': 0.2.7
+ '@floating-ui/utils': 0.2.8
'@floating-ui/[email protected]':
dependencies:
'@floating-ui/core': 1.6.7
'@floating-ui/utils': 0.2.8
- '@floating-ui/[email protected]': {}
+ '@floating-ui/[email protected]':
+ dependencies:
+ '@floating-ui/core': 1.6.7
+ '@floating-ui/utils': 0.2.8
'@floating-ui/[email protected]': {}
@@ -4767,11 +4793,11 @@ snapshots:
dependencies:
'@types/node': 22.5.4
- '@internationalized/[email protected]':
+ '@internationalized/[email protected]':
dependencies:
'@swc/helpers': 0.5.13
- '@internationalized/[email protected]':
+ '@internationalized/[email protected]':
dependencies:
'@swc/helpers': 0.5.13
@@ -5802,498 +5828,462 @@ snapshots:
d3-selection: 3.0.0
d3-zoom: 3.0.0
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
- dependencies:
- aria-hidden: 1.2.4
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-query': 0.74.2
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/scroll-snap': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/focus-visible': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-visible': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/utils': 0.74.2
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/color-utils': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/text-selection': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/color-utils': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/numeric-range': 0.74.2
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/aria-hidden': 0.74.2
- '@zag-js/collection': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/aria-hidden': 0.82.1
+ '@zag-js/collection': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/store': 0.74.2
- '@zag-js/utils': 0.74.2
- klona: 2.0.6
+ '@zag-js/store': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected](@internationalized/[email protected])':
+ '@zag-js/[email protected](@internationalized/[email protected])':
dependencies:
- '@internationalized/date': 3.5.6
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/date-utils': 0.74.2(@internationalized/[email protected])
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/live-region': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/text-selection': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@internationalized/date': 3.7.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/date-utils': 0.82.1(@internationalized/[email protected])
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/live-region': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected](@internationalized/[email protected])':
+ '@zag-js/[email protected](@internationalized/[email protected])':
dependencies:
- '@internationalized/date': 3.5.6
+ '@internationalized/date': 3.7.0
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/aria-hidden': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/remove-scroll': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
- focus-trap: 7.6.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/aria-hidden': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-trap': 0.82.1
+ '@zag-js/remove-scroll': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/interact-outside': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/interact-outside': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-query': 0.74.2
- '@zag-js/text-selection': 0.74.2
- '@zag-js/types': 0.74.2
-
- '@zag-js/[email protected]': {}
+ '@zag-js/types': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/interact-outside': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/interact-outside': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/file-utils': 0.74.2
- '@zag-js/i18n-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/file-utils': 0.82.1
+ '@zag-js/i18n-utils': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/i18n-utils': 0.74.2
+ '@zag-js/i18n-utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-query': 0.74.2
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-query': 0.74.2
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/rect-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/rect-utils': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@internationalized/number': 3.5.3
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/number-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]': {}
-
- '@zag-js/[email protected]': {}
+ '@internationalized/number': 3.6.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/aria-hidden': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/remove-scroll': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
- focus-trap: 7.6.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/aria-hidden': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-trap': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/remove-scroll': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@floating-ui/dom': 1.6.11
- '@zag-js/dom-query': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@floating-ui/dom': 1.6.12
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/core': 0.74.2
- '@zag-js/types': 0.74.2
+ '@zag-js/core': 0.82.1
+ '@zag-js/types': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
proxy-memoize: 3.0.1
uqr: 0.1.2
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/element-rect': 0.74.2
- '@zag-js/focus-visible': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/element-rect': 0.82.1
+ '@zag-js/focus-visible': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]([email protected]([email protected]))([email protected])':
+ '@zag-js/[email protected]([email protected]([email protected]))([email protected])':
dependencies:
- '@zag-js/core': 0.74.2
- '@zag-js/store': 0.74.2
- '@zag-js/types': 0.74.2
- proxy-compare: 3.0.0
+ '@zag-js/core': 0.82.1
+ '@zag-js/store': 0.82.1
+ '@zag-js/types': 0.82.1
+ proxy-compare: 3.0.1
react: 18.3.1
react-dom: 18.3.1([email protected])
- '@zag-js/[email protected]': {}
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/dom-query': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/collection': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/[email protected]': {}
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
- perfect-freehand: 1.2.2
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/element-size': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/numeric-range': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/dom-query': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/number-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/collection': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- proxy-compare: 3.0.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+ perfect-freehand: 1.2.2
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/focus-visible': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/element-rect': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/auto-resize': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/form-utils': 0.74.2
- '@zag-js/interact-outside': 0.74.2
- '@zag-js/live-region': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/dom-query': 0.74.2
-
- '@zag-js/[email protected](@internationalized/[email protected])':
- dependencies:
- '@internationalized/date': 3.5.6
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dismissable': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/focus-visible': 0.74.2
- '@zag-js/popper': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
- dependencies:
- '@zag-js/anatomy': 0.74.2
- '@zag-js/core': 0.74.2
- '@zag-js/dom-event': 0.74.2
- '@zag-js/dom-query': 0.74.2
- '@zag-js/types': 0.74.2
- '@zag-js/utils': 0.74.2
-
- '@zag-js/[email protected]':
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/element-size': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ proxy-compare: 3.0.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-visible': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/element-rect': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/auto-resize': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/interact-outside': 0.82.1
+ '@zag-js/live-region': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected](@internationalized/[email protected])':
+ dependencies:
+ '@internationalized/date': 3.7.0
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-visible': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dismissable': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/focus-trap': 0.82.1
+ '@zag-js/interact-outside': 0.82.1
+ '@zag-js/popper': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
+ dependencies:
+ '@zag-js/anatomy': 0.82.1
+ '@zag-js/collection': 0.82.1
+ '@zag-js/core': 0.82.1
+ '@zag-js/dom-query': 0.82.1
+ '@zag-js/types': 0.82.1
+ '@zag-js/utils': 0.82.1
+
+ '@zag-js/[email protected]':
dependencies:
csstype: 3.1.3
- '@zag-js/[email protected]': {}
+ '@zag-js/[email protected]': {}
[email protected]([email protected]):
dependencies:
@@ -6335,10 +6325,6 @@ snapshots:
[email protected]: {}
- [email protected]:
- dependencies:
- tslib: 2.6.3
-
[email protected]:
dependencies:
deep-equal: 2.2.3
@@ -6508,9 +6494,9 @@ snapshots:
loupe: 3.1.3
pathval: 2.0.0
-
[email protected](@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected]))(@types/[email protected])([email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected]):
+
[email protected](@chakra-ui/[email protected](@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected]))(@types/[email protected])([email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected]):
dependencies:
- '@chakra-ui/react':
3.1.1(@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])
+ '@chakra-ui/react':
3.8.1(@emotion/[email protected](@types/[email protected])([email protected]))([email protected]([email protected]))([email protected])
next-themes: 0.3.0([email protected]([email protected]))([email protected])
react: 18.3.1
react-dom: 18.3.1([email protected])
@@ -7219,6 +7205,8 @@ snapshots:
[email protected]: {}
+ [email protected]: {}
+
[email protected]:
dependencies:
reusify: 1.0.4
@@ -7282,10 +7270,6 @@ snapshots:
transitivePeerDependencies:
- encoding
- [email protected]:
- dependencies:
- tabbable: 6.2.0
-
[email protected]: {}
[email protected]:
@@ -7731,8 +7715,6 @@ snapshots:
dependencies:
json-buffer: 3.0.1
- [email protected]: {}
-
[email protected]: {}
[email protected]:
@@ -8477,6 +8459,8 @@ snapshots:
[email protected]: {}
+ [email protected]: {}
+
[email protected]: {}
[email protected]:
@@ -8566,6 +8550,11 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ [email protected]([email protected]([email protected]))([email protected]):
+ dependencies:
+ react: 18.3.1
+ react-dom: 18.3.1([email protected])
+
[email protected]([email protected]([email protected]))([email protected]):
dependencies:
'@remix-run/router': 1.19.2
@@ -8963,8 +8952,6 @@ snapshots:
'@pkgr/core': 0.1.1
tslib: 2.6.3
- [email protected]: {}
-
[email protected]:
dependencies:
chownr: 2.0.0
diff --git a/airflow/ui/src/components/HeaderCard.tsx
b/airflow/ui/src/components/HeaderCard.tsx
new file mode 100644
index 00000000000..0d59258eb4d
--- /dev/null
+++ b/airflow/ui/src/components/HeaderCard.tsx
@@ -0,0 +1,81 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Flex, GridItem, Heading, HStack, SimpleGrid, Spinner } from
"@chakra-ui/react";
+import { type ReactNode, useRef } from "react";
+
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import { Stat } from "src/components/Stat";
+import { StateBadge } from "src/components/StateBadge";
+import { useContainerWidth } from "src/utils";
+
+const getColumnCount = (width: number) => {
+ if (width < 400) {
+ return 2;
+ }
+ if (width < 800) {
+ return 4;
+ }
+ if (width < 1000) {
+ return 6;
+ }
+
+ return 8;
+};
+
+type Props = {
+ readonly actions?: ReactNode;
+ readonly icon: ReactNode;
+ readonly isRefreshing?: boolean;
+ readonly state?: TaskInstanceState | null;
+ readonly stats: Array<{ label: string; value: ReactNode | string }>;
+ readonly subTitle?: ReactNode | string;
+ readonly title: ReactNode | string;
+};
+
+export const HeaderCard = ({ actions, icon, isRefreshing, state, stats,
subTitle, title }: Props) => {
+ const containerRef = useRef<HTMLDivElement>();
+ const containerWidth = useContainerWidth(containerRef);
+
+ return (
+ <Box borderColor="border" borderRadius={8} borderWidth={1} m={2} p={2}
ref={containerRef}>
+ <Flex alignItems="center" flexWrap="wrap" justifyContent="space-between"
mb={2}>
+ <Flex alignItems="center" flexWrap="wrap" gap={2}>
+ <Heading size="xl">{icon}</Heading>
+ <Heading size="lg">{title}</Heading>
+ <Heading size="lg">{subTitle}</Heading>
+ {state === undefined ? undefined : <StateBadge
state={state}>{state}</StateBadge>}
+ {isRefreshing ? <Spinner /> : <div />}
+ </Flex>
+ <HStack gap={1}>{actions}</HStack>
+ </Flex>
+ <SimpleGrid
+ autoFlow="row dense"
+ gap={4}
+ my={2}
+ templateColumns={`repeat(${getColumnCount(containerWidth)}, 1fr)`}
+ >
+ {stats.map(({ label, value }) => (
+ <GridItem key={label}>
+ <Stat label={label}>{value}</Stat>
+ </GridItem>
+ ))}
+ </SimpleGrid>
+ </Box>
+ );
+};
diff --git a/airflow/ui/src/components/Stat.tsx
b/airflow/ui/src/components/Stat.tsx
index 7f39a092ea2..476bff6a21f 100644
--- a/airflow/ui/src/components/Stat.tsx
+++ b/airflow/ui/src/components/Stat.tsx
@@ -16,15 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Heading, VStack } from "@chakra-ui/react";
-import type { PropsWithChildren } from "react";
+import { Heading, type StackProps, VStack } from "@chakra-ui/react";
+import type { ReactNode } from "react";
type Props = {
- readonly label: string;
-} & PropsWithChildren;
+ readonly label: ReactNode | string;
+} & StackProps;
-export const Stat = ({ children, label }: Props) => (
- <VStack align="flex-start" gap={1}>
+export const Stat = ({ children, label, ...rest }: Props) => (
+ <VStack align="flex-start" gap={1} {...rest}>
<Heading color="fg.muted" fontSize="xs">
{label}
</Heading>
diff --git a/airflow/ui/src/utils/index.ts
b/airflow/ui/src/components/TruncatedText.tsx
similarity index 70%
copy from airflow/ui/src/utils/index.ts
copy to airflow/ui/src/components/TruncatedText.tsx
index 632d24b3f45..7fe16dcdcc2 100644
--- a/airflow/ui/src/utils/index.ts
+++ b/airflow/ui/src/components/TruncatedText.tsx
@@ -16,9 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { Text, type TextProps } from "@chakra-ui/react";
-export { capitalize } from "./capitalize";
-export { pluralize } from "./pluralize";
-export { getDuration } from "./datetime_utils";
-export { getMetaKey } from "./getMetaKey";
-export * from "./query";
+type Props = {
+ readonly text: string;
+} & TextProps;
+
+export const TruncatedText = ({ text, ...rest }: Props) => {
+ const truncatedText = text.length <= 25 ? text : `…${text.slice(-22)}`;
+
+ return (
+ <Text title={text} {...rest}>
+ {truncatedText}
+ </Text>
+ );
+};
diff --git a/airflow/ui/src/layouts/BaseLayout.tsx
b/airflow/ui/src/layouts/BaseLayout.tsx
index ddbd37432c4..c099cd7a8cf 100644
--- a/airflow/ui/src/layouts/BaseLayout.tsx
+++ b/airflow/ui/src/layouts/BaseLayout.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
import { useEffect, type PropsWithChildren } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import { useLocalStorage } from "usehooks-ts";
@@ -56,9 +56,9 @@ export const BaseLayout = ({ children }: PropsWithChildren)
=> {
return (
<>
<Nav />
- <Flex flexFlow="column" height="100%" ml={20} p={3}>
+ <Box display="flex" flexDirection="column" h="100vh" ml={20} p={3}>
{children ?? <Outlet />}
- </Flex>
+ </Box>
</>
);
};
diff --git a/airflow/ui/src/layouts/Details/DagBreadcrumb.tsx
b/airflow/ui/src/layouts/Details/DagBreadcrumb.tsx
new file mode 100644
index 00000000000..711c8decdcf
--- /dev/null
+++ b/airflow/ui/src/layouts/Details/DagBreadcrumb.tsx
@@ -0,0 +1,143 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { HStack, Stat } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { LiaSlashSolid } from "react-icons/lia";
+import { Link as RouterLink, useParams, useSearchParams } from
"react-router-dom";
+
+import {
+ useDagRunServiceGetDagRun,
+ useDagServiceGetDagDetails,
+ useTaskInstanceServiceGetMappedTaskInstance,
+ useTaskServiceGetTask,
+} from "openapi/queries";
+import { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { TogglePause } from "src/components/TogglePause";
+import { Breadcrumb } from "src/components/ui";
+
+export const DagBreadcrumb = () => {
+ const { dagId = "", runId, taskId } = useParams();
+
+ const [searchParams] = useSearchParams();
+ const mapIndexParam = searchParams.get("map_index");
+ const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
+
+ const { data: dag } = useDagServiceGetDagDetails({
+ dagId,
+ });
+
+ const { data: dagRun } = useDagRunServiceGetDagRun(
+ {
+ dagId,
+ dagRunId: runId ?? "",
+ },
+ undefined,
+ {
+ enabled: Boolean(runId),
+ },
+ );
+
+ const { data: task } = useTaskServiceGetTask({ dagId, taskId }, undefined, {
enabled: Boolean(taskId) });
+
+ const { data: taskInstance } = useTaskInstanceServiceGetMappedTaskInstance(
+ {
+ dagId,
+ dagRunId: runId ?? "",
+ mapIndex,
+ taskId: taskId ?? "",
+ },
+ undefined,
+ {
+ enabled: Boolean(runId) && Boolean(taskId),
+ },
+ );
+
+ const links: Array<{ label: ReactNode | string; title?: string; value?:
string }> = [
+ { label: "Dags", value: "/dags" },
+ {
+ label: (
+ <HStack>
+ <TogglePause
+ dagDisplayName={dag?.dag_display_name}
+ dagId={dagId}
+ isPaused={Boolean(dag?.is_paused)}
+ skipConfirm
+ />
+ {dag?.dag_display_name ?? dagId}
+ </HStack>
+ ),
+ title: "Dag",
+ value: `/dags/${dagId}`,
+ },
+ ];
+
+ // Add dag run breadcrumb
+ if (runId !== undefined) {
+ links.push({
+ label:
+ dagRun === undefined ? (
+ runId
+ ) : (
+ <HStack>
+ <StateBadge fontSize="xs" state={dagRun.state} />
+ <Time datetime={dagRun.run_after} />
+ </HStack>
+ ),
+ title: "Dag Run",
+ value: `/dags/${dagId}/runs/${runId}`,
+ });
+ }
+
+ // Add task breadcrumb
+ if (runId !== undefined && taskId !== undefined) {
+ links.push({ label: taskInstance?.task_display_name ?? taskId, title:
"Task" });
+ }
+
+ if (runId === undefined && taskId !== undefined) {
+ links.push({ label: "All Runs", title: "Dag Run", value:
`/dags/${dagId}/runs/` });
+ links.push({ label: task?.task_display_name ?? taskId, title: "Task" });
+ }
+
+ if (mapIndexParam !== null) {
+ links.push({ label: mapIndexParam, title: "Map Index" });
+ }
+
+ return (
+ <Breadcrumb.Root mb={1} separator={<LiaSlashSolid />}>
+ {links.map((link, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+ <Stat.Root gap={0} key={`${link.title}-${index}`}>
+ <Stat.Label fontSize="xs" fontWeight="bold">
+ {link.title}
+ </Stat.Label>
+ <Stat.ValueText fontSize="sm" fontWeight="normal">
+ {index === links.length - 1 ? (
+ <Breadcrumb.CurrentLink>{link.label}</Breadcrumb.CurrentLink>
+ ) : (
+ <Breadcrumb.Link asChild color="fg.info">
+ <RouterLink to={link.value ?? ""}>{link.label}</RouterLink>
+ </Breadcrumb.Link>
+ )}
+ </Stat.ValueText>
+ </Stat.Root>
+ ))}
+ </Breadcrumb.Root>
+ );
+};
diff --git a/airflow/ui/src/layouts/Details/DagVizModal.tsx
b/airflow/ui/src/layouts/Details/DagVizModal.tsx
deleted file mode 100644
index 3c8ca116e38..00000000000
--- a/airflow/ui/src/layouts/Details/DagVizModal.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/*!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Button, Heading, HStack } from "@chakra-ui/react";
-import { useRef } from "react";
-import { FaChartGantt } from "react-icons/fa6";
-import { FiGrid } from "react-icons/fi";
-import { Link as RouterLink, useSearchParams } from "react-router-dom";
-
-import type { DAGResponse } from "openapi/requests/types.gen";
-import { DagIcon } from "src/assets/DagIcon";
-import { Dialog } from "src/components/ui";
-import { capitalize } from "src/utils";
-
-import { DagRunSelect } from "./DagRunSelect";
-import { Gantt } from "./Gantt";
-import { Graph } from "./Graph";
-import { Grid } from "./Grid";
-import { ToggleGroups } from "./ToggleGroups";
-
-type DAGVizModalProps = {
- dagDisplayName?: DAGResponse["dag_display_name"];
- dagId?: DAGResponse["dag_id"];
- onClose: () => void;
- open: boolean;
-};
-
-const visualizationOptions = [
- {
- component: <Gantt />,
- icon: <FaChartGantt height={5} width={5} />,
- value: "gantt",
- },
- { component: <Grid />, icon: <FiGrid height={5} width={5} />, value: "grid"
},
- {
- component: <Graph />,
- icon: <DagIcon height={5} width={5} />,
- value: "graph",
- },
-];
-
-export const DagVizModal: React.FC<DAGVizModalProps> = ({ dagDisplayName,
dagId, onClose, open }) => {
- const [searchParams] = useSearchParams();
- const contentRef = useRef<HTMLDivElement>(null);
-
- const activeViz = searchParams.get("modal") ?? "graph";
- const params = new URLSearchParams(searchParams);
-
- params.delete("modal");
-
- return (
- <Dialog.Root lazyMount motionPreset="none" onOpenChange={onClose}
open={open} size="full">
- <Dialog.Content backdrop ref={contentRef}>
- <Dialog.Header bg="blue.muted" pr={16}>
- <HStack>
- <Heading mr={3} size="xl">
- {dagDisplayName ?? dagId}
- </Heading>
- {visualizationOptions.map(({ icon, value }) => (
- <RouterLink
- key={value}
- to={{
- search: `${params.toString()}&modal=${value}`,
- }}
- >
- <Button
- borderColor="colorPalette.fg"
- borderRadius={20}
- colorPalette="blue"
- variant={activeViz === value ? "solid" : "outline"}
- >
- {icon}
- {capitalize(value)}
- </Button>
- </RouterLink>
- ))}
- <DagRunSelect ref={contentRef} />
- <ToggleGroups />
- </HStack>
- <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
- </Dialog.Header>
- <Dialog.Body display="flex">
- {dagId === undefined
- ? undefined
- : visualizationOptions.find((viz) => viz.value ===
activeViz)?.component}
- </Dialog.Body>
- </Dialog.Content>
- </Dialog.Root>
- );
-};
diff --git a/airflow/ui/src/layouts/Details/DetailsLayout.tsx
b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index 04402f5e35f..1c12f48071a 100644
--- a/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -16,93 +16,118 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Button, HStack } from "@chakra-ui/react";
-import type { PropsWithChildren } from "react";
-import { FaChartGantt } from "react-icons/fa6";
-import { FiChevronsLeft, FiGrid } from "react-icons/fi";
-import { Outlet, Link as RouterLink, useParams, useSearchParams } from
"react-router-dom";
+import { Box, HStack, IconButton, ButtonGroup, Flex } from "@chakra-ui/react";
+import { useReactFlow } from "@xyflow/react";
+import type { PropsWithChildren, ReactNode } from "react";
+import { FiGrid } from "react-icons/fi";
+import { MdOutlineAccountTree } from "react-icons/md";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { Outlet, useParams } from "react-router-dom";
+import { useLocalStorage } from "usehooks-ts";
+import { useDagServiceGetDag } from "openapi/queries";
import type { DAGResponse } from "openapi/requests/types.gen";
-import { DagIcon } from "src/assets/DagIcon";
import { ErrorAlert } from "src/components/ErrorAlert";
import { SearchDagsButton } from "src/components/SearchDags";
+import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
import { ProgressBar } from "src/components/ui";
import { Toaster } from "src/components/ui";
import { OpenGroupsProvider } from "src/context/openGroups";
-import { DagVizModal } from "./DagVizModal";
+import { DagBreadcrumb } from "./DagBreadcrumb";
+import { Graph } from "./Graph";
+import { Grid } from "./Grid";
import { NavTabs } from "./NavTabs";
type Props = {
readonly dag?: DAGResponse;
readonly error?: unknown;
readonly isLoading?: boolean;
- readonly tabs: Array<{ label: string; value: string }>;
+ readonly tabs: Array<{ icon: ReactNode; label: string; value: string }>;
} & PropsWithChildren;
-export const DetailsLayout = ({ children, dag, error, isLoading, tabs }:
Props) => {
+export const DetailsLayout = ({ children, error, isLoading, tabs }: Props) => {
const { dagId = "" } = useParams();
- const [searchParams, setSearchParams] = useSearchParams();
+ const { data: dag } = useDagServiceGetDag({ dagId });
- const modal = searchParams.get("modal");
+ const [dagView, setDagView] = useLocalStorage<"graph" | "grid">(
+ `dag_view-${dagId}`,
+ dag && (dag.default_view === "graph" || dag.default_view === "grid") ?
dag.default_view : "grid",
+ );
- const isModalOpen = modal !== null;
- const onClose = () => {
- searchParams.delete("modal");
- setSearchParams(searchParams);
- };
+ const { fitView, getZoom } = useReactFlow();
return (
<OpenGroupsProvider dagId={dagId}>
- <Box>
- <HStack justifyContent="space-between" mb={2}>
- <Button asChild colorPalette="blue" variant="ghost">
- <RouterLink to="/dags">
- <FiChevronsLeft />
- Back to all dags
- </RouterLink>
- </Button>
+ <HStack justifyContent="space-between" mb={2}>
+ <DagBreadcrumb />
+ <Flex gap={1}>
<SearchDagsButton />
- </HStack>
- <Toaster />
- {isModalOpen ? undefined : children}
- <ErrorAlert error={error} />
- <ProgressBar size="xs" visibility={isLoading ? "visible" : "hidden"} />
- <NavTabs
- keepSearch
- rightButtons={
- <>
- <Button asChild colorPalette="blue" variant="ghost">
- <RouterLink to={{ search:
`${searchParams.toString()}&modal=gantt` }}>
- <FaChartGantt height={5} width={5} />
- Gantt
- </RouterLink>
- </Button>
- <Button asChild colorPalette="blue" variant="ghost">
- <RouterLink to={{ search:
`${searchParams.toString()}&modal=grid` }}>
- <FiGrid height={5} width={5} />
- Grid
- </RouterLink>
- </Button>
- <Button asChild colorPalette="blue" variant="ghost">
- <RouterLink to={{ search:
`${searchParams.toString()}&modal=graph` }}>
- <DagIcon height={5} width={5} />
- Graph
- </RouterLink>
- </Button>
- </>
- }
- tabs={tabs}
- />
- <DagVizModal
- dagDisplayName={dag?.dag_display_name}
- dagId={dag?.dag_id}
- onClose={onClose}
- open={isModalOpen}
- />
+ {dag === undefined ? undefined : <TriggerDAGButton dag={dag} />}
+ </Flex>
+ </HStack>
+ <Toaster />
+ <Box flex={1} minH={0}>
+ <PanelGroup autoSaveId={dagId} direction="horizontal">
+ <Panel defaultSize={20} minSize={6}>
+ <Box height="100%" position="relative">
+ <ButtonGroup
+ attached
+ left={0}
+ position="absolute"
+ size="sm"
+ top={0}
+ variant="outline"
+ zIndex={1}
+ >
+ <IconButton
+ aria-label="Show Grid"
+ colorPalette="blue"
+ onClick={() => setDagView("grid")}
+ title="Show Grid"
+ variant={dagView === "grid" ? "solid" : "outline"}
+ >
+ <FiGrid />
+ </IconButton>
+ <IconButton
+ aria-label="Show Graph"
+ colorPalette="blue"
+ onClick={() => setDagView("graph")}
+ title="Show Graph"
+ variant={dagView === "graph" ? "solid" : "outline"}
+ >
+ <MdOutlineAccountTree />
+ </IconButton>
+ </ButtonGroup>
+ {dagView === "graph" ? <Graph /> : <Grid />}
+ </Box>
+ </Panel>
+ <PanelResizeHandle
+ className="resize-handle"
+ onDragging={(isDragging) => {
+ if (!isDragging) {
+ const zoom = getZoom();
+
+ void fitView({ maxZoom: zoom, minZoom: zoom });
+ }
+ }}
+ >
+ <Box bg="fg.subtle" cursor="col-resize" h="100%"
transition="background 0.2s" w={0.5} />
+ </PanelResizeHandle>
+ <Panel defaultSize={50} minSize={20}>
+ <Box display="flex" flexDirection="column" h="100%">
+ {children}
+ <ErrorAlert error={error} />
+ <ProgressBar size="xs" visibility={isLoading ? "visible" :
"hidden"} />
+ <NavTabs keepSearch tabs={tabs} />
+ <Box h="100%" overflow="auto" px={2}>
+ <Outlet />
+ </Box>
+ </Box>
+ </Panel>
+ </PanelGroup>
</Box>
- <Box overflow="auto">{isModalOpen ? undefined : <Outlet />}</Box>
</OpenGroupsProvider>
);
};
diff --git a/airflow/ui/src/layouts/Details/Graph/Graph.tsx
b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
index e1a12872153..3acb520ad55 100644
--- a/airflow/ui/src/layouts/Details/Graph/Graph.tsx
+++ b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex, useToken } from "@chakra-ui/react";
+import { useToken } from "@chakra-ui/react";
import { ReactFlow, Controls, Background, MiniMap, type Node as ReactFlowNode
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { useParams } from "react-router-dom";
@@ -125,39 +125,37 @@ export const Graph = () => {
});
return (
- <Flex flex={1}>
- <ReactFlow
- colorMode={colorMode}
- defaultEdgeOptions={{ zIndex: 1 }}
- edges={data?.edges ?? []}
- edgeTypes={edgeTypes}
- // Fit view to selected task or the whole graph on render
- fitView
- maxZoom={1}
- minZoom={0.25}
- nodes={nodes}
- nodesDraggable={false}
- nodeTypes={nodeTypes}
- onlyRenderVisibleElements
- >
- <Background />
- <Controls showInteractive={false} />
- <MiniMap
- nodeColor={(node: ReactFlowNode<CustomNodeProps>) =>
- nodeColor(
- node,
- colorMode === "dark" ? evenDark : evenLight,
- colorMode === "dark" ? oddDark : oddLight,
- )
- }
- nodeStrokeColor={(node: ReactFlowNode<CustomNodeProps>) =>
- node.data.isSelected && selectedColor !== undefined ?
selectedColor : ""
- }
- nodeStrokeWidth={15}
- pannable
- zoomable
- />
- </ReactFlow>
- </Flex>
+ <ReactFlow
+ colorMode={colorMode}
+ defaultEdgeOptions={{ zIndex: 1 }}
+ edges={data?.edges ?? []}
+ edgeTypes={edgeTypes}
+ // Fit view to selected task or the whole graph on render
+ fitView
+ maxZoom={1}
+ minZoom={0.25}
+ nodes={nodes}
+ nodesDraggable={false}
+ nodeTypes={nodeTypes}
+ onlyRenderVisibleElements
+ >
+ <Background />
+ <Controls showInteractive={false} />
+ <MiniMap
+ nodeColor={(node: ReactFlowNode<CustomNodeProps>) =>
+ nodeColor(
+ node,
+ colorMode === "dark" ? evenDark : evenLight,
+ colorMode === "dark" ? oddDark : oddLight,
+ )
+ }
+ nodeStrokeColor={(node: ReactFlowNode<CustomNodeProps>) =>
+ node.data.isSelected && selectedColor !== undefined ? selectedColor
: ""
+ }
+ nodeStrokeWidth={15}
+ pannable
+ zoomable
+ />
+ </ReactFlow>
);
};
diff --git a/airflow/ui/src/layouts/Details/Graph/TaskNode.tsx
b/airflow/ui/src/layouts/Details/Graph/TaskNode.tsx
index fbeb5bdd3a7..5faaa92617c 100644
--- a/airflow/ui/src/layouts/Details/Graph/TaskNode.tsx
+++ b/airflow/ui/src/layouts/Details/Graph/TaskNode.tsx
@@ -72,7 +72,7 @@ export const TaskNode = ({
height={`${height}px`}
justifyContent="space-between"
px={3}
- py={isSelected ? 1 : 2}
+ py={isSelected ? 0 : 1}
width={`${width}px`}
>
<Box>
diff --git a/airflow/ui/src/layouts/Details/Grid/Bar.tsx
b/airflow/ui/src/layouts/Details/Grid/Bar.tsx
index 811c603f83d..a56a5a913db 100644
--- a/airflow/ui/src/layouts/Details/Grid/Bar.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/Bar.tsx
@@ -59,11 +59,12 @@ export const Bar = ({ index, limit, max, nodes, run }:
Props) => {
justifyContent="center"
pb="2px"
px="5px"
- width="14px"
+ width="18px"
zIndex={1}
>
<GridButton
alignItems="center"
+ color="white"
dagId={dagId}
flexDir="column"
height={`${(run.duration / max) * BAR_HEIGHT}px`}
diff --git a/airflow/ui/src/layouts/Details/Grid/Grid.tsx
b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 31f9263814c..96ee17e6228 100644
--- a/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -38,7 +38,7 @@ import { flattenNodes, type RunWithDuration } from "./utils";
dayjs.extend(dayjsDuration);
const OFFSET_CHANGE = 10;
-const limit = 25;
+const limit = 14;
export const Grid = () => {
const { openGroupIds } = useOpenGroups();
@@ -72,7 +72,9 @@ export const Grid = () => {
const runs: Array<RunWithDuration> = useMemo(
() =>
(gridData?.dag_runs ?? []).map((run) => {
- const duration =
dayjs.duration(dayjs(run.end_date).diff(run.start_date)).asSeconds();
+ const duration = dayjs
+ .duration(dayjs(run.end_date ?? undefined).diff(run.start_date ??
undefined))
+ .asSeconds();
return {
...run,
diff --git a/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
b/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
index 5c10c72e3e3..f3dd0b3dc07 100644
--- a/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
@@ -47,7 +47,7 @@ export const GridButton = ({
background={`${state}.solid`}
borderRadius={2}
height="10px"
- minW="10px"
+ minW="14px"
pb="2px"
px="2px"
title={`${label}\n${state}`}
@@ -60,7 +60,7 @@ export const GridButton = ({
replace
to={{
pathname: `/dags/${dagId}/runs/${runId}/${taskId === undefined ? "" :
`tasks/${taskId}`}`,
- search: searchParams,
+ search: searchParams.toString(),
}}
>
<Flex
@@ -70,7 +70,7 @@ export const GridButton = ({
pb="2px"
px="2px"
title={`${label}\n${state}`}
- width="10px"
+ width="14px"
{...rest}
>
{children}
diff --git a/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
b/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
index 6d1d8afe130..fc939eb8f21 100644
--- a/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
@@ -16,13 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex } from "@chakra-ui/react";
+import { Badge, Flex } from "@chakra-ui/react";
import type { MouseEvent } from "react";
import React from "react";
+import { Link } from "react-router-dom";
import type { TaskInstanceState } from "openapi/requests/types.gen";
-
-import { GridButton } from "./GridButton";
+import { StateIcon } from "src/components/StateIcon";
type Props = {
readonly dagId: string;
@@ -50,30 +50,48 @@ const onMouseLeave = (event: MouseEvent<HTMLDivElement>) =>
{
});
};
-const Instance = ({ dagId, isGroup, label, runId, search, state, taskId }:
Props) => (
+const Instance = ({ dagId, runId, search, state, taskId }: Props) => (
<Flex
alignItems="flex-end"
+ height="20px"
id={taskId.replaceAll(".", "-")}
justifyContent="center"
key={taskId}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
- px="5px"
- py="5px"
+ px="2px"
+ py={0}
transition="background-color 0.2s"
- width="14px"
zIndex={1}
>
- <GridButton
- dagId={dagId}
- isGroup={isGroup}
- label={label}
- p="2px"
- runId={runId}
- searchParams={search}
- state={state}
- taskId={taskId}
- />
+ <Link
+ replace
+ to={{
+ pathname: `/dags/${dagId}/runs/${runId}/tasks/${taskId}`,
+ search,
+ }}
+ >
+ <Badge
+ borderRadius={4}
+ colorPalette={state === null ? "none" : state}
+ height="14px"
+ minH={0}
+ opacity={state === "success" ? 0.6 : 1}
+ p={0}
+ variant="solid"
+ width="14px"
+ >
+ {state === undefined ? undefined : (
+ <StateIcon
+ size={10}
+ state={state}
+ style={{
+ marginLeft: "2px",
+ }}
+ />
+ )}
+ </Badge>
+ </Link>
</Flex>
);
diff --git a/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
b/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
index 7ee7f96e535..65a6beb0c12 100644
--- a/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx
@@ -90,6 +90,7 @@ export const TaskNames = ({ nodes }: Props) => {
fontWeight="normal"
isMapped={Boolean(node.is_mapped)}
label={node.label}
+ mb={1}
paddingLeft={node.depth * 3 + 2}
setupTeardownType={node.setup_teardown_type}
/>
diff --git a/airflow/ui/src/layouts/Details/NavTabs.tsx
b/airflow/ui/src/layouts/Details/NavTabs.tsx
index 55d62c72da5..a1cc44c00ff 100644
--- a/airflow/ui/src/layouts/Details/NavTabs.tsx
+++ b/airflow/ui/src/layouts/Details/NavTabs.tsx
@@ -17,50 +17,52 @@
* under the License.
*/
import { Center, Flex } from "@chakra-ui/react";
-import type { ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
import { NavLink, useSearchParams } from "react-router-dom";
+import { useContainerWidth } from "src/utils";
+
type Props = {
readonly keepSearch?: boolean;
- readonly rightButtons?: ReactNode;
- readonly tabs: Array<{ label: string; value: string }>;
+ readonly tabs: Array<{ icon?: ReactNode; label: string; value: string }>;
};
-export const NavTabs = ({ keepSearch, rightButtons, tabs }: Props) => {
+export const NavTabs = ({ keepSearch, tabs }: Props) => {
const [searchParams] = useSearchParams();
+ const containerRef = useRef<HTMLDivElement>(null);
+ const containerWidth = useContainerWidth(containerRef);
+
return (
- <Flex alignItems="center" borderBottomWidth={1}
justifyContent="space-between" mb={2}>
- <Flex>
- {tabs.map(({ label, value }) => (
- <NavLink
- end
- key={value}
- to={{
- pathname: value,
- // Preserve search params when navigating
- search: keepSearch ? searchParams.toString() : undefined,
- }}
- >
- {({ isActive }) => (
- <Center
- borderBottomColor="border.info"
- borderBottomWidth={isActive ? 3 : 0}
- color={isActive ? "fg" : "fg.muted"}
- fontWeight="bold"
- height="40px"
- mb="-2px" // Show the border on top of its parent's border
- pb={isActive ? 0 : "3px"}
- px={4}
- transition="all 0.2s ease"
- >
- {label}
- </Center>
- )}
- </NavLink>
- ))}
- </Flex>
- <Flex alignSelf="flex-end">{rightButtons}</Flex>
+ <Flex alignItems="center" borderBottomWidth={1} mb={2} ref={containerRef}>
+ {tabs.map(({ icon, label, value }) => (
+ <NavLink
+ end
+ key={value}
+ title={label}
+ to={{
+ pathname: value,
+ // Preserve search params when navigating
+ search: keepSearch ? searchParams.toString() : undefined,
+ }}
+ >
+ {({ isActive }) => (
+ <Center
+ borderBottomColor="border.info"
+ borderBottomWidth={isActive ? 3 : 0}
+ color={isActive ? "fg" : "fg.muted"}
+ fontWeight="bold"
+ height="40px"
+ mb="-2px" // Show the border on top of its parent's border
+ pb={isActive ? 0 : "3px"}
+ px={4}
+ transition="all 0.2s ease"
+ >
+ {containerWidth > 600 || !Boolean(icon) ? label : icon}
+ </Center>
+ )}
+ </NavLink>
+ ))}
</Flex>
);
};
diff --git a/airflow/ui/src/pages/Dag/Dag.tsx b/airflow/ui/src/pages/Dag/Dag.tsx
index c7107f98fff..4f5372689ab 100644
--- a/airflow/ui/src/pages/Dag/Dag.tsx
+++ b/airflow/ui/src/pages/Dag/Dag.tsx
@@ -16,20 +16,25 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { ReactFlowProvider } from "@xyflow/react";
+import { FiBarChart, FiCode } from "react-icons/fi";
+import { LuChartColumn } from "react-icons/lu";
+import { MdOutlineEventNote } from "react-icons/md";
import { useParams } from "react-router-dom";
import { useDagServiceGetDagDetails, useDagsServiceRecentDagRuns } from
"openapi/queries";
+import { TaskIcon } from "src/assets/TaskIcon";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { isStatePending, useAutoRefresh } from "src/utils";
import { Header } from "./Header";
const tabs = [
- { label: "Overview", value: "" },
- { label: "Runs", value: "runs" },
- { label: "Tasks", value: "tasks" },
- { label: "Events", value: "events" },
- { label: "Code", value: "code" },
+ { icon: <LuChartColumn />, label: "Overview", value: "" },
+ { icon: <FiBarChart />, label: "Runs", value: "runs" },
+ { icon: <TaskIcon />, label: "Tasks", value: "tasks" },
+ { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+ { icon: <FiCode />, label: "Code", value: "code" },
];
export const Dag = () => {
@@ -63,14 +68,16 @@ export const Dag = () => {
const dagWithRuns = runsData?.dags.find((recentDag) => recentDag.dag_id ===
dagId);
return (
- <DetailsLayout dag={dag} error={error ?? runsError} isLoading={isLoading
|| isLoadingRuns} tabs={tabs}>
- <Header
- dag={dag}
- dagWithRuns={dagWithRuns}
- isRefreshing={Boolean(
- dagWithRuns?.latest_dag_runs.some((dr) => isStatePending(dr.state))
&& Boolean(refetchInterval),
- )}
- />
- </DetailsLayout>
+ <ReactFlowProvider>
+ <DetailsLayout dag={dag} error={error ?? runsError} isLoading={isLoading
|| isLoadingRuns} tabs={tabs}>
+ <Header
+ dag={dag}
+ dagWithRuns={dagWithRuns}
+ isRefreshing={Boolean(
+ dagWithRuns?.latest_dag_runs.some((dr) =>
isStatePending(dr.state)) && Boolean(refetchInterval),
+ )}
+ />
+ </DetailsLayout>
+ </ReactFlowProvider>
);
};
diff --git a/airflow/ui/src/pages/Dag/Header.tsx
b/airflow/ui/src/pages/Dag/Header.tsx
index 5ed5c43031c..c5fb72db22e 100644
--- a/airflow/ui/src/pages/Dag/Header.tsx
+++ b/airflow/ui/src/pages/Dag/Header.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack, SimpleGrid, Spinner, Text } from
"@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
import { FiBookOpen, FiCalendar } from "react-icons/fi";
import { useParams } from "react-router-dom";
@@ -24,11 +24,10 @@ import type { DAGDetailsResponse,
DAGWithLatestDagRunsResponse } from "openapi/r
import { DagIcon } from "src/assets/DagIcon";
import DagRunInfo from "src/components/DagRunInfo";
import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { HeaderCard } from "src/components/HeaderCard";
import MenuButton from "src/components/Menu/MenuButton";
import ParseDag from "src/components/ParseDag";
-import { Stat } from "src/components/Stat";
import { TogglePause } from "src/components/TogglePause";
-import TriggerDAGButton from "src/components/TriggerDag/TriggerDAGButton";
import { Tooltip } from "src/components/ui";
import { DagTags } from "../DagsList/DagTags";
@@ -46,87 +45,76 @@ export const Header = ({
const { dagId } = useParams();
const latestRun = dagWithRuns?.latest_dag_runs ?
dagWithRuns.latest_dag_runs[0] : undefined;
+ const stats = [
+ {
+ label: "Schedule",
+ value: Boolean(dag?.timetable_summary) ? (
+ <Tooltip content={dag?.timetable_description}>
+ <Text fontSize="sm">
+ <FiCalendar style={{ display: "inline" }} />
{dag?.timetable_summary}
+ </Text>
+ </Tooltip>
+ ) : undefined,
+ },
+ {
+ label: "Latest Run",
+ value:
+ Boolean(latestRun) && latestRun !== undefined ? (
+ <DagRunInfo
+ endDate={latestRun.end_date}
+ logicalDate={latestRun.logical_date}
+ runAfter={latestRun.run_after}
+ startDate={latestRun.start_date}
+ state={latestRun.state}
+ />
+ ) : undefined,
+ },
+ {
+ label: "Next Run",
+ value: Boolean(dagWithRuns?.next_dagrun_run_after) ? (
+ <DagRunInfo
+ logicalDate={dagWithRuns?.next_dagrun_logical_date}
+ runAfter={dagWithRuns?.next_dagrun_run_after as string}
+ />
+ ) : undefined,
+ },
+ {
+ label: "Owner",
+ value: dag?.owners.join(", "),
+ },
+ {
+ label: "Tags",
+ value: <DagTags tags={dag?.tags ?? []} />,
+ },
+ ];
+
return (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Box p={2}>
- <Flex alignItems="center" justifyContent="space-between">
- <HStack alignItems="center" gap={2}>
- <DagIcon height={8} width={8} />
- <Heading size="lg">{dag?.dag_display_name ?? dagId}</Heading>
- {dag !== undefined && (
- <TogglePause
- dagDisplayName={dag.dag_display_name}
- dagId={dag.dag_id}
- isPaused={dag.is_paused}
+ <HeaderCard
+ actions={
+ dag === undefined ? undefined : (
+ <>
+ {dag.doc_md === null ? undefined : (
+ <DisplayMarkdownButton
+ header="Dag Documentation"
+ icon={<FiBookOpen />}
+ mdContent={dag.doc_md}
+ text="Dag Docs"
/>
)}
- {isRefreshing ? <Spinner /> : <div />}
- </HStack>
- <Flex>
- {dag ? (
- <HStack>
- {dag.doc_md === null ? undefined : (
- <DisplayMarkdownButton
- header="Dag Documentation"
- icon={<FiBookOpen />}
- mdContent={dag.doc_md}
- text="Dag Docs"
- />
- )}
- <ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
- <TriggerDAGButton dag={dag} />
- <MenuButton dag={dag} />
- </HStack>
- ) : undefined}
- </Flex>
- </Flex>
- <SimpleGrid columns={4} gap={4} my={2}>
- <Stat label="Schedule">
- {Boolean(dag?.timetable_summary) ? (
- <Tooltip content={dag?.timetable_description}>
- <Text fontSize="sm">
- <FiCalendar style={{ display: "inline" }} />
{dag?.timetable_summary}
- </Text>
- </Tooltip>
- ) : undefined}
- </Stat>
- <Stat label="Latest Run">
- {Boolean(latestRun) && latestRun !== undefined ? (
- <DagRunInfo
- endDate={latestRun.end_date}
- logicalDate={latestRun.logical_date}
- runAfter={latestRun.run_after}
- startDate={latestRun.start_date}
- state={latestRun.state}
- />
- ) : undefined}
- </Stat>
- <Stat label="Next Run">
- {Boolean(dagWithRuns?.next_dagrun_run_after) ? (
- <DagRunInfo
- logicalDate={dagWithRuns?.next_dagrun_logical_date}
- runAfter={dagWithRuns?.next_dagrun_run_after as string}
- />
- ) : undefined}
- </Stat>
- <div />
- <div />
- </SimpleGrid>
- </Box>
- <Flex
- alignItems="center"
- bg="bg.muted"
- borderTopColor="border"
- borderTopWidth={1}
- color="fg.subtle"
- fontSize="sm"
- justifyContent="space-between"
- px={2}
- py={1}
- >
- <Text>Owner: {dag?.owners.join(", ")}</Text>
- <DagTags tags={dag?.tags ?? []} />
- </Flex>
- </Box>
+ <ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
+ <MenuButton dag={dag} />
+ </>
+ )
+ }
+ icon={<DagIcon />}
+ isRefreshing={isRefreshing}
+ stats={stats}
+ subTitle={
+ dag !== undefined && (
+ <TogglePause dagDisplayName={dag.dag_display_name}
dagId={dag.dag_id} isPaused={dag.is_paused} />
+ )
+ }
+ title={dag?.dag_display_name ?? dagId}
+ />
);
};
diff --git a/airflow/ui/src/pages/Run/Header.tsx
b/airflow/ui/src/pages/Run/Header.tsx
index 493b2d43d3d..f145ec8ff08 100644
--- a/airflow/ui/src/pages/Run/Header.tsx
+++ b/airflow/ui/src/pages/Run/Header.tsx
@@ -16,16 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack, SimpleGrid, Spinner, Text } from
"@chakra-ui/react";
+import { HStack, Text } from "@chakra-ui/react";
import { FiBarChart, FiMessageSquare } from "react-icons/fi";
import type { DAGRunResponse } from "openapi/requests/types.gen";
import { ClearRunButton } from "src/components/Clear";
import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { HeaderCard } from "src/components/HeaderCard";
import { MarkRunAsButton } from "src/components/MarkAs";
import { RunTypeIcon } from "src/components/RunTypeIcon";
-import { Stat } from "src/components/Stat";
-import { StateBadge } from "src/components/StateBadge";
import Time from "src/components/Time";
import { getDuration } from "src/utils";
@@ -36,18 +35,9 @@ export const Header = ({
readonly dagRun: DAGRunResponse;
readonly isRefreshing?: boolean;
}) => (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Flex alignItems="center" justifyContent="space-between" mb={2}>
- <HStack alignItems="center" gap={2}>
- <FiBarChart size="1.75rem" />
- <Heading size="lg">
- <strong>Run: </strong>
- {dagRun.dag_run_id}
- </Heading>
- <StateBadge state={dagRun.state}>{dagRun.state}</StateBadge>
- {isRefreshing ? <Spinner /> : <div />}
- </HStack>
- <HStack>
+ <HeaderCard
+ actions={
+ <>
{dagRun.note === null || dagRun.note.length === 0 ? undefined : (
<DisplayMarkdownButton
header="Dag Run Note"
@@ -58,22 +48,33 @@ export const Header = ({
)}
<ClearRunButton dagRun={dagRun} />
<MarkRunAsButton dagRun={dagRun} />
- </HStack>
- </Flex>
- <SimpleGrid columns={4} gap={4}>
- <Stat label="Run Type">
- <HStack>
- <RunTypeIcon runType={dagRun.run_type} />
- <Text>{dagRun.run_type}</Text>
- </HStack>
- </Stat>
- <Stat label="Start">
- <Time datetime={dagRun.start_date} />
- </Stat>
- <Stat label="End">
- <Time datetime={dagRun.end_date} />
- </Stat>
- <Stat label="Duration">{getDuration(dagRun.start_date,
dagRun.end_date)}s</Stat>
- </SimpleGrid>
- </Box>
+ </>
+ }
+ icon={<FiBarChart />}
+ isRefreshing={isRefreshing}
+ state={dagRun.state}
+ stats={[
+ ...(dagRun.logical_date === null
+ ? []
+ : [
+ {
+ label: "Logical Date",
+ value: <Time datetime={dagRun.logical_date} />,
+ },
+ ]),
+ {
+ label: "Run Type",
+ value: (
+ <HStack>
+ <RunTypeIcon runType={dagRun.run_type} />
+ <Text>{dagRun.run_type}</Text>
+ </HStack>
+ ),
+ },
+ { label: "Start", value: <Time datetime={dagRun.start_date} /> },
+ { label: "End", value: <Time datetime={dagRun.end_date} /> },
+ { label: "Duration", value: `${getDuration(dagRun.start_date,
dagRun.end_date)}s` },
+ ]}
+ title={<Time datetime={dagRun.run_after} />}
+ />
);
diff --git a/airflow/ui/src/pages/Run/Run.tsx b/airflow/ui/src/pages/Run/Run.tsx
index 6689ca1a7ad..04ffb61cd89 100644
--- a/airflow/ui/src/pages/Run/Run.tsx
+++ b/airflow/ui/src/pages/Run/Run.tsx
@@ -16,21 +16,22 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink } from "react-router-dom";
+import { ReactFlowProvider } from "@xyflow/react";
+import { FiCode } from "react-icons/fi";
+import { MdDetails, MdOutlineEventNote, MdOutlineTask } from "react-icons/md";
+import { useParams } from "react-router-dom";
import { useDagRunServiceGetDagRun, useDagServiceGetDagDetails } from
"openapi/queries";
-import { Breadcrumb } from "src/components/ui";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { isStatePending, useAutoRefresh } from "src/utils";
import { Header } from "./Header";
const tabs = [
- { label: "Task Instances", value: "" },
- { label: "Events", value: "events" },
- { label: "Code", value: "code" },
- { label: "Details", value: "details" },
+ { icon: <MdOutlineTask />, label: "Task Instances", value: "" },
+ { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+ { icon: <FiCode />, label: "Code", value: "code" },
+ { icon: <MdDetails />, label: "Details", value: "details" },
];
export const Run = () => {
@@ -62,22 +63,15 @@ export const Run = () => {
);
return (
- <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading ||
isLoadinDag} tabs={tabs}>
- <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
- <Breadcrumb.Link asChild color="fg.info">
- <RouterLink to="/dags">Dags</RouterLink>
- </Breadcrumb.Link>
- <Breadcrumb.Link asChild color="fg.info">
- <RouterLink to={`/dags/${dagId}`}>{dag?.dag_display_name ??
dagId}</RouterLink>
- </Breadcrumb.Link>
- <Breadcrumb.CurrentLink>{runId}</Breadcrumb.CurrentLink>
- </Breadcrumb.Root>
- {dagRun === undefined ? undefined : (
- <Header
- dagRun={dagRun}
- isRefreshing={Boolean(isStatePending(dagRun.state) &&
Boolean(refetchInterval))}
- />
- )}
- </DetailsLayout>
+ <ReactFlowProvider>
+ <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading
|| isLoadinDag} tabs={tabs}>
+ {dagRun === undefined ? undefined : (
+ <Header
+ dagRun={dagRun}
+ isRefreshing={Boolean(isStatePending(dagRun.state) &&
Boolean(refetchInterval))}
+ />
+ )}
+ </DetailsLayout>
+ </ReactFlowProvider>
);
};
diff --git a/airflow/ui/src/pages/Task/Header.tsx
b/airflow/ui/src/pages/Task/Header.tsx
index e0c4ee419ff..e90793c2f12 100644
--- a/airflow/ui/src/pages/Task/Header.tsx
+++ b/airflow/ui/src/pages/Task/Header.tsx
@@ -16,44 +16,30 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack, SimpleGrid, Text } from
"@chakra-ui/react";
import { FiBookOpen } from "react-icons/fi";
import type { TaskResponse } from "openapi/requests/types.gen";
import { TaskIcon } from "src/assets/TaskIcon";
import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
-import { Stat } from "src/components/Stat";
+import { HeaderCard } from "src/components/HeaderCard";
export const Header = ({ task }: { readonly task: TaskResponse }) => (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Flex alignItems="center" justifyContent="space-between" mb={2}>
- <HStack alignItems="center" gap={2}>
- <TaskIcon height={8} width={8} />
- <Heading size="lg">
- <strong>Task: </strong>
- {task.task_display_name}
- {task.is_mapped ? "[ ]" : ""}
- </Heading>
- <Flex>
- <div />
- </Flex>
- </HStack>
- {task.doc_md === null ? undefined : (
+ <HeaderCard
+ actions={
+ task.doc_md === null ? undefined : (
<DisplayMarkdownButton
header="Task Documentation"
icon={<FiBookOpen />}
mdContent={task.doc_md}
text="Task Docs"
/>
- )}
- </Flex>
- <SimpleGrid columns={4} gap={4}>
- <Stat label="Operator">
- <Text>{task.operator_name}</Text>
- </Stat>
- <Stat label="Trigger Rule">
- <Text>{task.trigger_rule}</Text>
- </Stat>
- </SimpleGrid>
- </Box>
+ )
+ }
+ icon={<TaskIcon />}
+ stats={[
+ { label: "Operator", value: task.operator_name },
+ { label: "Trigger Rule", value: task.trigger_rule },
+ ]}
+ title={`${task.task_display_name}${task.is_mapped ? " [ ]" : ""}`}
+ />
);
diff --git a/airflow/ui/src/pages/Task/Task.tsx
b/airflow/ui/src/pages/Task/Task.tsx
index f5ad5f16535..44da8f8368b 100644
--- a/airflow/ui/src/pages/Task/Task.tsx
+++ b/airflow/ui/src/pages/Task/Task.tsx
@@ -16,19 +16,20 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink } from "react-router-dom";
+import { ReactFlowProvider } from "@xyflow/react";
+import { LuChartColumn } from "react-icons/lu";
+import { MdOutlineEventNote, MdOutlineTask } from "react-icons/md";
+import { useParams } from "react-router-dom";
import { useDagServiceGetDagDetails, useTaskServiceGetTask } from
"openapi/queries";
-import { Breadcrumb } from "src/components/ui";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { Header } from "./Header";
const tabs = [
- { label: "Overview", value: "" },
- { label: "Task Instances", value: "task_instances" },
- { label: "Events", value: "events" },
+ { icon: <LuChartColumn />, label: "Overview", value: "" },
+ { icon: <MdOutlineTask />, label: "Task Instances", value: "task_instances"
},
+ { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
];
export const Task = () => {
@@ -44,32 +45,11 @@ export const Task = () => {
dagId,
});
- const links = [
- { label: "Dags", value: "/dags" },
- { label: dag?.dag_display_name ?? dagId, value: `/dags/${dagId}` },
- { label: task?.task_display_name ?? taskId },
- ];
-
return (
- <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading ||
isDagLoading} tabs={tabs}>
- <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
- {links.map((link, index) => {
- if (index === links.length - 1) {
- return <Breadcrumb.CurrentLink
key={link.label}>{link.label}</Breadcrumb.CurrentLink>;
- }
-
- return link.value === undefined ? (
- <Breadcrumb.Link color="fg.info" key={link.label}>
- {link.label}
- </Breadcrumb.Link>
- ) : (
- <Breadcrumb.Link asChild color="fg.info" key={link.label}>
- <RouterLink to={link.value}>{link.label}</RouterLink>
- </Breadcrumb.Link>
- );
- })}
- </Breadcrumb.Root>
- {task === undefined ? undefined : <Header task={task} />}
- </DetailsLayout>
+ <ReactFlowProvider>
+ <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading
|| isDagLoading} tabs={tabs}>
+ {task === undefined ? undefined : <Header task={task} />}
+ </DetailsLayout>
+ </ReactFlowProvider>
);
};
diff --git a/airflow/ui/src/pages/TaskInstance/Header.tsx
b/airflow/ui/src/pages/TaskInstance/Header.tsx
index bf1784983ee..ce72b3ecc3e 100644
--- a/airflow/ui/src/pages/TaskInstance/Header.tsx
+++ b/airflow/ui/src/pages/TaskInstance/Header.tsx
@@ -16,18 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack, SimpleGrid, Spinner } from
"@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
+import { useRef } from "react";
import { FiMessageSquare } from "react-icons/fi";
import { MdOutlineTask } from "react-icons/md";
import type { TaskInstanceResponse } from "openapi/requests/types.gen";
import { ClearTaskInstanceButton } from "src/components/Clear";
import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { HeaderCard } from "src/components/HeaderCard";
import { MarkTaskInstanceAsButton } from "src/components/MarkAs";
-import { Stat } from "src/components/Stat";
-import { StateBadge } from "src/components/StateBadge";
import Time from "src/components/Time";
-import { getDuration } from "src/utils";
+import { getDuration, useContainerWidth } from "src/utils";
export const Header = ({
isRefreshing,
@@ -35,47 +35,46 @@ export const Header = ({
}: {
readonly isRefreshing?: boolean;
readonly taskInstance: TaskInstanceResponse;
-}) => (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Flex alignItems="center" justifyContent="space-between" mb={2}>
- <HStack alignItems="center" gap={2}>
- <MdOutlineTask size="1.75rem" />
- <Heading size="lg">
- <strong>Task Instance: </strong>
- {taskInstance.task_display_name} <Time
datetime={taskInstance.start_date} />
- </Heading>
- <StateBadge
state={taskInstance.state}>{taskInstance.state}</StateBadge>
- {isRefreshing ? <Spinner /> : <div />}
- </HStack>
- <HStack>
- {taskInstance.note === null || taskInstance.note.length === 0 ?
undefined : (
- <DisplayMarkdownButton
- header="Task Instance Note"
- icon={<FiMessageSquare color="black" />}
- mdContent={taskInstance.note}
- text="Note"
- />
- )}
- <ClearTaskInstanceButton taskInstance={taskInstance} />
- <MarkTaskInstanceAsButton taskInstance={taskInstance} />
- </HStack>
- </Flex>
- <SimpleGrid columns={6} gap={4} my={2}>
- <Stat label="Operator">{taskInstance.operator}</Stat>
- {taskInstance.map_index > -1 ? (
- <Stat label="Map Index">{taskInstance.rendered_map_index}</Stat>
- ) : undefined}
- {taskInstance.try_number > 1 ? <Stat label="Try
Number">{taskInstance.try_number}</Stat> : undefined}
- <Stat label="Start">
- <Time datetime={taskInstance.start_date} />
- </Stat>
- <Stat label="End">
- <Time datetime={taskInstance.end_date} />
- </Stat>
- <Stat label="Duration">{getDuration(taskInstance.start_date,
taskInstance.end_date)}s</Stat>
- {taskInstance.dag_version?.version_number !== undefined && (
- <Stat label="Dag
Version">{`v${taskInstance.dag_version.version_number}`}</Stat>
- )}
- </SimpleGrid>
- </Box>
-);
+}) => {
+ const containerRef = useRef<HTMLDivElement>();
+ const containerWidth = useContainerWidth(containerRef);
+
+ const stats = [
+ { label: "Operator", value: taskInstance.operator },
+ ...(taskInstance.map_index > -1 ? [{ label: "Map Index", value:
taskInstance.rendered_map_index }] : []),
+ ...(taskInstance.try_number > 1 ? [{ label: "Try Number", value:
taskInstance.try_number }] : []),
+ { label: "Start", value: <Time datetime={taskInstance.start_date} /> },
+ { label: "End", value: <Time datetime={taskInstance.end_date} /> },
+ { label: "Duration", value: `${getDuration(taskInstance.start_date,
taskInstance.end_date)}s` },
+ ...(taskInstance.dag_version?.version_number === undefined
+ ? []
+ : [{ label: "Dag Version", value:
`v${taskInstance.dag_version.version_number}` }]),
+ ];
+
+ return (
+ <Box ref={containerRef}>
+ <HeaderCard
+ actions={
+ <>
+ {taskInstance.note === null || taskInstance.note.length === 0 ?
undefined : (
+ <DisplayMarkdownButton
+ header="Task Instance Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={taskInstance.note}
+ text="Note"
+ />
+ )}
+ <ClearTaskInstanceButton taskInstance={taskInstance}
withText={containerWidth > 700} />
+ <MarkTaskInstanceAsButton taskInstance={taskInstance}
withText={containerWidth > 700} />
+ </>
+ }
+ icon={<MdOutlineTask />}
+ isRefreshing={isRefreshing}
+ state={taskInstance.state}
+ stats={stats}
+ subTitle={<Time datetime={taskInstance.start_date} />}
+ title={`${taskInstance.task_display_name}${taskInstance.map_index > -1
? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}
+ />
+ </Box>
+ );
+};
diff --git a/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
b/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
index 5fef04c0c28..bcda0736dd1 100644
--- a/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
+++ b/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
@@ -16,23 +16,25 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { LiaSlashSolid } from "react-icons/lia";
-import { useParams, Link as RouterLink, useSearchParams } from
"react-router-dom";
+import { ReactFlowProvider } from "@xyflow/react";
+import { FiCode } from "react-icons/fi";
+import { MdDetails, MdOutlineEventNote, MdReorder, MdSyncAlt } from
"react-icons/md";
+import { PiBracketsCurlyBold } from "react-icons/pi";
+import { useParams, useSearchParams } from "react-router-dom";
import { useDagServiceGetDagDetails,
useTaskInstanceServiceGetMappedTaskInstance } from "openapi/queries";
-import { Breadcrumb } from "src/components/ui";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { isStatePending, useAutoRefresh } from "src/utils";
import { Header } from "./Header";
const tabs = [
- { label: "Logs", value: "" },
- { label: "Events", value: "events" },
- { label: "XCom", value: "xcom" },
- { label: "Code", value: "code" },
- { label: "Details", value: "details" },
- { label: "Rendered Templates", value: "rendered_templates" },
+ { icon: <MdReorder />, label: "Logs", value: "" },
+ { icon: <PiBracketsCurlyBold />, label: "Rendered Templates", value:
"rendered_templates" },
+ { icon: <MdSyncAlt />, label: "XCom", value: "xcom" },
+ { icon: <MdOutlineEventNote />, label: "Events", value: "events" },
+ { icon: <FiCode />, label: "Code", value: "code" },
+ { icon: <MdDetails />, label: "Details", value: "details" },
];
export const TaskInstance = () => {
@@ -69,42 +71,16 @@ export const TaskInstance = () => {
},
);
- const links = [
- { label: "Dags", value: "/dags" },
- { label: dag?.dag_display_name ?? dagId, value: `/dags/${dagId}` },
- { label: runId, value: `/dags/${dagId}/runs/${runId}` },
- { label: taskInstance?.task_display_name ?? taskId },
- ];
-
- if (mapIndexParam !== null) {
- links.push({ label: taskInstance?.rendered_map_index ?? mapIndexParam });
- }
-
return (
- <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading ||
isDagLoading} tabs={tabs}>
- <Breadcrumb.Root mb={3} separator={<LiaSlashSolid />}>
- {links.map((link, index) => {
- if (index === links.length - 1) {
- return <Breadcrumb.CurrentLink
key={link.label}>{link.label}</Breadcrumb.CurrentLink>;
- }
-
- return link.value === undefined ? (
- <Breadcrumb.Link color="fg.info" key={link.label}>
- {link.label}
- </Breadcrumb.Link>
- ) : (
- <Breadcrumb.Link asChild color="fg.info" key={link.label}>
- <RouterLink to={link.value}>{link.label}</RouterLink>
- </Breadcrumb.Link>
- );
- })}
- </Breadcrumb.Root>
- {taskInstance === undefined ? undefined : (
- <Header
- isRefreshing={Boolean(isStatePending(taskInstance.state) &&
Boolean(refetchInterval))}
- taskInstance={taskInstance}
- />
- )}
- </DetailsLayout>
+ <ReactFlowProvider>
+ <DetailsLayout dag={dag} error={error ?? dagError} isLoading={isLoading
|| isDagLoading} tabs={tabs}>
+ {taskInstance === undefined ? undefined : (
+ <Header
+ isRefreshing={Boolean(isStatePending(taskInstance.state) &&
Boolean(refetchInterval))}
+ taskInstance={taskInstance}
+ />
+ )}
+ </DetailsLayout>
+ </ReactFlowProvider>
);
};
diff --git a/airflow/ui/src/pages/TaskInstances.tsx
b/airflow/ui/src/pages/TaskInstances.tsx
index 12559de5f1a..20dff17bb2e 100644
--- a/airflow/ui/src/pages/TaskInstances.tsx
+++ b/airflow/ui/src/pages/TaskInstances.tsx
@@ -31,6 +31,7 @@ import { MarkTaskInstanceAsButton } from
"src/components/MarkAs";
import { SearchBar } from "src/components/SearchBar";
import { StateBadge } from "src/components/StateBadge";
import Time from "src/components/Time";
+import { TruncatedText } from "src/components/TruncatedText";
import { Select } from "src/components/ui";
import { SearchParamsKeys, type SearchParamsKeysType } from
"src/constants/searchParams";
import { taskInstanceStateOptions as stateOptions } from
"src/constants/stateOptions";
@@ -79,7 +80,9 @@ const taskInstanceColumns = (
accessorKey: "task_display_name",
cell: ({ row: { original } }: TaskInstanceRow) => (
<Link asChild color="fg.info" fontWeight="bold">
- <RouterLink
to={getTaskInstanceLink(original)}>{original.task_display_name}</RouterLink>
+ <RouterLink to={getTaskInstanceLink(original)}>
+ <TruncatedText text={original.task_display_name} />
+ </RouterLink>
</Link>
),
enableSorting: false,
@@ -109,7 +112,6 @@ const taskInstanceColumns = (
accessorKey: "rendered_map_index",
header: "Map Index",
},
-
{
accessorKey: "try_number",
enableSorting: false,
diff --git a/airflow/ui/src/queries/useClearRun.ts
b/airflow/ui/src/queries/useClearRun.ts
index 02cb4926bb6..1c7a80d2a99 100644
--- a/airflow/ui/src/queries/useClearRun.ts
+++ b/airflow/ui/src/queries/useClearRun.ts
@@ -23,6 +23,7 @@ import {
UseDagRunServiceGetDagRunKeyFn,
useDagRunServiceGetDagRunsKey,
UseDagServiceGetDagDetailsKeyFn,
+ UseGridServiceGridDataKeyFn,
useTaskInstanceServiceGetTaskInstancesKey,
} from "openapi/queries";
import { toaster } from "src/components/ui";
@@ -55,6 +56,7 @@ export const useClearDagRun = ({
UseDagRunServiceGetDagRunKeyFn({ dagId, dagRunId }),
[useDagRunServiceGetDagRunsKey],
[useClearDagRunDryRunKey, dagId],
+ UseGridServiceGridDataKeyFn({ dagId }, [{ dagId }]),
];
await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries({
queryKey: key })));
diff --git a/airflow/ui/src/queries/useClearTaskInstances.ts
b/airflow/ui/src/queries/useClearTaskInstances.ts
index 8082483586f..e5a4f3e745d 100644
--- a/airflow/ui/src/queries/useClearTaskInstances.ts
+++ b/airflow/ui/src/queries/useClearTaskInstances.ts
@@ -21,6 +21,7 @@ import { useQueryClient } from "@tanstack/react-query";
import {
UseDagRunServiceGetDagRunKeyFn,
useDagRunServiceGetDagRunsKey,
+ UseGridServiceGridDataKeyFn,
UseTaskInstanceServiceGetMappedTaskInstanceKeyFn,
useTaskInstanceServicePostClearTaskInstances,
} from "openapi/queries";
@@ -81,6 +82,7 @@ export const useClearTaskInstances = ({
[useDagRunServiceGetDagRunsKey],
[useClearTaskInstancesDryRunKey, dagId],
[usePatchTaskInstanceDryRunKey, dagId, dagRunId],
+ UseGridServiceGridDataKeyFn({ dagId }, [{ dagId }]),
];
await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries({
queryKey: key })));
diff --git a/airflow/ui/src/queries/usePatchDagRun.ts
b/airflow/ui/src/queries/usePatchDagRun.ts
index 0ed16f5ecab..6ca008b6dc1 100644
--- a/airflow/ui/src/queries/usePatchDagRun.ts
+++ b/airflow/ui/src/queries/usePatchDagRun.ts
@@ -22,6 +22,7 @@ import {
UseDagRunServiceGetDagRunKeyFn,
useDagRunServiceGetDagRunsKey,
useDagRunServicePatchDagRun,
+ UseGridServiceGridDataKeyFn,
useTaskInstanceServiceGetTaskInstancesKey,
} from "openapi/queries";
import { toaster } from "src/components/ui";
@@ -53,6 +54,7 @@ export const usePatchDagRun = ({
[useDagRunServiceGetDagRunsKey],
[useTaskInstanceServiceGetTaskInstancesKey, { dagId, dagRunId }],
[useClearDagRunDryRunKey, dagId],
+ UseGridServiceGridDataKeyFn({ dagId }, [{ dagId }]),
];
await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries({
queryKey: key })));
diff --git a/airflow/ui/src/queries/usePatchTaskInstance.ts
b/airflow/ui/src/queries/usePatchTaskInstance.ts
index 90cbc5ef0c8..8cd6a7c36cb 100644
--- a/airflow/ui/src/queries/usePatchTaskInstance.ts
+++ b/airflow/ui/src/queries/usePatchTaskInstance.ts
@@ -19,6 +19,7 @@
import { useQueryClient } from "@tanstack/react-query";
import {
+ UseGridServiceGridDataKeyFn,
UseTaskInstanceServiceGetMappedTaskInstanceKeyFn,
UseTaskInstanceServiceGetTaskInstanceKeyFn,
useTaskInstanceServiceGetTaskInstancesKey,
@@ -59,6 +60,7 @@ export const usePatchTaskInstance = ({
[useTaskInstanceServiceGetTaskInstancesKey],
[usePatchTaskInstanceDryRunKey, dagId, dagRunId, { mapIndex, taskId }],
[useClearTaskInstancesDryRunKey, dagId],
+ UseGridServiceGridDataKeyFn({ dagId }, [{ dagId }]),
];
await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries({
queryKey: key })));
diff --git a/airflow/ui/src/queries/useTrigger.ts
b/airflow/ui/src/queries/useTrigger.ts
index 6d93383ff3c..a9aaf9f099d 100644
--- a/airflow/ui/src/queries/useTrigger.ts
+++ b/airflow/ui/src/queries/useTrigger.ts
@@ -24,6 +24,7 @@ import {
useDagRunServiceTriggerDagRun,
useDagServiceGetDagsKey,
useDagsServiceRecentDagRunsKey,
+ UseGridServiceGridDataKeyFn,
UseTaskInstanceServiceGetTaskInstancesKeyFn,
} from "openapi/queries";
import type { DagRunTriggerParams } from
"src/components/TriggerDag/TriggerDAGForm";
@@ -39,6 +40,7 @@ export const useTrigger = ({ dagId, onSuccessConfirm }: {
dagId: string; onSucce
[useDagsServiceRecentDagRunsKey],
UseDagRunServiceGetDagRunsKeyFn({ dagId }, [{ dagId }]),
UseTaskInstanceServiceGetTaskInstancesKeyFn({ dagId, dagRunId: "~" }, [{
dagId, dagRunId: "~" }]),
+ UseGridServiceGridDataKeyFn({ dagId }, [{ dagId }]),
];
await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries({
queryKey: key })));
diff --git a/airflow/ui/src/utils/index.ts b/airflow/ui/src/utils/index.ts
index 632d24b3f45..03268cfd503 100644
--- a/airflow/ui/src/utils/index.ts
+++ b/airflow/ui/src/utils/index.ts
@@ -21,4 +21,5 @@ export { capitalize } from "./capitalize";
export { pluralize } from "./pluralize";
export { getDuration } from "./datetime_utils";
export { getMetaKey } from "./getMetaKey";
+export { useContainerWidth } from "./useContainerWidth";
export * from "./query";
diff --git a/airflow/ui/src/components/Stat.tsx
b/airflow/ui/src/utils/useContainerWidth.ts
similarity index 58%
copy from airflow/ui/src/components/Stat.tsx
copy to airflow/ui/src/utils/useContainerWidth.ts
index 7f39a092ea2..dce0254d7a0 100644
--- a/airflow/ui/src/components/Stat.tsx
+++ b/airflow/ui/src/utils/useContainerWidth.ts
@@ -16,18 +16,28 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Heading, VStack } from "@chakra-ui/react";
-import type { PropsWithChildren } from "react";
+import { type MutableRefObject, useEffect, useState } from "react";
-type Props = {
- readonly label: string;
-} & PropsWithChildren;
+export const useContainerWidth = (ref: MutableRefObject<HTMLDivElement | null
| undefined>) => {
+ const [width, setWidth] = useState(0);
-export const Stat = ({ children, label }: Props) => (
- <VStack align="flex-start" gap={1}>
- <Heading color="fg.muted" fontSize="xs">
- {label}
- </Heading>
- {children}
- </VStack>
-);
+ useEffect(() => {
+ if (!ref.current) {
+ return undefined;
+ }
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ setWidth(entry.contentRect.width);
+ }
+ });
+
+ resizeObserver.observe(ref.current);
+
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, [ref]);
+
+ return width;
+};
