From 3d9566a19288858b26701ac01c1ee272071d04ee Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Mon, 26 Sep 2022 11:34:42 -0700
Subject: [PATCH 01/13] feat: checkpoint work on allowing baseline to be
 changed at runtime

---
 examples/sample-check-app/src/index.ts        |  4 +
 packages/check-ui-shell/src/app.svelte        | 11 ++-
 .../src/components/header/header-vm.ts        | 40 ++++----
 .../src/components/header/header.pug          | 13 +++
 .../src/components/header/header.svelte       | 56 ++++++++++-
 packages/check-ui-shell/src/global.css        |  4 +-
 packages/plugin-check/package.json            |  2 +
 packages/plugin-check/src/plugin.ts           | 28 +++++-
 .../src/vite-config-for-report.ts             | 43 ++++++++-
 .../plugin-check/template-report/src/env.d.ts |  1 +
 .../plugin-check/template-report/src/index.ts | 92 ++++++++++++++++---
 pnpm-lock.yaml                                | 19 +++-
 12 files changed, 270 insertions(+), 43 deletions(-)
 create mode 100644 packages/check-ui-shell/src/components/header/header.pug

diff --git a/examples/sample-check-app/src/index.ts b/examples/sample-check-app/src/index.ts
index ccb7a97c..2e008b46 100644
--- a/examples/sample-check-app/src/index.ts
+++ b/examples/sample-check-app/src/index.ts
@@ -27,4 +27,8 @@ const checkOptions = getConfigOptions(baselineBundle() as Bundle, currentBundle(
 // Initialize the root Svelte component
 const appShell = initAppShell(checkOptions, suiteSummary)
 
+document.addEventListener('sde-check-bundle', e => {
+  console.log(e)
+})
+
 export default appShell
diff --git a/packages/check-ui-shell/src/app.svelte b/packages/check-ui-shell/src/app.svelte
index ee51fb46..13b6716f 100644
--- a/packages/check-ui-shell/src/app.svelte
+++ b/packages/check-ui-shell/src/app.svelte
@@ -31,11 +31,12 @@ let viewMode: ViewMode = 'summary'
 // occurs more frequently in Firefox and Chrome than in Safari.)  As a workaround,
 // observe loading of the font used by the graphs (Roboto Condensed 400) so
 // that we can wait for it to be loaded before rendering the app.
-const graphFont = new FontFaceObserver('Roboto Condensed', { weight: 400 })
-let graphFontReady = false
-graphFont.load().then(() => {
-  graphFontReady = true
-})
+// const graphFont = new FontFaceObserver('Roboto Condensed', { weight: 400 })
+// let graphFontReady = false
+// graphFont.load().then(() => {
+//   graphFontReady = true
+// })
+const graphFontReady = true
 
 // Wait for the fonts to be loaded before we render the app
 let viewReady = false
diff --git a/packages/check-ui-shell/src/components/header/header-vm.ts b/packages/check-ui-shell/src/components/header/header-vm.ts
index f586f234..6de57918 100644
--- a/packages/check-ui-shell/src/components/header/header-vm.ts
+++ b/packages/check-ui-shell/src/components/header/header-vm.ts
@@ -7,6 +7,8 @@ import type { CompareConfig } from '@sdeverywhere/check-core'
 export interface HeaderViewModel {
   nameL?: string
   nameR?: string
+  bundleNamesL: Writable<string[]>
+  bundleNamesR: Writable<string[]>
   thresholds?: string[]
   simplifyScenarios?: Writable<boolean>
 }
@@ -19,24 +21,26 @@ export function createHeaderViewModel(
 
   // Only include the comparison-related header elements if the compare
   // config is defined
-  if (compareConfig) {
-    const thresholds = compareConfig.thresholds
-    const thresholdStrings: string[] = []
-    thresholdStrings.push('no diff')
-    for (let i = 0; i < 3; i++) {
-      thresholdStrings.push(`diff &lt; ${thresholds[i]}%`)
-    }
-    thresholdStrings.push(`diff &gt;= ${thresholds[2]}%`)
+  // if (compareConfig) {
+  const thresholds = compareConfig.thresholds
+  const thresholdStrings: string[] = []
+  thresholdStrings.push('no diff')
+  for (let i = 0; i < 3; i++) {
+    thresholdStrings.push(`diff &lt; ${thresholds[i]}%`)
+  }
+  thresholdStrings.push(`diff &gt;= ${thresholds[2]}%`)
 
-    return {
-      nameL: compareConfig.bundleL.name,
-      nameR: compareConfig.bundleR.name,
-      thresholds: thresholdStrings,
-      simplifyScenarios
-    }
-  } else {
-    return {
-      simplifyScenarios
-    }
+  return {
+    nameL: compareConfig.bundleL.name,
+    nameR: compareConfig.bundleR.name,
+    bundleNamesL: writable([compareConfig.bundleL.name, 'Baseline 2']),
+    bundleNamesR: writable([compareConfig.bundleR.name, 'Baseline 2']),
+    thresholds: thresholdStrings,
+    simplifyScenarios
   }
+  // } else {
+  //   return {
+  //     simplifyScenarios
+  //   }
+  // }
 }
diff --git a/packages/check-ui-shell/src/components/header/header.pug b/packages/check-ui-shell/src/components/header/header.pug
new file mode 100644
index 00000000..def4ff28
--- /dev/null
+++ b/packages/check-ui-shell/src/components/header/header.pug
@@ -0,0 +1,13 @@
+//- Copyright (c) 2021-2022 Climate Interactive / New Venture Fund
+
+//- Note: These mixins are kept in an external pug file to work around a
+//- Svelte issue related to `each` and TypeScript, see:
+//-   https://github.com/sveltejs/svelte-preprocess/issues/207
+
+mixin optionsL
+  +each(`$bundleNamesL as name`)
+    option { name }
+
+mixin optionsR
+  +each(`$bundleNamesR as name`)
+    option { name }
diff --git a/packages/check-ui-shell/src/components/header/header.svelte b/packages/check-ui-shell/src/components/header/header.svelte
index 78830fa8..4ece422e 100644
--- a/packages/check-ui-shell/src/components/header/header.svelte
+++ b/packages/check-ui-shell/src/components/header/header.svelte
@@ -11,6 +11,8 @@ import type { HeaderViewModel } from './header-vm'
 export let viewModel: HeaderViewModel
 const simplifyScenarios = viewModel.simplifyScenarios
 const thresholds = viewModel.thresholds
+const bundleNamesL = viewModel.bundleNamesL
+const bundleNamesR = viewModel.bundleNamesR
 
 const dispatch = createEventDispatcher()
 
@@ -18,6 +20,30 @@ function onHome() {
   dispatch('command', { cmd: 'show-summary' })
 }
 
+function onSelectBundleL(e: Event) {
+  const target = e.target as HTMLSelectElement
+  console.log(target.value)
+  const changeEvent = new CustomEvent('sde-check-bundle', {
+    detail: {
+      kind: 'left',
+      name: target.value
+    }
+  })
+  document.dispatchEvent(changeEvent)
+}
+
+function onSelectBundleR(e: Event) {
+  const target = e.target as HTMLSelectElement
+  console.log(target.value)
+  const changeEvent = new CustomEvent('sde-check-bundle', {
+    detail: {
+      kind: 'right',
+      name: target.value
+    }
+  })
+  document.dispatchEvent(changeEvent)
+}
+
 </script>
 
 
@@ -26,6 +52,8 @@ function onHome() {
 <!-- TEMPLATE -->
 <template lang='pug'>
 
+include header.pug
+
 .header-container
   .header-content
     .header-group
@@ -35,12 +63,20 @@ function onHome() {
       .header-group
         input.checkbox(type='checkbox' name='simplify-toggle' bind:checked!='{$simplifyScenarios}')
         label(for='simplify-toggle') Simplify Scenarios
-    +if('viewModel.nameL')
+    +if('viewModel.nameL || $bundleNamesL.length > 1')
       .spacer-fixed
       .header-group
         .label Comparing:
-        .label.dataset-color-0 {viewModel.nameL}
-        .label.dataset-color-1 {viewModel.nameR}
+        +if('$bundleNamesL.length > 1')
+          select.selector.dataset-color-0(on:change!='{onSelectBundleL}')
+            +optionsL
+          +else
+            .label.dataset-color-0 {viewModel.nameL}
+        +if('$bundleNamesR.length > 1')
+          select.selector.dataset-color-1(on:change!='{onSelectBundleR}')
+            +optionsR
+          +else
+            .label.dataset-color-1 {viewModel.nameR}
       .spacer-fixed
       .header-group
         .label Thresholds:
@@ -91,6 +127,20 @@ function onHome() {
 .label:not(:last-child)
   margin-right: 1rem
 
+// .label.baseline
+//   cursor: pointer
+//   &:hover
+//     font-weight: 700
+//     color: rgb(219, 72, 101)
+
+select
+  margin-right: 1rem
+  font-family: Roboto, sans-serif
+  font-size: 1em
+  background-color: #353535
+  border: none
+  border-radius: .4rem
+
 .line
   min-height: 1px
   margin-bottom: 1rem
diff --git a/packages/check-ui-shell/src/global.css b/packages/check-ui-shell/src/global.css
index d46923fd..7111806a 100644
--- a/packages/check-ui-shell/src/global.css
+++ b/packages/check-ui-shell/src/global.css
@@ -56,8 +56,8 @@ sub {
  */
 
 :root {
-  --dataset-0: deepskyblue;
-  --dataset-1: crimson;
+  --dataset-0: crimson;
+  --dataset-1: deepskyblue;
   --bucket-0: green;
   --bucket-1: orange;
   --bucket-2: orangered;
diff --git a/packages/plugin-check/package.json b/packages/plugin-check/package.json
index 7398a8ae..711bd76f 100644
--- a/packages/plugin-check/package.json
+++ b/packages/plugin-check/package.json
@@ -33,11 +33,13 @@
   },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "@sdeverywhere/check-core": "^0.1.0",
     "@sdeverywhere/check-ui-shell": "^0.1.1",
     "@sdeverywhere/runtime": "^0.1.0",
     "@sdeverywhere/runtime-async": "^0.1.0",
     "assert-never": "^1.2.1",
+    "chokidar": "^3.5.3",
     "picocolors": "^1.0.0",
     "rollup": "^2.76.0",
     "vite": "^3.1.3"
diff --git a/packages/plugin-check/src/plugin.ts b/packages/plugin-check/src/plugin.ts
index f63cd77e..155b3cf1 100644
--- a/packages/plugin-check/src/plugin.ts
+++ b/packages/plugin-check/src/plugin.ts
@@ -6,6 +6,8 @@ import { fileURLToPath } from 'url'
 import type { InlineConfig, ViteDevServer } from 'vite'
 import { build, createServer } from 'vite'
 
+import chokidar from 'chokidar'
+
 import type { BuildContext, ModelSpec, Plugin, ResolvedConfig } from '@sdeverywhere/build'
 
 import type { Bundle, SuiteSummary } from '@sdeverywhere/check-core'
@@ -35,7 +37,7 @@ class CheckPlugin implements Plugin {
   async watch(config: ResolvedConfig): Promise<void> {
     if (this.options?.testConfigPath === undefined) {
       // Test config was not provided, so generate a default config in watch mode.
-      // The test template uses import.meta.importGlob so that checks are re-run
+      // The test template uses import.meta.glob so that checks are re-run
       // automatically when the *.check.yaml files are changed.
       await this.genTestConfig(config, 'watch')
     }
@@ -47,6 +49,29 @@ class CheckPlugin implements Plugin {
     const viteConfig = this.createViteConfigForReport(config, testOptions, undefined)
     const server: ViteDevServer = await createServer(viteConfig)
     await server.listen()
+
+    // XXX: Currently Vite doesn't reload the page if a file is added/removed
+    // in the baselines directory (Vite's import.meta.glob handling doesn't
+    // seem to do this automatically), so as a workaround, watch the baselines
+    // directory and restart the server if files are added/removed
+    // TODO: The same problem also applies to the glob for `.check.yaml` files
+    // in the test config, so we should also reload if files match/unmatch
+    // the `.check.yaml` glob
+    // TODO: Use the baselines directory from the config
+    const baselinesDir = 'baselines'
+    const watcher = chokidar.watch(baselinesDir, {
+      // Watch paths are resolved relative to the project root directory
+      cwd: config.rootDir,
+      // Don't send initial "file added" events
+      ignoreInitial: true,
+      // XXX: Include a delay, otherwise on macOS we sometimes get multiple
+      // change events when a file is saved just once
+      awaitWriteFinish: {
+        stabilityThreshold: 200
+      }
+    })
+    watcher.on('add', () => server.restart())
+    watcher.on('unlink', () => server.restart())
   }
 
   // TODO: Note that this plugin runs as a `postBuild` step because it currently
@@ -186,6 +211,7 @@ class CheckPlugin implements Plugin {
   ): InlineConfig {
     return createViteConfigForReport(
       this.options,
+      config.rootDir,
       config.prepDir,
       testOptions.currentBundleName,
       testOptions.currentBundlePath,
diff --git a/packages/plugin-check/src/vite-config-for-report.ts b/packages/plugin-check/src/vite-config-for-report.ts
index d491a5c8..9029f7fc 100644
--- a/packages/plugin-check/src/vite-config-for-report.ts
+++ b/packages/plugin-check/src/vite-config-for-report.ts
@@ -3,7 +3,8 @@
 import { dirname, relative, join as joinPath, resolve as resolvePath } from 'path'
 import { fileURLToPath } from 'url'
 
-import type { Alias, InlineConfig } from 'vite'
+import type { Alias, InlineConfig, PluginOption } from 'vite'
+import replace from '@rollup/plugin-replace'
 
 import type { SuiteSummary } from '@sdeverywhere/check-core'
 
@@ -14,6 +15,7 @@ const __dirname = dirname(__filename)
 
 export function createViteConfigForReport(
   options: CheckPluginOptions | undefined,
+  projDir: string,
   prepDir: string,
   currentBundleName: string,
   currentBundlePath: string,
@@ -23,6 +25,18 @@ export function createViteConfigForReport(
   // Use `template-report` as the root directory for the report project
   const root = resolvePath(__dirname, '..', 'template-report')
 
+  // Include `baselines/*.js` files under the configured project root directory.  This
+  // glob path apparently must be a relative path (relative to the `template-report/src`
+  // directory where the glob is used).
+  const templateSrcDir = resolvePath(root, 'src')
+  const relProjDir = relative(templateSrcDir, projDir)
+  // XXX: The glob pattern must use forward slashes only, so on Windows we need to
+  // convert backslashes to slashes
+  const relProjDirPath = relProjDir.replaceAll('\\', '/')
+  // TODO: Use baselinesDir from options
+  const baselinesPath = `${relProjDirPath}/baselines/*.js`
+  console.log(baselinesPath)
+
   // Calculate output directory relative to the template root
   let reportPath: string
   if (options?.reportPath) {
@@ -35,6 +49,12 @@ export function createViteConfigForReport(
   // Convert the suite summary to JSON, which is what the app currently expects
   const suiteSummaryJson = suiteSummary ? JSON.stringify(suiteSummary) : ''
 
+  function localPackage(...subpath: string[]) {
+    const foo = resolvePath(__dirname, '..', '..', ...subpath)
+    console.log(foo)
+    return foo
+  }
+
   const alias = (find: string, replacement: string) => {
     return {
       find,
@@ -114,6 +134,10 @@ export function createViteConfigForReport(
         // don't use it at runtime; we need to exclude it here, otherwise Vite will
         // complain about missing dependencies in dev mode
         'moment'
+
+        // XXX: Prevent Vite from prebundling the local packages
+        // '@sdeverywhere/check-core',
+        // '@sdeverywhere/check-ui-shell'
       ]
     },
 
@@ -133,6 +157,9 @@ export function createViteConfigForReport(
         // Make the overlay use the `messages.html` file that is written to the prep directory
         alias('@_prep_', prepDir),
 
+        // alias('@sdeverywhere/check-core', localPackage('check-core', 'src')),
+        // alias('@sdeverywhere/check-ui-shell', localPackage('check-ui-shell', 'src')),
+
         // XXX: Include no-op polyfills for these modules that are used in the Node-specific
         // implementation of threads.js; this allows us to use one bundle that works in both
         // Node and browser environments
@@ -155,6 +182,20 @@ export function createViteConfigForReport(
       __CURRENT_NAME__: JSON.stringify(currentBundleName)
     },
 
+    plugins: [
+      // Inject special values into the generated JS
+      // TODO: We currently have to use `@rollup/plugin-replace` instead of Vite's
+      // built-in `define` feature because the latter does not seem to run before
+      // the glob handler (which requires the glob to be injected as a literal)
+      replace({
+        preventAssignment: true,
+        values: {
+          // Inject the path for baseline bundles
+          __BASELINE_BUNDLES_PATH__: JSON.stringify(baselinesPath)
+        }
+      }) as PluginOption
+    ],
+
     build: {
       // Write output files to the configured directory (instead of the default `dist`);
       // note that this must be relative to the project `root`
diff --git a/packages/plugin-check/template-report/src/env.d.ts b/packages/plugin-check/template-report/src/env.d.ts
index c201691b..f8d487ae 100644
--- a/packages/plugin-check/template-report/src/env.d.ts
+++ b/packages/plugin-check/template-report/src/env.d.ts
@@ -2,6 +2,7 @@
 
 // These values are injected by Vite at build time, so we need to
 // declare types for them here
+declare const __BASELINE_BUNDLES_PATH__: string
 declare const __BASELINE_NAME__: string
 declare const __CURRENT_NAME__: string
 declare const __SUITE_SUMMARY_JSON__: string
diff --git a/packages/plugin-check/template-report/src/index.ts b/packages/plugin-check/template-report/src/index.ts
index 5352264f..e168e582 100644
--- a/packages/plugin-check/template-report/src/index.ts
+++ b/packages/plugin-check/template-report/src/index.ts
@@ -14,17 +14,44 @@ import { createBundle as createBaselineBundle } from '@_baseline_bundle_'
 import { createBundle as createCurrentBundle } from '@_current_bundle_'
 import { getConfigOptions } from '@_test_config_'
 
-// For "production" builds, load the summary from a JSON file that
-// was generated as part of the build process.  This makes the
-// report load almost immediately instead of running all the checks
-// in the user's browser.
-const suiteSummaryJson = __SUITE_SUMMARY_JSON__
-let suiteSummary: SuiteSummary
-if (suiteSummaryJson) {
-  suiteSummary = JSON.parse(suiteSummaryJson) as SuiteSummary
+// Initialize the overlay element used to show builder messages/errors
+initOverlay()
+
+// For local development mode, load the list of available baseline bundles
+let baselineBundleNames: string[]
+let currentBundleNames: string[]
+// TODO: Only do this if baseline bundles path is defined
+// TODO: Sort them alphabetically (reversed, so that newer dates are first)
+// TODO: If no bundles, default to current
+// TODO: If no saved bundle name, default to current
+let selectedBaselineBundleName: string
+let selectedCurrentBundleName: string
+const baselinesPath = __BASELINE_BUNDLES_PATH__
+if (import.meta && baselinesPath) {
+  // Get the available bundles
+  const bundlesGlob = import.meta.glob(__BASELINE_BUNDLES_PATH__, {
+    eager: false
+  })
+  // const baselineBundles: string[] = []
+  console.log(`BUNDLE COUNT: ${Object.keys(bundlesGlob).length}`)
+  for (const bundleKey of Object.keys(bundlesGlob)) {
+    const loadBundle = bundlesGlob[bundleKey]
+    console.log(bundleKey)
+    console.log(loadBundle)
+  }
 }
 
-async function init() {
+async function initForProduction(): Promise<void> {
+  // For "production" builds, load the summary from a JSON file that
+  // was generated as part of the build process.  This makes the
+  // report load almost immediately instead of running all the checks
+  // in the user's browser.
+  const suiteSummaryJson = __SUITE_SUMMARY_JSON__
+  let suiteSummary: SuiteSummary
+  if (suiteSummaryJson) {
+    suiteSummary = JSON.parse(suiteSummaryJson) as SuiteSummary
+  }
+
   // Load the bundles used by the model check/compare configuration.  We
   // always initialize the "current" bundle.
   const bundleR: Bundle = createCurrentBundle()
@@ -48,9 +75,52 @@ async function init() {
 
   // Initialize the root Svelte component
   initAppShell(checkOptions, suiteSummary)
+}
+
+async function initForLocal(): Promise<void> {
+  // Prepare the model check/compare configuration
+  // XXX: For now, use current vs itself
+  const bundleR: Bundle = createCurrentBundle()
+  const bundleL = bundleR
+  const checkOptions = await getConfigOptions(bundleL, bundleR, {
+    nameL: __CURRENT_NAME__,
+    nameR: __CURRENT_NAME__
+  })
+
+  // Initialize the root Svelte component
+  initAppShell(checkOptions)
+}
 
-  // Initialize the overlay element used to show builder messages/errors
-  initOverlay()
+async function init() {
+  // Prepare options differently if in local development mode
+  if (import.meta) {
+    await initForLocal()
+  } else {
+    await initForProduction()
+  }
 }
 
+// Initialize the bundles and user interface
 init()
+
+// Reload everything when the user chooses a new baseline or current bundle
+document.addEventListener('sde-check-bundle', e => {
+  // Change the selected bundle
+  const info = (e as CustomEvent).detail
+  if (info.kind === 'left') {
+    selectedBaselineBundleName = info.name
+  } else {
+    selectedCurrentBundleName = info.name
+  }
+
+  // Before switching bundles, clear out the app-shell-container element
+  const container = document.getElementById('app-shell-container')
+  while (container.firstChild) {
+    container.removeChild(container.firstChild)
+  }
+
+  // TODO: Release resources associated with active bundles
+
+  // Reinitialize using the chosen bundles
+  init()
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a8a5c2b..b7d8717c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -257,6 +257,7 @@ importers:
   packages/plugin-check:
     specifiers:
       '@rollup/plugin-node-resolve': ^13.3.0
+      '@rollup/plugin-replace': ^4.0.0
       '@sdeverywhere/build': workspace:*
       '@sdeverywhere/check-core': ^0.1.0
       '@sdeverywhere/check-ui-shell': ^0.1.1
@@ -264,16 +265,19 @@ importers:
       '@sdeverywhere/runtime-async': ^0.1.0
       '@types/node': ^16.11.7
       assert-never: ^1.2.1
+      chokidar: ^3.5.3
       picocolors: ^1.0.0
       rollup: ^2.76.0
       vite: ^3.1.3
     dependencies:
       '@rollup/plugin-node-resolve': 13.3.0_rollup@2.76.0
+      '@rollup/plugin-replace': 4.0.0_rollup@2.76.0
       '@sdeverywhere/check-core': link:../check-core
       '@sdeverywhere/check-ui-shell': link:../check-ui-shell
       '@sdeverywhere/runtime': link:../runtime
       '@sdeverywhere/runtime-async': link:../runtime-async
       assert-never: 1.2.1
+      chokidar: 3.5.3
       picocolors: 1.0.0
       rollup: 2.76.0
       vite: 3.1.3
@@ -525,6 +529,19 @@ packages:
       rollup: 2.76.0
     dev: false
 
+  /@rollup/plugin-replace/4.0.0_rollup@2.76.0:
+    resolution: {integrity: sha512-+rumQFiaNac9y64OHtkHGmdjm7us9bo1PlbgQfdihQtuNxzjpaB064HbRnewUOggLQxVCCyINfStkgmBeQpv1g==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.76.0
+      magic-string: 0.25.9
+      rollup: 2.76.0
+    dev: false
+
   /@rollup/pluginutils/3.1.0_rollup@2.76.0:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -2477,7 +2494,6 @@ packages:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
-    dev: true
 
   /magic-string/0.26.4:
     resolution: {integrity: sha512-e5uXtVJ22aEpK9u1+eQf0fSxHeqwyV19K+uGnlROCxUhzwRip9tBsaMViK/0vC3viyPd5Gtucp3UmEp/Q2cPTQ==}
@@ -3294,7 +3310,6 @@ packages:
 
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
-    dev: true
 
   /spdx-correct/3.1.1:
     resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}

From 85ebf83afdd0e54f31b51051cae0806cf15c90bb Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Mon, 26 Sep 2022 15:50:46 -0700
Subject: [PATCH 02/13] fix: calculate size of model in default generated
 bundle

---
 .../src/vite-config-for-bundle.ts             | 30 +++++++++++++++++--
 .../template-bundle/src/bundle.ts             | 10 +------
 .../template-bundle/src/empty-model-spec.ts   |  2 ++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/plugin-check/src/vite-config-for-bundle.ts b/packages/plugin-check/src/vite-config-for-bundle.ts
index 01e5f189..9c166623 100644
--- a/packages/plugin-check/src/vite-config-for-bundle.ts
+++ b/packages/plugin-check/src/vite-config-for-bundle.ts
@@ -1,12 +1,14 @@
 // Copyright (c) 2022 Climate Interactive / New Venture Fund
 
-import type { ModelSpec } from '@sdeverywhere/build'
+import { existsSync, statSync } from 'fs'
 import { dirname, join as joinPath, relative, resolve as resolvePath } from 'path'
 import { fileURLToPath } from 'url'
 
 import type { InlineConfig, Plugin as VitePlugin } from 'vite'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 
+import type { ModelSpec } from '@sdeverywhere/build'
+
 import { sdeNameForVensimVarName } from './var-names'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -22,7 +24,7 @@ const __dirname = dirname(__filename)
  * TODO: This could be simplified by using `vite-plugin-virtual` but that
  * doesn't seem to be working correctly in an ESM setting
  */
-function injectModelSpec(modelSpec: ModelSpec): VitePlugin {
+function injectModelSpec(prepDir: string, modelSpec: ModelSpec): VitePlugin {
   // Include the SDE variable ID with each spec
   const inputSpecs = modelSpec.inputs.map(i => {
     return {
@@ -37,11 +39,33 @@ function injectModelSpec(modelSpec: ModelSpec): VitePlugin {
     }
   })
 
+  function stagedFileSize(filename: string): number {
+    const path = joinPath(prepDir, 'staged', 'model', filename)
+    if (existsSync(path)) {
+      return statSync(path).size
+    } else {
+      return 0
+    }
+  }
+
+  // The size (in bytes) of the `wasm-model.js` file
+  // TODO: Ideally we would measure the size of the raw WASM binary, but currently
+  // we inline it as a base64 blob inside the JS file, so we take the size of the
+  // whole JS file as the second best option
+  const modelSizeInBytes = stagedFileSize('wasm-model.js')
+
+  // The size (in bytes) of the `static-data.ts` file
+  // TODO: Ideally we would measure the size of the minified JS file here, or
+  // at least ignore things like whitespace
+  const dataSizeInBytes = stagedFileSize('static-data.ts')
+
   const moduleSrc = `
 export const startTime = ${modelSpec.startTime};
 export const endTime = ${modelSpec.endTime};
 export const inputSpecs = ${JSON.stringify(inputSpecs)};
 export const outputSpecs = ${JSON.stringify(outputSpecs)};
+export const modelSizeInBytes = ${modelSizeInBytes};
+export const dataSizeInBytes = ${dataSizeInBytes};
 `
 
   const virtualModuleId = 'virtual:model-spec'
@@ -122,7 +146,7 @@ export async function createViteConfigForBundle(prepDir: string, modelSpec: Mode
 
     plugins: [
       // Use a virtual module plugin to inject the model spec values
-      injectModelSpec(modelSpec)
+      injectModelSpec(prepDir, modelSpec)
     ],
 
     build: {
diff --git a/packages/plugin-check/template-bundle/src/bundle.ts b/packages/plugin-check/template-bundle/src/bundle.ts
index 880046bc..23f0ba11 100644
--- a/packages/plugin-check/template-bundle/src/bundle.ts
+++ b/packages/plugin-check/template-bundle/src/bundle.ts
@@ -21,7 +21,7 @@ import type { Input } from './inputs'
 import { getInputVars, setInputsForScenario } from './inputs'
 import { getOutputVars } from './outputs'
 
-import { startTime, endTime, inputSpecs, outputSpecs } from 'virtual:model-spec'
+import { startTime, endTime, inputSpecs, outputSpecs, modelSizeInBytes, dataSizeInBytes } from 'virtual:model-spec'
 
 import modelWorkerJs from '@_model_worker_/worker.js?raw'
 
@@ -31,14 +31,6 @@ import modelWorkerJs from '@_model_worker_/worker.js?raw'
 // have different version numbers.
 const VERSION = 1
 
-// The size (in bytes) of the model file(s), injected at build time.
-const __MODEL_SIZE_IN_BYTES__ = 1
-const modelSizeInBytes = __MODEL_SIZE_IN_BYTES__
-
-// The size (in bytes) of the data file(s), injected at build time.
-const __DATA_SIZE_IN_BYTES__ = 1
-const dataSizeInBytes = __DATA_SIZE_IN_BYTES__
-
 export class BundleModel implements CheckBundleModel {
   private readonly inputs: InputValue[]
   private outputs: Outputs
diff --git a/packages/plugin-check/template-bundle/src/empty-model-spec.ts b/packages/plugin-check/template-bundle/src/empty-model-spec.ts
index 6c8b03e8..9eb9d633 100644
--- a/packages/plugin-check/template-bundle/src/empty-model-spec.ts
+++ b/packages/plugin-check/template-bundle/src/empty-model-spec.ts
@@ -13,3 +13,5 @@ export const startTime = 0
 export const endTime = 0
 export const inputSpecs: InputSpec[] = []
 export const outputSpecs: OutputSpec[] = []
+export const modelSizeInBytes = 0
+export const dataSizeInBytes = 0

From 2db619151025c39cd38caa958401381d16f0c160 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Mon, 26 Sep 2022 15:51:37 -0700
Subject: [PATCH 03/13] fix: handle zero denominator when calculating percent
 change for stats header

---
 .../src/components/stats/stats-table-vm.ts         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/check-ui-shell/src/components/stats/stats-table-vm.ts b/packages/check-ui-shell/src/components/stats/stats-table-vm.ts
index a15a327d..7f275e40 100644
--- a/packages/check-ui-shell/src/components/stats/stats-table-vm.ts
+++ b/packages/check-ui-shell/src/components/stats/stats-table-vm.ts
@@ -24,6 +24,14 @@ export function createStatsTableViewModel(
     return n === 0 ? '' : `${signed(n, 1)}%`
   }
 
+  function pctChange(s0: number, s1: number): number {
+    if (s0 !== 0) {
+      return ((s1 - s0) / s0) * 100
+    } else {
+      return 0
+    }
+  }
+
   const modelSpecL = compareConfig.bundleL.model.modelSpec
   const modelSpecR = compareConfig.bundleR.model.modelSpec
 
@@ -38,17 +46,17 @@ export function createStatsTableViewModel(
   const modelSizeL = modelSpecL.modelSizeInBytes
   const modelSizeR = modelSpecR.modelSizeInBytes
   const modelSizeChange = modelSizeR - modelSizeL
-  const modelSizePctChange = ((modelSizeR - modelSizeL) / modelSizeL) * 100
+  const modelSizePctChange = pctChange(modelSizeL, modelSizeR)
 
   const dataSizeL = modelSpecL.dataSizeInBytes
   const dataSizeR = modelSpecR.dataSizeInBytes
   const dataSizeChange = dataSizeR - dataSizeL
-  const dataSizePctChange = ((dataSizeR - dataSizeL) / dataSizeL) * 100
+  const dataSizePctChange = pctChange(dataSizeL, dataSizeR)
 
   const avgTimeL = perfReportL.avgTime || 0
   const avgTimeR = perfReportR.avgTime || 0
   const avgTimeChange = avgTimeR - avgTimeL
-  const avgTimePctChange = avgTimeL > 0 ? ((avgTimeR - avgTimeL) / avgTimeL) * 100 : 0
+  const avgTimePctChange = pctChange(avgTimeL, avgTimeR)
 
   const minTimeL = perfReportL.minTime
   const minTimeR = perfReportR.minTime

From eb36455d99f48a1e52d4b517c80f051bec3274b1 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Mon, 26 Sep 2022 15:59:34 -0700
Subject: [PATCH 04/13] fix: add workaround for flash of white on page reload

---
 packages/plugin-check/template-report/index.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/plugin-check/template-report/index.html b/packages/plugin-check/template-report/index.html
index d81e410f..c8a08842 100644
--- a/packages/plugin-check/template-report/index.html
+++ b/packages/plugin-check/template-report/index.html
@@ -13,6 +13,16 @@
       rel="stylesheet"
     />
 
+    <style>
+      /*
+       * TODO: This avoids white flash when page reloads (due to the CSS bundled with
+       * check-ui-shell being loaded asynchronously); should fix this
+       */
+      body {
+        background-color: #272727;
+      }
+    </style>
+
     <script type="module" src="./src/index.ts"></script>
   </head>
 

From 820179e4fab73e681bb74c27f2341bb4040e19f7 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Mon, 26 Sep 2022 16:11:32 -0700
Subject: [PATCH 05/13] fix: make custom select style consistent in all
 browsers

---
 .../check-ui-shell/src/components/header/header.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/check-ui-shell/src/components/header/header.svelte b/packages/check-ui-shell/src/components/header/header.svelte
index 4ece422e..07c118fd 100644
--- a/packages/check-ui-shell/src/components/header/header.svelte
+++ b/packages/check-ui-shell/src/components/header/header.svelte
@@ -137,6 +137,16 @@ select
   margin-right: 1rem
   font-family: Roboto, sans-serif
   font-size: 1em
+  // XXX: Remove browser-provided background, but preserve arrow; based on:
+  //   https://stackoverflow.com/a/57510283
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  padding: .4rem 1.6rem .4rem .4rem
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23555'><polygon points='0,0 100,0 50,60'/></svg>") no-repeat
+  background-size: .8rem
+  background-position: calc(100% - .4rem) 60%
+  background-repeat: no-repeat
   background-color: #353535
   border: none
   border-radius: .4rem

From 25c4ea5ecf0923ae6c8f36dcd192da6c7918a1af Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 12:05:38 -0700
Subject: [PATCH 06/13] feat: add sde-check CLI to plugin-check to allow for
 saving current bundle to baselines dir

---
 examples/hello-world/.gitignore        |  1 +
 examples/hello-world/package.json      |  1 +
 examples/template-default/.gitignore   |  1 +
 examples/template-default/package.json |  2 +-
 examples/template-minimal/.gitignore   |  1 +
 examples/template-minimal/package.json |  3 +-
 packages/plugin-check/bin/sde-check.js | 60 ++++++++++++++++++++++++++
 packages/plugin-check/package.json     |  4 ++
 8 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100755 packages/plugin-check/bin/sde-check.js

diff --git a/examples/hello-world/.gitignore b/examples/hello-world/.gitignore
index 3c0f0280..c764e5aa 100644
--- a/examples/hello-world/.gitignore
+++ b/examples/hello-world/.gitignore
@@ -1 +1,2 @@
+baselines
 sde-prep
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
index 161fbb65..8e643f27 100644
--- a/examples/hello-world/package.json
+++ b/examples/hello-world/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "build": "sde bundle",
     "dev": "sde dev",
+    "save-baseline": "sde-check baseline --save",
     "serve": "sirv ./sde-prep/check-report"
   },
   "dependencies": {
diff --git a/examples/template-default/.gitignore b/examples/template-default/.gitignore
index f5c47214..5a2a8e83 100644
--- a/examples/template-default/.gitignore
+++ b/examples/template-default/.gitignore
@@ -1,3 +1,4 @@
+baselines
 sde-prep
 *.vdf
 *.vdfx
diff --git a/examples/template-default/package.json b/examples/template-default/package.json
index f5723216..214dc073 100644
--- a/examples/template-default/package.json
+++ b/examples/template-default/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "sde bundle",
     "dev": "sde dev",
-    "start": "sde dev"
+    "save-baseline": "sde-check baseline --save"
   },
   "workspaces": [
     "packages/core",
diff --git a/examples/template-minimal/.gitignore b/examples/template-minimal/.gitignore
index 3c0f0280..c764e5aa 100644
--- a/examples/template-minimal/.gitignore
+++ b/examples/template-minimal/.gitignore
@@ -1 +1,2 @@
+baselines
 sde-prep
diff --git a/examples/template-minimal/package.json b/examples/template-minimal/package.json
index 7f0ec704..e0cde93f 100644
--- a/examples/template-minimal/package.json
+++ b/examples/template-minimal/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "build": "sde bundle",
-    "dev": "sde dev"
+    "dev": "sde dev",
+    "save-baseline": "sde-check baseline --save"
   },
   "dependencies": {
     "@sdeverywhere/build": "^0.2.0",
diff --git a/packages/plugin-check/bin/sde-check.js b/packages/plugin-check/bin/sde-check.js
new file mode 100755
index 00000000..bd8f7ed1
--- /dev/null
+++ b/packages/plugin-check/bin/sde-check.js
@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/*
+ * This is the entrypoint for the `sde-check` CLI, which provides commands
+ * that work in conjunction with `@sdeverywhere/plugin-check`.
+ */
+
+import { copyFileSync, existsSync, mkdirSync } from 'fs'
+import { join as joinPath } from 'path'
+
+function printUsage() {
+  console.log()
+  console.log('Usage:')
+  console.log('  sim-check baseline --save\t\tcopy the latest bundle to the `baselines` directory')
+  // console.log('  sim-check baseline --clear-all\tremove all bundles from the `baselines` directory')
+  console.log()
+}
+
+function timestamp() {
+  const padL = (nr, len = 2, chr = `0`) => `${nr}`.padStart(len, chr)
+
+  const d = new Date()
+  const year = d.getFullYear()
+  const month = padL(d.getMonth() + 1)
+  const day = padL(d.getDate())
+  const hours = padL(d.getHours())
+  const minutes = padL(d.getMinutes())
+  const seconds = padL(d.getSeconds())
+
+  return `${year}-${month}-${day}--${hours}-${minutes}-${seconds}`
+}
+
+const args = process.argv.slice(2)
+if (args.length !== 2 || args[0] !== 'baseline') {
+  printUsage()
+  process.exit(1)
+}
+
+if (args[1] !== '--save') {
+  printUsage()
+  process.exit(1)
+}
+
+// TODO: For now we make a number of assumptions (e.g., that the bundle will be copied to
+// the `baselines` directory under the current working directory, that the bundle filename
+// will contain the current timestamp); should make these configurable
+const prepDir = joinPath(process.cwd(), 'sde-prep')
+const srcBundleFile = joinPath(prepDir, 'check-bundle.js')
+if (!existsSync(srcBundleFile)) {
+  console.error(`ERROR: No 'check-bundle.js' file found in 'sde-prep' directory`)
+  process.exit(1)
+}
+
+const baselinesDir = joinPath(process.cwd(), 'baselines')
+if (!existsSync(baselinesDir)) {
+  mkdirSync(baselinesDir, { recursive: true })
+}
+
+const dstBundleFile = joinPath(baselinesDir, `${timestamp()}.js`)
+copyFileSync(srcBundleFile, dstBundleFile)
diff --git a/packages/plugin-check/package.json b/packages/plugin-check/package.json
index 92631bee..41163c0b 100644
--- a/packages/plugin-check/package.json
+++ b/packages/plugin-check/package.json
@@ -2,6 +2,7 @@
   "name": "@sdeverywhere/plugin-check",
   "version": "0.1.5",
   "files": [
+    "bin/**",
     "dist/**",
     "template-bundle/**",
     "template-report/**",
@@ -18,6 +19,9 @@
       "require": "./dist/index.cjs"
     }
   },
+  "bin": {
+    "sde-check": "bin/sde-check.js"
+  },
   "scripts": {
     "clean": "rm -rf dist",
     "lint": "eslint src --ext .ts --max-warnings 0",

From bd613f4a64b098aaa78f690c2c98d42e0fa0769b Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 13:25:41 -0700
Subject: [PATCH 07/13] feat: load bundle that is selected in the list

---
 packages/check-ui-shell/src/app-init.ts       |  26 ++-
 .../src/components/header/header-vm.ts        |  42 ++---
 .../src/components/header/header.pug          |   4 +-
 .../src/components/header/header.svelte       |  10 +-
 packages/check-ui-shell/types/index.d.ts      |  12 +-
 .../src/vite-config-for-report.ts             |   9 --
 .../plugin-check/template-report/src/index.ts | 153 ++++++++++++------
 7 files changed, 159 insertions(+), 97 deletions(-)

diff --git a/packages/check-ui-shell/src/app-init.ts b/packages/check-ui-shell/src/app-init.ts
index 812c67ee..e67d1c9e 100644
--- a/packages/check-ui-shell/src/app-init.ts
+++ b/packages/check-ui-shell/src/app-init.ts
@@ -7,12 +7,15 @@ import { initAppModel } from './model/app-model'
 import { default as AppShell } from './app-shell.svelte'
 import { AppViewModel } from './app-vm'
 
-export function initAppShell(
-  configOptions: ConfigOptions,
-  suiteSummary?: SuiteSummary,
-  containerId = 'app-shell-container'
-): AppShell {
+export interface AppShellOptions {
+  suiteSummary?: SuiteSummary
+  containerId?: string
+  bundleNames?: string[]
+}
+
+export function initAppShell(configOptions: ConfigOptions, appShellOptions?: AppShellOptions): AppShell {
   // Initialize the root Svelte component
+  const containerId = appShellOptions?.containerId || 'app-shell-container'
   const appShell = new AppShell({
     target: document.getElementById(containerId),
     props: {
@@ -23,8 +26,17 @@ export function initAppShell(
   // Initialize the app model asynchronously
   initAppModel(configOptions)
     .then(appModel => {
-      // Create the app view model and update the AppShell component
-      const appViewModel = new AppViewModel(appModel, suiteSummary)
+      // Create the app view model
+      const appViewModel = new AppViewModel(appModel, appShellOptions?.suiteSummary)
+
+      if (appShellOptions?.bundleNames) {
+        // Set the list of available bundle names
+        // TODO: Pass these to AppViewModel constructor instead of setting them here
+        appViewModel.headerViewModel.bundleNamesL.set(appShellOptions.bundleNames)
+        appViewModel.headerViewModel.bundleNamesR.set(appShellOptions.bundleNames)
+      }
+
+      // Update the AppShell component
       appShell.$set({
         appViewModel
       })
diff --git a/packages/check-ui-shell/src/components/header/header-vm.ts b/packages/check-ui-shell/src/components/header/header-vm.ts
index 6de57918..27459abc 100644
--- a/packages/check-ui-shell/src/components/header/header-vm.ts
+++ b/packages/check-ui-shell/src/components/header/header-vm.ts
@@ -21,26 +21,28 @@ export function createHeaderViewModel(
 
   // Only include the comparison-related header elements if the compare
   // config is defined
-  // if (compareConfig) {
-  const thresholds = compareConfig.thresholds
-  const thresholdStrings: string[] = []
-  thresholdStrings.push('no diff')
-  for (let i = 0; i < 3; i++) {
-    thresholdStrings.push(`diff &lt; ${thresholds[i]}%`)
-  }
-  thresholdStrings.push(`diff &gt;= ${thresholds[2]}%`)
+  if (compareConfig) {
+    const thresholds = compareConfig.thresholds
+    const thresholdStrings: string[] = []
+    thresholdStrings.push('no diff')
+    for (let i = 0; i < 3; i++) {
+      thresholdStrings.push(`diff &lt; ${thresholds[i]}%`)
+    }
+    thresholdStrings.push(`diff &gt;= ${thresholds[2]}%`)
 
-  return {
-    nameL: compareConfig.bundleL.name,
-    nameR: compareConfig.bundleR.name,
-    bundleNamesL: writable([compareConfig.bundleL.name, 'Baseline 2']),
-    bundleNamesR: writable([compareConfig.bundleR.name, 'Baseline 2']),
-    thresholds: thresholdStrings,
-    simplifyScenarios
+    return {
+      nameL: compareConfig.bundleL.name,
+      nameR: compareConfig.bundleR.name,
+      bundleNamesL: writable([compareConfig.bundleL.name]),
+      bundleNamesR: writable([compareConfig.bundleR.name]),
+      thresholds: thresholdStrings,
+      simplifyScenarios
+    }
+  } else {
+    return {
+      bundleNamesL: writable([]),
+      bundleNamesR: writable([]),
+      simplifyScenarios
+    }
   }
-  // } else {
-  //   return {
-  //     simplifyScenarios
-  //   }
-  // }
 }
diff --git a/packages/check-ui-shell/src/components/header/header.pug b/packages/check-ui-shell/src/components/header/header.pug
index def4ff28..474388de 100644
--- a/packages/check-ui-shell/src/components/header/header.pug
+++ b/packages/check-ui-shell/src/components/header/header.pug
@@ -6,8 +6,8 @@
 
 mixin optionsL
   +each(`$bundleNamesL as name`)
-    option { name }
+    option(selected!='{name === viewModel.nameL}') { name }
 
 mixin optionsR
   +each(`$bundleNamesR as name`)
-    option { name }
+    option(selected!='{name === viewModel.nameR}') { name }
diff --git a/packages/check-ui-shell/src/components/header/header.svelte b/packages/check-ui-shell/src/components/header/header.svelte
index 07c118fd..4a576c48 100644
--- a/packages/check-ui-shell/src/components/header/header.svelte
+++ b/packages/check-ui-shell/src/components/header/header.svelte
@@ -127,12 +127,6 @@ include header.pug
 .label:not(:last-child)
   margin-right: 1rem
 
-// .label.baseline
-//   cursor: pointer
-//   &:hover
-//     font-weight: 700
-//     color: rgb(219, 72, 101)
-
 select
   margin-right: 1rem
   font-family: Roboto, sans-serif
@@ -142,10 +136,10 @@ select
   -webkit-appearance: none
   -moz-appearance: none
   appearance: none
-  padding: .4rem 1.6rem .4rem .4rem
+  padding: .2rem 1.6rem .2rem .4rem
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23555'><polygon points='0,0 100,0 50,60'/></svg>") no-repeat
   background-size: .8rem
-  background-position: calc(100% - .4rem) 60%
+  background-position: calc(100% - .4rem) 70%
   background-repeat: no-repeat
   background-color: #353535
   border: none
diff --git a/packages/check-ui-shell/types/index.d.ts b/packages/check-ui-shell/types/index.d.ts
index 1bc4d4d4..61441e6b 100644
--- a/packages/check-ui-shell/types/index.d.ts
+++ b/packages/check-ui-shell/types/index.d.ts
@@ -2,8 +2,10 @@
 
 import type { ConfigOptions, SuiteSummary } from '@sdeverywhere/check-core'
 
-export function initAppShell(
-  configOptions: ConfigOptions,
-  suiteSummary?: SuiteSummary,
-  containerId = 'app-shell-container'
-): unknown
+export interface AppShellOptions {
+  suiteSummary?: SuiteSummary
+  containerId?: string
+  bundleNames?: string[]
+}
+
+export function initAppShell(configOptions: ConfigOptions, appShellOptions?: AppShellOptions): unknown
diff --git a/packages/plugin-check/src/vite-config-for-report.ts b/packages/plugin-check/src/vite-config-for-report.ts
index 9029f7fc..18004180 100644
--- a/packages/plugin-check/src/vite-config-for-report.ts
+++ b/packages/plugin-check/src/vite-config-for-report.ts
@@ -49,12 +49,6 @@ export function createViteConfigForReport(
   // Convert the suite summary to JSON, which is what the app currently expects
   const suiteSummaryJson = suiteSummary ? JSON.stringify(suiteSummary) : ''
 
-  function localPackage(...subpath: string[]) {
-    const foo = resolvePath(__dirname, '..', '..', ...subpath)
-    console.log(foo)
-    return foo
-  }
-
   const alias = (find: string, replacement: string) => {
     return {
       find,
@@ -157,9 +151,6 @@ export function createViteConfigForReport(
         // Make the overlay use the `messages.html` file that is written to the prep directory
         alias('@_prep_', prepDir),
 
-        // alias('@sdeverywhere/check-core', localPackage('check-core', 'src')),
-        // alias('@sdeverywhere/check-ui-shell', localPackage('check-ui-shell', 'src')),
-
         // XXX: Include no-op polyfills for these modules that are used in the Node-specific
         // implementation of threads.js; this allows us to use one bundle that works in both
         // Node and browser environments
diff --git a/packages/plugin-check/template-report/src/index.ts b/packages/plugin-check/template-report/src/index.ts
index e168e582..72660846 100644
--- a/packages/plugin-check/template-report/src/index.ts
+++ b/packages/plugin-check/template-report/src/index.ts
@@ -14,31 +14,60 @@ import { createBundle as createBaselineBundle } from '@_baseline_bundle_'
 import { createBundle as createCurrentBundle } from '@_current_bundle_'
 import { getConfigOptions } from '@_test_config_'
 
-// Initialize the overlay element used to show builder messages/errors
-initOverlay()
+function loadBundleName(key: string): string | undefined {
+  if (import.meta.hot) {
+    return localStorage.getItem(`sde-check-selected-bundle-${key}`)
+  } else {
+    return undefined
+  }
+}
+
+function saveBundleName(key: string, value: string): void {
+  if (import.meta.hot) {
+    localStorage.setItem(`sde-check-selected-bundle-${key}`, value)
+  }
+}
 
 // For local development mode, load the list of available baseline bundles
-let baselineBundleNames: string[]
-let currentBundleNames: string[]
-// TODO: Only do this if baseline bundles path is defined
-// TODO: Sort them alphabetically (reversed, so that newer dates are first)
-// TODO: If no bundles, default to current
-// TODO: If no saved bundle name, default to current
+type BundleModule = {
+  createBundle(): Bundle
+}
+type LoadBundle = () => Promise<Bundle>
+const availableBundles: { [key: string]: LoadBundle } = {}
+let bundleNames: string[]
 let selectedBaselineBundleName: string
 let selectedCurrentBundleName: string
 const baselinesPath = __BASELINE_BUNDLES_PATH__
-if (import.meta && baselinesPath) {
-  // Get the available bundles
+if (import.meta.hot && baselinesPath) {
+  // Restore the previously selected bundles (from before the page was reloaded)
+  selectedBaselineBundleName = loadBundleName('baseline')
+  selectedCurrentBundleName = loadBundleName('current')
+
+  // Get the available baseline bundles
   const bundlesGlob = import.meta.glob(__BASELINE_BUNDLES_PATH__, {
     eager: false
   })
-  // const baselineBundles: string[] = []
-  console.log(`BUNDLE COUNT: ${Object.keys(bundlesGlob).length}`)
+  const baselineBundleNames: string[] = []
   for (const bundleKey of Object.keys(bundlesGlob)) {
     const loadBundle = bundlesGlob[bundleKey]
-    console.log(bundleKey)
-    console.log(loadBundle)
+    const bundlePathParts = bundleKey.split('/')
+    const bundleFileName = bundlePathParts[bundlePathParts.length - 1]
+    const bundleName = bundleFileName.replace('.js', '')
+    baselineBundleNames.push(bundleName)
+    availableBundles[bundleName] = async () => {
+      const module = (await loadBundle()) as BundleModule
+      return module.createBundle() as Bundle
+    }
   }
+
+  // Alphabetize (reversed, so that newer dates are at the top of the list)
+  baselineBundleNames.sort((a, b) => {
+    return b.toLowerCase().localeCompare(a.toLowerCase())
+  })
+
+  // Always include the "current" bundle as the first option, followed by
+  // the alphabetized bundle names
+  bundleNames = ['current', ...baselineBundleNames]
 }
 
 async function initForProduction(): Promise<void> {
@@ -74,53 +103,85 @@ async function initForProduction(): Promise<void> {
   })
 
   // Initialize the root Svelte component
-  initAppShell(checkOptions, suiteSummary)
+  initAppShell(checkOptions, {
+    suiteSummary
+  })
 }
 
 async function initForLocal(): Promise<void> {
+  async function createBundle(requestedName: string | undefined): Promise<[Bundle, string]> {
+    if (requestedName === undefined) {
+      requestedName = 'current'
+    }
+
+    // See if there is a bundle available for the requested name
+    let bundle: Bundle
+    let bundleName: string
+    if (requestedName in availableBundles) {
+      // Load the bundle for the requested name
+      const loadBundle = availableBundles[requestedName]
+      bundle = await loadBundle()
+      bundleName = requestedName
+    } else {
+      // Load the "current" bundle
+      bundle = createCurrentBundle()
+      bundleName = 'current'
+    }
+    return [bundle, bundleName]
+  }
+
+  const [bundleL, nameL] = await createBundle(selectedBaselineBundleName)
+  const [bundleR, nameR] = await createBundle(selectedCurrentBundleName)
+
   // Prepare the model check/compare configuration
-  // XXX: For now, use current vs itself
-  const bundleR: Bundle = createCurrentBundle()
-  const bundleL = bundleR
   const checkOptions = await getConfigOptions(bundleL, bundleR, {
-    nameL: __CURRENT_NAME__,
-    nameR: __CURRENT_NAME__
+    nameL,
+    nameR
   })
 
   // Initialize the root Svelte component
-  initAppShell(checkOptions)
+  initAppShell(checkOptions, {
+    bundleNames
+  })
 }
 
-async function init() {
+async function initBundlesAndUI() {
   // Prepare options differently if in local development mode
-  if (import.meta) {
+  if (import.meta.hot) {
     await initForLocal()
   } else {
     await initForProduction()
   }
 }
 
-// Initialize the bundles and user interface
-init()
-
-// Reload everything when the user chooses a new baseline or current bundle
-document.addEventListener('sde-check-bundle', e => {
-  // Change the selected bundle
-  const info = (e as CustomEvent).detail
-  if (info.kind === 'left') {
-    selectedBaselineBundleName = info.name
-  } else {
-    selectedCurrentBundleName = info.name
-  }
-
-  // Before switching bundles, clear out the app-shell-container element
-  const container = document.getElementById('app-shell-container')
-  while (container.firstChild) {
-    container.removeChild(container.firstChild)
-  }
-
-  // TODO: Release resources associated with active bundles
+// Initialize the overlay element used to show builder messages/errors
+initOverlay()
 
-  // Reinitialize using the chosen bundles
-  init()
-})
+// Initialize the bundles and user interface
+initBundlesAndUI()
+
+if (import.meta.hot) {
+  // Reload everything when the user chooses a new baseline or current bundle
+  document.addEventListener('sde-check-bundle', e => {
+    // Change the selected bundle
+    const info = (e as CustomEvent).detail
+    if (info.kind === 'left') {
+      saveBundleName('baseline', info.name)
+      selectedBaselineBundleName = info.name
+    } else {
+      saveBundleName('current', info.name)
+      selectedCurrentBundleName = info.name
+    }
+
+    // Before switching bundles, clear out the app-shell-container element
+    const container = document.getElementById('app-shell-container')
+    while (container.firstChild) {
+      container.removeChild(container.firstChild)
+    }
+
+    // TODO: Release resources associated with active bundles
+
+    // Reinitialize using the chosen bundles
+    initBundlesAndUI()
+  })
+}

From cc9e744859eaf66665489bd4e127f7c60f84d038 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 13:46:50 -0700
Subject: [PATCH 08/13] fix: save current value of "Simplify Scenarios"
 checkbox in localStorage

---
 packages/check-ui-shell/src/_shared/stores.ts | 36 +++++++++++++++++++
 .../src/components/header/header-vm.ts        |  8 ++++-
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 packages/check-ui-shell/src/_shared/stores.ts

diff --git a/packages/check-ui-shell/src/_shared/stores.ts b/packages/check-ui-shell/src/_shared/stores.ts
new file mode 100644
index 00000000..0c2deb89
--- /dev/null
+++ b/packages/check-ui-shell/src/_shared/stores.ts
@@ -0,0 +1,36 @@
+// Copyright (c) 2022 Climate Interactive / New Venture Fund
+
+import type { Writable } from 'svelte/store'
+import { writable } from 'svelte/store'
+
+/**
+ * Return a Svelte writable store that is backed by local storage.
+ */
+export function localStorageWritableBoolean(key: string, defaultValue: boolean): Writable<boolean> {
+  const initialStringValue = localStorage.getItem(key)
+  let initialValue: boolean
+  if (initialStringValue !== undefined) {
+    initialValue = initialStringValue === '1'
+  } else {
+    initialValue = defaultValue
+  }
+
+  let currentValue = initialValue
+  const { subscribe, set } = writable(initialValue)
+
+  const _set = (newValue: boolean) => {
+    currentValue = newValue
+    localStorage.setItem(key, newValue ? '1' : '0')
+    set(newValue)
+  }
+
+  const _update = (updater: (value: boolean) => boolean) => {
+    _set(updater(currentValue))
+  }
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update
+  }
+}
diff --git a/packages/check-ui-shell/src/components/header/header-vm.ts b/packages/check-ui-shell/src/components/header/header-vm.ts
index 27459abc..e841893f 100644
--- a/packages/check-ui-shell/src/components/header/header-vm.ts
+++ b/packages/check-ui-shell/src/components/header/header-vm.ts
@@ -3,6 +3,7 @@
 import type { Writable } from 'svelte/store'
 import { writable } from 'svelte/store'
 import type { CompareConfig } from '@sdeverywhere/check-core'
+import { localStorageWritableBoolean } from '../../_shared/stores'
 
 export interface HeaderViewModel {
   nameL?: string
@@ -17,7 +18,12 @@ export function createHeaderViewModel(
   compareConfig: CompareConfig | undefined,
   includeSimplifyScenarios: boolean
 ): HeaderViewModel {
-  const simplifyScenarios: Writable<boolean> = includeSimplifyScenarios ? writable(true) : undefined
+  let simplifyScenarios: Writable<boolean>
+  if (includeSimplifyScenarios) {
+    simplifyScenarios = localStorageWritableBoolean('sde-check-simplify-scenarios', true)
+  } else {
+    simplifyScenarios = undefined
+  }
 
   // Only include the comparison-related header elements if the compare
   // config is defined

From 5cbda380d91098df5232f344899f433c3513745b Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 13:58:52 -0700
Subject: [PATCH 09/13] feat: automatically expand the graph for the first
 failing check

---
 .../check/summary/check-summary-row-vm.ts     |  5 +++--
 .../check/summary/check-summary-test-vm.ts    | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/check-ui-shell/src/components/check/summary/check-summary-row-vm.ts b/packages/check-ui-shell/src/components/check/summary/check-summary-row-vm.ts
index 0da21102..958aec61 100644
--- a/packages/check-ui-shell/src/components/check/summary/check-summary-row-vm.ts
+++ b/packages/check-ui-shell/src/components/check/summary/check-summary-row-vm.ts
@@ -31,7 +31,8 @@ export function row(
   rowClass: string,
   status: CheckStatus,
   content: string,
-  graphBoxViewModel?: CheckSummaryGraphBoxViewModel
+  graphBoxViewModel?: CheckSummaryGraphBoxViewModel,
+  graphVisible = false
 ): CheckSummaryRowViewModel {
   const whitespace = '&ensp;'.repeat(2 + indent * 4)
   const statusChar = charForStatus(status)
@@ -42,6 +43,6 @@ export function row(
     status,
     span,
     graphBoxViewModel,
-    graphVisible: writable(false)
+    graphVisible: writable(graphVisible)
   }
 }
diff --git a/packages/check-ui-shell/src/components/check/summary/check-summary-test-vm.ts b/packages/check-ui-shell/src/components/check/summary/check-summary-test-vm.ts
index e2c0f444..a871357c 100644
--- a/packages/check-ui-shell/src/components/check/summary/check-summary-test-vm.ts
+++ b/packages/check-ui-shell/src/components/check/summary/check-summary-test-vm.ts
@@ -24,6 +24,8 @@ export function createCheckSummaryTestViewModel(
   dataCoordinator: CheckDataCoordinator,
   test: CheckTestReport
 ): CheckSummaryTestViewModel {
+  let expandedFirstGraph = false
+
   const rows: CheckSummaryRowViewModel[] = []
   const testRow = row(0, 'test', test.status, test.name)
   for (const scenario of test.scenarios) {
@@ -32,6 +34,7 @@ export function createCheckSummaryTestViewModel(
       rows.push(row(2, 'dataset', dataset.status, datasetMessage(dataset, bold)))
       for (const predicate of dataset.predicates) {
         let graphBoxViewModel: CheckSummaryGraphBoxViewModel
+        let graphVisible = false
         if (scenario.checkScenario.scenario && dataset.checkDataset.datasetKey) {
           graphBoxViewModel = new CheckSummaryGraphBoxViewModel(
             dataCoordinator,
@@ -39,8 +42,22 @@ export function createCheckSummaryTestViewModel(
             dataset.checkDataset.datasetKey,
             predicate
           )
+          if (!expandedFirstGraph && predicate.result.status === 'failed') {
+            // Expand the graph for the first failing check
+            expandedFirstGraph = true
+            graphVisible = true
+          }
         }
-        rows.push(row(3, 'predicate', predicate.result.status, predicateMessage(predicate, bold), graphBoxViewModel))
+        rows.push(
+          row(
+            3,
+            'predicate',
+            predicate.result.status,
+            predicateMessage(predicate, bold),
+            graphBoxViewModel,
+            graphVisible
+          )
+        )
       }
     }
   }

From 60910499a040c1a77add74f2f2ee1e0d2d089d07 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 14:01:03 -0700
Subject: [PATCH 10/13] fix: update sample-check-app to account for
 initAppShell API change

---
 examples/sample-check-app/src/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/examples/sample-check-app/src/index.ts b/examples/sample-check-app/src/index.ts
index 2e008b46..3db945dc 100644
--- a/examples/sample-check-app/src/index.ts
+++ b/examples/sample-check-app/src/index.ts
@@ -25,10 +25,8 @@ if (suiteSummaryJson) {
 const checkOptions = getConfigOptions(baselineBundle() as Bundle, currentBundle() as Bundle)
 
 // Initialize the root Svelte component
-const appShell = initAppShell(checkOptions, suiteSummary)
-
-document.addEventListener('sde-check-bundle', e => {
-  console.log(e)
+const appShell = initAppShell(checkOptions, {
+  suiteSummary
 })
 
 export default appShell

From b311f21d9e6817e213b1652f5782ec66a51e173a Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 14:01:57 -0700
Subject: [PATCH 11/13] fix: revert commented out code

---
 packages/check-ui-shell/src/app.svelte | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/check-ui-shell/src/app.svelte b/packages/check-ui-shell/src/app.svelte
index 13b6716f..ee51fb46 100644
--- a/packages/check-ui-shell/src/app.svelte
+++ b/packages/check-ui-shell/src/app.svelte
@@ -31,12 +31,11 @@ let viewMode: ViewMode = 'summary'
 // occurs more frequently in Firefox and Chrome than in Safari.)  As a workaround,
 // observe loading of the font used by the graphs (Roboto Condensed 400) so
 // that we can wait for it to be loaded before rendering the app.
-// const graphFont = new FontFaceObserver('Roboto Condensed', { weight: 400 })
-// let graphFontReady = false
-// graphFont.load().then(() => {
-//   graphFontReady = true
-// })
-const graphFontReady = true
+const graphFont = new FontFaceObserver('Roboto Condensed', { weight: 400 })
+let graphFontReady = false
+graphFont.load().then(() => {
+  graphFontReady = true
+})
 
 // Wait for the fonts to be loaded before we render the app
 let viewReady = false

From 40868273bc409b54d984be9ed2438a6dcedce39a Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 14:05:22 -0700
Subject: [PATCH 12/13] fix: clean up event handlers

---
 .../src/components/header/header.svelte       | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/check-ui-shell/src/components/header/header.svelte b/packages/check-ui-shell/src/components/header/header.svelte
index 4a576c48..09a99e75 100644
--- a/packages/check-ui-shell/src/components/header/header.svelte
+++ b/packages/check-ui-shell/src/components/header/header.svelte
@@ -20,28 +20,22 @@ function onHome() {
   dispatch('command', { cmd: 'show-summary' })
 }
 
-function onSelectBundleL(e: Event) {
-  const target = e.target as HTMLSelectElement
-  console.log(target.value)
+function onSelectBundle(kind: string, name: string): void {
   const changeEvent = new CustomEvent('sde-check-bundle', {
     detail: {
-      kind: 'left',
-      name: target.value
+      kind,
+      name
     }
   })
   document.dispatchEvent(changeEvent)
 }
 
+function onSelectBundleL(e: Event) {
+  onSelectBundle('left', (e.target as HTMLSelectElement).value)
+}
+
 function onSelectBundleR(e: Event) {
-  const target = e.target as HTMLSelectElement
-  console.log(target.value)
-  const changeEvent = new CustomEvent('sde-check-bundle', {
-    detail: {
-      kind: 'right',
-      name: target.value
-    }
-  })
-  document.dispatchEvent(changeEvent)
+  onSelectBundle('right', (e.target as HTMLSelectElement).value)
 }
 
 </script>

From 84533bdd77e7276e6af99c8fef62cc87294ef4e2 Mon Sep 17 00:00:00 2001
From: Chris Campbell <ccampbell@climateinteractive.org>
Date: Tue, 27 Sep 2022 14:08:01 -0700
Subject: [PATCH 13/13] fix: remove debug logging

---
 packages/plugin-check/src/vite-config-for-report.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/plugin-check/src/vite-config-for-report.ts b/packages/plugin-check/src/vite-config-for-report.ts
index 18004180..b30ff548 100644
--- a/packages/plugin-check/src/vite-config-for-report.ts
+++ b/packages/plugin-check/src/vite-config-for-report.ts
@@ -35,7 +35,6 @@ export function createViteConfigForReport(
   const relProjDirPath = relProjDir.replaceAll('\\', '/')
   // TODO: Use baselinesDir from options
   const baselinesPath = `${relProjDirPath}/baselines/*.js`
-  console.log(baselinesPath)
 
   // Calculate output directory relative to the template root
   let reportPath: string
@@ -128,10 +127,6 @@ export function createViteConfigForReport(
         // don't use it at runtime; we need to exclude it here, otherwise Vite will
         // complain about missing dependencies in dev mode
         'moment'
-
-        // XXX: Prevent Vite from prebundling the local packages
-        // '@sdeverywhere/check-core',
-        // '@sdeverywhere/check-ui-shell'
       ]
     },