feat(inference): bring back multiselect combo box, fix spacing

Author: rafaykhan-source

packages/app/cypress/component/inference-chart-controls.cy.tsx

@@ -56,7 +56,7 @@ describe('GpuComparisonCard', () => {
     { value: 'h200_sglang', label: 'H200 SGLang' },
   ];
 
-  it('renders two required GPU slots and an Add GPU button; date range disabled', () => {
+  it('renders GPU multiselect; date range disabled until a GPU is selected', () => {
     mountWithProviders(<GpuComparisonCard />, {
       inference: {
         selectedGPUs: [],
@@ -66,11 +66,16 @@ describe('GpuComparisonCard', () => {
 
     cy.get('[data-testid="gpu-comparison-card"]').should('be.visible');
     cy.contains('GPU Comparison').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-1"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-2"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('not.exist');
-    cy.get('[data-testid="gpu-comparison-select-4"]').should('not.exist');
-    cy.get('[data-testid="gpu-comparison-add-slot"]').should('be.visible');
+    cy.contains('Select one or more GPUs for date range comparison.').should('not.exist');
+    cy.get('[data-testid="gpu-comparison-expand-toggle"]').should(
+      'have.attr',
+      'aria-expanded',
+      'false',
+    );
+    cy.get('[data-testid="gpu-comparison-expand-toggle"]').click();
+    cy.contains('Select one or more GPUs for date range comparison.').should('be.visible');
+    cy.get('[data-testid="gpu-multiselect"]').should('be.visible');
+    cy.get('[data-testid="gpu-multiselect-trigger"]').should('be.visible');
     cy.contains('Comparison Date Range').should('be.visible');
     cy.get('#gpu-comparison-date-picker').should('be.disabled');
     cy.get('[data-testid="date-range-shortcuts"]').should('be.visible');
@@ -79,6 +84,20 @@ describe('GpuComparisonCard', () => {
     cy.get('[data-testid="date-shortcut-last-30-days"]').should('be.disabled');
   });
 
+  it('enables date range picker and shortcuts when one GPU is selected', () => {
+    mountWithProviders(<GpuComparisonCard />, {
+      inference: {
+        selectedGPUs: ['h100_sglang'],
+        selectedDateRange: { startDate: '', endDate: '' },
+        availableGPUs: gpuOptions,
+        dateRangeAvailableDates: ['2025-10-05', '2025-11-01', '2025-12-01'],
+      },
+    });
+
+    cy.get('#gpu-comparison-date-picker').should('not.be.disabled');
+    cy.get('[data-testid="date-shortcut-all-time"]').should('not.be.disabled');
+  });
+
   it('shows enabled shortcut buttons that call setSelectedDateRange when two GPUs are selected', () => {
     mountWithProviders(<GpuComparisonCard />, {
       inference: {
@@ -101,7 +120,7 @@ describe('GpuComparisonCard', () => {
     cy.get('@setSelectedDateRange').should('have.been.calledOnce');
   });
 
-  it('shows slot 3 after clicking Add GPU when two GPUs are selected', () => {
+  it('selecting a third GPU from the multiselect calls setSelectedGPUs with three GPUs', () => {
     mountWithProviders(<GpuComparisonCard />, {
       inference: {
         selectedGPUs: ['h100_sglang', 'b200_sglang'],
@@ -111,29 +130,32 @@ describe('GpuComparisonCard', () => {
     });
 
     cy.get('#gpu-comparison-date-picker').should('not.be.disabled');
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('not.exist');
-    cy.get('[data-testid="gpu-comparison-add-slot"]').click();
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-4"]').should('not.exist');
-    cy.get('[data-testid="gpu-comparison-add-slot"]').should('be.visible');
+    cy.get('[data-testid="gpu-multiselect-trigger"]').click();
+    cy.contains('[role="option"]', 'MI300X SGLang').click();
+    cy.get('@setSelectedGPUs').should(
+      'have.been.calledWith',
+      Cypress.sinon.match((v: string[]) => v.length === 3 && v.includes('mi300x_sglang')),
+    );
   });
 
-  it('shows all four slots when mounted with three GPUs and Add GPU clicked', () => {
+  it('shows max-selection summary when four GPUs are selected', () => {
     mountWithProviders(<GpuComparisonCard />, {
       inference: {
-        selectedGPUs: ['h100_sglang', 'b200_sglang', 'mi300x_sglang'],
+        selectedGPUs: ['h100_sglang', 'b200_sglang', 'mi300x_sglang', 'h200_sglang'],
         selectedDateRange: { startDate: '', endDate: '' },
         availableGPUs: gpuOptions,
       },
     });
 
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-add-slot"]').click();
-    cy.get('[data-testid="gpu-comparison-select-4"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-add-slot"]').should('not.exist');
+    // Wait for card expansion, then open the dropdown.
+    // With 4 chips the center of the trigger may land on a chip's remove
+    // button (which stopPropagates), so target the chevron icon instead.
+    cy.get('[data-testid="gpu-multiselect-trigger"]').should('be.visible');
+    cy.get('[data-testid="gpu-multiselect-trigger"] svg').last().click();
+    cy.contains('4 / 4 selected').should('be.visible');
   });
 
-  it('calls setSelectedGPUs without the removed GPU when its X button is clicked', () => {
+  it('calls setSelectedGPUs without the removed GPU when a chip remove control is clicked', () => {
     mountWithProviders(<GpuComparisonCard />, {
       inference: {
         selectedGPUs: ['h100_sglang', 'b200_sglang', 'mi300x_sglang'],
@@ -142,8 +164,7 @@ describe('GpuComparisonCard', () => {
       },
     });
 
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-clear-3"]').click();
+    cy.get('[aria-label="Remove MI300X SGLang"]').click();
     cy.get('@setSelectedGPUs').should(
       'have.been.calledWith',
       Cypress.sinon.match((v: string[]) => v.length === 2 && !v.includes('mi300x_sglang')),

packages/app/cypress/e2e/inference-chart.cy.ts

@@ -1,3 +1,8 @@
+/** Opens dropdown without hitting chip remove controls (they stopPropagation). */
+function openGpuMultiselect() {
+  cy.get('[data-testid="gpu-multiselect-trigger"]').find('svg').last().click();
+}
+
 describe('Inference Chart', () => {
   before(() => {
     cy.window().then((win) => {
@@ -47,7 +52,9 @@ describe('Inference Chart', () => {
   });
 
   it('shows the sidebar legend for GPU types', () => {
-    cy.get('.sidebar-legend').should('be.visible');
+    // GpuComparisonCard sits above charts; first chart legend may be below the fold.
+    cy.get('.sidebar-legend').first().scrollIntoView();
+    cy.get('.sidebar-legend').first().should('be.visible');
   });
 });
 
@@ -61,34 +68,69 @@ describe('GPU Comparison Card', () => {
     cy.get('[data-testid="gpu-comparison-card"]').should('be.visible');
   });
 
-  it('renders the GPU comparison card with two slot selectors', () => {
-    cy.get('[data-testid="gpu-comparison-select-1"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-2"]').should('be.visible');
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('not.exist');
+  it('starts collapsed; expanding shows GPU comparison controls', () => {
+    cy.contains('Select one or more GPUs for date range comparison.').should('not.exist');
+    cy.get('[data-testid="gpu-comparison-expand-toggle"]').should(
+      'have.attr',
+      'aria-expanded',
+      'false',
+    );
+    cy.get('[data-testid="gpu-comparison-expand-toggle"]').click();
+    cy.get('[data-testid="gpu-comparison-expand-toggle"]').should(
+      'have.attr',
+      'aria-expanded',
+      'true',
+    );
+    cy.contains('Select one or more GPUs for date range comparison.').should('be.visible');
+    cy.get('[data-testid="gpu-multiselect-trigger"]').should('be.visible');
   });
 
-  it('shows date range shortcuts that are disabled until two GPUs are selected', () => {
-    cy.get('[data-testid="date-range-shortcuts"]').should('be.visible');
-    cy.get('[data-testid="date-shortcut-all-time"]').should('be.disabled');
-  });
+  describe('when expanded', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="gpu-comparison-expand-toggle"]').click();
+    });
 
-  it('selects two GPUs and verifies date range auto-defaults', () => {
-    cy.get('[data-testid="gpu-comparison-select-1"]').click();
-    cy.get('[role="option"]').first().click();
+    it('renders the GPU comparison card with a single GPU multiselect', () => {
+      cy.get('[data-testid="gpu-multiselect"]').should('be.visible');
+      cy.get('[data-testid="gpu-multiselect-trigger"]').should('be.visible');
+    });
 
-    // Pick the second available option (eq(1)) so the two GPUs come from
-    // different hardware families with distinct dates — picking .first()
-    // can land on the same-base MTP variant that shares a single date,
-    // leaving dateRangeAvailableDates < 2 and "All Time" still disabled.
-    cy.get('[data-testid="gpu-comparison-select-2"]').click();
-    cy.get('[role="option"]').eq(1).click();
+    it('shows date range shortcuts that are disabled until a GPU is selected', () => {
+      cy.get('[data-testid="date-range-shortcuts"]').should('be.visible');
+      cy.get('[data-testid="date-shortcut-all-time"]').should('be.disabled');
+    });
 
-    cy.get('[data-testid="date-shortcut-all-time"]').should('not.be.disabled');
-    cy.get('#gpu-comparison-date-picker').should('not.be.disabled');
-  });
+    it('selects one GPU and verifies date range controls unlock', () => {
+      openGpuMultiselect();
+      cy.get('[role="option"]').first().click();
 
-  it('Add GPU button reveals a third slot', () => {
-    cy.get('[data-testid="gpu-comparison-add-slot"]').should('be.visible').click();
-    cy.get('[data-testid="gpu-comparison-select-3"]').should('be.visible');
+      // "All Time" stays disabled when the selected GPU has only one date in fixtures.
+      cy.get('#gpu-comparison-date-picker').should('not.be.disabled');
+    });
+
+    it('selects two GPUs and verifies date range auto-defaults', () => {
+      openGpuMultiselect();
+      cy.get('[role="option"]').first().click();
+
+      // Pick eq(2) so the second GPU is a different family (e.g. b300) with a
+      // distinct date — eq(1) can be the MTP pair of eq(0) sharing one date.
+      openGpuMultiselect();
+      cy.get('[role="option"]').eq(2).click();
+
+      cy.get('[data-testid="date-shortcut-all-time"]').should('not.be.disabled');
+      cy.get('#gpu-comparison-date-picker').should('not.be.disabled');
+    });
+
+    it('selecting a third GPU adds a third removable chip to the multiselect', () => {
+      openGpuMultiselect();
+      cy.get('[role="option"]').first().click();
+      openGpuMultiselect();
+      cy.get('[role="option"]').eq(1).click();
+      openGpuMultiselect();
+      cy.get('[role="option"]').eq(2).click();
+      cy.get('[data-testid="gpu-multiselect"]')
+        .find('[aria-label^="Remove "]')
+        .should('have.length', 3);
+    });
   });
 });

packages/app/src/components/dashboard-shell.tsx

@@ -11,7 +11,7 @@ export function DashboardShell({ children }: { children: React.ReactNode }) {
       <NudgeEngine scope="dashboard" />
       <UnofficialRunProvider>
         <main className="relative">
-          <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-4">
+          <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-2 md:gap-3">
             <TabNav />
             <GlobalFilterProvider>{children}</GlobalFilterProvider>
           </div>

packages/app/src/components/inference/InferenceContext.tsx

@@ -639,14 +639,14 @@ export function InferenceProvider({
   }, [dateRangeAvailableDates]);
 
   // Auto-default to max date range once when GPU comparison first becomes ready.
-  // Uses a ref to fire only on the transition from <2 GPUs to >=2, avoiding a loop
+  // Uses a ref to fire only on the transition from 0 GPUs to >=1, avoiding a loop
   // when the user intentionally clears the date range.
   const prevGpuCountRef = useRef(selectedGPUs.length);
   useEffect(() => {
-    const wasBelow = prevGpuCountRef.current < 2;
+    const wasBelow = prevGpuCountRef.current < 1;
     prevGpuCountRef.current = selectedGPUs.length;
     if (!wasBelow) return;
-    if (selectedGPUs.length < 2) return;
+    if (selectedGPUs.length === 0) return;
     if (selectedDateRange.startDate && selectedDateRange.endDate) return;
     if (dateRangeAvailableDates.length < 2) return;
     const startDate = dateRangeAvailableDates[0];

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

@@ -147,7 +147,7 @@ export default function ChartDisplay() {
     setSelectedE2eXAxisMetric,
   } = useInference();
 
-  const comparisonReady = useMemo(() => selectedGPUs.length >= 2, [selectedGPUs]);
+  const comparisonReady = useMemo(() => selectedGPUs.length > 0, [selectedGPUs]);
 
   const [viewModes, setViewModes] = useState<Record<number, InferenceViewMode>>({});
   const getViewMode = (index: number): InferenceViewMode => viewModes[index] ?? 'chart';
@@ -522,14 +522,14 @@ export default function ChartDisplay() {
         ));
 
   return (
-    <div data-testid="inference-chart-display" className="flex flex-col gap-4">
+    <div data-testid="inference-chart-display" className="flex flex-col gap-3 md:gap-4">
       <section className="relative z-20">
-        <Card>
-          <div className="flex flex-col gap-4">
+        <Card className="p-4 md:p-6">
+          <div className="flex flex-col gap-3">
             <div className="flex items-start justify-between">
               <div>
-                <h2 className="text-lg font-semibold mb-2">Inference Performance</h2>
-                <p className="text-muted-foreground text-sm mb-4">
+                <h2 className="text-lg font-semibold mb-1.5">Inference Performance</h2>
+                <p className="text-muted-foreground text-sm mb-3">
                   Inference performance metrics across different models, hardware configurations,
                   and serving parameters.
                 </p>