From 6b3f59fcac0d9e82daadddac3cbef30f165f50ae Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Thu, 22 Jan 2026 16:03:45 +0000
Subject: [PATCH 1/8] Add banner with 'About' modal; move legend to be
 underneath plot

---
 src/App.vue                             | 42 ++++++++++++-----
 src/assets/styles/main.css              |  9 ++++
 src/components/AppHeader.vue            | 60 +++++++++++++++++++++++++
 src/components/ColorLegend.vue          |  8 ++--
 src/components/RidgelinePlot.vue        | 19 +-------
 tests/unit/components/AppHeader.spec.ts | 23 ++++++++++
 6 files changed, 128 insertions(+), 33 deletions(-)
 create mode 100644 src/components/AppHeader.vue
 create mode 100644 tests/unit/components/AppHeader.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 96a780f..481da00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,38 @@
+<template>
+  <AppHeader />
+  <main class="flex">
+    <PlotControls />
+    <div class="flex flex-col w-full h-full max-w-full max-h-full gap-y-5">
+      <RidgelinePlot />
+      <ColorLegend />
+    </div>
+  </main>
+</template>
+
 <script setup lang="ts">
+import AppHeader from './components/AppHeader.vue';
 import PlotControls from './components/PlotControls.vue';
 import ColorLegend from './components/ColorLegend.vue';
 import RidgelinePlot from './components/RidgelinePlot.vue';
 </script>
 
