OKRS-24-55 (#1243)

* 'latest known data' link now preserves context * Set default date to the date we have data for all 3 sensors. * Made Hospital Admissions sensor work as Doctor Visits and Deaths. Removed annotation for Hospital Admissions sensor when we don't have recent data for chosen date
cmu-delphi · Apr 23, 2024 · 0b42ad1 · 0b42ad1
1 parent 3fd07be
commit 0b42ad1
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 39 deletions.
diff --git a/src/blocks/IndicatorWarning.svelte b/src/blocks/IndicatorWarning.svelte
@@ -38,8 +38,13 @@
       <div data-uk-alert class="uk-alert-warning">
         The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date.value)}, yet. The latest
         known data is available on
-        <a href="?date={formatAPITime(sensor.timeFrame.max)}" on:click={switchDate}
-          >{formatDateYearDayOfWeekAbbr(sensor.timeFrame.max)}</a
+        <!-- 
+        window.location.search.split('&').slice(1).join('&') is used to keep the query parameters except the date parameter.
+        So we are getting query params from url, splitting them by & and removing the first element which is date parameter.
+         -->
+        <a
+          href="?date={formatAPITime(sensor.timeFrame.max)}&{window.location.search.split('&').slice(1).join('&')}"
+          on:click={switchDate}>{formatDateYearDayOfWeekAbbr(sensor.timeFrame.max)}</a
         >.
       </div>
     {/if}

