fix: allow for displaying more than 3 graph boxes in one row in detai…

…l view (#546)

Fixes #545

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "eslint.workingDirectories": ["./packages/*"],
+  // XXX: Silence some Svelte warnings until they can be investigated further
+  "svelte.plugin.svelte.compilerWarnings": {
+    "a11y-click-events-have-key-events": "ignore",
+    "a11y-no-noninteractive-tabindex": "ignore",
+    "a11y-no-static-element-interactions": "ignore"
+  },
   "psi-header.config": {
     "forceToTop": true,
     "company": "Climate Interactive / New Venture Fund"

examples/sample-check-tests/src/comparisons/comparisons.yaml

@@ -35,6 +35,46 @@
       - scenario_ref: input_1_at_min
       - scenario_ref: input_1_at_max
 
+- scenario_group:
+    id: G4
+    title: Scenario Group 4
+    scenarios:
+      - scenario:
+          title: Input A
+          subtitle: at 10
+          with: Input A
+          at: 10
+      - scenario:
+          title: Input A
+          subtitle: at 20
+          with: Input A
+          at: 20
+      - scenario:
+          title: Input A
+          subtitle: at 30
+          with: Input A
+          at: 30
+      - scenario:
+          title: Input A
+          subtitle: at 40
+          with: Input A
+          at: 40
+      - scenario:
+          title: Input A
+          subtitle: at 50
+          with: Input A
+          at: 50
+      - scenario:
+          title: Input A
+          subtitle: at 60
+          with: Input A
+          at: 60
+      - scenario:
+          title: Input A
+          subtitle: at 70
+          with: Input A
+          at: 70
+
 - graph_group:
     id: GraphGroup1
     graphs:

packages/check-ui-shell/src/_shared/stores.ts

@@ -3,13 +3,46 @@
 import type { Writable } from 'svelte/store'
 import { writable } from 'svelte/store'
 
+/**
+ * Return a Svelte writable store that is backed by local storage.
+ */
+export function localStorageWritableNumber(key: string, defaultValue: number): Writable<number> {
+  const initialStringValue = localStorage.getItem(key)
+  let initialValue: number
+  if (initialStringValue !== null) {
+    const numberValue = parseFloat(initialStringValue)
+    initialValue = !isNaN(numberValue) ? numberValue : defaultValue
+  } else {
+    initialValue = defaultValue
+  }
+
+  let currentValue = initialValue
+  const { subscribe, set } = writable(initialValue)
+
+  const _set = (newValue: number) => {
+    currentValue = newValue
+    localStorage.setItem(key, newValue.toString())
+    set(newValue)
+  }
+
+  const _update = (updater: (value: number) => number) => {
+    _set(updater(currentValue))
+  }
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update
+  }
+}
+
 /**
  * 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) {
+  if (initialStringValue !== null) {
     initialValue = initialStringValue === '1'
   } else {
     initialValue = defaultValue

packages/check-ui-shell/src/app.svelte

@@ -3,8 +3,10 @@
 <!-- SCRIPT -->
 <script lang='ts'>
 
+import assertNever from 'assert-never'
 import FontFaceObserver from 'fontfaceobserver'
 
+import type { ComparisonGroupingKind } from './components/compare/_shared/comparison-grouping-kind'
 import ComparisonDetail from './components/compare/detail/compare-detail.svelte'
 import type { CompareDetailViewModel } from './components/compare/detail/compare-detail-vm'
 import Header from './components/header/header.svelte'
@@ -13,19 +15,20 @@ import Perf from './components/perf/perf.svelte'
 import Summary from './components/summary/summary.svelte'
 
 import type { AppViewModel } from './app-vm'
-  import type { ComparisonGroupingKind } from './components/compare/_shared/comparison-grouping-kind'
-  import assertNever from 'assert-never'
 
 export let viewModel: AppViewModel
 const checksInProgress = viewModel.checksInProgress
 const progress = viewModel.progress
+const zoom = viewModel.headerViewModel.zoom
 
 let compareDetailViewModel: CompareDetailViewModel
 let perfViewModel: PerfViewModel
 
 type ViewMode = 'summary' | 'comparison-detail' | 'perf'
 let viewMode: ViewMode = 'summary'
 
+$: appStyle = `--graph-zoom: ${$zoom}`
+
 // Under normal circumstances, the font face used in graphs might not be fully
 // loaded by the browser before one or more graphs are rendered for the first time,
 // which means they could be displayed with an ugly fallback (serif) font.  (This
@@ -48,13 +51,17 @@ $: if (graphFontReady) {
   viewModel.runTestSuite()
 }
 
+function showSummary(): void {
+  compareDetailViewModel = undefined
+  viewMode = 'summary'
+}
+
 function onCommand(event: CustomEvent) {
   const cmdObj = event.detail
   const cmd = cmdObj.cmd
   switch (cmd) {
     case 'show-summary':
-      compareDetailViewModel = undefined
-      viewMode = 'summary'
+      showSummary()
       break
     case 'enter-tab':
       if (cmdObj.itemId !== 'checks') {
@@ -96,6 +103,26 @@ function onCommand(event: CustomEvent) {
   }
 }
 
+function onKeyDown(event: KeyboardEvent) {
+  // Ignore events when there is a modifier key involved
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.isComposing) {
+    return
+  }
+
+  switch (event.key) {
+    case 'c':
+      viewModel.headerViewModel.controlsVisible.update(v => !v)
+      event.preventDefault()
+      break
+    case 'h':
+      showSummary()
+      event.preventDefault()
+      break
+    default:
+      break
+  }
+}
+
 </script>
 
 
@@ -104,10 +131,12 @@ function onCommand(event: CustomEvent) {
 <!-- TEMPLATE -->
 <template lang='pug'>
 
+svelte:window(on:keydown!='{onKeyDown}')
+
 +await('viewReady')
   .loading-container
   +then('ignored')
-    .app-container
+    .app-container(style!='{appStyle}')
       Header(on:command!='{onCommand}' viewModel!='{viewModel.headerViewModel}')
       +if('$checksInProgress')
         .progress-container

packages/check-ui-shell/src/components/_shared/lazy.svelte

@@ -56,7 +56,6 @@ onMount(() => {
 .lazy-container
   position: relative
   display: flex
-  flex: 1
   height: 100%
 
 </style>

packages/check-ui-shell/src/components/check/summary/check-summary-graph-box.svelte

@@ -40,7 +40,7 @@ $: if (visible !== previousVisible || viewModel.baseRequestKey !== previousViewM
 Lazy(bind:visible!='{visible}')
   +if('$content')
     .graph-container
-      ComparisonGraph(viewModel!='{$content.comparisonGraphViewModel}' width=36 height=22)
+      ComparisonGraph(viewModel!='{$content.comparisonGraphViewModel}')
 
 </template>