Storyshots everywhere! 🎉

packages/server/.storybook/preview.css

@@ -7,5 +7,9 @@
 html,
 body,
 #root {
-  height: 100%;
+  min-height: 100vh;
 }
+
+@import 'https://fonts.googleapis.com/css?family=Roboto:400,500&display=block';
+@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=block';
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

packages/server/.storybook/preview.jsx

@@ -13,10 +13,10 @@ require('../src/ui/app.css');
 const {addDecorator} = require('@storybook/preact');
 addDecorator(storyFn => (
   <div
+    id="storybook-test-root"
     style={{
       width: '100%',
-      height: '100%',
-      padding: '5vh 5vw',
+      minHeight: '100vh',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',

packages/server/src/ui/components/d3-graph.jsx

@@ -66,19 +66,26 @@ export function findRootSvg(rootEl, margin) {
  */
 export const D3Graph = props => {
   const graphElRef = useRef(/** @type {HTMLElement|undefined} */ (undefined));
+  const updateKey = props.computeUpdateKey ? props.computeUpdateKey(props.data) : '';
+  const rerender = () => {
+    if (!graphElRef.current) return;
+    props.render(graphElRef.current, props.data);
+    if (props.update) props.update(graphElRef.current, props.data);
+  };
 
   useEffect(() => {
-    const rerender = () => graphElRef.current && props.render(graphElRef.current, props.data);
-
     rerender();
+  }, [props.computeRerenderKey(props.data)]);
+
+  useEffect(() => {
     window.addEventListener('resize', rerender);
     return () => window.removeEventListener('resize', rerender);
-  }, [props.computeRerenderKey(props.data)]);
+  }, [updateKey]);
 
   useEffect(() => {
     if (!props.update || !graphElRef.current) return;
     props.update(graphElRef.current, props.data);
-  }, [props.computeUpdateKey ? props.computeUpdateKey(props.data) : '']);
+  }, [updateKey]);
 
   return <div className={props.className} ref={graphElRef} />;
 };

packages/server/src/ui/components/gauge.stories.jsx

@@ -8,8 +8,9 @@ import {h} from 'preact';
 import {Gauge} from './gauge';
 
 export default {
-  title: 'Gauge',
+  title: 'Components/Gauge',
   component: Gauge,
+  parameters: {dimensions: {width: 120, height: 120}},
 };
 
 /** @type {LHCI.NumericAuditDiff} */

packages/server/src/ui/components/pwa-gauge.stories.jsx

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h} from 'preact';
+import {PWAGauge} from './pwa-gauge';
+
+export default {
+  title: 'Components/PWA Gauge',
+  component: PWAGauge,
+  parameters: {dimensions: {width: 120, height: 120}},
+};
+
+const allFalse = {optimized: false, installable: false, fastAndReliable: false};
+const allTrue = {optimized: true, installable: true, fastAndReliable: true};
+
+export const Default = () => <PWAGauge status={allFalse} />;
+export const Optimized = () => <PWAGauge status={{...allFalse, optimized: true}} />;
+export const OptimizedAndInstallable = () => (
+  <PWAGauge status={{...allFalse, optimized: true, installable: true}} />
+);
+export const OptimizedAndFast = () => (
+  <PWAGauge status={{...allFalse, optimized: true, fastAndReliable: true}} />
+);
+export const Installable = () => <PWAGauge status={{...allFalse, installable: true}} />;
+export const InstallableAndFast = () => (
+  <PWAGauge status={{...allFalse, installable: true, fastAndReliable: true}} />
+);
+export const Fast = () => <PWAGauge status={{...allFalse, fastAndReliable: true}} />;
+export const PWA = () => <PWAGauge status={allTrue} />;

packages/server/src/ui/components/score-delta-badge.stories.jsx

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h} from 'preact';
+import {ScoreDeltaBadge} from './score-delta-badge';
+
+export default {
+  title: 'Components/Score Delta Badge',
+  component: ScoreDeltaBadge,
+  parameters: {dimensions: {width: 120, height: 60}},
+};
+
+/** @type {LHCI.NumericAuditDiff} */
+const numericDiff = {
+  type: 'score',
+  auditId: '',
+  baseValue: 0.5,
+  compareValue: 0.5,
+};
+
+export const Netural = () => <ScoreDeltaBadge diff={numericDiff} />;
+export const Improvement = () => <ScoreDeltaBadge diff={{...numericDiff, compareValue: 0.7}} />;
+export const Regression = () => <ScoreDeltaBadge diff={{...numericDiff, compareValue: 0.3}} />;

