Merge pull request #678 from outbreak-info/feature/growth-rates

Feature/growth rates

web/package.json

@@ -31,6 +31,7 @@
     "d3-geo": "^3.0.1",
     "d3-geo-projection": "^4.0.0",
     "d3-hierarchy": "^3.1.2",
+    "d3-quadtree": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-selection": "^1.4.2",
@@ -41,6 +42,7 @@
     "datalib": "^1.9.3",
     "error-stack-parser": "2.1.4",
     "lodash": "^4.17.21",
+    "naive-ui": "^2.34.3",
     "pinia": "^2.0.33",
     "pixi.js": "6.5.8",
     "rxjs": "^6.6.7",

web/src/App.vue

@@ -178,6 +178,17 @@
                 >
                   Lineage Comparison
                 </router-link>
+                <router-link
+                  data-toggle="collapse"
+                  data-target=".navbar-collapse"
+                  class="nav-link"
+                  :to="{ name: 'GrowthRatesPage' }"
+                  :class="{
+                    active: $route.name === 'GrowthRatesPage',
+                  }"
+                >
+                  Growth Rates
+                </router-link>
                 <router-link
                   data-toggle="collapse"
                   data-target=".navbar-collapse"
@@ -479,6 +490,17 @@
                 Lineage Comparison
               </router-link>
             </li>
+            <li class="nav-item px-0 py-1">
+              <router-link
+                data-toggle="collapse"
+                data-target=".navbar-collapse"
+                class="nav-link p-0"
+                :to="{ name: 'GrowthRatesPage' }"
+                :class="{ active: $route.name === 'GrowthRatesPage' }"
+              >
+                Growth Rates
+              </router-link>
+            </li>
             <li class="nav-item px-0 py-1">
               <router-link
                 data-toggle="collapse"

