[RPP] Sort insights by estimated savings and field data

See go/cpq:enhance-trace-crux

Bug: 368135130
Change-Id: I86e4da9ca0d1e888ac9283045cb3130dfac210dc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6088178
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Connor Clark

config/gni/devtools_grd_files.gni

@@ -1103,6 +1103,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/insights/Models.js",
   "front_end/models/trace/insights/RenderBlocking.js",
   "front_end/models/trace/insights/SlowCSSSelector.js",
+  "front_end/models/trace/insights/Statistics.js",
   "front_end/models/trace/insights/ThirdParties.js",
   "front_end/models/trace/insights/Viewport.js",
   "front_end/models/trace/insights/types.js",

front_end/models/trace/ModelImpl.ts

@@ -116,6 +116,7 @@ export class Model extends EventTarget {
       await this.#processor.parse(traceEvents, {
         isFreshRecording,
         isCPUProfile,
+        metadata,
       });
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid

front_end/models/trace/Processor.ts

@@ -61,6 +61,7 @@ export interface ParseOptions {
    * @default false
    */
   isCPUProfile?: boolean;
+  metadata?: Types.File.MetaData;
 }
 
 export class TraceProcessor extends EventTarget {
@@ -173,7 +174,7 @@ export class TraceProcessor extends EventTarget {
       this.#status = Status.PARSING;
       await this.#computeParsedTrace(traceEvents);
       if (this.#data && !options.isCPUProfile) {  // We do not calculate insights for CPU Profiles.
-        this.#computeInsights(this.#data, traceEvents);
+        this.#computeInsights(this.#data, traceEvents, options);
       }
       this.#status = Status.FINISHED_PARSING;
     } catch (e) {
@@ -342,9 +343,99 @@ export class TraceProcessor extends EventTarget {
     return {graph, simulator, metrics};
   }
 
-  #computeInsightSets(
+  /**
+   * Sort the insight models based on the impact of each insight's estimated savings, additionally weighted by the
+   * worst metrics according to field data (if present).
+   */
+  #sortInsightSet(
+      insights: Insights.Types.TraceInsightSets, insightSet: Insights.Types.InsightSet, options: ParseOptions): void {
+    // The initial order of the insights is alphabetical, based on `front_end/models/trace/insights/Models.ts`.
+    // The order here provides a baseline that groups insights in a more logical way.
+    const baselineOrder: Record<keyof Insights.Types.InsightModels, null> = {
+      InteractionToNextPaint: null,
+      LCPPhases: null,
+      LCPDiscovery: null,
+      CLSCulprits: null,
+      RenderBlocking: null,
+      ImageDelivery: null,
+      DocumentLatency: null,
+      FontDisplay: null,
+      Viewport: null,
+      DOMSize: null,
+      ThirdParties: null,
+      SlowCSSSelector: null,
+    };
+
+    // Determine the weights for each metric based on field data, utilizing the same scoring curve that Lighthouse uses.
+    const weights = Insights.Common.calculateMetricWeightsForSorting(insightSet, options.metadata ?? null);
+
+    // Normalize the estimated savings to a single number, weighted by its relative impact
+    // to the page experience based on the same scoring curve that Lighthouse uses.
+    const observedLcp = Insights.Common.getLCP(insights, insightSet.id)?.value;
+    const observedInp = Insights.Common.getINP(insights, insightSet.id)?.value;
+    const observedCls = Insights.Common.getCLS(insights, insightSet.id).value;
+    const observedLcpScore =
+        observedLcp !== undefined ? Insights.Common.evaluateLCPMetricScore(observedLcp) : undefined;
+    const observedInpScore =
+        observedInp !== undefined ? Insights.Common.evaluateINPMetricScore(observedInp) : undefined;
+    const observedClsScore = Insights.Common.evaluateCLSMetricScore(observedCls);
+
+    const insightToSortingRank = new Map<string, number>();
+    for (const [name, model] of Object.entries(insightSet.model)) {
+      const lcp = model.metricSavings?.LCP ?? 0;
+      const inp = model.metricSavings?.INP ?? 0;
+      const cls = model.metricSavings?.CLS ?? 0;
+
+      const lcpPostSavings = observedLcp !== undefined ? Math.max(0, observedLcp - lcp) : undefined;
+      const inpPostSavings = observedInp !== undefined ? Math.max(0, observedInp - inp) : undefined;
+      const clsPostSavings = observedCls !== undefined ? Math.max(0, observedCls - cls) : undefined;
+
+      let score = 0;
+      if (weights.lcp && lcp && observedLcpScore !== undefined && lcpPostSavings !== undefined) {
+        score += weights.lcp * (Insights.Common.evaluateLCPMetricScore(lcpPostSavings) - observedLcpScore);
+      }
+      if (weights.inp && inp && observedInpScore !== undefined && inpPostSavings !== undefined) {
+        score += weights.inp * (Insights.Common.evaluateINPMetricScore(inpPostSavings) - observedInpScore);
+      }
+      if (weights.cls && cls && observedClsScore !== undefined && clsPostSavings !== undefined) {
+        score += weights.cls * (Insights.Common.evaluateCLSMetricScore(clsPostSavings) - observedClsScore);
+      }
+
+      insightToSortingRank.set(name, score);
+    }
+
+    // Now perform the actual sorting.
+    const baselineOrderKeys = Object.keys(baselineOrder);
+    const orderedKeys = Object.keys(insightSet.model);
+    orderedKeys.sort((a, b) => {
+      const a1 = baselineOrderKeys.indexOf(a);
+      const b1 = baselineOrderKeys.indexOf(b);
+      if (a1 >= 0 && b1 >= 0) {
+        return a1 - b1;
+      }
+      if (a1 >= 0) {
+        return -1;
+      }
+      if (b1 >= 0) {
+        return 1;
+      }
+      return 0;
+    });
+    orderedKeys.sort((a, b) => (insightToSortingRank.get(b) ?? 0) - (insightToSortingRank.get(a) ?? 0));
+
+    const newModel = {} as Insights.Types.InsightModels;
+    for (const key of orderedKeys as Array<keyof Insights.Types.InsightModels>) {
+      const model = insightSet.model[key];
+      // @ts-expect-error Maybe someday typescript will be powerful enough to handle this.
+      newModel[key] = model;
+    }
+    insightSet.model = newModel;
+  }
+
+  #computeInsightSet(
       insights: Insights.Types.TraceInsightSets, parsedTrace: Handlers.Types.ParsedTrace,
-      insightRunners: Partial<typeof Insights.Models>, context: Insights.Types.InsightSetContext): void {
+      insightRunners: Partial<typeof Insights.Models>, context: Insights.Types.InsightSetContext,
+      options: ParseOptions): void {
     const model = {} as Insights.Types.InsightSet['model'];
 
     for (const [name, insight] of Object.entries(insightRunners)) {
@@ -376,21 +467,24 @@ export class TraceProcessor extends EventTarget {
       return;
     }
 
-    const insightSets = {
+    const insightSet: Insights.Types.InsightSet = {
       id,
       url,
       navigation,
       frameId: context.frameId,
       bounds: context.bounds,
       model,
     };
-    insights.set(insightSets.id, insightSets);
+    insights.set(insightSet.id, insightSet);
+    this.#sortInsightSet(insights, insightSet, options);
   }
 
   /**
    * Run all the insights and set the result to `#insights`.
    */
-  #computeInsights(parsedTrace: Handlers.Types.ParsedTrace, traceEvents: readonly Types.Events.Event[]): void {
+  #computeInsights(
+      parsedTrace: Handlers.Types.ParsedTrace, traceEvents: readonly Types.Events.Event[],
+      options: ParseOptions): void {
     this.#insights = new Map();
 
     const enabledInsightRunners = TraceProcessor.getEnabledInsightRunners(parsedTrace);
@@ -410,15 +504,15 @@ export class TraceProcessor extends EventTarget {
           bounds,
           frameId: parsedTrace.Meta.mainFrameId,
         };
-        this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+        this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
       }
       // If threshold is not met, then the very beginning of the trace is ignored by the insights engine.
     } else {
       const context: Insights.Types.InsightSetContext = {
         bounds: parsedTrace.Meta.traceBounds,
         frameId: parsedTrace.Meta.mainFrameId,
       };
-      this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+      this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
     }
 
     // Now run the insights for each navigation in isolation.
