feat: explain modeled components in the All in Measured boundary option

中文：在“整体实测功耗”边界选项中说明未实测组件由模型估算

Author: edwingao28

docs/powerx-permanent-view.md

@@ -69,7 +69,9 @@ control change to the nearest registered key. Consequences:
   the Measured row should call.
 
 The Boundary select tracks `inference_power_basis_changed { basis, family }` in addition to the
-existing `inference_y_axis_metric_selected` fired by `ChartControls`.
+existing `inference_y_axis_metric_selected` fired by `ChartControls`. Its All in Measured option
+carries the (i) help `ALL_IN_MEASURED_NOTE` (unmeasured components are modeled); the chart
+caption states the same boundary, so the controls row has no separate footnote.
 
 ## Missing values
 

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

@@ -436,6 +436,16 @@ describe('Inference ChartControls grouped measured metrics', () => {
     );
   });
 
+  it('explains in the Boundary menu that All in Measured models unmeasured components', () => {
+    mountMeasuredControls();
+    cy.get('[data-testid="measured-power-basis"]').click();
+    cy.get('[data-testid="option-help-utility-modeled"]').click();
+    cy.get('[data-testid="option-help-content-utility-modeled"]').should(
+      'contain.text',
+      'unmeasured components are modeled',
+    );
+  });
+
   it('resets a fleet percentile to role average and only enables TDP for the whole-fleet average', () => {
     mountMeasuredControls('y_measuredP75Power');
     selectMeasuredSetting('power-scope', 'prefill');

packages/app/cypress/component/measured-metric-controls.cy.tsx

@@ -15,7 +15,7 @@ function Controls() {
 
 describe('Power boundary labels', () => {
   for (const locale of ['en', 'zh'] as const) {
-    it(`keeps metric selection and the modeled-component note clear (${locale})`, () => {
+    it(`keeps boundary selection clear (${locale})`, () => {
       const width = locale === 'en' ? 1280 : 390;
       cy.viewport(width, 720);
       cy.mount(
@@ -32,40 +32,32 @@ describe('Power boundary labels', () => {
               'All in Measured',
             ]
           : ['GPU 实测功耗', 'GPU 额定功耗（TDP）', '整体预配功耗', '整体实测功耗'];
-      cy.get('[data-testid="all-in-measured-note"]').should('not.exist');
       cy.get('[data-testid="measured-power-basis"]').click();
-      cy.get('[role="option"]').should(($options) => {
+      cy.get('[data-select-option]').should(($options) => {
         expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal(labels);
       });
-      cy.get('[role="option"][data-value="gpu-provisioned"]').click();
+      cy.get('[data-select-option][data-value="gpu-provisioned"]').click();
       cy.get('[data-testid="selected-metric"]').should('have.text', 'y_gpuProvisionedWatts');
       cy.get('[data-testid="measured-power-basis"]').click();
-      cy.get('[role="option"][data-value="utility-provisioned"]').click();
+      cy.get('[data-select-option][data-value="utility-provisioned"]').click();
       cy.get('[data-testid="selected-metric"]').should('have.text', 'y_utilityProvisionedWatts');
       cy.get('[data-testid="measured-power-basis"]').click();
-      cy.get('[role="option"][data-value="utility-modeled"]').click();
-      cy.get('[role="option"]').should('not.exist');
+      cy.get('[data-select-option][data-value="utility-modeled"]').click();
+      cy.get('[data-select-option]').should('not.exist');
       cy.get('[data-testid="selected-metric"]').should('have.text', 'y_utilityModeledWatts');
-      cy.get('[data-testid="all-in-measured-note"]')
-        .should('be.visible')
-        .and(
-          'contain',
-          locale === 'en' ? 'unmeasured components are modeled' : '未实测的组件功耗由模型估算',
-        );
       cy.get('[data-testid="measured-metric-controls"]').should(($controls) => {
         const box = $controls[0].getBoundingClientRect();
         expect(box.left).to.be.at.least(0);
         expect(box.right).to.be.at.most(width);
         expect($controls[0].scrollWidth).to.be.at.most($controls[0].clientWidth);
       });
-      cy.screenshot(`power-boundary-note-${locale}`, { overwrite: true });
+      cy.screenshot(`power-boundary-selected-${locale}`, { overwrite: true });
       cy.get('[data-testid="measured-power-basis"]').click();
-      cy.get('[role="option"][data-value="gpu-measured"]').click();
+      cy.get('[data-select-option][data-value="gpu-measured"]').click();
       cy.get('[data-testid="selected-metric"]').should('have.text', 'y_measuredAvgPower');
-      cy.get('[data-testid="all-in-measured-note"]').should('not.exist');
-      // Finish selection assertions before a screenshot can dismiss the open Radix menu.
+      // Finish selection assertions before a screenshot can dismiss the open menu.
       cy.get('[data-testid="measured-power-basis"]').click();
-      cy.get('[role="option"]').should('be.visible');
+      cy.get('[data-select-option]').should('be.visible');
       cy.screenshot(`power-boundary-options-${locale}`, { overwrite: true });
     });
   }

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

@@ -1,4 +1,5 @@
 import { LabelWithTooltip } from '@/components/ui/label-with-tooltip';
+import { SearchableSelect } from '@/components/ui/searchable-select';
 import { SegmentedToggle } from '@/components/ui/segmented-toggle';
 import {
   Select,
@@ -135,25 +136,29 @@ export function MeasuredMetricControls({
     >
       <div className="flex min-w-0 flex-col gap-1.5">
         <LabelWithTooltip htmlFor={basisId} label={t.basis} tooltip={t.basisHelp} />
-        <Select
+        <SearchableSelect
           value={config.basis}
+          triggerId={basisId}
+          triggerTestId={basisId}
+          placeholder={t.basis}
+          searchable={false}
           onValueChange={(value) => {
             const basis = value as PowerBasis;
             track('inference_power_basis_changed', { basis, family: config.family });
             change({ basis });
           }}
-        >
-          <SelectTrigger id={basisId} data-testid={basisId} className="w-full">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent portalled={false}>
-            {POWER_BASES.map((basis) => (
-              <SelectItem key={basis} value={basis} data-value={basis}>
-                {POWER_BASIS_LABELS[basis][locale]}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          groups={[
+            {
+              label: '',
+              options: POWER_BASES.map((basis) => ({
+                value: basis,
+                label: POWER_BASIS_LABELS[basis][locale],
+                help:
+                  basis === 'utility-modeled' ? <p>{ALL_IN_MEASURED_NOTE[locale]}</p> : undefined,
+              })),
+            },
+          ]}
+        />
       </div>
       {config.family === 'energy' && (
         <div className="flex min-w-0 flex-col gap-1.5">
@@ -339,14 +344,6 @@ export function MeasuredMetricControls({
           </Select>
         </div>
       )}
-      {(config.basis === 'utility-modeled' || compare === 'boundaries') && (
-        <p
-          className="col-span-full text-xs text-muted-foreground"
-          data-testid="all-in-measured-note"
-        >
-          {ALL_IN_MEASURED_NOTE[locale]}
-        </p>
-      )}
     </div>
   );
 }