fix(inference): official legend X works with overlay loaded + explicit hide/show affordances / 修复叠加层下图例移除按钮并明确隐藏/恢复操作提示 (#597)

Oseltamivir · web-flow · commit bc3063848f8d · 2026-07-19T23:08:16.000-07:00
* fix(inference): make official legend X work while an unofficial overlay is loaded

With an unofficial-run overlay active, the chart reads official series
visibility from `localOfficialOverride` (the unified overlay-mode selection),
but the legend's "X" (remove) button routed straight to InferenceContext's
`removeHwType`, which mutates `activeHwTypes` — a set the chart ignores in
overlay mode. Clicking an official SKU's X therefore appeared to do nothing,
while the same click worked on official-only charts. The legend row TOGGLE
already had the overlay-aware split (`unifiedToggle` → commitUnifiedSelection);
the X now shares it: `handleRemoveHwType` commits the removal through the
unified selection when an overlay is loaded and delegates to the context's
`removeHwType` otherwise. Context state stays untouched in overlay mode, so
dismissing the overlay restores the pre-overlay official selection — same
semantics as the toggle path.

Also lifts the overlay e2e fixtures (real run-29682242847 values, intercepts,
countVisible) into cypress/support/overlay-fixtures.ts, shared by the existing
overlay-optimal-only spec and the new overlay-legend-remove regression spec
(which fails without the fix). Assertions in both specs now use retryable
`.should()` callbacks — the dots' 150ms opacity transition made one-shot
`.then()` counts racy.

中文：修复加载非官方运行叠加层时，图例中官方 SKU 的"X"（移除）按钮无效的问题。
叠加层激活时图表从 `localOfficialOverride`（叠加模式的统一选择集）读取官方系列
可见性，而图例的 X 按钮直接调用 InferenceContext 的 `removeHwType` 修改
`activeHwTypes`——该集合在叠加模式下被图表忽略，因此点击官方 SKU 的 X 看似无效，
而在纯官方图表上正常。图例行的切换（toggle）已有叠加感知分支（`unifiedToggle`），
现在 X 与其共用：加载叠加层时 `handleRemoveHwType` 通过统一选择集提交移除，否则
委托给 context 的 `removeHwType`；叠加模式下不触碰 context 状态，关闭叠加层即恢复
之前的官方选择，与切换路径语义一致。同时将叠加层 e2e 测试夹具（fixtures）提取到
cypress/support/overlay-fixtures.ts，由既有 overlay-optimal-only 与新增的
overlay-legend-remove 回归测试（未修复时失败）共享；两个测试的断言改用可重试的
`.should()` 回调（数据点 150ms 的透明度过渡使一次性 `.then()` 计数存在竞态）。

* feat(legend): explicit hide/show affordances on legend rows

Make the two legend actions visually explicit: hovering an ACTIVE row swaps
the color dot for the "Hide &lt;label&gt;" X (now with a matching tooltip), and
hovering an INACTIVE row swaps the dimmed dot for a "+" with a "Show &lt;label&gt;"
tooltip — signaling that clicking the SKU name brings the series back. The
"+" is decorative (aria-hidden): the row's label/checkbox remains the single
click target, so behavior is unchanged; only the affordance is new.

Legend-item strings now go through a component-local locale dict (en/zh) per
the site's bilingual-UI rule; the English strings are byte-identical to the
previous literals. e2e assertions added: active row exposes the Hide tooltip,
removed row exposes the Show "+" indicator and no Hide X.

中文：让图例行的两种操作在视觉上更明确：悬停"激活"行时，颜色圆点切换为"隐藏
&lt;label&gt;"的 X（新增对应 tooltip）；悬停"未激活"行时，变暗的圆点切换为"+"并带
"显示 &lt;label&gt;" tooltip——明确提示点击 SKU 名称即可恢复该系列。"+" 为装饰性元素
（aria-hidden）：行的 label/checkbox 仍是唯一点击目标，行为不变，仅新增视觉提示。
图例项字符串按站点双语规则改经组件内 locale 字典（en/zh）处理，英文字符串与原
字面量逐字节一致。新增 e2e 断言：激活行暴露隐藏 tooltip，被移除的行暴露"+"恢复
指示且无隐藏 X。
diff --git a/packages/app/cypress/e2e/overlay-legend-remove.cy.ts b/packages/app/cypress/e2e/overlay-legend-remove.cy.ts
@@ -0,0 +1,81 @@
+/**
+ * Clicking an official SKU's legend "X" must remove that series even while an
+ * unofficial-run overlay is loaded.
+ *
+ * Regression: with an overlay active, the chart reads official visibility from
+ * `localOfficialOverride` (the unified overlay-mode selection), but the legend
+ * X routed straight to InferenceContext's `removeHwType`, which mutates
+ * `activeHwTypes` — a set the chart ignores in overlay mode. The click
+ * appeared to do nothing. The legend toggle already had the overlay-aware
+ * split (`unifiedToggle`); the X now shares it (`handleRemoveHwType`).
+ */
+import { unlockAgenticGate } from '../support/e2e';
+import {
+  countVisible,
+  interceptOverlayRun,
+  OVERLAY_RUN_ID,
+  REAL_CONFIGS,
+} from '../support/overlay-fixtures';
+
+describe('Official legend X works while an unofficial overlay is loaded', () => {
+  before(() => {
+    interceptOverlayRun();
+    cy.visit(`/inference?unofficialrun=${OVERLAY_RUN_ID}&i_seq=agentic-traces&i_pctl=p90`, {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
+        unlockAgenticGate(win);
+      },
+    });
+    cy.wait('@unofficialRun');
+    cy.get('[data-testid="chart-figure"]').should('have.length.at.least', 1);
+    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').should(
+      'have.length',
+      REAL_CONFIGS.length,
+    );
+  });
+
+  it('shows official points and an official legend entry initially', () => {
+    cy.get('[data-testid="inference-chart-display"] svg .dot-group').should(($dots) => {
+      expect(countVisible($dots), 'visible official points').to.be.greaterThan(0);
+    });
+    cy.get('[data-testid="chart-legend"]').contains('B300').should('exist');
+    // Active row: the hover affordance is the "Hide" X with an explicit tooltip.
+    cy.get('[data-testid="chart-legend"] [role="button"][aria-label^="Hide"][aria-label*="B300"]')
+      .should('have.attr', 'title')
+      .and('match', /^Hide B300/u);
+  });
+
+  it('clicking the official SKU X hides its points but keeps the overlay', () => {
+    // The X only becomes opaque on row hover (CSS group-hover), which Cypress
+    // events don't trigger — force the click on the always-present element.
+    // Target the OFFICIAL row's X: the overlay run row is listed first and has
+    // its own (no-op) X, so `.first()` would hit the wrong one. The official
+    // label is "B300 (SGLang)" — case-sensitive match excludes the overlay
+    // row's lowercase branch name.
+    cy.get('[data-testid="chart-legend"] [role="button"][aria-label^="Hide"][aria-label*="B300"]')
+      .first()
+      .click({ force: true });
+
+    // Every official point belongs to the removed B300 series → all hidden.
+    cy.get('[data-testid="inference-chart-display"] svg .dot-group').should(($dots) => {
+      expect(countVisible($dots), 'visible official points after remove').to.eq(0);
+    });
+    // The overlay series is untouched (Optimal Only default keeps 4 of 5).
+    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').should(($pts) => {
+      expect(countVisible($pts), 'visible overlay X markers').to.eq(REAL_CONFIGS.length - 1);
+    });
+    // Inactive row: the hover affordance flips to the "+" restore indicator
+    // (explicit "clicking the name brings it back"), and the Hide X is gone.
+    cy.get('[data-testid="chart-legend"] [title^="Show B300"]').should('exist');
+    cy.get(
+      '[data-testid="chart-legend"] [role="button"][aria-label^="Hide"][aria-label*="B300"]',
+    ).should('not.exist');
+  });
+
+  it('re-activating the SKU from the legend restores the official points', () => {
+    cy.get('[data-testid="chart-legend"]').contains('B300').click();
+    cy.get('[data-testid="inference-chart-display"] svg .dot-group').should(($dots) => {
+      expect(countVisible($dots), 'visible official points after re-add').to.be.greaterThan(0);
+    });
+  });
+});
diff --git a/packages/app/cypress/e2e/overlay-optimal-only.cy.ts b/packages/app/cypress/e2e/overlay-optimal-only.cy.ts
@@ -2,116 +2,25 @@
  * Overlay (unofficial run) points must respect the "Optimal Only" toggle the
  * same way official points do.
  *
