fix: location report issue

outbreak-info · Feb 27, 2023 · e2c7bf0 · e2c7bf0
1 parent f493404
commit e2c7bf0
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 19 deletions.
diff --git a/web/src/api/genomics.js b/web/src/api/genomics.js
@@ -1608,8 +1608,8 @@ export const getTemporalPrevalence = (
   queryStr,
   indivCall = false,
   returnFlat = true,
-  minDate,
-  maxDate,
+  minDate = '',
+  maxDate = '',
 ) => {
   store.state.admin.reportloading = true;
   let url;

diff --git a/web/src/components/LocationReportComponent.vue b/web/src/components/LocationReportComponent.vue
@@ -747,7 +747,7 @@
                 <ClassedLegend
                   :colorScale="choroColorScale"
                   :horizontal="false"
-                  :label="`Est. prevalence over the last ${recentWindow} days`"
+                  :label="`Est. prevalence ${getDateRangeText()}`"
                   :countThreshold="choroCountThreshold"
                   :mutationName="null"
                 />
@@ -797,7 +797,7 @@
                   :margin="marginHist"
                   :mutationName="null"
                   className="sequencing-histogram"
-                  :title="`Samples sequenced per day over last ${recentWindow} days`"
+                  :title="`Samples sequenced per day ${getDateRangeText()}`"
                   :onlyTotals="true"
                   notDetectedColor="#bab0ab"
                 />
@@ -928,8 +928,8 @@
             :data="lineageTable"
             :locationName="selectedLocation.label"
             :locationID="selectedLocation.id"
-            :minDate="minDate"
-            :maxDate="maxDate"
+            :minDate="xmin"
+            :maxDate="xmax"
           />
         </section>
 
@@ -1771,9 +1771,6 @@ export default {
       const format = timeFormat('%Y-%m-%d');
       this.maxDate = format(newMax);
       this.minDate = format(newMin);
-      this.setupReport();
-      this.updateMaps();
-      this.updateTable();
       const queryParams = this.$route.query;
       this.$router.push({
         name: 'LocationReport',
@@ -1791,6 +1788,16 @@ export default {
           selected: queryParams.selected,
         },
       });
+      this.setupReport();
+      this.updateMaps();
+      this.updateTable();
+    },
+    getDateRangeText() {
+      if (this.xmin && this.xmax) {
+        return `${this.xmin}  -  ${this.xmax}`;
+      } else {
+        return 'all time';
+      }
     },
   },
 };

diff --git a/web/src/components/LocationTable.vue b/web/src/components/LocationTable.vue
@@ -9,26 +9,25 @@
             colspan="2"
           >
             lineage found
+            <br />
+            <small>{{ getDateRangeText() }}</small>
           </th>
           <th />
           <th
             class="text-center padded border-bottom border-secondary"
             colspan="2"
           >
-            when found
+            when found in date range
             <sup>**</sup>
           </th>
         </tr>
         <tr class="border-bottom">
-          <th class="text-center padded">total</th>
+          <th class="text-center padded">count</th>
           <th class="text-center padded">
             cumulative prevalence
             <sup>*</sup>
-            <br />
-            <small>{{ `${xMin}  -  ${xMax}` }}</small>
           </th>
           <th />
-          <th class="text-center padded">first</th>
           <th class="text-center padded">last</th>
         </tr>
       </thead>
@@ -111,7 +110,7 @@
               :to="{
                 name: 'MutationReport',
                 params: lineage.params ? lineage.params : {},
-                query: lineage.route,
+                query: transformQuery(lineage.route),
               }"
               :data-tippy-info="lineage.tooltip"
             >
@@ -145,9 +144,6 @@
           </td>
 
           <td class="spacer" />
-          <td>
-            {{ lineage.first_detected }}
-          </td>
           <td>
             {{ lineage.last_detected }}
           </td>
@@ -177,6 +173,7 @@
 <script>
 import tippy from 'tippy.js';
 import 'tippy.js/themes/light.css';
+import { isArray } from 'lodash/lang';
 
 export default {
   name: 'LocationTable',
@@ -245,6 +242,24 @@ export default {
       },
     });
   },
+  methods: {
+    getDateRangeText() {
+      if (this.xMin && this.xMax) {
+        return `${this.xMin}  -  ${this.xMax}`;
+      } else {
+        return 'all time';
+      }
+    },
+    transformQuery(query) {
+      if (typeof query.pango === 'string') {
+        return query;
+      } else if (isArray(query.pango)) {
+        let tempQuery = query;
+        tempQuery.pango = tempQuery.pango[0];
+        return tempQuery;
+      }
+    },
+  },
 };
 </script>
 

diff --git a/web/src/components/ReportSummary.vue b/web/src/components/ReportSummary.vue
@@ -42,6 +42,8 @@
               colspan="2"
             >
               {{ mutationName }} found
+              <br />
+              <small>{{ getDateRangeText() }}</small>
             </th>
             <th />
             <th
@@ -233,6 +235,8 @@ export default {
     locationTotals: Array,
     countries: Array,
     states: Array,
+    xmin: String,
+    xmax: String,
   },
   data() {
     return {
@@ -266,6 +270,13 @@ export default {
         ? document.getElementById('geo-summary').offsetWidth * summaryFraction
         : 400;
     },
+    getDateRangeText() {
+      if (this.xmin && this.xmax) {
+        return `${this.xmin}  -  ${this.xmax}`;
+      } else {
+        return 'all time';
+      }
+    },
   },
 };
 </script>

diff --git a/web/src/components/SituationReportComponent.vue b/web/src/components/SituationReportComponent.vue
@@ -634,6 +634,8 @@
               :countries="countries"
               :states="states"
               :routeTo="routeTo"
+              :xmin="xmin"
+              :xmax="xmax"
             />
           </section>
         </div>
@@ -1077,7 +1079,7 @@ import {
   updateLocationData,
 } from '@/api/genomics.js';
 import { lazyLoad } from '@/js/lazy-load';
-import {timeMonth} from "d3-time";
+import { timeMonth } from 'd3-time';
 
 export default {
   name: 'SituationReportComponent',