renderFilterableSection(category, groups, groupNames, metricAudits) {
    if (groupNames.some(groupName => !groups[groupName])) return null;

    const element = this.dom.createElement('div');

    /** @type {Set<string>} */
    const replacedAuditIds = new Set();

    /**
     * This exists to temporarily allow showing insights - which are in the hidden
     * group by default - when using the insights toggle.
     * See https://github.com/GoogleChrome/lighthouse/pull/16418 for motivation.
     *
     * @param {LH.ReportResult.AuditRef} auditRef
     */
    const getGroup = (auditRef) => {
      return auditRef.id.endsWith('-insight') ? 'insights' : auditRef.group ?? '';
    };

    const allGroupAudits =
      category.auditRefs.filter(audit => groupNames.includes(getGroup(audit)));
    for (const auditRef of allGroupAudits) {
      auditRef.result.replacesAudits?.forEach(replacedAuditId => {
        replacedAuditIds.add(replacedAuditId);
      });
    }

    // Diagnostics
    const allFilterableAudits = allGroupAudits
      .filter(audit => !replacedAuditIds.has(audit.id))
      .map(auditRef => {
        const {overallImpact, overallLinearImpact} = this.overallImpact(auditRef, metricAudits);
        const guidanceLevel = auditRef.result.guidanceLevel || 1;
        const auditEl = this.renderAudit(auditRef);

        return {auditRef, auditEl, overallImpact, overallLinearImpact, guidanceLevel};
      });

    const filterableAudits = allFilterableAudits
      .filter(audit => !ReportUtils.showAsPassed(audit.auditRef.result));

    const passedAudits = allFilterableAudits
      .filter(audit => ReportUtils.showAsPassed(audit.auditRef.result));

    /** @type {Record<string, [Element, Element|null]|undefined>} */
    const groupElsMap = {};
    for (const groupName of groupNames) {
      const groupEls = this.renderAuditGroup(groups[groupName]);
      groupEls[0].classList.add(`lh-audit-group--${groupName}`);
      groupElsMap[groupName] = groupEls;
    }

    /**
     * @param {string} acronym
     */
    function refreshFilteredAudits(acronym) {
      for (const audit of allFilterableAudits) {
        if (acronym === 'All') {
          audit.auditEl.hidden = false;
        } else {
          const shouldHide = audit.auditRef.result.metricSavings?.[acronym] === undefined;
          audit.auditEl.hidden = shouldHide;
        }
      }

      filterableAudits.sort((a, b) => {
        // Performance diagnostics should only have score display modes of "informative" and "metricSavings"
        // If the score display mode is "metricSavings", the `score` will be a coarse approximation of the overall impact.
        // Therefore, it makes sense to sort audits by score first to ensure visual clarity with the score icons.
        const scoreA = a.auditRef.result.score || 0;
        const scoreB = b.auditRef.result.score || 0;
        if (scoreA !== scoreB) return scoreA - scoreB;

        // If there is a metric filter applied, we should sort by the impact to that specific metric.
        if (acronym !== 'All') {
          const aSavings = a.auditRef.result.metricSavings?.[acronym] ?? -1;
          const bSavings = b.auditRef.result.metricSavings?.[acronym] ?? -1;
          if (aSavings !== bSavings) return bSavings - aSavings;
        }

        // Overall impact is the estimated improvement to the performance score
        if (a.overallImpact !== b.overallImpact) {
          return b.overallImpact * b.guidanceLevel - a.overallImpact * a.guidanceLevel;
        }

        // Fall back to the linear impact if the normal impact is rounded down to 0
        if (
          a.overallImpact === 0 && b.overallImpact === 0 &&
          a.overallLinearImpact !== b.overallLinearImpact
        ) {
          return b.overallLinearImpact * b.guidanceLevel - a.overallLinearImpact * a.guidanceLevel;
        }

        // Audits that have no estimated savings should be prioritized by the guidance level
        return b.guidanceLevel - a.guidanceLevel;
      });

      for (const audit of filterableAudits) {
        if (!audit.auditRef.group) continue;

        const groupEls = groupElsMap[getGroup(audit.auditRef)];
        if (!groupEls) continue;

        const [groupEl, footerEl] = groupEls;
        groupEl.insertBefore(audit.auditEl, footerEl);
      }
    }

    /** @type {Set<string>} */
    const filterableMetricAcronyms = new Set();
    for (const audit of filterableAudits) {
      const metricSavings = audit.auditRef.result.metricSavings || {};
      for (const [key, value] of Object.entries(metricSavings)) {
        if (typeof value === 'number') filterableMetricAcronyms.add(key);
      }
    }

    const filterableMetrics =
      metricAudits.filter(a => a.acronym && filterableMetricAcronyms.has(a.acronym));

    // TODO: only add if there are opportunities & diagnostics rendered.
    if (filterableMetrics.length) {
      this.renderMetricAuditFilter(filterableMetrics, element, refreshFilteredAudits);
    }

    refreshFilteredAudits('All');

    for (const groupName of groupNames) {
      if (filterableAudits.some(audit => getGroup(audit.auditRef) === groupName)) {
        const groupEls = groupElsMap[groupName];
        if (!groupEls) continue;
        element.append(groupEls[0]);
      }
    }

    if (!passedAudits.length) return element;

    const clumpOpts = {
      auditRefsOrEls: passedAudits.map(audit => audit.auditEl),
      groupDefinitions: groups,
    };
    const passedElem = this.renderClump('passed', clumpOpts);
    element.append(passedElem);

    return element;
  }
@param {LH.ReportResult.Category} category
@param {Object<string, LH.Result.ReportGroup>} groups
@param {string[]} groupNames
@param {LH.ReportResult.AuditRef[]} metricAudits
@return {Element|null}