report(category-renderer): add gatherMode option to category score

flow-report/src/summary/summary.tsx

@@ -31,14 +31,16 @@ const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
 const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
-}> = ({category, href}) => {
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   return (
     <div className="SummaryCategory">
       {
         category ?
           <CategoryScore
             category={category}
             href={href}
+            gatherMode={gatherMode}
           /> :
           <div
             className="SummaryCategory__null"
@@ -89,6 +91,7 @@ export const SummaryFlowStep: FunctionComponent<{
             key={c}
             category={reportResult.categories[c]}
             href={`#index=${hashIndex}&anchor=${c}`}
+            gatherMode={lhr.gatherMode}
           />
         ))
       }

flow-report/src/wrappers/category-score.tsx

@@ -12,12 +12,13 @@ import {useReportRenderer} from './report-renderer';
 export const CategoryScore: FunctionComponent<{
   category: LH.ReportResult.Category,
   href: string,
-}> = ({category, href}) => {
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   const {categoryRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    const el = categoryRenderer.renderCategoryScore(category, {});
+    const el = categoryRenderer.renderCategoryScore(category, {}, {gatherMode});
 
     // Category label is displayed in the navigation header.
     const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');

lighthouse-core/util-commonjs.js

@@ -108,9 +108,6 @@ class Util {
     const relevantAuditToMetricsMap = new Map();
 
     for (const category of Object.values(clone.categories)) {
-      category.displayMode =
-        clone.gatherMode === 'timespan' || clone.gatherMode === 'snapshot' ? 'fraction' : 'gauge';
-
       // Make basic lookup table for relevantAudits
       category.auditRefs.forEach(metricRef => {
         if (!metricRef.relevantAudits) return;

report/renderer/category-renderer.js

@@ -171,13 +171,14 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryHeader(category, groupDefinitions) {
+  renderCategoryHeader(category, groupDefinitions, options) {
     const component = this.dom.createComponent('categoryHeader');
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
-    const gaugeEl = this.renderCategoryScore(category, groupDefinitions);
+    const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
     gaugeContainerEl.appendChild(gaugeEl);
 
     if (category.description) {
@@ -314,10 +315,11 @@ export class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryScore(category, groupDefinitions) {
-    if (category.displayMode === 'fraction') {
+  renderCategoryScore(category, groupDefinitions, options) {
+    if (options && (options.gatherMode === 'snapshot' || options.gatherMode === 'timespan')) {
       return this.renderCategoryFraction(category);
     }
     return this.renderScoreGauge(category, groupDefinitions);
@@ -484,13 +486,15 @@ export class CategoryRenderer {
    *   ├── …
    *   ⋮
    * @param {LH.ReportResult.Category} category
-   * @param {Object<string, LH.Result.ReportGroup>} [groupDefinitions]
+   * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+   * @param {'PSI'=} environment
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    */
-  render(category, groupDefinitions = {}) {
+  render(category, groupDefinitions = {}, environment, options) {
     const element = this.dom.createElement('div', 'lh-category');
     this.createPermalinkSpan(element, category.id);
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */

report/renderer/performance-category-renderer.js

@@ -156,19 +156,20 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
    * @param {'PSI'=} environment 'PSI' and undefined are the only valid values
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    * @override
    */
-  render(category, groups, environment) {
+  render(category, groups, environment, options) {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
     if (environment === 'PSI') {
       const gaugeEl = this.dom.createElement('div', 'lh-score__gauge');
-      gaugeEl.appendChild(this.renderCategoryScore(category, groups));
+      gaugeEl.appendChild(this.renderCategoryScore(category, groups, options));
       element.appendChild(gaugeEl);
     } else {
       this.createPermalinkSpan(element, category.id);
-      element.appendChild(this.renderCategoryHeader(category, groups));
+      element.appendChild(this.renderCategoryHeader(category, groups, options));
     }
 
     // Metrics.

report/renderer/report-renderer.js

@@ -160,7 +160,11 @@ export class ReportRenderer {
 
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
-      const categoryGauge = renderer.renderCategoryScore(category, report.categoryGroups || {});
+      const categoryGauge = renderer.renderCategoryScore(
+        category,
+        report.categoryGroups || {},
+        {gatherMode: report.gatherMode}
+      );
 
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
@@ -238,12 +242,18 @@ export class ReportRenderer {
     }
 
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(category, report.categoryGroups));
+      wrapper.appendChild(renderer.render(
+        category,
+        report.categoryGroups,
+        undefined, // environment
+        categoryOptions
+      ));
     }
 
     const reportFragment = this._dom.createFragment();

report/renderer/util.js

@@ -105,9 +105,6 @@ export class Util {
     const relevantAuditToMetricsMap = new Map();
 
     for (const category of Object.values(clone.categories)) {
-      category.displayMode =
-        clone.gatherMode === 'timespan' || clone.gatherMode === 'snapshot' ? 'fraction' : 'gauge';
-
       // Make basic lookup table for relevantAudits
       category.auditRefs.forEach(metricRef => {
         if (!metricRef.relevantAudits) return;

report/test/renderer/category-renderer-test.js

@@ -290,8 +290,12 @@ describe('CategoryRenderer', () => {
     });
 
     it('renders the category header with fraction', () => {
-      category.displayMode = 'fraction';
-      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
+      const categoryDOM = renderer.render(
+        category,
+        sampleResults.categoryGroups,
+        undefined,
+        {gatherMode: 'snapshot'}
+      );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
       assert.equal(gauge.textContent.trim(), '49/54', 'fraction is included');

report/types/report-result.d.ts

@@ -18,7 +18,6 @@ interface ReportResult extends LHResult {
 declare module ReportResult {
   interface Category extends LHResult.Category {
     auditRefs: Array<AuditRef>;
-    displayMode: 'gauge'|'fraction';
   }
 
   interface AuditRef extends LHResult.AuditRef {