improve grid date tick spacing (#24849)

(cherry picked from commit 6caaf47)
apache · Jul 5, 2022 · eea449e · eea449e
1 parent efc3c67
commit eea449e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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,