feat(server): add display value audit diff

GoogleChrome · Oct 15, 2019 · 0e0df55 · 0e0df55
1 parent 590bf04
commit 0e0df55
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/server/src/ui/routes/build-view/audit-list/audit-diff.jsx b/packages/server/src/ui/routes/build-view/audit-list/audit-diff.jsx
@@ -11,7 +11,7 @@ import {NumericDiff} from './numeric-diff';
 import {getDiffLabel, getRowLabelForIndex} from '@lhci/utils/src/audit-diff-finder';
 
 /** @param {{diff: LHCI.AuditDiff, audit: LH.AuditResult, baseAudit: LH.AuditResult}} props */
-const StandardDiff = props => {
+const ScoreDiff = props => {
   return (
     <Fragment>
       <ScoreWord audit={props.baseAudit} />
@@ -27,6 +27,23 @@ const StandardDiff = props => {
   );
 };
 
+/** @param {{diff: LHCI.DisplayValueAuditDiff, audit: LH.AuditResult, baseAudit: LH.AuditResult}} props */
+const DisplayValueDiff = props => {
+  return (
+    <Fragment>
+      <span>{props.diff.baseValue}</span>
+      <i
+        className={`material-icons audit-group__diff-arrow audit-group__diff-arrow--${getDiffLabel(
+          props.diff
+        )}`}
+      >
+        arrow_forward
+      </i>
+      <span>{props.diff.compareValue}</span>
+    </Fragment>
+  );
+};
+
 /** @param {import('@lhci/utils/src/audit-diff-finder').RowLabel} rowLabel @return {'regression'|'improvement'|'neutral'} */
 function getDiffLabelForRowLabel(rowLabel) {
   switch (rowLabel) {
@@ -124,6 +141,9 @@ export const AuditDiff = props => {
   }
 
   const scoreDiff = diffs.find(diff => diff.type === 'score');
-  if (!scoreDiff) return noDiffAvailable;
-  return <StandardDiff diff={scoreDiff} audit={audit} baseAudit={baseAudit} />;
+  if (scoreDiff) return <ScoreDiff diff={scoreDiff} audit={audit} baseAudit={baseAudit} />;
+
+  const displayValueDiff = diffs.find(diff => diff.type === 'displayValue');
+  if (!displayValueDiff || displayValueDiff.type !== 'displayValue') return noDiffAvailable;
+  return <DisplayValueDiff diff={displayValueDiff} audit={audit} baseAudit={baseAudit} />;
 };
diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -62,9 +62,7 @@ function computeAuditGroups(lhr, baseLhr) {
     const auditPairs = intermediateGroup.audits
       .map(audit => {
         const baseAudit = baseLhr && baseLhr.audits[audit.id || ''];
-        const diffs = baseAudit
-          ? findAuditDiffs(baseAudit, audit, {percentAbsoluteDeltaThreshold: 0.05})
-          : [];
+        const diffs = baseAudit ? findAuditDiffs(baseAudit, audit) : [];
         const maxSeverity = Math.max(...diffs.map(getDiffSeverity), 0);
         return {audit, baseAudit, diffs, maxSeverity, group: intermediateGroup.group};
       })