fix(inference): stop stacking duplicate line labels per hardware (#470) (#504)

With a single precision selected, the scatter chart de-duplicates line
labels to one per hardware type (e.g. the b300_sglang fp4/fp8/bf16 curves
all collapse to a single "B300 (SGLang)" label). The render hides the
duplicates via a per-label `visible` flag, but three visibility-sync code
paths (legend hover, hover-end reset, filter-change effect) re-derived
line-label opacity from hardware membership alone. Because every duplicate
shares the same `data-hw-key`, all of them got re-shown — stacking three
identical "B300 (SGLang)" labels on the curve.

Persist the render's decision as a `data-visible` attribute and fold it
into every opacity decision via new pure helpers in line-label-visibility.ts
(unit-tested). Parallelism labels take the precision branch and are
unaffected.


(cherry picked from commit aff62bb)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Bryan Shan <Oseltamivir@users.noreply.github.com>

Author: Oseltamivir

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

@@ -7,6 +7,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from
 import { GRADIENT_NUDGE_EVENT } from '@/lib/nudges/registry';
 import { useInference } from '@/components/inference/InferenceContext';
 import { pointNearestX } from '@/components/inference/ui/line-label-anchor';
+import {
+  labelOpacityForActiveState,
+  labelOpacityForHover,
+} from '@/components/inference/ui/line-label-visibility';
 import ChartLegend from '@/components/ui/chart-legend';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
 import { computeToggle } from '@/hooks/useTogglableSet';
@@ -676,9 +680,7 @@ const ScatterGraph = React.memo(
           .transition('legend-hover')
           .duration(150)
           .style('opacity', function () {
-            const hw = (this as SVGGElement).dataset.hwKey;
-            if (!hw) return 0;
-            return hw === hwKey ? 1 : 0;
+            return labelOpacityForHover((this as SVGGElement).dataset, hwKey);
           });
       },
       [isPointVisible, isRooflineVisible],
@@ -705,12 +707,11 @@ const ScatterGraph = React.memo(
         .transition('legend-hover')
         .duration(150)
         .style('opacity', function () {
-          const hw = (this as SVGGElement).dataset.hwKey;
-          const prec = (this as SVGGElement).dataset.precision;
-          if (!hw) return 0;
-          // Line labels have no precision attr — always visible if hw is active
-          if (!prec) return effectiveActiveHwTypes.has(hw) ? 1 : 0;
-          return effectiveActiveHwTypes.has(hw) && selectedPrecisions.includes(prec) ? 1 : 0;
+          return labelOpacityForActiveState(
+            (this as SVGGElement).dataset,
+            effectiveActiveHwTypes,
+            selectedPrecisions,
+          );
         });
     }, [isPointVisible, isRooflineVisible, effectiveActiveHwTypes, selectedPrecisions]);
 
@@ -1312,6 +1313,11 @@ const ScatterGraph = React.memo(
             )
             .attr('data-line-key', (d) => d.key)
             .attr('data-hw-key', (d) => d.hw)
