This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-1-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 78b28f8c0b05b971f119a692866272decffb9035 Author: Guan Ming(Wesley) Chiu <[email protected]> AuthorDate: Sat Sep 13 02:30:06 2025 +0800 Fix gantt chart rendering issues (#55554) * Update Gantt chart options to enhance animation handling * Update Gantt chart date range calculation to use data-driven values (cherry picked from commit 8844d39ad8ac13335f6a1ae9268eb468892567e7) --- .../airflow/ui/src/layouts/Details/Gantt/utils.ts | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts index 8d87da1364a..d5f937ab42e 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts +++ b/airflow-core/src/airflow/ui/src/layouts/Details/Gantt/utils.ts @@ -93,7 +93,8 @@ export const createChartOptions = ({ translate, }: ChartOptionsParams) => ({ animation: { - duration: 100, + duration: 150, + easing: "linear" as const, }, indexAxis: "y" as const, maintainAspectRatio: false, @@ -108,7 +109,7 @@ export const createChartOptions = ({ plugins: { annotation: { annotations: - selectedId === undefined + selectedId === undefined || selectedId === "" ? [] : [ { @@ -156,8 +157,21 @@ export const createChartOptions = ({ color: gridColor, display: true, }, - max: formatDate(selectedRun?.end_date, selectedTimezone), - min: formatDate(selectedRun?.start_date, selectedTimezone), + max: + data.length > 0 + ? (() => { + const maxTime = Math.max(...data.map((item) => new Date(item.x[1] ?? "").getTime())); + const minTime = Math.min(...data.map((item) => new Date(item.x[0] ?? "").getTime())); + const totalDuration = maxTime - minTime; + + // add 5% to the max time to avoid the last tick being cut off + return maxTime + totalDuration * 0.05; + })() + : formatDate(selectedRun?.end_date, selectedTimezone), + min: + data.length > 0 + ? Math.min(...data.map((item) => new Date(item.x[0] ?? "").getTime())) + : formatDate(selectedRun?.start_date, selectedTimezone), position: "top" as const, stacked: true, ticks: {
