replace auto-populated changelog dates with opt-in intermediate date picker

Author: adibarra

packages/app/src/components/inference/ui/ChartControls.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/chart-selectors';
 import { DateRangePicker } from '@/components/ui/date-range-picker';
 import { LabelWithTooltip } from '@/components/ui/label-with-tooltip';
+import { MultiDatePicker } from '@/components/ui/multi-date-picker';
 import { MultiSelect } from '@/components/ui/multi-select';
 import {
   Select,
@@ -68,9 +69,14 @@ const GROUPED_Y_AXIS_OPTIONS = (() => {
 interface ChartControlsProps {
   /** Hide GPU Config selector and related date pickers (used by Historical Trends tab) */
   hideGpuComparison?: boolean;
+  /** Intermediate dates within the comparison range that have changelog entries */
+  intermediateDates?: string[];
 }
 
-export default function ChartControls({ hideGpuComparison = false }: ChartControlsProps) {
+export default function ChartControls({
+  hideGpuComparison = false,
+  intermediateDates = [],
+}: ChartControlsProps) {
   const {
     selectedModel,
     setSelectedModel,
@@ -86,6 +92,8 @@ export default function ChartControls({ hideGpuComparison = false }: ChartContro
     availableGPUs,
     selectedDateRange,
     setSelectedDateRange,
+    selectedDates,
+    setSelectedDates,
     dateRangeAvailableDates,
     isCheckingAvailableDates,
     availablePrecisions,
@@ -327,6 +335,32 @@ export default function ChartControls({ hideGpuComparison = false }: ChartContro
               />
             </div>
           )}
+
+          {!hideGpuComparison &&
+            selectedGPUs.length > 0 &&
+            selectedDateRange.startDate &&
+            selectedDateRange.endDate &&
+            intermediateDates.length > 0 && (
+              <div className="flex flex-col space-y-1.5 lg:col-span-2">
+                <LabelWithTooltip
+                  htmlFor="intermediate-dates-select"
+                  label="Intermediate Dates"
+                  tooltip="Select up to 2 additional intermediate dates with config changelog entries. These dates will be added to the chart for comparison alongside the start and end dates."
+                />
+                <MultiDatePicker
+                  dates={selectedDates}
+                  onChange={(value) => {
+                    setSelectedDates(value);
+                    track('inference_intermediate_dates_selected', {
+                      dates: value.join(','),
+                    });
+                  }}
+                  availableDates={intermediateDates}
+                  maxDates={2}
+                  placeholder="Select intermediate dates"
+                />
+              </div>
+            )}
         </div>
       </div>
     </TooltipProvider>

packages/app/src/components/inference/ui/ChartDisplay.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { track } from '@/lib/analytics';
 import Link from 'next/link';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ChevronDown, X } from 'lucide-react';
 
 import { useInference } from '@/components/inference/InferenceContext';
@@ -37,7 +37,6 @@ import {
   Sequence,
 } from '@/lib/data-mappings';
 import { useComparisonChangelogs } from '@/hooks/api/use-comparison-changelogs';
-import { configKeyMatchesHwKey } from '@/components/inference/utils/changelogFormatters';
 import { useTrendData } from '@/components/inference/hooks/useTrendData';
 
 import ChartControls from './ChartControls';
@@ -113,8 +112,6 @@ export default function ChartDisplay() {
     selectedGPUs,
     selectedPrecisions,
     selectedDateRange,
-    setSelectedDates,
-    availableDates,
     dateRangeAvailableDates,
     selectedModel,
     selectedSequence,
@@ -130,49 +127,15 @@ export default function ChartDisplay() {
 
   const {
     changelogs,
+    intermediateDates,
     loading: changelogsLoading,
     totalDatesQueried,
-  } = useComparisonChangelogs(selectedGPUs, selectedDateRange, availableDates);
-
-  // Auto-populate intermediate dates from changelog dates so they appear on the GPU graph
-  const prevChangelogDatesRef = useRef('');
-  useEffect(() => {
-    if (!selectedDateRange.startDate || !selectedDateRange.endDate || selectedGPUs.length === 0)
-      return;
-    const gpuDatesSet = new Set(dateRangeAvailableDates);
-    const precSet = new Set(selectedPrecisions);
-    const changelogDates = changelogs
-      .filter((c) =>
-        c.entries.some((entry) =>
-          entry.config_keys.some((key) => {
-            const precision = key.split('-')[1];
-            return (
-              precSet.has(precision) && selectedGPUs.some((gpu) => configKeyMatchesHwKey(key, gpu))
-            );
-          }),
-        ),
-      )
-      .map((c) => c.date)
-      .filter(
-        (d) =>
-          d !== selectedDateRange.startDate &&
-          d !== selectedDateRange.endDate &&
-          gpuDatesSet.has(d),
-      )
-      .sort();
-    const key = changelogDates.join(',');
-    if (key !== prevChangelogDatesRef.current) {
-      prevChangelogDatesRef.current = key;
-      setSelectedDates(changelogDates);
-    }
-  }, [
-    changelogs,
-    selectedDateRange,
+  } = useComparisonChangelogs(
     selectedGPUs,
     selectedPrecisions,
-    setSelectedDates,
+    selectedDateRange,
     dateRangeAvailableDates,
-  ]);
+  );
 
   const { unofficialRunInfo, getOverlayData, isUnofficialRun } = useUnofficialRun();
 
@@ -705,7 +668,7 @@ export default function ChartDisplay() {
                 <SocialShareButtons compact className="hidden sm:flex" />
               </div>
             </div>
-            <ChartControls />
+            <ChartControls intermediateDates={intermediateDates} />
             <ModelArchitectureDiagram model={selectedModel} />
             {selectedGPUs.length === 0 && <WorkflowInfoDisplay workflowInfo={workflowInfo} />}
             {selectedGPUs.length > 0 &&
@@ -715,7 +678,6 @@ export default function ChartDisplay() {
                   changelogs={changelogs}
                   selectedGPUs={selectedGPUs}
                   selectedPrecisions={selectedPrecisions}
-                  selectedDateRange={selectedDateRange}
                   loading={changelogsLoading}
                   totalDatesQueried={totalDatesQueried}
                 />

packages/app/src/components/inference/ui/ComparisonChangelog.tsx

@@ -17,7 +17,6 @@ interface ComparisonChangelogProps {
   changelogs: ComparisonChangelogType[];
   selectedGPUs: string[];
   selectedPrecisions: string[];
-  selectedDateRange: { startDate: string; endDate: string };
   loading?: boolean;
   totalDatesQueried: number;
 }
@@ -26,7 +25,6 @@ export default function ComparisonChangelog({
   changelogs,
   selectedGPUs,
   selectedPrecisions,
-  selectedDateRange,
   loading,
   totalDatesQueried,
 }: ComparisonChangelogProps) {
@@ -51,20 +49,13 @@ export default function ComparisonChangelog({
       .filter((item) => item.entries.length > 0);
   }, [changelogs, selectedGPUs, selectedPrecisions]);
 
-  // Always include start/end dates, even if they have no changelog entries
-  const sortedChangelogs = useMemo(() => {
-    const byDate = new Map(filteredChangelogs.map((c) => [c.date, c]));
-    const { startDate, endDate } = selectedDateRange;
-    if (startDate && !byDate.has(startDate)) {
-      byDate.set(startDate, { date: startDate, entries: [] });
-    }
-    if (endDate && !byDate.has(endDate)) {
-      byDate.set(endDate, { date: endDate, entries: [] });
-    }
-    return [...byDate.values()].sort(
-      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
-    );
-  }, [filteredChangelogs, selectedDateRange]);
+  const sortedChangelogs = useMemo(
+    () =>
+      [...filteredChangelogs].sort(
+        (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+      ),
+    [filteredChangelogs],
+  );
 
   const handleToggle = () => {
     const newState = !isExpanded;

packages/app/src/hooks/api/use-comparison-changelogs.ts

@@ -2,6 +2,7 @@ import { useQueries } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { fetchWorkflowInfo, type ChangelogRow, type WorkflowInfoResponse } from '@/lib/api';
+import { configKeyMatchesHwKey } from '@/components/inference/utils/changelogFormatters';
 
 export interface ComparisonChangelog {
   date: string;
@@ -16,13 +17,14 @@ export interface ComparisonChangelog {
 
 export function useComparisonChangelogs(
   selectedGPUs: string[],
+  selectedPrecisions: string[],
   selectedDateRange: { startDate: string; endDate: string },
   availableDates: string[],
 ) {
   const isComparisonMode =
     selectedGPUs.length > 0 && !!selectedDateRange.startDate && !!selectedDateRange.endDate;
 
-  // Query all available dates within the selected range
+  // Query all available dates within the selected range to discover which have changelog entries
   const datesInRange = useMemo(() => {
     if (!isComparisonMode) return [];
     return availableDates.filter(
@@ -66,7 +68,37 @@ export function useComparisonChangelogs(
     return results;
   }, [isComparisonMode, datesInRange, queries]);
 
+  // Intermediate dates with changelog entries matching selected GPUs/precisions (excluding start/end)
+  const intermediateDates = useMemo(() => {
+    if (!isComparisonMode) return [];
+    const precSet = new Set(selectedPrecisions);
+    return changelogs
+      .filter(
+        (c) =>
+          c.date !== selectedDateRange.startDate &&
+          c.date !== selectedDateRange.endDate &&
+          c.entries.some((entry) =>
+            entry.config_keys.some((key) => {
+              const precision = key.split('-')[1];
+              return (
+                precSet.has(precision) &&
+                selectedGPUs.some((gpu) => configKeyMatchesHwKey(key, gpu))
+              );
+            }),
+          ),
+      )
+      .map((c) => c.date)
+      .sort();
+  }, [
+    isComparisonMode,
+    changelogs,
+    selectedGPUs,
+    selectedPrecisions,
+    selectedDateRange.startDate,
+    selectedDateRange.endDate,
+  ]);
+
   const loading = queries.some((q) => q.isLoading);
 
-  return { changelogs, loading, totalDatesQueried: datesInRange.length };
+  return { changelogs, intermediateDates, loading, totalDatesQueried: datesInRange.length };
 }