Feat: world report

web/src/api/genomics.js

@@ -1929,10 +1929,12 @@ export const getBasicLocationReportData = (apiurl, location) => {
 
   const curatedLineages = filtered.map((d) => {
     let reportQuery = d.reportQuery;
-    reportQuery.loc = reportQuery.loc
-      ? uniq(reportQuery.loc.push(location))
-      : [location];
-    reportQuery.selected = location;
+    if (location) {
+      reportQuery.loc = reportQuery.loc
+        ? uniq(reportQuery.loc.push(location))
+        : [location];
+      reportQuery.selected = location;
+    }
 
     return {
       label: d.label,

web/src/components/CustomLocationForm.vue

@@ -84,7 +84,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import uniq from 'lodash/uniq';
 
 import { findLocation } from '@/api/genomics.js';
@@ -129,9 +128,6 @@ export default {
     this.queryLocation = findLocation;
   },
   methods: {
-    clearSelection() {
-      this.submitCount += 1;
-    },
     addVariant() {
       if (this.selectedLineage && this.selectedMutations.length) {
         this.variant.push({
@@ -167,9 +163,6 @@ export default {
 
       this.submitCount += 1;
     },
-    deleteVariant(idx, variantArr) {
-      variantArr.splice(idx, 1);
-    },
     submitQuery() {
       this.addVariant();
       const pango = uniq(this.pango.map((d) => d.qParam));

web/src/components/LocationReportComponent.vue

@@ -961,6 +961,7 @@ import {
   findWHOLineage,
 } from '@/api/genomics.js';
 import { lazyLoad } from '@/js/lazy-load';
+import { worldLocation } from '@/js/get-location';
 
 import 'tippy.js/themes/material.css';
 
@@ -1427,20 +1428,22 @@ export default {
     setupReport() {
       this.basicSubscription = getBasicLocationReportData(
         this.$genomicsurl,
-        this.loc,
+        this.loc && this.loc !== 'Worldwide' ? this.loc : null,
       ).subscribe((results) => {
         this.dateUpdated = results.dateUpdated.dateUpdated;
         this.lastUpdated = results.dateUpdated.lastUpdated;
         this.totalSequences = results.total;
         this.curatedLineages = results.curated;
         this.voc = results.voc;
         this.voi = results.voi;
-        this.selectedLocation = results.location;
+        this.selectedLocation = results.location
+          ? results.location
+          : worldLocation;
       });
 
       this.reportSubscription = getLocationReportData(
         this.$genomicsurl,
-        this.loc,
+        this.loc && this.loc !== 'Worldwide' ? this.loc : null,
         this.muts,
         this.pango,
         this.otherThresh,
@@ -1449,9 +1452,10 @@ export default {
         this.recentWindow,
       ).subscribe((results) => {
         this.lineagesByDay = results.lineagesByDay;
-        this.noRecentData = !(
-          results.mostRecentLineages && results.mostRecentLineages.length
-        );
+        this.noRecentData =
+          this.loc !== 'Worldwide'
+            ? !(results.mostRecentLineages && results.mostRecentLineages.length)
+            : false;
 
         this.mostRecentLineages = results.mostRecentLineages;
         this.lineageDomain = results.lineageDomain;
@@ -1692,7 +1696,7 @@ export default {
     updateSequenceCount() {
       this.countSubscription = getSequenceCount(
         this.$genomicsurl,
-        this.loc,
+        this.loc && this.loc !== 'Worldwide' ? this.loc : null,
         false,
       ).subscribe((results) => {
         this.seqCounts = results;

web/src/components/TypeaheadSelect.vue

@@ -39,6 +39,7 @@
 <script>
 // cribbed from https://medium.com/@fareez_ahamed/make-your-own-autocomplete-component-quickly-using-vue-js-21a642e8b140
 import debounce from 'lodash/debounce';
+import { worldLocation } from '@/js/get-location';
 export default {
   name: 'TypeaheadSelect',
   props: {
@@ -114,20 +115,33 @@ export default {
     //When the user changes input
     change() {
       if (this.selected.length > 0) {
-        this.querySubscription = this.queryFunction(
-          this.apiUrl,
-          this.selected,
-        ).subscribe((results) => {
-          if (results.length > 10) {
-            this.matches = results.slice(0, 10);
-          } else {
-            this.matches = results;
-          }
+        if (this.selected.toLowerCase() === 'world') {
+          this.matches = [
+            {
+              ...worldLocation,
+              label: 'World',
+            },
+          ];
           if (this.isOpen === false) {
             this.isOpen = true;
             this.current = 0;
           }
-        });
+        } else {
+          this.querySubscription = this.queryFunction(
+            this.apiUrl,
+            this.selected,
+          ).subscribe((results) => {
+            if (results.length > 10) {
+              this.matches = results.slice(0, 10);
+            } else {
+              this.matches = results;
+            }
+            if (this.isOpen === false) {
+              this.isOpen = true;
+              this.current = 0;
+            }
+          });
+        }
       } else {
         this.matches = [];
         this.isOpen = false;

web/src/js/get-location.js

@@ -2,7 +2,7 @@ import { from, Observable, of } from 'rxjs';
 import axios from 'axios';
 import { catchError, pluck, map, mergeMap } from 'rxjs/operators';
 
-export const getLocation = (apiUrl) => {
+const getLocation = (apiUrl) => {
   return lookupLocation().pipe(
     mergeMap((loc) => processLocation(apiUrl, loc)),
     catchError((e) => {
@@ -45,11 +45,13 @@ const lookupLocation = () => {
 
 const processLocation = (apiUrl, location) => {
   const scalar = 0.05;
-  const url = `${apiUrl}query?q=mostRecent:true AND lat:[${(1 - scalar) *
-    location.coords.latitude} TO ${(1 + scalar) *
-    location.coords.latitude}] AND long:[${(1 + scalar) *
-    location.coords.longitude} TO ${(1 - scalar) *
-    location.coords.longitude}] &fields=location_id,lat,long&size=25`;
+  const url = `${apiUrl}query?q=mostRecent:true AND lat:[${
+    (1 - scalar) * location.coords.latitude
+  } TO ${(1 + scalar) * location.coords.latitude}] AND long:[${
+    (1 + scalar) * location.coords.longitude
+  } TO ${
+    (1 - scalar) * location.coords.longitude
+  }] &fields=location_id,lat,long&size=25`;
   return from(axios.get(url)).pipe(
     pluck('data', 'hits'),
     map((results) => {
@@ -78,3 +80,13 @@ const failedLocation = (location) => {
   console.log(`failed location: ${location}`);
   return of(null);
 };
+
+const worldLocation = {
+  admin_level: 0,
+  id: 'Worldwide',
+  label: 'Worldwide',
+  query_id: 'Worldwide',
+  who_region: 'World',
+};
+
+export { getLocation, worldLocation };

web/src/views/LocationReports.vue

@@ -75,6 +75,11 @@
             How to interpret these reports
           </router-link>
         </div>
+        <div class="d-flex align-items-center justify-content-center my-1">
+          <button class="btn btn-main-outline m-4" @click="toWorldReport">
+            View World Report
+          </button>
+        </div>
 
         <!-- <ReportLogos class="my-4"/> -->
       </div>
@@ -125,6 +130,20 @@ export default {
       this.curatedSubscription.unsubscribe();
     }
   },
+  methods: {
+    toWorldReport() {
+      this.$router.push({
+        name: 'LocationReport',
+        query: {
+          loc: 'Worldwide',
+          pango: [],
+          variant: [],
+          muts: [],
+          selected: [],
+        },
+      });
+    },
+  },
 };
 </script>