- * Regression: with Optimal Only ON, official non-pareto points are hidden via
- * `isPointVisible`, but overlay X markers rendered every point unconditionally.
- * On the agentic interactivity chart this made an e2e-dominated config (TP8
- * C=4 in the GLM5.2 B300 hicache run) look like a pareto point: its X marker
- * stayed visible sitting on the dashed roofline (the monotone spline between
- * C=8 and C=2 passes within ~0.5% of it) while the official twin was hidden.
- *
- * Fixture values are the real run-29682242847 numbers:
- *   conc, p90_intvty, tput_per_gpu, p90_e2el
- * C=4 is dominated on e2e by C=8 (12874 tok/s @ 33.1s vs 9415 @ 48.0s), so
- * with Optimal Only ON exactly 4 of the 5 overlay X's must stay visible.
+ * Regression: with Optimal Only ON (the default — `i_optimal !== '0'`),
+ * official non-pareto points are hidden via `isPointVisible`, but overlay X
+ * markers rendered every point unconditionally. On the agentic interactivity
+ * chart this made an e2e-dominated config (TP8 C=4 in the GLM5.2 B300 hicache
+ * run) look like a pareto point: its X marker stayed visible sitting on the
+ * dashed roofline (the monotone spline between C=8 and C=2 passes within
+ * ~0.5% of it) while the official twin was hidden.
  */
 import { unlockAgenticGate } from '../support/e2e';
