Skip to content

Show clipped benchmark rows in inference tables / 在推理表格中显示裁剪数据行 #708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Oseltamivir merged 1 commit into from
Aug 9, 2026
Merged

Show clipped benchmark rows in inference tables / 在推理表格中显示裁剪数据行 #708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions packages/app/cypress/component/scatter-graph.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -938,6 +938,110 @@ describe('ScatterGraph', () => {
});

describe('ChartDisplay engine comparison guard', () => {
it('includes cost-clipped official and unofficial points in table mode', () => {
const chartDefinition = createMockChartDefinition({
chartType: 'interactivity',
x: 'median_intvty',
x_label: 'Interactivity (tok/s/user)',
y_costhOutput: 'costhOutput.y',
y_costhOutput_label: 'Cost per Million Output Tokens ($)',
y_costhOutput_roofline: 'lower_right',
y_cost_limit: 5,
});
const officialVisible = createMockInferenceData({
hwKey: 'b200_sglang',
precision: Precision.FP4,
tp: 4,
median_intvty: 134.7,
costhOutput: { y: 4, roof: true },
});
const officialClipped = createMockInferenceData({
hwKey: 'b200_sglang',
precision: Precision.FP4,
tp: 8,
median_intvty: 142.1,
costhOutput: { y: 7.016, roof: true },
});
const runUrl = 'https://github.com/x/y/actions/runs/707';
const overlayVisible = createMockInferenceData({
hwKey: 'h100_vllm',
precision: Precision.FP4,
tp: 4,
median_intvty: 130,
costhOutput: { y: 4.5, roof: true },
run_url: runUrl,
});
const overlayClipped = createMockInferenceData({
hwKey: 'h100_vllm',
precision: Precision.FP4,
tp: 8,
median_intvty: 145,
costhOutput: { y: 7.5, roof: true },
run_url: runUrl,
});
const runInfo = {
id: 707,
name: 'clipped-table-overlay',
branch: 'clipped-table-overlay',
sha: 'abc707',
createdAt: '2026-08-09T00:00:00Z',
url: runUrl,
conclusion: 'success',
status: 'completed',
isNonMainBranch: true,
};

mountWithProviders(<ChartDisplay />, {
inference: {
graphs: [
{
model: Model.DeepSeek_R1,
sequence: Sequence.EightK_OneK,
chartDefinition,
data: [officialVisible],
clippedData: [{ point: officialClipped, reasons: ['cost'] }],
},
],
selectedYAxisMetric: 'y_costhOutput',
selectedXAxisMode: 'interactivity',
activeHwTypes: new Set(['b200_sglang']),
hwTypesWithData: new Set(['b200_sglang']),
},
globalFilters: {
selectedModel: Model.DeepSeek_R1,
selectedSequence: Sequence.EightK_OneK,
effectiveSequence: Sequence.EightK_OneK,
},
unofficial: {
isUnofficialRun: true,
unofficialRunInfo: runInfo,
unofficialRunInfos: [runInfo],
runIndexByUrl: { [runUrl]: 0, '707': 0 },
getOverlayData: () => ({
data: [overlayVisible, overlayClipped],
hardwareConfig: hwConfig,
}),
activeOverlayHwTypes: new Set(['h100_vllm']),
allOverlayHwTypes: new Set(['h100_vllm']),
},
});

cy.get('[data-testid="inference-table-view-btn"]').click();
cy.get('[data-testid="inference-results-table"] tbody tr').should('have.length', 4);
cy.get('[data-testid="inference-results-table"] tbody')
.contains('tr', '7.0')
.should('contain.text', 'SGLang')
.find('td')
.eq(2)
.should('have.text', '8');
cy.get('[data-testid="inference-results-table"] tbody')
.contains('tr', '7.5')
.should('contain.text', 'vLLM')
.find('td')
.eq(2)
.should('have.text', '8');
});

it('keeps official table rows synchronized with legend state after a scope change', () => {
const chartDefinition = createMockChartDefinition({ chartType: 'interactivity' });
const baseInference = createMockInferenceContext();
Expand Down
34 changes: 29 additions & 5 deletions packages/app/src/components/inference/ui/ChartDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,11 @@ export default function ChartDisplay() {
const overlayScope = useMemo(() => {
const eligibleKeys = new Set<string>();
for (const overlay of [overlayDataByChartType.e2e, overlayDataByChartType.interactivity]) {
for (const point of overlay?.data ?? []) {
const points = [
...(overlay?.data ?? []),
...(overlay?.clippedData ?? []).map((entry) => entry.point),
];
for (const point of points) {
const key = String(point.hwKey);
if (
selectedPrecisions.includes(point.precision) &&
Expand All @@ -430,7 +434,8 @@ export default function ChartDisplay() {
const officialScope = useMemo(() => {
const eligibleKeys = new Set<string>();
for (const graph of graphs) {
for (const point of graph.data) {
const points = [...graph.data, ...(graph.clippedData ?? []).map((entry) => entry.point)];
for (const point of points) {
if (
selectedPrecisions.includes(point.precision) &&
matchesQuickFilters(point, quickFilters)
Expand Down Expand Up @@ -538,7 +543,9 @@ export default function ChartDisplay() {
if (graphs.length > 0) return graphs;
const hasOverlay =
(overlayDataByChartType.e2e?.data.length ?? 0) > 0 ||
(overlayDataByChartType.interactivity?.data.length ?? 0) > 0;
(overlayDataByChartType.e2e?.clippedData?.length ?? 0) > 0 ||
(overlayDataByChartType.interactivity?.data.length ?? 0) > 0 ||
(overlayDataByChartType.interactivity?.clippedData?.length ?? 0) > 0;
if (!hasOverlay) return graphs;
return (chartDefinitions as ChartDefinition[]).map((chartDefinition) => ({
model: selectedModel,
Expand Down Expand Up @@ -835,9 +842,26 @@ export default function ChartDisplay() {
graph.chartDefinition.chartType,
overlayDataByChartType,
);
// Display limits keep outliers off the plotted domain but
// must not silently remove measured rows from the table.
// Restore both official and unofficial clipped points before
// applying the shared precision, quick-filter, and legend gates.
const tableOfficialData = [
...graph.data,
...(graph.clippedData ?? []).map((entry) => entry.point),
];
const tableOverlay = overlay
? {
...overlay,
data: [
...overlay.data,
...(overlay.clippedData ?? []).map((entry) => entry.point),
],
}
: overlay;
const { officialRows, overlayRows } = visibleComparisonRows(
graph.data,
overlay,
tableOfficialData,
tableOverlay,
);
return (
<>
Expand Down