-<template>
-  <div class="flex h-screen max-h-screen">
-    <div class="flex h-full max-h-full flex-col justify-start gap-y-5">
-      <PlotControls />
-      <div class="w-75 m-5">
-        <ColorLegend />
-      </div>
-    </div>
-    <RidgelinePlot />
-  </div>
-</template>
+<style lang="scss">
+$header-padding: calc(var(--spacing)* 5);
+$logo-height: calc(var(--spacing)* 20);
+
+header {
+  padding: $header-padding;
+  margin-bottom: $header-padding;
+
+  img {
+    height: $logo-height;
+  }
+}
+
+main {
+  $header-height: calc(#{$logo-height} + (#{$header-padding} * 3));
 
-<style scoped>
+  height: calc(100vh - #{$header-height});
+  max-height: calc(100vh - #{$header-height});
+}
 </style>
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index c751084..91a9600 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -50,3 +50,12 @@
   right: 100px;
   width: max-content;
 }
+
+a {
+  color: var(--color-fg-brand);
+  text-decoration: underline;
+}
+
+button {
+  cursor: pointer;
+}
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
new file mode 100644
index 0000000..67cc7f8
--- /dev/null
+++ b/src/components/AppHeader.vue
@@ -0,0 +1,60 @@
+<template>
+  <header class="border-b border-gray-300 flex items-center justify-between">
+    <div class="flex flex-col gap-2">
+      <a href="https://www.vaccineimpact.org/">
+        <img src="/logo.png" class="" alt="VIMC logo" />
+      </a>
+    </div>
+    <div class="flex flex-col gap-4 max-w-100 items-end">
+      <!-- TODO: When paper is published, add the href. -->
+      <p class="text-right">This visualization tool accompanies <a href="#">Gaythorpe et al.</a></p>
+      <a
+        id="aboutLink"
+        @click.prevent="aboutModalVisible = true"
+        href="#"
+        class="text-fg-brand underline"
+      >
+        About
+      </a>
+    </div>
+  </header>
+  <FwbModal
+    v-if="aboutModalVisible"
+    @close="aboutModalVisible = false"
+  >
+    <template #header>
+      <div class="text-lg">
+        About
+      </div>
+    </template>
+    <template #body>
+      <div class="flex flex-col gap-y-4 leading-relaxed">
+        <!-- TODO: When paper is published, add the href. -->
+        <p>
+          This visualization tool accompanies VIMC's fourth publication, <a href="#">Gaythorpe et al</a> (2026).
+        </p>
+        <!-- TODO: The commented text will be uncommented once the estimates are final / published; until then we have to caveat them. -->
+        <!-- <p>
+          It shows VIMC's estimates of health impact from vaccination against 14 diseases in {{ countryOptions.length }} low- and middle-income countries from 2000 to 2030
+          (2040 for cholera) for the <a href="https://www.gavi.org/">Gavi</a> portfolio of vaccination programmes.
+        </p> -->
+        <!-- NB: The number of diseases is 14 per the paper, and not (necessarily) the length of diseaseOptions.json, which may carve up diseases differently (particularly Meningitis). -->
+        <p>
+          Once that paper is published, this will show VIMC's estimates of health impact from vaccination against 14 diseases in {{ countryOptions.length }} low- and middle-income countries from 2000 to 2030
+          (2040 for cholera) for the <a href="https://www.gavi.org/">Gavi</a> portfolio of vaccination programmes. The numbers shown are only representative, pending publication.
+        </p>
+        <p>
+          Model estimates are presented in terms of 'vaccine impact ratios', defined as deaths or disability-adjusted life years (DALYs) averted per vaccination.
+        </p>
+      </div>
+    </template>
+  </FwbModal>
+</template>
+
+<script setup lang="ts">
+import { FwbModal } from 'flowbite-vue';
+import countryOptions from '@/data/options/countryOptions.json';
+import { ref } from 'vue';
+
+const aboutModalVisible = ref(false);
+</script>
diff --git a/src/components/ColorLegend.vue b/src/components/ColorLegend.vue
index b1ccd1d..9bfbb8e 100644
--- a/src/components/ColorLegend.vue
+++ b/src/components/ColorLegend.vue
@@ -1,17 +1,17 @@
 <template>
   <div
     v-if="colors && colors.length >= 2"
-    class="max-w-full h-full"
+    class="h-20 flex mb-5 w-fit m-auto"
     id="colorLegend"
   >
-    <h3 class="fs-3 font-medium mb-5 text-heading mb-2">
+    <h3 class="fs-3 font-medium text-heading mr-10 self-center">
       Legend
     </h3>
-    <ul class="flex flex-col gap-y-1 max-h-full max-w-full">
+    <ul class="flex flex-col gap-y-1 flex-wrap max-h-full min-h-0">
       <li
         v-for="([value, color]) in colors"
         :key="value"
-        class="flex gap-x-2 text-sm"
+        class="flex gap-x-2 text-sm mr-20"
       >
         <span
           class="legend-color-box"
diff --git a/src/components/RidgelinePlot.vue b/src/components/RidgelinePlot.vue
index 4b1a1ea..e70a54e 100644
--- a/src/components/RidgelinePlot.vue
+++ b/src/components/RidgelinePlot.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container min-h-0 flex-1 flex">
     <FwbSpinner v-if="dataStore.isLoading" class="m-auto" size="8" />
     <p v-else-if="noDataToDisplay" class="m-auto">
       <!-- E.g. Focus disease MenA, without splitting by activity type. -->
@@ -14,6 +14,7 @@
         lineCount: linesToDisplay.length,
         ...appStore.dimensions,
       })"
+      class="flex-1 m-10"
     />
     <p v-if="dataStore.fetchErrors.length" class="mt-auto">
       {{ dataStore.fetchErrors.map(error => error.message).join(', ') }}
