fix: orient power envelopes by frontier direction, not chart type

中文：功耗包络线按前沿方向而非图表类型确定起点，修复 E2E Normalized Interactivity 横轴下包络线方向错误

Author: edwingao28

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

@@ -395,13 +395,13 @@ const GPUGraph = React.memo(
     }, [groupedData, frontierDirection]);
 
     const rooflines = useMemo(() => {
-      if (!powerEnvelopeMode) return paretoRooflines;
+      if (!powerEnvelopeMode || !frontierDirection) return paretoRooflines;
       const result: Record<string, InferenceData[]> = {};
       for (const [key, points] of Object.entries(groupedData)) {
-        result[key] = upperPowerEnvelope(points, chartDefinition.chartType !== 'e2e');
+        result[key] = upperPowerEnvelope(points, frontierDirection);
       }
       return result;
-    }, [powerEnvelopeMode, groupedData, paretoRooflines, chartDefinition.chartType]);
+    }, [powerEnvelopeMode, groupedData, paretoRooflines, frontierDirection]);
 
     const boundaryPointKeys = useMemo(() => {
       const keys = new Set<string>();

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

@@ -100,7 +100,7 @@ import {
   getShapeKeyForPrecision,
 } from '@/lib/chart-rendering';
 import { useThemeColors } from '@/hooks/useThemeColors';
-import { isFrontierEligible, type ParetoDirection } from '@/lib/chart-utils';
+import { isFrontierEligible, paretoMaximizesX, type ParetoDirection } from '@/lib/chart-utils';
 import { frontierHardwareKeys } from '@/components/inference/utils/pareto-series';
 import {
   globalParetoFrontier,
@@ -550,14 +550,14 @@ const ScatterGraph = React.memo(
     const groupDisplayedPoints = useCallback(
       (points: InferenceData[]) => {
         const groups = groupPointsByDate(points);
-        if (showPowerEnvelope) {
+        if (showPowerEnvelope && paretoDirection) {
           for (const [date, samples] of groups) {
-            groups.set(date, upperPowerEnvelope(samples, chartDefinition.chartType !== 'e2e'));
+            groups.set(date, upperPowerEnvelope(samples, paretoDirection));
           }
         }
         return groups;
       },
-      [showPowerEnvelope, chartDefinition.chartType],
+      [showPowerEnvelope, paretoDirection],
     );
     const locale = useLocale();
     const legendT = SCATTER_STRINGS[locale];
@@ -1501,10 +1501,7 @@ const ScatterGraph = React.memo(
       ],
     );
 
-    // Roofline direction names are historical: upper_left maximizes X,
-    // upper_right minimizes X. Use the resolved definition, which also covers
-    // custom X metrics such as TTFT, rather than inferring from chart type.
-    const maximizeParetoX = paretoDirection === 'upper_left' || paretoDirection === 'lower_right';
+    const maximizeParetoX = paretoDirection !== undefined && paretoMaximizesX(paretoDirection);
     const maximizeParetoY = paretoDirection?.startsWith('upper') ?? true;
     const globalParetoPoints = useMemo(
       () =>

packages/app/src/components/inference/utils/powerCurves.test.ts

@@ -86,7 +86,7 @@ describe('upper power envelope', () => {
     const dominated = point(64, 20.51, 344.95, { decode_ep: 8 });
     const slower = point(256, 4.65, 372.9, { decode_ep: 8 });
     const input = Object.freeze([fast, middle, dominated, peak, slower]);
-    expect(upperPowerEnvelope(input, true)).toEqual([peak, middle, fast]);
+    expect(upperPowerEnvelope(input, 'lower_right')).toEqual([peak, middle, fast]);
     expect(input).toEqual([fast, middle, dominated, peak, slower]);
     expect(chartFrontier([...input], 'lower_right')).toEqual([fast]);
   });
@@ -96,18 +96,18 @@ describe('upper power envelope', () => {
     const middle = point(8, 2, 700);
     const slow = point(32, 4, 950);
     const samples = [slow, point(16, 3, 700), point(4, 2, 500), middle, { ...middle }, fast];
-    expect(upperPowerEnvelope(samples, false)).toEqual([fast, middle, slow]);
+    expect(upperPowerEnvelope(samples, 'lower_left')).toEqual([fast, middle, slow]);
     expect(
       upperPowerEnvelope(
         samples.map((p) => ({ ...p, x: 1000 / p.x })),
-        true,
+        'lower_right',
       ).map((p) => p.y),
     ).toEqual([950, 700, 350]);
   });
 
   it('uses only finite positive coordinates and preserves singleton boundaries', () => {
     const valid = point(1, 200, 350);
-    expect(upperPowerEnvelope([], true)).toEqual([]);
+    expect(upperPowerEnvelope([], 'lower_right')).toEqual([]);
     expect(
       upperPowerEnvelope(
         [
@@ -120,7 +120,7 @@ describe('upper power envelope', () => {
           point(1, 10, -1),
           valid,
         ],
-        true,
+        'lower_right',
       ),
     ).toEqual([valid]);
   });

packages/app/src/components/inference/utils/powerCurves.ts

@@ -2,6 +2,7 @@ import type { InferenceData } from '@/components/inference/types';
 import {
   isFrontierEligible,
   paretoFrontForDirection,
+  paretoMaximizesX,
   type ParetoDirection,
 } from '@/lib/chart-utils';
 
@@ -39,13 +40,15 @@ export function chartFrontier(
 
 /**
  * Higher-power outer boundary across tested configurations, not an efficiency
- * frontier. Unique X vertices avoid concurrency backtracking during smoothing.
+ * frontier. It starts from the X end the chart's frontier `direction` favors.
+ * Unique X vertices avoid concurrency backtracking during smoothing.
  * Callers scope the samples by hardware, precision, date and overlay run.
  */
 export function upperPowerEnvelope(
   points: readonly InferenceData[],
-  maximizeX: boolean,
+  direction: ParetoDirection,
 ): InferenceData[] {
+  const maximizeX = paretoMaximizesX(direction);
   const sorted = points
     .filter((point) => isFrontierEligible(point) && Number.isFinite(point.y) && point.y > 0)
     .sort((a, b) => (maximizeX ? b.x - a.x : a.x - b.x) || b.y - a.y);

packages/app/src/lib/api-route-catalog.ts

@@ -931,7 +931,7 @@ export const apiContractSourceDigests = [
 
   {
     source: 'src/lib/views-api/series.ts',
-    sourceSha256: 'b5ebddee9d9ea6b85a8fdab2cf8fcc50bbf05e0fa10564987698abd38a6d4488',
+    sourceSha256: '8290913d9632434148a4b1951259492c4d5e67031b37a8ded12feb640c72bf38',
     reviewArea: {
       en: 'Dashboard read-only selector and calculation parity.',
       zh: '仪表板只读接口的选择项与计算一致性。',

packages/app/src/lib/chart-utils.ts

@@ -758,6 +758,15 @@ export const paretoFrontForDirection = (
   dir: ParetoDirection,
 ): ((points: InferenceData[]) => InferenceData[]) => PARETO_BY_DIRECTION[dir];
 
+/**
+ * Whether a roofline direction favors higher X. The names are historical:
+ * upper_left maximizes X and upper_right minimizes X. Read X direction from
+ * the resolved corner, never from chart type: trace-derived and custom X
+ * metrics reuse a chart definition whose natural X runs the other way.
+ */
+export const paretoMaximizesX = (dir: ParetoDirection): boolean =>
+  dir === 'upper_left' || dir === 'lower_right';
+
 // ---------------------------------------------------------------------------
 // Locale-aware metric label/title helpers
 // ---------------------------------------------------------------------------

packages/app/src/lib/views-api/series.ts

@@ -37,6 +37,7 @@ import { transformBenchmarkRows } from '@/lib/benchmark-transform';
 import {
   isFrontierEligible,
   paretoFrontForDirection,
+  paretoMaximizesX,
   remapInferencePoint,
   type ParetoDirection,
 } from '@/lib/chart-utils';
@@ -287,7 +288,7 @@ export function buildInferenceSeries(
   // 7. Frontier flags, scoped per (hwKey, precision, date) like ScatterGraph.
   // Measured power represents load demand, so retain its upper boundary.
   const isMeasuredPower = isMeasuredPowerCurveMetric(metricConfigKey);
-  const maximizePowerX = chartDef.chartType !== 'e2e';
+  const maximizePowerX = direction !== null && paretoMaximizesX(direction);
   const frontierDirection = isMeasuredPower
     ? maximizePowerX
       ? 'upper_right'
@@ -305,7 +306,7 @@ export function buildInferenceSeries(
     }
     for (const bucket of byHwDate.values()) {
       const frontier = isMeasuredPower
-        ? upperPowerEnvelope(bucket, maximizePowerX)
+        ? upperPowerEnvelope(bucket, direction)
         : frontierFn(bucket.filter(isFrontierEligible));
       for (const point of frontier) {
         frontierPoints.add(point);