[dashboard] Improve benchmark timeline view

apps/code-infra-dashboard/src/components/DailyBundleSizeChart.tsx

@@ -8,16 +8,16 @@ import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import { LineChart } from '@mui/x-charts-pro/LineChart';
 import { byteSizeFormatter } from './SizeChangeDisplay';
-import { useDailyCommits } from '../hooks/useDailyCommits';
+import { useMasterCommits, type GitHubCommit } from '../hooks/useMasterCommits';
 import { useCiReports } from '../hooks/useCiReports';
 import ErrorDisplay from './ErrorDisplay';
 import { CHART_COLORS } from './chartColors';
 
 type SizeSnapshot = Record<string, { parsed: number; gzip: number }>;
 
 interface DailyCommitData {
-  date: string;
-  commit: ReturnType<typeof useDailyCommits>['dailyCommits'][number]['commit'];
+  timestamp: number;
+  commit: GitHubCommit;
   snapshot: SizeSnapshot | null;
 }
 
@@ -74,7 +74,7 @@ function transformDataForChart(
     return { dates: [], series: [] };
   }
 
-  const dates = dailyData.map(({ date }) => new Date(date));
+  const dates = dailyData.map(({ timestamp }) => new Date(timestamp));
 
   const series = allBundles.map((bundleName, index) => ({
     label: bundleName,
@@ -91,22 +91,18 @@ function transformDataForChart(
 }
 
 export default function DailyBundleSizeChart({ repo }: DailyBundleSizeChartProps) {
-  const { dailyCommits, isLoading, isFetchingNextPage, hasNextPage, error, fetchNextPage } =
-    useDailyCommits(repo);
-  const { reports, isLoading: reportsLoading } = useCiReports(
-    repo,
-    dailyCommits,
-    'size-snapshot.json',
-  );
+  const { commits, isLoading, isFetchingNextPage, hasNextPage, error, fetchNextPage } =
+    useMasterCommits(repo, { groupByDay: true });
+  const { reports, isLoading: reportsLoading } = useCiReports(repo, commits, 'size-snapshot.json');
 
   const dailyData: DailyCommitData[] = React.useMemo(
     () =>
-      dailyCommits.map(({ date, commit }) => ({
-        date,
+      commits.map(({ timestamp, commit }) => ({
+        timestamp,
         commit,
         snapshot: reports[commit.sha] ?? null,
       })),
-    [dailyCommits, reports],
+    [commits, reports],
   );
 
   const [selectedBundles, setSelectedBundles] = React.useState<string[]>([]);
@@ -225,13 +221,11 @@ export default function DailyBundleSizeChart({ repo }: DailyBundleSizeChartProps
                     if (context.location === 'tick') {
                       return date.toLocaleDateString();
                     }
-                    // For tooltip, find the corresponding commit data
-                    const dateString = date.toISOString().split('T')[0];
-                    const dataPoint = dailyData.find((d) => d.date === dateString);
+                    const dataPoint = dailyData.find((item) => item.timestamp === date.getTime());
                     const commitSha = dataPoint?.commit?.sha?.substring(0, 7) || '';
                     return commitSha
-                      ? `${date.toLocaleDateString()} (${commitSha})`
-                      : date.toLocaleDateString();
+                      ? `${date.toLocaleString()} (${commitSha})`
+                      : date.toLocaleString();
                   },
                 },
               ]}

apps/code-infra-dashboard/src/components/NpmDownloadsChart.tsx

@@ -411,7 +411,11 @@ const DownloadsLineChart = React.memo(function DownloadsLineChart({
       ]}
       loading={showLoading}
       height={400}
-      highlightedItem={hoveredIndex !== null ? { seriesId: packages[hoveredIndex] } : null}
+      highlightedItem={
+        hoveredIndex !== null && series.some((s) => s.id === packages[hoveredIndex])
+          ? { seriesId: packages[hoveredIndex] }
+          : null
+      }
       onHighlightChange={handleHighlightChange}
       slots={{ line: LineWithHitArea }}
       hideLegend

apps/code-infra-dashboard/src/components/chartColors.ts

@@ -1,10 +1,12 @@
 export const CHART_COLORS = [
-  '#1976d2', // Blue
-  '#d32f2f', // Red
-  '#2e7d32', // Green
-  '#ed6c02', // Orange
-  '#9c27b0', // Purple
-  '#00796b', // Teal
-  '#f57c00', // Amber
-  '#5d4037', // Brown
+  '#4e79a7',
+  '#f28e2b',
+  '#76b7b2',
+  '#59a14f',
+  '#edc948',
+  '#b07aa1',
+  '#ff9da7',
+  '#9c755f',
+  '#bab0ac',
+  '#e15759',
 ];

apps/code-infra-dashboard/src/hooks/useBaseSha.ts

@@ -0,0 +1,40 @@
+import { useSearchParams } from 'next/navigation';
+import { useGitHubPR } from './useGitHubPR';
+import { useCompareCommits } from './useCompareCommits';
+
+/**
+ * Resolves the base SHA for comparison views.
+ * Reads `base` (or legacy `baseCommit`) from search params first;
+ * falls back to computing the merge base via PR info + GitHub compare API.
+ */
+export function useBaseSha(
+  repo: string,
+  sha: string | null,
+): { baseSha: string | null; isLoading: boolean } {
+  const searchParams = useSearchParams();
+  const baseParam = searchParams.get('base') ?? searchParams.get('baseCommit');
+  const prNumberParam = searchParams.get('prNumber');
+  const prNumber = prNumberParam ? parseInt(prNumberParam, 10) : undefined;
+
+  // Hooks must be called unconditionally (React rules of hooks).
+  // We pass `undefined` to disable fetching when the result isn't needed.
+  const { prInfo, isLoading: isPrLoading } = useGitHubPR(repo, !baseParam ? prNumber : undefined);
+  const { compareInfo, isLoading: isCompareLoading } = useCompareCommits(
+    repo,
+    prInfo?.base.ref,
+    sha ?? undefined,
+  );
+
+  if (baseParam) {
+    return { baseSha: baseParam, isLoading: false };
+  }
+
+  if (prNumber) {
+    return {
+      baseSha: compareInfo?.mergeBase ?? null,
+      isLoading: isPrLoading || isCompareLoading,
+    };
+  }
+
+  return { baseSha: null, isLoading: false };
+}

apps/code-infra-dashboard/src/hooks/useCiReports.ts

@@ -1,14 +1,14 @@
 import { useQueries } from '@tanstack/react-query';
 import { fetchCiReport, type CiReportName, type CiReportTypes } from '@/utils/fetchCiReport';
-import type { DailyCommit } from './useDailyCommits';
+import type { Commit } from './useMasterCommits';
 
 /**
- * Hook to fetch CI reports for a list of daily commits.
+ * Hook to fetch CI reports for a list of commits.
  * Uses `useQueries` so each report is cached independently by SHA.
  */
 export function useCiReports<K extends CiReportName>(
   repo: string,
-  commits: DailyCommit[],
+  commits: Commit[],
   reportName: K,
 ) {
   return useQueries({