@@ -119,19 +120,3 @@ const updateChart = debounce(() => {
 watch([linesToDisplay, () => appStore.focus, chartWrapper], updateChart, { immediate: true });
 </script>
 
-<style lang="scss" scoped>
-.chart-container {
-  --chart-margin: 80px;
-  width: 100%;
-  height: calc(100dvh - 2 * var(--chart-margin));
-  display: flex;
-  flex-wrap: wrap;
-}
-
-#chartWrapper {
-  width: 100%;
-  height: 100%;
-  flex: 1 1 auto;
-  margin: var(--chart-margin);
-}
-</style>
diff --git a/tests/unit/components/AppHeader.spec.ts b/tests/unit/components/AppHeader.spec.ts
new file mode 100644
index 0000000..567567a
--- /dev/null
+++ b/tests/unit/components/AppHeader.spec.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia';
+import AppHeader from '@/components/AppHeader.vue';
+
+describe('AppHeader component', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders the about modal when the about button is clicked', async () => {
+    const wrapper = mount(AppHeader);
+    expect(wrapper.findComponent({ name: 'FwbModal' }).exists()).toBe(false);
+
+    const aboutLink = wrapper.find('a#aboutLink');
+    await aboutLink.trigger('click');
+
+    await vi.waitFor(() => {
+      expect(wrapper.findComponent({ name: 'FwbModal' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'FwbModal' }).isVisible()).toBe(true);
+    })
+  });
+});

From 3991ff7981674cb5bd0e6875c6b3925aff97155c Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Thu, 22 Jan 2026 17:03:51 +0000
Subject: [PATCH 2/8] Add a warning about not using or sharing the data

---
 src/App.vue                                |  2 +-
 src/assets/images/icons/dangerInfoIcon.svg |  8 ++++++++
 src/components/AppHeader.vue               | 21 +++++++++++++++++++--
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/icons/dangerInfoIcon.svg

diff --git a/src/App.vue b/src/App.vue
index 481da00..ab6aafe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@ header {
   padding: $header-padding;
   margin-bottom: $header-padding;
 
-  img {
+  img#logo {
     height: $logo-height;
   }
 }
diff --git a/src/assets/images/icons/dangerInfoIcon.svg b/src/assets/images/icons/dangerInfoIcon.svg
new file mode 100644
index 0000000..a64c8be
--- /dev/null
+++ b/src/assets/images/icons/dangerInfoIcon.svg
@@ -0,0 +1,8 @@
+<svg
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="oklch(44.4% 0.177 26.899)"
+  viewBox="0 0 20 20"
+>
+  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+</svg>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 67cc7f8..5e655fa 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -2,9 +2,26 @@
   <header class="border-b border-gray-300 flex items-center justify-between">
     <div class="flex flex-col gap-2">
       <a href="https://www.vaccineimpact.org/">
-        <img src="/logo.png" class="" alt="VIMC logo" />
+        <img src="/logo.png" id="logo" alt="VIMC logo" />
       </a>
     </div>
+    <FwbAlert
+      type="danger"
+      class="border-t-4 rounded-none"
+    >
+      <template #icon>
+        <img class="w-4 h-4 mr-2" src="@/assets/images/icons/dangerInfoIcon.svg" alt=""/>
+        <span class="sr-only">Error</span>
+      </template>
+      <template #title>
+        <h3 class="text-lg font-medium">
+          Provisional estimates. Not to be forwarded or cited.
+        </h3>
+      </template>
+      <template #default>
+        <p class="mt-2">This is a preview. All estimates shown are representative only. Do not use or forward them.</p>
+      </template>
+    </FwbAlert>
     <div class="flex flex-col gap-4 max-w-100 items-end">
       <!-- TODO: When paper is published, add the href. -->
       <p class="text-right">This visualization tool accompanies <a href="#">Gaythorpe et al.</a></p>
@@ -52,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { FwbModal } from 'flowbite-vue';
+import { FwbAlert, FwbModal } from 'flowbite-vue';
 import countryOptions from '@/data/options/countryOptions.json';
 import { ref } from 'vue';
 

From 2d03434e516593bf89dffd6c335a5e3c353fe0a1 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 13:06:41 +0000
Subject: [PATCH 3/8] Convert anchor to button for a11y

---
 src/assets/styles/main.css   | 2 +-
 src/components/AppHeader.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 91a9600..ba0dcca 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -51,7 +51,7 @@
   width: max-content;
 }
 