web/src/api/growth-rates.js

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+axios.interceptors.request.use(
+  (config) => {
+    config.headers.Authorization = `Bearer ${
+      import.meta.env.VITE_APP_API_ACCESS
+    }`;
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// provide lineage growth rates for selected locations
+export const getGrowthRatesByLocation = (url) => {
+  return axios.get(url);
+}

web/src/assets/growth-rates/naiveThemeVariables.js

@@ -0,0 +1,39 @@
+export const themeOverrides = {
+  common: {
+    primaryColor: '#d13b62',
+    primaryColorHover: '#d13b62',
+  },
+  Form: {
+    labelHeightMedium: '22px',
+    feedbackHeightMedium: '0px',
+    labelTextColor: '#2c3e50',
+  },
+  Button: {
+    colorPrimary: '#d13b62',
+    colorHoverPrimary: '#86203a',
+    colorPressedPrimary: '#d13b62',
+    colorFocusPrimary: '#d13b62',
+    colorDisabledPrimary: 'rgba(209, 59, 98, 0.2)',
+    textColorDisabledPrimary: '#2c3e50',
+    borderPrimary: '#d13b62',
+    borderHoverPrimary: '#86203a',
+    borderPressedPrimary: '#d13b62',
+    borderFocusPrimary: '#d13b62',
+    borderDisabledPrimary: 'rgba(209, 59, 98, 0.2)',
+    rippleColorPrimary: '#d13b62',
+  },
+  Slider: {
+    fillColor: '#d13b62',
+    fillColorHover: '#d13b62',
+    dotBorderActive: '2px solid #D13B62',
+  },
+  Switch: {
+    railColorActive: '#d13b62',
+    boxShadowFocus: '0 0 0 2px rgba(209, 59, 98, 0.2)',
+  },
+  Anchor : {
+    linkFontSize: '16px',
+    railColor: '#d13b62',
+    linkTextColor: '#2c3e50',
+  }
+};

web/src/components/GrAcknowledgements.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="acknowledgements">
+    <div class="ack-copy">
+      <h2>Acknowledgements</h2>
+      <p>
+        We are grateful to the data contributors who shared the data used in this Web Application via the GISAID Initiative: the Authors, the Originating Laboratories responsible for obtaining the specimens, and the Submitting Laboratories that generated the genetic sequences and metadata. All data in GISAID are subject to GISAID’s <a href='https://www.gisaid.org/registration/terms-of-use/' target='_blank'>Terms and Conditions</a>.
+      </p>
+      <p>
+        Elbe, S., and Buckland-Merrett, G. (2017) Data, disease and diplomacy: GISAID’s innovative contribution to global health. Global Challenges, 1:33-46. DOI: <a href="http://dx.doi.org/10.1002/gch2.1018" target="_blank">10.1002/gch2.1018</a>  PMCID: <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6607375/" target="_blank">31565258</a>; Shu, Y., McCauley, J. (2017)  GISAID: Global initiative on sharing all influenza data – from vision to reality. EuroSurveillance, 22(13) DOI: <a href="http://dx.doi.org/10.2807/1560-7917.ES.2017.22.13.30494" target="_blank">10.2807/1560-7917.ES.2017.22.13.30494</a>  PMCID: <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5388101/" target="_blank">PMC5388101</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .acknowledgements {
+    display: flex;
+    flex-direction: column;
+    max-width: 1000px;
+    width: 100%;
+    text-align: left;
+  }
+  .acknowledgements h2 {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  .ack-copy {
+    margin: 20px 50px 20px 50px;
+    font-size: 14px;
+  }
+</style>

web/src/components/GrAnnotations.vue

@@ -0,0 +1,47 @@
+<template>
+  <text 
+    class="annotation"
+    v-if="data.length > 1"
+    :x="xScale(xAccessor(startPoint)) - 10"
+    :y="yScale(yAccessor(startPoint))"
+    text-anchor="end"
+    dy="0.34em"
+  >
+    {{ `${formatPrevalence(yAccessor(startPoint))}` }}
+  </text>
+  <text
+    class="annotation"
+    :x="xScale(xAccessor(endPoint)) + 10"
+    :y="yScale(yAccessor(endPoint))"
+    text-anchor="start"
+    dy="0.34em"
+  >
+    {{ `${formatPrevalence(yAccessor(endPoint))}` }}
+  </text>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { format } from 'd3-format';
+  
+  const props = defineProps({
+    data: Array,
+    xAccessor: Function,
+    yAccessor: Function,
+    xScale: Function,
+    yScale: Function,
+  });
+  
+  const formatPrevalence = format(',.1f');
+  
+  // first and last line points
+  const startPoint = computed(() => props.data[0]);
+  const endPoint = computed(() => props.data[props.data.length - 1]);
+</script>
+
+<style>
+  .annotation {
+    fill: "#2c3e50";
+    font-size: 13px;
+  }
+</style>

web/src/components/GrCI95.vue

@@ -0,0 +1,36 @@
+<template>
+  <GrCI95Top
+    v-for="(dataPoint, index) in data" :key="'topCI-' + index"
+    :dataPoint="dataPoint"
+    :xAccessor="xAccessor"
+    :xScale="xScale"
+    :yScale="yScale"
+    :minGrowthRate="minGrowthRate"
+    :maxGrowthRate="maxGrowthRate"
+  />
+  <GrCI95Bottom
+    v-for="(dataPoint, index) in data" :key="'topCI-' + index"
+    :dataPoint="dataPoint"
+    :xAccessor="xAccessor"
+    :xScale="xScale"
+    :yScale="yScale"
+    :minGrowthRate="minGrowthRate"
+    :maxGrowthRate="maxGrowthRate"
+  />
+</template>
+
+<script setup>
+  import { lazyLoad } from '@/js/lazy-load';
+
+  const GrCI95Top = lazyLoad('GrCI95Top');
+  const GrCI95Bottom = lazyLoad('GrCI95Bottom');
+
+  const props = defineProps({
+    data: Array,
+    xAccessor: Function,
+    xScale: Function,
+    yScale: Function,
+    minGrowthRate: Number,
+    maxGrowthRate: Number,
+  });
+</script>

web/src/components/GrCI95Bottom.vue

@@ -0,0 +1,37 @@
+<template>
+  <line
+    :x1="xScale(xAccessor(dataPoint))"
+    :x2="xScale(xAccessor(dataPoint))"
+    :y1="yScale(dataPoint.G_7_linear)"
+    :y2="yScale(dataPoint.G_7_linear - ci95 < minGrowthRate ? minGrowthRate : dataPoint.G_7_linear - ci95)"
+    stroke="#979797"
+    :stroke-width="xScale.bandwidth()"
+    stroke-opacity="0.25"
+  />
+  <line
+    v-if="dataPoint.G_7_linear - ci95 < minGrowthRate"
+    :x1="xScale(xAccessor(dataPoint))"
+    :x2="xScale(xAccessor(dataPoint))"
+    :y1="yScale(minGrowthRate) + 2"
+    :y2="yScale(minGrowthRate)"
+    stroke="#808080"
+    :stroke-width="xScale.bandwidth()"
+    stroke-opacity="1"
+  />
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+      
+  const props = defineProps({
+    dataPoint: Object,
+    xAccessor: Function,
+    xScale: Function,
+    yScale: Function,
+    minGrowthRate: Number,
+    maxGrowthRate: Number,
+  });
+  
+  const ci95 = computed(() => props.dataPoint.confidenceInterval95);
+</script>
+

web/src/components/GrCI95Top.vue

@@ -0,0 +1,36 @@
+<template>
+  <line
+    :x1="xScale(xAccessor(dataPoint))"
+    :x2="xScale(xAccessor(dataPoint))"
+    :y1="yScale(dataPoint.G_7_linear + ci95 > maxGrowthRate ? maxGrowthRate : dataPoint.G_7_linear + ci95)"
+    :y2="yScale(dataPoint.G_7_linear)"
+    stroke="#979797"
+    :stroke-width="xScale.bandwidth()"
+    stroke-opacity="0.25"
+  />
+  <line
+    v-if="dataPoint.G_7_linear + ci95 > maxGrowthRate"
+    :x1="xScale(xAccessor(dataPoint))"
+    :x2="xScale(xAccessor(dataPoint))"
+    :y1="yScale(maxGrowthRate)"
+    :y2="yScale(maxGrowthRate) - 2"
+    stroke="#808080"
+    :stroke-width="xScale.bandwidth()"
+    stroke-opacity="1"
+  />
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+      
+  const props = defineProps({
+    dataPoint: Object,
+    xAccessor: Function,
+    xScale: Function,
+    yScale: Function,
+    minGrowthRate: Number,
+    maxGrowthRate: Number,
+  });
+  
+  const ci95 = computed(() => props.dataPoint.confidenceInterval95);
+</script>