diff --git a/src/blocks/NoRecentDataWarning.svelte b/src/blocks/NoRecentDataWarning.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
+  import { formatAPITime } from '../data';
+  /**
+   * @type {import("../stores/params").DateParam}
+   */
+  export let minMaxDate;
+  /**
+   * @type {import("../stores/params").DateParam}
+   */
+  export let date;
+
+  export let warningType;
+
+  function switchDate() {
+    date.set(minMaxDate);
+  }
+</script>
+
+{#if warningType === 1}
+  <div data-uk-alert class="uk-alert-warning">
+    <p>
+      This date, {formatDateYearDayOfWeekAbbr(minMaxDate)}, is the most recent that has data for all three of the
+      highlighted indicators. You can mouse over the tooltips just below this message to see the latest available date
+      for each indicator. Note that the latest available date may be different for each indicator.
+    </p>
+  </div>
+{/if}
+
+{#if warningType === 2}
+  <div data-uk-alert class="uk-alert-warning">
+    <p>
+      This date ({formatDateYearDayOfWeekAbbr(date.value)}) does not yet have data for all of the highlighted
+      indicators.
+      <br />
+      <!-- 
+        window.location.search.split('&').slice(1).join('&') is used to keep the query parameters except the date parameter.
+        So we are getting query params from url, splitting them by & and removing the first element which is date parameter.
+      -->
+      <a
+        href="?date={formatAPITime(minMaxDate)}&{window.location.search.split('&').slice(1).join('&')}"
+        on:click={switchDate}>{formatDateYearDayOfWeekAbbr(minMaxDate)}</a
+      >
+      is the most recent that has data for all three. You can mouse over the tooltips just below this message to see the
+      latest available date for each indicator. Note that the latest available date may be different for each indicator.
+    </p>
+  </div>
+{/if}
diff --git a/src/modes/summary/Overview.svelte b/src/modes/summary/Overview.svelte
@@ -1,14 +1,12 @@
 <script>
   import KPIValue from '../../components/KPIValue.svelte';
   import KPIChange from '../../components/KPIChange.svelte';
-  import { DateParam, SensorParam } from '../../stores/params';
-  import { formatDateDayOfWeek } from '../../formats';
+  import { SensorParam } from '../../stores/params';
   import SensorUnit from '../../components/SensorUnit.svelte';
-  import IndicatorAnnotations from '../../components/IndicatorAnnotations.svelte';
   import MaxDateHint from '../../blocks/MaxDateHint.svelte';
-  import IndicatorWarning from '../../blocks/IndicatorWarning.svelte';
+  import NoRecentDataWarning from '../../blocks/NoRecentDataWarning.svelte';
   import { defaultDeathSensor, defaultCasesSensor, defaultHospitalSensor, metaDataManager } from '../../stores';
-  import IndicatorFallbackWarning from '../../blocks/IndicatorFallbackWarning.svelte';
+  import { onMount, beforeUpdate } from 'svelte';
 
   /**
    * @type {import("../../stores/params").DateParam}
@@ -27,33 +25,56 @@
   $: DEATHS = new SensorParam($defaultDeathSensor, $metaDataManager);
   $: HOSPITAL_ADMISSION = new SensorParam($defaultHospitalSensor, $metaDataManager);
 
-  function fetchFallback(fetcher, sensor, region, trend) {
-    return trend.then((t) => {
-      if (t && t.value != null) {
-        return t;
-      }
-      return fetcher.fetch1Sensor1Region1DateTrend(sensor, region, DateParam.box(sensor.timeFrame.max));
-    });
-  }
-
   $: trends = fetcher.fetchNSensors1Region1DateTrend([CASES, HOSPITAL_ADMISSION, DEATHS], region, date);
   $: casesTrend = trends[0];
-  $: hospitalTrend = fetchFallback(fetcher, HOSPITAL_ADMISSION, region, trends[1]);
+  $: hospitalTrend = trends[1];
   $: deathTrend = trends[2];
-</script>
 
-<IndicatorWarning sensor={CASES} {date} {region} {fetcher} />
-<IndicatorAnnotations {date} {region} sensor={CASES} range="sparkLine" />
+  let minMaxDate = new Date();
+
+  onMount(() => {
+    [CASES, HOSPITAL_ADMISSION].map((s) => {
+      if (s.timeFrame.max < minMaxDate) {
+        minMaxDate = s.timeFrame.max;
+      }
+    });
+    let urlSearchParams = new URLSearchParams(window.location.search);
+    if (!urlSearchParams.has('date')) {
+      // if no date is specified in the URL, default to the latest day before today with data from all 3 highlighted indicators
+      date.set(minMaxDate);
+    }
+  });
+
+  // warningType is indicator of which exact warning message should be shown.
+  // By default, when user opens page with no specified date, the date will be set to the latest date we have data for all 3 indicators.
+  // In this case, warningType should be set to 1.
+  // In case selected date is set to future date (date > minMaxDate, where we don't have recent data for all 3 indicators), the warningType will be set to 2
+  // which has different warning message.
+  // In case selected date is set to some date which is < minMaxDate, the warningType will be set to 0 which means that we will not show
+  // any warning message.
+
+  // warningType should be set in beforeUpdate() method, to guess correct warningType.
+
+  let warningType = 1;
+  beforeUpdate(() => {
+    if (date.value > minMaxDate) {
+      warningType = 2;
+    } else if (date.value < minMaxDate) {
+      warningType = 0;
+    } else {
+      warningType = 1;
+    }
+  });
+</script>
 
-<p>
-  On {formatDateDayOfWeek(date.value)}
-  <MaxDateHint sensor={CASES.value} suffix="," {fetcher} />
-  the {CASES.valueUnit}s were:
-</p>
+<NoRecentDataWarning {minMaxDate} {date} {warningType} />
 
 <div class="mobile-three-col">
   <div class="mobile-kpi">
-    <h3>Doctor Visits</h3>
+    <h3>
+      Doctor Visits
+      <MaxDateHint sensor={CASES.value} {fetcher} />
+    </h3>
     <div>
       {#await casesTrend}
         <KPIValue value={null} loading />
@@ -66,20 +87,26 @@
     </div>
   </div>
   <div class="mobile-kpi">
-    <h3>Hospital Admissions</h3>
+    <h3>
+      Hospital Admissions
+      <MaxDateHint sensor={HOSPITAL_ADMISSION.value} {fetcher} />
+    </h3>
     <div>
       {#await hospitalTrend}
         <KPIValue value={null} loading />
       {:then d}
-        <KPIValue value={d ? d.value : null} asterisk={d != null && (d.value == null || d.date < date.value)} />
+        <KPIValue value={d ? d.value : null} />
       {/await}
     </div>
     <div class="sub">
       <SensorUnit sensor={HOSPITAL_ADMISSION} long />
     </div>
   </div>
   <div class="mobile-kpi">
-    <h3>Deaths</h3>
+    <h3>
+      Deaths
+      <MaxDateHint sensor={DEATHS.value} {fetcher} />
+    </h3>
     <div>
       {#await deathTrend}
         <KPIValue value={null} loading />
@@ -111,10 +138,7 @@
       {#await hospitalTrend}
         <KPIChange value={null} loading />
       {:then d}
-        <KPIChange
-          value={d && d.value != null && !Number.isNaN(d.value) ? d.change : null}
-          asterisk={d != null && (d.value == null || d.date < date.value)}
-        />
+        <KPIChange value={d && d.value != null && !Number.isNaN(d.value) ? d.change : null} />
       {/await}
     </div>
     <div class="sub">Relative change to 7 days ago</div>
@@ -130,5 +154,3 @@
     <div class="sub">Relative change to 7 days ago</div>
   </div>
 </div>
-
-<IndicatorFallbackWarning trend={hospitalTrend} date={date.value} level={region.level} sensor={HOSPITAL_ADMISSION} />
diff --git a/src/modes/summary/Summary.svelte b/src/modes/summary/Summary.svelte
@@ -1,7 +1,6 @@
 <script>
   import IndicatorTable from './IndicatorTable.svelte';
-  // TEMPORARY DISABLING OF THIS OVERVIEW WIDGET UNTIL SIGNALS ARE FIXED:
-  // import Overview from './Overview.svelte';
+  import Overview from './Overview.svelte';
   import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
   import RegionDatePicker from '../../components/RegionDatePicker.svelte';
   import {
@@ -71,9 +70,7 @@
   <div class="uk-container content-grid">
     <div class="grid-3-11">
       <FancyHeader invert>{region.displayName}</FancyHeader>
-      <!-- TEMPORARY DISABLING OF THIS OVERVIEW WIDGET UNTIL SIGNALS ARE FIXED
       <Overview {date} {region} {fetcher} />
-      -->
       <hr />
       <FancyHeader invert sub="Map" anchor="map">{HOSPITAL_ADMISSION.name}</FancyHeader>
       <p>{@html HOSPITAL_ADMISSION.signalTooltip}</p>