packages/server/src/ui/index.html

@@ -9,7 +9,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Roboto+Mono:400,500&display=swap"
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap"
     />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="icon" href="./favicon.png" />

packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css

@@ -20,6 +20,15 @@
   border-left: 1px solid var(--base-border-color);
 }
 
+#storybook-test-root .audit-detail-pane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: initial;
+  height: max-content;
+  overflow-y: visible;
+}
+
 .audit-detail-pane__close {
   position: fixed;
   z-index: 10;
@@ -38,6 +47,10 @@
   cursor: pointer;
 }
 
+#storybook-test-root .audit-detail-pane__close {
+  top: 10px;
+}
+
 .audit-detail-pane__close i.material-icons {
   font-size: 22px;
 }

packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.stories.jsx

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h} from 'preact';
+import {action} from '@storybook/addon-actions';
+import {computeAuditGroups} from '../lhr-comparison';
+import {AuditDetailPane} from './audit-detail-pane';
+import lhrA_ from '../../../../../test/fixtures/lh-5-6-0-verge-a.json';
+import lhrB_ from '../../../../../test/fixtures/lh-5-6-0-verge-b.json';
+
+export default {
+  title: 'Build View/Audit Detail Pane',
+  component: AuditDetailPane,
+  parameters: {dimensions: 'auto'},
+};
+
+const lhrA = /** @type {any} */ (lhrA_);
+const lhrB = /** @type {any} */ (lhrB_);
+
+/** @type {Array<LHCI.AuditPair>} */
+const auditPairs = computeAuditGroups(lhrA, lhrB, {percentAbsoluteDeltaThreshold: 0.05})
+  .filter(group => !group.showAsUnchanged)
+  .map(group => group.pairs)
+  .reduce((a, b) => a.concat(b))
+  // We don't need *all* the audits, so sample ~1/3 of them.
+  .filter((pair, i) => i % 2 === 0 && pair.audit.id !== 'uses-long-cache-ttl');
+
+export const Default = () => (
+  <AuditDetailPane
+    selectedAuditId={auditPairs[0].audit.id || ''}
+    setSelectedAuditId={action('setSelectedAuditId')}
+    pairs={auditPairs}
+    baseLhr={lhrB}
+  />
+);

packages/server/src/ui/routes/build-view/audit-detail/table-details.jsx

@@ -55,7 +55,7 @@ export const TableDetails = props => {
               const itemType = heading.valueType || heading.itemType || 'unknown';
               return (
                 <Fragment key={i}>
-                  <th className={`table-column--${itemType}`}>{heading.label}</th>
+                  <th className={`table-column--${itemType}`}>{heading.label || heading.text}</th>
                   {insertRowLabelAfterIndex === i ? <th /> : null}
                 </Fragment>
               );

packages/server/src/ui/routes/build-view/audit-list/audit-diff.jsx

@@ -156,8 +156,6 @@ export const ItemDiff = props => {
           ) : null}
         </div>
       </div>
-      {/* Apply a bit of a spacer to prevent the overflow from leaking outside the boundaries of the box. */}
-      <div style={{width: 10}} />
     </Fragment>
   );
 };

packages/server/src/ui/routes/build-view/audit-list/audit-group.css

@@ -125,6 +125,10 @@
   height: var(--large-icon-size);
 }
 
+.audit-group__diff-badge-group:last-child {
+  margin-right: 20px;
+}
+
 .audit-group__diff-badges {
   position: absolute;
   top: calc(-1 * var(--badge-height) / 5);

packages/server/src/ui/routes/build-view/build-hash-selector.css

@@ -22,6 +22,11 @@
   box-shadow: 0 1px 1px var(--base-border-color);
 }
 
