From afc7405593fdc1e971d1feb1eb2808b7cace7246 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 5 Jul 2022 13:02:59 -0400
Subject: [PATCH] improve grid date tick spacing

---
 airflow/www/static/js/grid/dagRuns/Bar.tsx        | 5 +++--
 airflow/www/static/js/grid/dagRuns/index.test.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/airflow/www/static/js/grid/dagRuns/Bar.tsx b/airflow/www/static/js/grid/dagRuns/Bar.tsx
index 7e9b2ef3533fae..660619f5b7278c 100644
--- a/airflow/www/static/js/grid/dagRuns/Bar.tsx
+++ b/airflow/www/static/js/grid/dagRuns/Bar.tsx
@@ -70,8 +70,9 @@ const DagRunBar = ({
   };
 
   // show the tick on the 4th DagRun and then every 10th tick afterwards
-  const shouldShowTick = index === totalRuns - 4
-    || (index < totalRuns - 4 && (index + 4) % 10 === 0);
+  const inverseIndex = totalRuns - index;
+  const shouldShowTick = inverseIndex === 4
+    || (inverseIndex > 4 && (inverseIndex - 4) % 10 === 0);
 
   return (
     <Box
diff --git a/airflow/www/static/js/grid/dagRuns/index.test.tsx b/airflow/www/static/js/grid/dagRuns/index.test.tsx
index 612c96eb27ca9a..c91e15f59f393c 100644
--- a/airflow/www/static/js/grid/dagRuns/index.test.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.test.tsx
@@ -106,7 +106,7 @@ describe('Test DagRuns', () => {
   test('Show 1 date tick when there are less than 14 runs', () => {
     const data = {
       groups: {},
-      dagRuns: generateRuns(8),
+      dagRuns: generateRuns(11),
     };
     const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
       data,