+            // Persist the per-label visibility decision (one label per hw group;
+            // de-duplicated / collision-hidden curves are `false`) so the
+            // visibility-sync effects below don't re-show hidden duplicates that
+            // share the same `data-hw-key`. See GH #470.
+            .attr('data-visible', (d) => (d.visible ? '1' : '0'))
             .attr('transform', (d) => `translate(${d.x + 8},${d.y - 14})`)
             .style('opacity', (d) => (d.visible ? 1 : 0))
             .each(function (d) {
@@ -2124,13 +2130,11 @@ const ScatterGraph = React.memo(
       zoomGroup
         .selectAll<SVGGElement, unknown>('.parallelism-label, .line-label')
         .style('opacity', function () {
-          const hw = (this as SVGGElement).dataset.hwKey;
-          const precision = (this as SVGGElement).dataset.precision;
-          if (!hw) return 0;
-          if (!precision) return ir.effectiveActiveHwTypes.has(hw) ? 1 : 0;
-          return ir.effectiveActiveHwTypes.has(hw) && ir.selectedPrecisions.includes(precision)
-            ? 1
-            : 0;
+          return labelOpacityForActiveState(
+            (this as SVGGElement).dataset,
+            ir.effectiveActiveHwTypes,
+            ir.selectedPrecisions,
+          );
         });
 
       // Label placement (greedy collision layout) depends on the visible set,

packages/app/src/components/inference/ui/line-label-visibility.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  labelOpacityForActiveState,
+  labelOpacityForHover,
+} from '@/components/inference/ui/line-label-visibility';
+
+// Regression coverage for GH #470: when one hardware type contributes several
+// curves (e.g. b300_sglang_fp4 / _fp8 / _bf16) the render keeps a single line
+// label ("B300 (SGLang)") and hides the rest via `data-visible="0"`. Every
+// duplicate shares the same `data-hw-key`, so the visibility-sync paths must
+// honour `data-visible` or they re-show the hidden duplicates.
+
+describe('labelOpacityForActiveState', () => {
+  const active = new Set(['b300_sglang', 'gb300_dynamo-sglang']);
+  const precisions = ['fp4'];
+
+  it('shows the kept line label for an active hardware type', () => {
+    expect(
+      labelOpacityForActiveState({ hwKey: 'b300_sglang', visible: '1' }, active, precisions),
+    ).toBe(1);
+  });
+
+  it('keeps hidden duplicate line labels hidden even though their hw is active', () => {
+    // The fp8 / bf16 B300 curves: same data-hw-key as the visible fp4 label,
+    // but the render hid them. They must NOT be re-shown (the #470 bug).
+    expect(
+      labelOpacityForActiveState({ hwKey: 'b300_sglang', visible: '0' }, active, precisions),
+    ).toBe(0);
+  });
+
+  it('hides line labels for inactive hardware types', () => {
+    expect(
+      labelOpacityForActiveState({ hwKey: 'h100_sglang', visible: '1' }, active, precisions),
+    ).toBe(0);
+  });
+
+  it('treats a missing data-visible attribute as kept (parallelism labels)', () => {
+    // Parallelism labels carry a precision and no data-visible gate.
+    expect(
+      labelOpacityForActiveState({ hwKey: 'b300_sglang', precision: 'fp4' }, active, precisions),
+    ).toBe(1);
+  });
+
+  it('hides parallelism labels whose precision is not selected', () => {
+    expect(
+      labelOpacityForActiveState({ hwKey: 'b300_sglang', precision: 'fp8' }, active, precisions),
+    ).toBe(0);
+  });
+
+  it('returns 0 when there is no hardware key', () => {
+    expect(labelOpacityForActiveState({}, active, precisions)).toBe(0);
+  });
+});
+
+describe('labelOpacityForHover', () => {
+  it('lights up the kept label for the hovered hardware', () => {
+    expect(labelOpacityForHover({ hwKey: 'b300_sglang', visible: '1' }, 'b300_sglang')).toBe(1);
+  });
+
+  it('does not re-show a hidden duplicate when its hardware is hovered', () => {
+    expect(labelOpacityForHover({ hwKey: 'b300_sglang', visible: '0' }, 'b300_sglang')).toBe(0);
+  });
+
+  it('hides labels for non-hovered hardware', () => {
+    expect(labelOpacityForHover({ hwKey: 'h100_sglang', visible: '1' }, 'b300_sglang')).toBe(0);
+  });
+
+  it('returns 0 when there is no hardware key', () => {
+    expect(labelOpacityForHover({}, 'b300_sglang')).toBe(0);
+  });
+});

packages/app/src/components/inference/ui/line-label-visibility.ts

@@ -0,0 +1,65 @@
+/**
+ * Opacity decisions for the in-chart label overlays (line labels + parallelism
+ * labels) rendered by `ScatterGraph`. Extracted as pure helpers so the
+ * visibility invariant is unit-testable independent of the D3 render.
+ *
+ * Why this exists (GH #470): with a single precision selected the chart
+ * de-duplicates line labels to **one per hardware type** — e.g. the
+ * `b300_sglang_fp4`, `b300_sglang_fp8` and `b300_sglang_bf16` curves all share
+ * the label text "B300 (SGLang)", so only one is kept (`visible: true`) and the
+ * rest are hidden (`visible: false`). The render writes that decision to a
+ * `data-visible` attribute on each `.line-label`.
+ *
+ * The bug: several visibility-sync code paths (legend hover, hover-end, and the
+ * filter-change effect) re-derived line-label opacity from hardware membership
+ * **alone**, ignoring `data-visible`. Because every duplicate carries the same
+ * `data-hw-key` (e.g. `b300_sglang`), all of them got re-shown — stacking three
+ * identical "B300 (SGLang)" labels on the curve. These helpers fold the
+ * `data-visible` flag back into every decision so hidden duplicates stay hidden.
+ *
+ * Parallelism labels carry a `data-precision` attribute and intentionally have
+ * no `data-visible` gate (multiple segments per curve are expected); they take
+ * the precision branch and are unaffected.
+ */
+
+export interface LabelAttrs {
+  /** `data-hw-key` — base hardware key, shared across a hw's curves. */
+  hwKey?: string;
+  /** `data-precision` — set on parallelism labels, absent on line labels. */
+  precision?: string;
+  /** `data-visible` — `'1'`/`'0'`; only line labels set this. */
+  visible?: string;
+}
+
+/** True unless the render explicitly hid this label (`data-visible="0"`). */
+const renderKept = (attrs: LabelAttrs): boolean => attrs.visible !== '0';
+
+/**
+ * Opacity for a label while a legend row is hovered. Line/parallelism labels
+ * whose hardware matches the hovered row light up — but a label the render hid
+ * (a de-duplicated duplicate) stays hidden.
+ */
+export const labelOpacityForHover = (attrs: LabelAttrs, hoveredHwKey: string): 0 | 1 => {
+  if (!attrs.hwKey) return 0;
+  if (!renderKept(attrs)) return 0;
+  return attrs.hwKey === hoveredHwKey ? 1 : 0;
+};
+
+/**
+ * Steady-state opacity (no hover): used by both the hover-end reset and the
+ * filter-change sync effect. Line labels (no precision) show when their
+ * hardware is active **and** the render kept them; parallelism labels show when
+ * their hardware is active and their precision is selected.
+ */
+export const labelOpacityForActiveState = (
+  attrs: LabelAttrs,
+  activeHwTypes: ReadonlySet<string>,
+  selectedPrecisions: readonly string[],
+): 0 | 1 => {
+  const { hwKey, precision } = attrs;
+  if (!hwKey) return 0;
+  if (!precision) {
+    return activeHwTypes.has(hwKey) && renderKept(attrs) ? 1 : 0;
+  }
+  return activeHwTypes.has(hwKey) && selectedPrecisions.includes(precision) ? 1 : 0;
+};