-a {
+a, button.link {
   color: var(--color-fg-brand);
   text-decoration: underline;
 }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 67cc7f8..88f994b 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -8,14 +8,14 @@
     <div class="flex flex-col gap-4 max-w-100 items-end">
       <!-- TODO: When paper is published, add the href. -->
       <p class="text-right">This visualization tool accompanies <a href="#">Gaythorpe et al.</a></p>
-      <a
+      <button
         id="aboutLink"
-        @click.prevent="aboutModalVisible = true"
+        @click="aboutModalVisible = true"
         href="#"
-        class="text-fg-brand underline"
+        class="link"
       >
         About
-      </a>
+      </button>
     </div>
   </header>
   <FwbModal

From cc7813d00c0ef34473dfaefc962f9f09d10f6b95 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 13:09:34 +0000
Subject: [PATCH 4/8] Remove legend heading; Left-align color legend by reusing
 margins function from plotConfiguratoin util

---
 src/components/ColorLegend.vue            | 14 ++++--
 src/utils/plotConfiguration.ts            |  5 +-
 tests/unit/components/ColorLegend.spec.ts | 57 +++++++++++++++++++++--
 3 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/components/ColorLegend.vue b/src/components/ColorLegend.vue
index 9bfbb8e..8cb6070 100644
--- a/src/components/ColorLegend.vue
+++ b/src/components/ColorLegend.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     v-if="colors && colors.length >= 2"
-    class="h-20 flex mb-5 w-fit m-auto"
+    class="h-20 flex mb-5 w-fit ml-10"
     id="colorLegend"
   >
-    <h3 class="fs-3 font-medium text-heading mr-10 self-center">
-      Legend
-    </h3>
-    <ul class="flex flex-col gap-y-1 flex-wrap max-h-full min-h-0">
+    <ul
+      class="flex flex-col gap-y-1 flex-wrap max-h-full min-h-0"
+      :style="{ 'margin-left': `${plotLeftMargin}px` }"
+    >
       <li
         v-for="([value, color]) in colors"
         :key="value"
@@ -32,6 +32,7 @@ import { useColorStore } from '@/stores/colorStore';
 import { dimensionOptionLabel } from '@/utils/options';
 import { useAppStore } from '@/stores/appStore';
 import { Axis, Dimension, LocResolution } from '@/types';
+import { margins } from '@/utils/plotConfiguration';
 
 const appStore = useAppStore();
 const colorStore = useColorStore();
@@ -64,6 +65,9 @@ const colorBoxStyle = (color: HEX) => {
     borderColor: strokeColor,
   }
 }
+
+// Align the left edge of the legend with that of the plot.
+const plotLeftMargin = computed(() => margins(appStore.dimensions[Axis.ROW]).left);
 </script>
 
 <style scoped>
diff --git a/src/utils/plotConfiguration.ts b/src/utils/plotConfiguration.ts
index a325712..2a197c6 100644
--- a/src/utils/plotConfiguration.ts
+++ b/src/utils/plotConfiguration.ts
@@ -119,6 +119,8 @@ const axisConfiguration = (
     }
   ];
 