+#storybook-test-root .build-hash-selector {
+  top: 0;
+  max-height: calc(100vh - 5px);
+}
+
 .build-hash-selector-obscure-background {
   position: fixed;
   z-index: 9;

packages/server/src/ui/routes/build-view/build-hash-selector.jsx

@@ -154,7 +154,7 @@ const BuildLineItem = props => {
 /**
  * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', branchBuilds: Array<LHCI.ServerCommand.Build>, baseBuilds: Array<LHCI.ServerCommand.Build>, lhr: LH.Result, baseLhr?: LH.Result, close: () => void}} props
  */
-const BuildHashSelector_ = props => {
+export const BuildHashSelector_ = props => {
   const {branchBuilds, baseBuilds} = props;
   const builds = _.uniqBy(
     branchBuilds

packages/server/src/ui/routes/build-view/build-hash-selector.stories.jsx

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h} from 'preact';
+import {action} from '@storybook/addon-actions';
+import {BuildHashSelector_} from './build-hash-selector';
+import lhr_ from '../../../../test/fixtures/lh-5-6-0-verge-a.json';
+
+export default {
+  title: 'Build View/Build Hash Selector',
+  component: BuildHashSelector_,
+  parameters: {dimensions: {width: 800, height: 400}},
+};
+
+const lhr = /** @type {LH.Result} */ (lhr_);
+
+const hash = (variant = 0) => 'abcdef1234567890'.repeat(1).slice(variant);
+
+const runAt = (deltaInDays = 0) =>
+  new Date(
+    new Date('2019-10-01T22:32:09.191Z').getTime() + deltaInDays * 24 * 60 * 60 * 1000
+  ).toISOString();
+
+/** @param {number} id @return {LHCI.ServerCommand.Build} */
+const build = id => ({
+  id: id.toString(),
+  projectId: '',
+  externalBuildUrl: '',
+  avatarUrl:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==',
+  lifecycle: 'sealed',
+  hash: hash(id),
+  branch: 'master',
+  runAt: runAt(id),
+});
+
+const masterBuilds = [build(0), build(2), build(5), build(10)];
+
+const branchBuilds = [
+  {...build(1), branch: 'dev'},
+  {...build(3), branch: 'dev'},
+  {...build(8), branch: 'dev'},
+];
+
+/** @param {{children: LHCI.PreactNode}} props */
+const Wrapper = ({children}) => <div className="build-hash-selector">{children}</div>;
+
+const defaultProps = {
+  baseBuilds: masterBuilds,
+  branchBuilds: branchBuilds,
+  build: branchBuilds[0],
+  ancestorBuild: masterBuilds[1],
+  selector: /** @type {'base'} */ ('base'),
+  lhr: lhr,
+  close: action('close'),
+};
+
+export const SelectBase = () => (
+  <Wrapper>
+    <BuildHashSelector_ {...defaultProps} selector="base" />
+  </Wrapper>
+);
+
+export const SelectCompare = () => (
+  <Wrapper>
+    <BuildHashSelector_ {...defaultProps} selector="compare" />
+  </Wrapper>
+);
+
+export const NoMasterBuilds = () => (
+  <Wrapper>
+    <BuildHashSelector_ {...defaultProps} selector="compare" baseBuilds={[]} />
+  </Wrapper>
+);
+
+export const NoBranchBuilds = () => (
+  <Wrapper>
+    <BuildHashSelector_
+      {...defaultProps}
+      selector="base"
+      build={masterBuilds[2]}
+      branchBuilds={[]}
+    />
+  </Wrapper>
+);

packages/server/src/ui/routes/build-view/lhr-comparison.stories.jsx

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h} from 'preact';
+import {LhrComparison} from './lhr-comparison';
+import lhrA_ from '../../../../test/fixtures/lh-5-6-0-verge-a.json';
+import lhrB_ from '../../../../test/fixtures/lh-5-6-0-verge-b.json';
+
+export default {
+  title: 'Build View/LHR Comparison',
+  component: LhrComparison,
+  parameters: {dimensions: 'auto'},
+};
+
+const lhrA = /** @type {any} */ (lhrA_);
+const lhrB = /** @type {any} */ (lhrB_);
+
+/** @param {{children: LHCI.PreactNode}} props */
+const Wrapper = ({children}) => <div className="build-hash-selector">{children}</div>;
+
+export const Default = () => (
+  <Wrapper>
+    <LhrComparison lhr={lhrA} baseLhr={lhrB} hookElements={{}} />
+  </Wrapper>
+);