feat: add 'View anyway' button for single-date comparison range (#173)

* feat: add 'View anyway' button for single-date comparison range

* fix: deduplicate dates in GPU graph legend for single-date view

Author: adibarra

packages/app/cypress/component/date-range-picker.cy.tsx

@@ -78,4 +78,12 @@ describe('DateRangePicker', () => {
     cy.contains('Select date range').click();
     cy.contains('Only 1 date available').should('be.visible');
   });
+
+  it('view anyway button selects the single available date and closes dialog', () => {
+    cy.mount(<DateRangePickerHarness availableDates={['2026-01-01']} />);
+    cy.contains('Select date range').click();
+    cy.contains('button', 'View anyway').click();
+    cy.get('[role="dialog"]').should('not.exist');
+    cy.get('[data-testid="date-range-output"]').should('contain', '2026-01-01 to 2026-01-01');
+  });
 });

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

@@ -73,11 +73,12 @@ const GPUGraph = React.memo(
         dates.push(selectedDateRange.startDate, selectedDateRange.endDate);
       }
       dates.push(...selectedDates);
-      dates.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+      const deduplicated = [...new Set(dates)];
+      deduplicated.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
       const sortedGPUs = [...selectedGPUs].toSorted(
         (a, b) => getModelSortIndex(a) - getModelSortIndex(b) || a.localeCompare(b),
       );
-      return { dates, sortedGPUs };
+      return { dates: deduplicated, sortedGPUs };
     }, [selectedDateRange, selectedDates, selectedGPUs]);
 
     const graphIdentifiers = useMemo(() => {

packages/app/src/components/ui/date-range-picker.tsx

@@ -70,6 +70,9 @@ export function DateRangePicker({
       return placeholder;
     }
     if (dateRange.startDate && dateRange.endDate) {
+      if (dateRange.startDate === dateRange.endDate) {
+        return formatDisplayDate(dateRange.startDate);
+      }
       return `${formatDisplayDate(dateRange.startDate)} - ${formatDisplayDate(dateRange.endDate)}`;
     }
     if (dateRange.startDate) {
@@ -219,6 +222,19 @@ export function DateRangePicker({
                       Historical comparison requires at least 2 dates. Please change Model, ISL/OSL,
                       or GPU selection.
                     </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="mt-1"
+                      onClick={() => {
+                        const singleDate = availableDates[0];
+                        track('date_range_picker_view_single_date', { date: singleDate });
+                        onChange({ startDate: singleDate, endDate: singleDate });
+                        setOpen(false);
+                      }}
+                    >
+                      View anyway
+                    </Button>
                   </div>
                 </div>
               )}