+export const margins = (rowDimension: Dimension) => ({ left: yAxisNeedsExtraSpace(rowDimension) ? 170 : 110 });
+
 export const plotConfiguration = (
   rowDimension: Dimension,
   logScaleEnabled: boolean,
@@ -130,7 +132,6 @@ export const plotConfiguration = (
 } => {
   const numScales = numericalScales(logScaleEnabled, lines);
   const catScales = categoricalScales(lines);
-  const margins = { left: yAxisNeedsExtraSpace(rowDimension) ? 170 : 110 };
   const tickConfig = tickConfiguration(logScaleEnabled, rowDimension);
   const constructorOptions = {
     tickConfig,
@@ -143,6 +144,6 @@ export const plotConfiguration = (
   return {
     constructorOptions,
     axisConfig,
-    chartAppendConfig: [numScales, {}, catScales, margins],
+    chartAppendConfig: [numScales, {}, catScales, margins(rowDimension)],
   };
 };
diff --git a/tests/unit/components/ColorLegend.spec.ts b/tests/unit/components/ColorLegend.spec.ts
index 20da3cd..fd173e8 100644
--- a/tests/unit/components/ColorLegend.spec.ts
+++ b/tests/unit/components/ColorLegend.spec.ts
@@ -7,12 +7,17 @@ import { globalOption } from '@/utils/options';
 import { useAppStore } from "@/stores/appStore";
 import { useColorStore } from '@/stores/colorStore';
 
+const expectCorrectMarginForRowDimension = (rowDimension: "disease" | "location", wrapper: ReturnType<typeof mount>) => {
+  const leftMarginPx = rowDimension === "location" ? 170 : 110;
+  expect(wrapper.find('ul').attributes('style')).toBe(`margin-left: ${leftMarginPx}px;`);
+};
+
 describe('RidgelinePlot component', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
   });
 
-  it('renders the correct labels and colors when the color dimension is location, sorting them by resolution', async () => {
+  it('renders the correct labels, colors and styles when the color dimension is location, sorting them by resolution', async () => {
     const appStore = useAppStore();
     const colorStore = useColorStore();
     const wrapper = mount(ColorLegend);
@@ -61,9 +66,11 @@ describe('RidgelinePlot component', () => {
     expect(labels[2].text()).toBe('All 117 VIMC countries');
     expect(colorBoxes[2].element.style.borderColor).toBe("rgb(105, 41, 196)"); // purple70
     expect(colorBoxes[2].element.style.backgroundColor).toBe("rgba(105, 41, 196, 0.2)");
+
+    expectCorrectMarginForRowDimension("disease", wrapper);
   });
 
-  it('renders the correct labels and colors when the color dimension is disease', async () => {
+  it('renders the correct labels, colors and styles when the color dimension is disease', async () => {
     const appStore = useAppStore();
     const colorStore = useColorStore();
     const wrapper = mount(ColorLegend);
@@ -98,6 +105,8 @@ describe('RidgelinePlot component', () => {
     expect(labels[1].text()).toBe('Cholera');
     expect(colorBoxes[1].element.style.borderColor).toBe("rgb(105, 41, 196)"); // purple70
     expect(colorBoxes[1].element.style.backgroundColor).toBe("rgba(105, 41, 196, 0.2)");
+
+    expectCorrectMarginForRowDimension("disease", wrapper);
   });
 
   it('updates the legend when the data changes', async () => {
@@ -141,9 +150,8 @@ describe('RidgelinePlot component', () => {
     expect(colorBoxes[2].element.style.borderColor).toBe("rgb(105, 41, 196)"); // purple70
     expect(colorBoxes[2].element.style.backgroundColor).toBe("rgba(105, 41, 196, 0.2)");
 
-    appStore.dimensions.withinBand = 'location';
-    appStore.dimensions.column = 'activity_type';
-    appStore.dimensions.row = 'disease';
+    expectCorrectMarginForRowDimension("disease", wrapper);
+
     appStore.filters = {
       location: ['AFG'],
       disease: ['Cholera', 'Rubella'],
@@ -171,5 +179,44 @@ describe('RidgelinePlot component', () => {
     expect(diseaseLabels[1].text()).toBe('Cholera');
     expect(diseaseColorBoxes[1].element.style.borderColor).toBe("rgb(105, 41, 196)"); // purple70
     expect(diseaseColorBoxes[1].element.style.backgroundColor).toBe("rgba(105, 41, 196, 0.2)");
+    expectCorrectMarginForRowDimension("disease", wrapper);
+  });
+
+  it('renders the correct labels, colors and styles when the _row_ dimension is location (regardless of color dimension)', async () => {
+    const appStore = useAppStore();
+    const colorStore = useColorStore();
+    const wrapper = mount(ColorLegend);
+    appStore.dimensions.withinBand = 'disease';
+    appStore.dimensions.column = null;
+    appStore.dimensions.row = 'location';
+    appStore.filters = {
+      location: ['AFG', 'global'],
+      disease: ['Malaria'],
+    };
+    expect(colorStore.colorDimension).toBe('location');
+
+    colorStore.setColors([
+      { metadata: { withinBand: 'Malaria', row: 'AFG' } },
+      { metadata: { withinBand: 'Malaria', row: 'global' } },
+    ]);
+
+    expect(colorStore.colorMapping.size).toBe(2);
+
+    await vi.waitFor(() => {
+      expect(wrapper.findAll(".legend-label").length).toBe(2);
+    });
+
+    const labels = wrapper.findAll(".legend-label");
+    const colorBoxes = wrapper.findAll(".legend-color-box");
+
+    expect(labels[0].text()).toBe('Afghanistan');
+    expect(colorBoxes[0].element.style.borderColor).toBe("rgb(0, 157, 154)"); // teal50
+    expect(colorBoxes[0].element.style.backgroundColor).toBe("rgba(0, 157, 154, 0.2)");
+
+    expect(labels[1].text()).toBe('All 117 VIMC countries');
+    expect(colorBoxes[1].element.style.borderColor).toBe("rgb(105, 41, 196)"); // purple70
+    expect(colorBoxes[1].element.style.backgroundColor).toBe("rgba(105, 41, 196, 0.2)");
+
+    expectCorrectMarginForRowDimension("location", wrapper);
   });
 });

From 3663ed8c2ea8081ac04eab83694e30bb05620437 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 13:48:45 +0000
Subject: [PATCH 5/8] Open links to other domains in new tabs

---
 src/components/AppHeader.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 88f994b..63dfa97 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="border-b border-gray-300 flex items-center justify-between">
     <div class="flex flex-col gap-2">
-      <a href="https://www.vaccineimpact.org/">
+      <a href="https://www.vaccineimpact.org/" target="_blank">
         <img src="/logo.png" class="" alt="VIMC logo" />
       </a>
     </div>
@@ -36,12 +36,12 @@
         <!-- TODO: The commented text will be uncommented once the estimates are final / published; until then we have to caveat them. -->
         <!-- <p>
           It shows VIMC's estimates of health impact from vaccination against 14 diseases in {{ countryOptions.length }} low- and middle-income countries from 2000 to 2030
-          (2040 for cholera) for the <a href="https://www.gavi.org/">Gavi</a> portfolio of vaccination programmes.
+          (2040 for cholera) for the <a href="https://www.gavi.org/" target="_blank">Gavi</a> portfolio of vaccination programmes.
         </p> -->
         <!-- NB: The number of diseases is 14 per the paper, and not (necessarily) the length of diseaseOptions.json, which may carve up diseases differently (particularly Meningitis). -->
         <p>
           Once that paper is published, this will show VIMC's estimates of health impact from vaccination against 14 diseases in {{ countryOptions.length }} low- and middle-income countries from 2000 to 2030
-          (2040 for cholera) for the <a href="https://www.gavi.org/">Gavi</a> portfolio of vaccination programmes. The numbers shown are only representative, pending publication.
+          (2040 for cholera) for the <a href="https://www.gavi.org/" target="_blank">Gavi</a> portfolio of vaccination programmes. The numbers shown are only representative, pending publication.
         </p>
         <p>
           Model estimates are presented in terms of 'vaccine impact ratios', defined as deaths or disability-adjusted life years (DALYs) averted per vaccination.

From 4e1f6ef00747d08142292bc01e7237255c500e36 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 13:50:03 +0000
Subject: [PATCH 6/8] Fix component test after changing anchor to button

---
 tests/unit/components/AppHeader.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/components/AppHeader.spec.ts b/tests/unit/components/AppHeader.spec.ts
index 567567a..86218ce 100644
--- a/tests/unit/components/AppHeader.spec.ts
+++ b/tests/unit/components/AppHeader.spec.ts
@@ -12,8 +12,8 @@ describe('AppHeader component', () => {
     const wrapper = mount(AppHeader);
     expect(wrapper.findComponent({ name: 'FwbModal' }).exists()).toBe(false);
 
-    const aboutLink = wrapper.find('a#aboutLink');
-    await aboutLink.trigger('click');
+    const aboutButton = wrapper.find('button#aboutLink');
+    await aboutButton.trigger('click');
 
     await vi.waitFor(() => {
       expect(wrapper.findComponent({ name: 'FwbModal' }).exists()).toBe(true);

From 0d1003bb87bb82acaee7301a62efae38e6bb2813 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 13:52:40 +0000
Subject: [PATCH 7/8] Remove dud links

---
 src/components/AppHeader.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 63dfa97..7aa516b 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,9 +5,9 @@
         <img src="/logo.png" class="" alt="VIMC logo" />
       </a>
     </div>
-    <div class="flex flex-col gap-4 max-w-100 items-end">
-      <!-- TODO: When paper is published, add the href. -->
-      <p class="text-right">This visualization tool accompanies <a href="#">Gaythorpe et al.</a></p>
+    <div class="flex flex-col gap-4 items-end">
+      <!-- TODO: When paper is published, add the link, and remove 'forthcoming'. -->
+      <p class="text-right">This visualization tool accompanies Gaythorpe et al. (forthcoming)</p>
       <button
         id="aboutLink"
         @click="aboutModalVisible = true"
@@ -29,9 +29,9 @@
     </template>
     <template #body>
       <div class="flex flex-col gap-y-4 leading-relaxed">
-        <!-- TODO: When paper is published, add the href. -->
+        <!-- TODO: When paper is published, add the link and replace '(forthcoming)' with '(2026)'. -->
         <p>
-          This visualization tool accompanies VIMC's fourth publication, <a href="#">Gaythorpe et al</a> (2026).
+          This visualization tool accompanies VIMC's fourth publication, Gaythorpe et al (forthcoming).
         </p>
         <!-- TODO: The commented text will be uncommented once the estimates are final / published; until then we have to caveat them. -->
         <!-- <p>

From e2d4e1a93626f2fbcbbd09f967fc1aa67eb33ac3 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Mon, 26 Jan 2026 14:19:34 +0000
Subject: [PATCH 8/8] Add vaxviz version number to About modal

---
 package.json                            | 2 +-
 src/components/AppHeader.vue            | 5 +++++
 tests/unit/components/AppHeader.spec.ts | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 393ad00..8dfde0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vaxviz",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "type": "module",
   "engines": {
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 825a47e..6f047f1 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -63,6 +63,9 @@
         <p>
           Model estimates are presented in terms of 'vaccine impact ratios', defined as deaths or disability-adjusted life years (DALYs) averted per vaccination.
         </p>
+        <p class="text-xs text-gray-500 mt-2">
+          Vaxviz version: {{ version }}
+        </p>
       </div>
     </template>
   </FwbModal>
@@ -73,5 +76,7 @@ import { FwbAlert, FwbModal } from 'flowbite-vue';
 import countryOptions from '@/data/options/countryOptions.json';
 import { ref } from 'vue';
 
+import { version } from '@/../package.json';
+
 const aboutModalVisible = ref(false);
 </script>
diff --git a/tests/unit/components/AppHeader.spec.ts b/tests/unit/components/AppHeader.spec.ts
index 86218ce..c7881f4 100644
--- a/tests/unit/components/AppHeader.spec.ts
+++ b/tests/unit/components/AppHeader.spec.ts
@@ -19,5 +19,8 @@ describe('AppHeader component', () => {
       expect(wrapper.findComponent({ name: 'FwbModal' }).exists()).toBe(true);
       expect(wrapper.findComponent({ name: 'FwbModal' }).isVisible()).toBe(true);
     })
+
+    // Check that the version number is displayed correctly
+    expect(wrapper.text()).toMatch(/Vaxviz version: \d+\.\d+\.\d+/);
   });
 });