@@ -466,7 +560,7 @@ export class TraceProcessor extends EventTarget {
         lantern,
       };
 
-      this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+      this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
     }
   }
 }

front_end/models/trace/insights/BUILD.gn

@@ -20,6 +20,7 @@ devtools_module("insights") {
     "Models.ts",
     "RenderBlocking.ts",
     "SlowCSSSelector.ts",
+    "Statistics.ts",
     "ThirdParties.ts",
     "Viewport.ts",
     "types.ts",

front_end/models/trace/insights/Common.ts

@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {InsightModels, TraceInsightSets} from './types.js';
+import type * as CrUXManager from '../../crux-manager/crux-manager.js';
+import * as Helpers from '../helpers/helpers.js';
+import type * as Types from '../types/types.js';
+
+import {getLogNormalScore} from './Statistics.js';
+import type {InsightModels, InsightSet, TraceInsightSets} from './types.js';
 
 export function getInsight<InsightName extends keyof InsightModels>(
     insightName: InsightName, insights: TraceInsightSets|null, key: string|null): InsightModels[InsightName]|null {
@@ -23,3 +28,115 @@ export function getInsight<InsightName extends keyof InsightModels>(
   // For some reason typescript won't narrow the type by removing Error, so do it manually.
   return insight as InsightModels[InsightName];
 }
+
+export function getLCP(insights: TraceInsightSets|null, key: string|null):
+    {value: Types.Timing.MicroSeconds, event: Types.Events.LargestContentfulPaintCandidate}|null {
+  const insight = getInsight('LCPPhases', insights, key);
+  if (!insight || !insight.lcpMs || !insight.lcpEvent) {
+    return null;
+  }
+
+  const value = Helpers.Timing.millisecondsToMicroseconds(insight.lcpMs);
+  return {value, event: insight.lcpEvent};
+}
+
+export function getINP(insights: TraceInsightSets|null, key: string|null):
+    {value: Types.Timing.MicroSeconds, event: Types.Events.SyntheticInteractionPair}|null {
+  const insight = getInsight('InteractionToNextPaint', insights, key);
+  if (!insight?.longestInteractionEvent?.dur) {
+    return null;
+  }
+
+  const value = insight.longestInteractionEvent.dur;
+  return {value, event: insight.longestInteractionEvent};
+}
+
+export function getCLS(
+    insights: TraceInsightSets|null, key: string|null): {value: number, worstShiftEvent: Types.Events.Event|null} {
+  const insight = getInsight('CLSCulprits', insights, key);
+  if (!insight) {
+    // Unlike the other metrics, there is always a value for CLS even with no data.
+    return {value: 0, worstShiftEvent: null};
+  }
+
+  // TODO(cjamcl): the CLS insight should be doing this for us.
+  let maxScore = 0;
+  let worstCluster;
+  for (const cluster of insight.clusters) {
+    if (cluster.clusterCumulativeScore > maxScore) {
+      maxScore = cluster.clusterCumulativeScore;
+      worstCluster = cluster;
+    }
+  }
+
+  return {value: maxScore, worstShiftEvent: worstCluster?.worstShiftEvent ?? null};
+}
+
+export function evaluateLCPMetricScore(value: number): number {
+  return getLogNormalScore({p10: 2500, median: 4000}, value);
+}
+
+export function evaluateINPMetricScore(value: number): number {
+  return getLogNormalScore({p10: 200, median: 500}, value);
+}
+
+export function evaluateCLSMetricScore(value: number): number {
+  return getLogNormalScore({p10: 0.1, median: 0.25}, value);
+}
+
+export function calculateMetricWeightsForSorting(
+    insightSet: InsightSet, metadata: Types.File.MetaData|null): {lcp: number, inp: number, cls: number} {
+  const weights = {
+    lcp: 1 / 3,
+    inp: 1 / 3,
+    cls: 1 / 3,
+  };
+
+  const cruxFieldData = metadata?.cruxFieldData;
+  if (!cruxFieldData) {
+    return weights;
+  }
+
+  const getPageResult = (url: string, origin: string): CrUXManager.PageResult|undefined => {
+    return cruxFieldData.find(result => {
+      const key = (result['url-ALL'] || result['origin-ALL'])?.record.key;
+      return (key?.url && key.url === url) || (key?.origin && key.origin === origin);
+    });
+  };
+  const getMetricValue = (pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames): number|null => {
+    const score = pageResult['url-ALL']?.record.metrics[name]?.percentiles?.p75 ??
+        pageResult['origin-ALL']?.record.metrics[name]?.percentiles?.p75;
+    if (typeof score === 'number') {
+      return score;
+    }
+    if (typeof score === 'string' && Number.isFinite(Number(score))) {
+      return Number(score);
+    }
+    return null;
+  };
+
+  const pageResult = getPageResult(insightSet.url.href, insightSet.url.origin);
+  if (!pageResult) {
+    return weights;
+  }
+
+  const fieldLcp = getMetricValue(pageResult, 'largest_contentful_paint');
+  const fieldInp = getMetricValue(pageResult, 'interaction_to_next_paint');
+  const fieldCls = getMetricValue(pageResult, 'cumulative_layout_shift');
+  const fieldLcpScore = fieldLcp !== null ? evaluateLCPMetricScore(fieldLcp) : 0;
+  const fieldInpScore = fieldInp !== null ? evaluateINPMetricScore(fieldInp) : 0;
+  const fieldClsScore = fieldCls !== null ? evaluateCLSMetricScore(fieldCls) : 0;
+  const fieldLcpScoreInverted = 1 - fieldLcpScore;
+  const fieldInpScoreInverted = 1 - fieldInpScore;
+  const fieldClsScoreInverted = 1 - fieldClsScore;
+  const invertedSum = fieldLcpScoreInverted + fieldInpScoreInverted + fieldClsScoreInverted;
+  if (!invertedSum) {
+    return weights;
+  }
+
+  weights.lcp = fieldLcpScoreInverted / invertedSum;
+  weights.inp = fieldInpScoreInverted / invertedSum;
+  weights.cls = fieldClsScoreInverted / invertedSum;
+
+  return weights;
+}