-
-const DEFAULT_MODEL_DB_KEY = 'dsv4';
-const AGENTIC_DATE = '2026-07-19';
-const OVERLAY_RUN_ID = '29682242847';
-const OVERLAY_RUN_URL = `https://github.com/SemiAnalysisAI/InferenceX/actions/runs/${OVERLAY_RUN_ID}`;
-
-const REAL_CONFIGS: [number, number, number, number][] = [
-  [48, 10.6, 17199, 126.9],
-  [8, 68.5, 12874, 33.1],
-  [4, 88.3, 9415, 48], // e2e-dominated by C=8 → NOT optimal
-  [2, 111.1, 5018, 30],
-  [1, 130.2, 2600, 25.8],
-];
-
-const metricsFor = (intvty: number, tput: number, e2el: number): Record<string, number> => ({
-  median_itl: 1 / (intvty * 1.2),
-  p90_itl: 1 / intvty,
-  p99_itl: 1 / (intvty * 0.8),
-  median_e2el: e2el * 0.8,
-  p90_e2el: e2el,
-  p99_e2el: e2el * 1.3,
-  median_ttft: 0.5,
-  p90_ttft: 1,
-  p99_ttft: 2,
-  tput_per_gpu: tput,
-  output_tput_per_gpu: tput * 0.3,
-  input_tput_per_gpu: tput * 0.7,
-});
-
-let idCursor = 900000;
-const b300Rows = (runUrl: string | null) =>
-  REAL_CONFIGS.map(([conc, intvty, tput, e2el]) => ({
-    id: runUrl ? 0 : idCursor++,
-    hardware: 'b300',
-    framework: 'sglang',
-    model: DEFAULT_MODEL_DB_KEY,
-    precision: 'fp4',
-    spec_method: 'none',
-    disagg: false,
-    is_multinode: false,
-    prefill_tp: 8,
-    decode_tp: 8,
-    num_prefill_gpu: 8,
-    num_decode_gpu: 8,
-    isl: null,
-    osl: null,
-    conc,
-    offload_mode: 'on',
-    benchmark_type: 'agentic_traces',
-    image: 'sglang:test',
-    metrics: metricsFor(intvty, tput, e2el),
-    workers: null,
-    date: AGENTIC_DATE,
-    run_url: runUrl,
-  }));
-
-const availability = [
-  {
-    model: DEFAULT_MODEL_DB_KEY,
-    isl: null,
-    osl: null,
-    precision: 'fp4',
-    hardware: 'b300',
-    framework: 'sglang',
-    spec_method: 'none',
-    disagg: false,
-    benchmark_type: 'agentic_traces',
-    date: AGENTIC_DATE,
-  },
-];
-
-const countVisible = ($els: JQuery<HTMLElement>): number =>
-  [...$els].filter((el) => getComputedStyle(el).opacity !== '0').length;
+import {
+  countVisible,
+  interceptOverlayRun,
+  OVERLAY_RUN_ID,
+  REAL_CONFIGS,
+} from '../support/overlay-fixtures';
 
 describe('Overlay points respect Optimal Only (agentic interactivity)', () => {
   before(() => {
-    cy.intercept('GET', '/api/v1/availability', { body: availability }).as('availability');
-    cy.intercept('GET', '/api/v1/benchmarks*', { body: b300Rows(null) }).as('benchmarks');
-    cy.intercept('GET', '/api/unofficial-run*', {
-      body: {
-        runInfos: [
-          {
-            id: OVERLAY_RUN_ID,
-            name: 'add-glm5.2-b300-agentic-hicache',
-            branch: 'add-glm5.2-b300-agentic-hicache',
-            sha: 'abc000',
-            createdAt: `${AGENTIC_DATE}T00:00:00Z`,
-            url: OVERLAY_RUN_URL,
-            conclusion: 'success',
-            status: 'completed',
-            isNonMainBranch: true,
-          },
-        ],
-        benchmarks: b300Rows(OVERLAY_RUN_URL),
-        evaluations: [],
-      },
-    }).as('unofficialRun');
+    interceptOverlayRun();
     cy.visit(`/inference?unofficialrun=${OVERLAY_RUN_ID}&i_seq=agentic-traces&i_pctl=p90`, {
       onBeforeLoad(win) {
         win.localStorage.setItem('inferencex-star-modal-dismissed', String(Date.now()));
@@ -136,27 +45,27 @@ describe('Overlay points respect Optimal Only (agentic interactivity)', () => {
   it('hides the e2e-dominated overlay point in the default Optimal Only view', () => {
     cy.get('#scatter-hide-non-optimal').should('have.attr', 'data-state', 'checked');
     // Official parity check: 4 of 5 official dots visible.
-    cy.get('[data-testid="inference-chart-display"] svg .dot-group').then(($dots) => {
+    cy.get('[data-testid="inference-chart-display"] svg .dot-group').should(($dots) => {
       expect(countVisible($dots), 'visible official points').to.eq(REAL_CONFIGS.length - 1);
     });
     // The overlay must hide its C=4 too — 4 of 5 X markers visible.
-    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').then(($pts) => {
+    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').should(($pts) => {
       expect(countVisible($pts), 'visible overlay X markers').to.eq(REAL_CONFIGS.length - 1);
     });
   });
 
   it('shows all overlay points when Optimal Only is turned off', () => {
     cy.get('#scatter-hide-non-optimal').click();
     cy.get('#scatter-hide-non-optimal').should('have.attr', 'data-state', 'unchecked');
-    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').then(($pts) => {
+    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').should(($pts) => {
       expect(countVisible($pts), 'visible overlay X markers').to.eq(REAL_CONFIGS.length);
     });
   });
 
   it('re-hides the e2e-dominated overlay point when Optimal Only is re-enabled', () => {
     cy.get('#scatter-hide-non-optimal').click();
     cy.get('#scatter-hide-non-optimal').should('have.attr', 'data-state', 'checked');
-    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').then(($pts) => {
+    cy.get('[data-testid="inference-chart-display"] svg .unofficial-overlay-pt').should(($pts) => {
       expect(countVisible($pts), 'visible overlay X markers').to.eq(REAL_CONFIGS.length - 1);
     });
   });
diff --git a/packages/app/cypress/support/overlay-fixtures.ts b/packages/app/cypress/support/overlay-fixtures.ts
@@ -0,0 +1,108 @@
+/**
+ * Shared fixtures for `?unofficialrun=` overlay e2e specs.
+ *
+ * The benchmark values are the real numbers from GitHub run 29682242847
+ * (GLM5.2 B300 agentic hicache, offload=on rows):
+ *   conc, p90_intvty (tok/s/user), tput_per_gpu, p90_e2el (s)
+ * C=4 is dominated on e2e by C=8 (12874 tok/s @ 33.1s vs 9415 @ 48.0s), which
+ * makes the set a ready-made probe for the e2e-restricted frontier behaviors.
+ */
+export const DEFAULT_MODEL_DB_KEY = 'dsv4';
+export const AGENTIC_DATE = '2026-07-19';
+export const OVERLAY_RUN_ID = '29682242847';
+export const OVERLAY_RUN_BRANCH = 'add-glm5.2-b300-agentic-hicache';
+export const OVERLAY_RUN_URL = `https://github.com/SemiAnalysisAI/InferenceX/actions/runs/${OVERLAY_RUN_ID}`;
+
+export const REAL_CONFIGS: [number, number, number, number][] = [
+  [48, 10.6, 17199, 126.9],
+  [8, 68.5, 12874, 33.1],
+  [4, 88.3, 9415, 48], // e2e-dominated by C=8 → NOT optimal
+  [2, 111.1, 5018, 30],
+  [1, 130.2, 2600, 25.8],
+];
+
+export const metricsFor = (intvty: number, tput: number, e2el: number): Record<string, number> => ({
+  // intvty is ALWAYS derived as 1/itl by the agentic aliases — feed itl.
+  median_itl: 1 / (intvty * 1.2),
+  p90_itl: 1 / intvty,
+  p99_itl: 1 / (intvty * 0.8),
+  median_e2el: e2el * 0.8,
+  p90_e2el: e2el,
+  p99_e2el: e2el * 1.3,
+  median_ttft: 0.5,
+  p90_ttft: 1,
+  p99_ttft: 2,
+  tput_per_gpu: tput,
+  output_tput_per_gpu: tput * 0.3,
+  input_tput_per_gpu: tput * 0.7,
+});
+
+let idCursor = 900000;
+export const b300Rows = (runUrl: string | null) =>
+  REAL_CONFIGS.map(([conc, intvty, tput, e2el]) => ({
+    id: runUrl ? 0 : idCursor++,
+    hardware: 'b300',
+    framework: 'sglang',
+    model: DEFAULT_MODEL_DB_KEY,
+    precision: 'fp4',
+    spec_method: 'none',
+    disagg: false,
+    is_multinode: false,
+    prefill_tp: 8,
+    decode_tp: 8,
+    num_prefill_gpu: 8,
+    num_decode_gpu: 8,
+    isl: null,
+    osl: null,
+    conc,
+    offload_mode: 'on',
+    benchmark_type: 'agentic_traces',
+    image: 'sglang:test',
+    metrics: metricsFor(intvty, tput, e2el),
+    workers: null,
+    date: AGENTIC_DATE,
+    run_url: runUrl,
+  }));
+
+export const availability = [
+  {
+    model: DEFAULT_MODEL_DB_KEY,
+    isl: null,
+    osl: null,
+    precision: 'fp4',
+    hardware: 'b300',
+    framework: 'sglang',
+    spec_method: 'none',
+    disagg: false,
+    benchmark_type: 'agentic_traces',
+    date: AGENTIC_DATE,
+  },
+];
+
+/** Intercept availability + benchmarks + unofficial-run with the B300 fixture. */
+export const interceptOverlayRun = () => {
+  cy.intercept('GET', '/api/v1/availability', { body: availability }).as('availability');
+  cy.intercept('GET', '/api/v1/benchmarks*', { body: b300Rows(null) }).as('benchmarks');
+  cy.intercept('GET', '/api/unofficial-run*', {
+    body: {
+      runInfos: [
+        {
+          id: OVERLAY_RUN_ID,
+          name: OVERLAY_RUN_BRANCH,
+          branch: OVERLAY_RUN_BRANCH,
+          sha: 'abc000',
+          createdAt: `${AGENTIC_DATE}T00:00:00Z`,
+          url: OVERLAY_RUN_URL,
+          conclusion: 'success',
+          status: 'completed',
+          isNonMainBranch: true,
+        },
+      ],
+      benchmarks: b300Rows(OVERLAY_RUN_URL),
+      evaluations: [],
+    },
+  }).as('unofficialRun');
+};
+
+export const countVisible = ($els: JQuery<HTMLElement>): number =>
+  [...$els].filter((el) => getComputedStyle(el).opacity !== '0').length;
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -587,6 +587,26 @@ const ScatterGraph = React.memo(
       [overlayData, unifiedToggle, toggleHwType],
     );
 
+    // Legend "X" (remove) — same overlay split as handleToggleHwType. With an
+    // overlay loaded the chart reads localOfficialOverride, which the context's
+    // removeHwType (activeHwTypes) never touches, so routing the X through it
+    // left the official series visibly un-removed. Commit the removal through
+    // the unified selection instead; context state stays untouched so
+    // dismissing the overlay restores the pre-overlay official selection, same
+    // as the toggle path.
+    const handleRemoveHwType = useCallback(
+      (key: string) => {
+        if (!overlayData) {
+          removeHwType(key);
+          return;
+        }
+        const next = new Set(resolvedUnifiedSelection);
+        next.delete(key);
+        commitUnifiedSelection(next);
+      },
+      [overlayData, removeHwType, resolvedUnifiedSelection, commitUnifiedSelection],
+    );
+
     // --- Theme ---
     const hardwareConfig = hardwareConfigOverride || contextHardwareConfig;
     const activeHwKeys = useMemo(() => {
@@ -2820,7 +2840,7 @@ const ScatterGraph = React.memo(
               variant="sidebar"
               onItemHover={handleLegendHover}
               onItemHoverEnd={handleLegendHoverEnd}
-              onItemRemove={showAllHardwareTypes ? undefined : removeHwType}
+              onItemRemove={showAllHardwareTypes ? undefined : handleRemoveHwType}
               legendItems={[
                 // Overlay legend: one entry per loaded unofficial run that actually
                 // contributes points to this chart. Colored from the shared palette
diff --git a/packages/app/src/components/ui/chart-legend-item.tsx b/packages/app/src/components/ui/chart-legend-item.tsx
