Merge pull request #999 from cmu-delphi/krivard/indicator-status

New indicator status page revisions from approval process

Author: krivard

.husky/pre-commit

@@ -151,13 +151,6 @@ function findRawCumulativeSignal(sensor: SensorSensor, sensors: SensorSensor[])
   return cum;
 }
 
-function addDUALink(links: { alt: string; href: string }[], dua?: string | null) {
-  if (dua) {
-    return [...links, { alt: 'DUA', href: dua }];
-  }
-  return links;
-}
-
 function deriveMetaSensors(metadata: EpiDataMetaSourceInfo[]): {
   list: SensorSensor[];
   map: Map<string, SensorSensor>;
@@ -219,7 +212,7 @@ function deriveMetaSensors(metadata: EpiDataMetaSourceInfo[]): {
 
       return {
         ...sm,
-        link: addDUALink(sm.link, sm.dua),
+        link: sm.link,
         sensors,
         description: sm.description ? parseMarkDown(sm.description.trim()) : '',
         credits,

src/data/meta.ts

@@ -1,5 +1,5 @@
 <script>
-  import { currentRegionInfo, currentSensor, metaDataManager, selectByInfo } from '../../stores';
+  import { currentRegionInfo, currentSensor, currentMode, metaDataManager, selectByInfo } from '../../stores';
   import { DEFAULT_SENSOR } from '../../stores/constants';
   import AboutSection from '../../components/AboutSection.svelte';
   import SensorSearch from '../../components/SensorSearch.svelte';
@@ -15,6 +15,8 @@
   import SensorBadges from '../../components/SensorBadges.svelte';
   import GeoLevelBadge from '../../components/GeoLevelBadge.svelte';
   import SourceBadges from '../../components/SourceBadges.svelte';
+  import chevronLeftIcon from '!raw-loader!@fortawesome/fontawesome-free/svgs/solid/chevron-left.svg';
+  import { modeByID } from '..';
 
   $: sensor = $metaDataManager.getSensor($currentSensor) || $metaDataManager.getSensor(DEFAULT_SENSOR);
   $: source = sensor ? $metaDataManager.getSource(sensor) : undefined;
@@ -25,6 +27,10 @@
   $: metaData = $metaDataManager.getMetaData(sensor);
   $: name = sensor ? sensor.name : 'Signal';
 
+  function switchMode() {
+    currentMode.set(modeByID['indicator-source']);
+  }
+
   function formatDateOrWeek(sensor, date, week) {
     return sensor.isWeeklySignal ? formatWeek(week) : formatDateISO(date);
   }
@@ -33,6 +39,9 @@
 <div class="mobile-root">
   <div class="mobile-header-line-bg">
     <div class="mobile-header-line">
+      <button class="mobile-back inline-svg-icon" on:click={switchMode}>
+        {@html chevronLeftIcon}
+      </button>
       <h2>Indicator Status of <span>{name}</span></h2>
     </div>
     <div class="uk-container content-grid">
@@ -75,7 +84,7 @@
       {/if}
     </AboutSection>
     <AboutSection className="uk-margin-small-top uk-margin-small-bottom">
-      <h3 class="mobile-h3">About {source ? source.name : ''}</h3>
+      <h3 class="mobile-h3">Provided by {source ? source.name : ''}</h3>
       {#if source}
         <div>
           <SourceBadges {source} />
@@ -123,7 +132,7 @@
           <div>
             <KPI text={metaData ? formatDateOrWeek(sensor, metaData.maxTime, metaData.maxWeek) : '?'} />
           </div>
-          <div class="sub">Latest Data Available</div>
+          <div class="sub" title="Most recent date for which data is available">Latest Data Available</div>
         </div>
         <div>
           <div>
@@ -135,7 +144,7 @@
           <div>
             <KPI text={metaData ? formatDateOrWeek(sensor, metaData.maxIssue, metaData.maxIssueWeek) : '?'} />
           </div>
-          <div class="sub">Latest Issue</div>
+          <div class="sub" title="Date the most recent update was published by Delphi">Latest Issue</div>
         </div>
       </div>
     </div>

src/modes/indicator-status/IndicatorSignal.svelte

@@ -71,12 +71,14 @@
     </tr>
     <tr>
       <th />
-      <th class="mobile-th uk-text-right">Latest Issue</th>
-      <th class="mobile-th uk-text-right">Latest Data Available</th>
+      <th class="mobile-th uk-text-right" title="Date the most recent update was published by Delphi">Latest Issue</th>
+      <th class="mobile-th uk-text-right" title="Most recent date for which data is available">Latest Data</th>
       <th class="mobile-th uk-text-right">Lag to Today</th>
-      <th class="mobile-th uk-text-right">Latest County Coverage</th>
+      <th class="mobile-th uk-text-right" title="Percent of US counties included in latest day of data"
+        >Latest County Coverage</th
+      >
       <th class="mobile-th uk-text-right">
-        <span>County Coverage</span>
+        <span title="Percent of US counties included">County Coverage</span>
         <div class="mobile-th-range">
           <span> {formatDateShortNumbers(loader.domain.min)} </span>
           <span> {formatDateShortNumbers(loader.domain.max)} </span>
@@ -111,7 +113,12 @@
             href="../indicator-source?sensor={r.source}-{r.reference_signal}"
             on:click|preventDefault={() => dispatch('select', r)}>{r.name}</a
           >
-          <div class="source">API: {r.source}</div>
+          <div
+            class="source"
+            title="Use 'data_source={r.source}' when fetching from the covidcast endpoint of the Epidata API."
+          >
+            API data_source: {r.source}
+          </div>
         </td>
         <td class="uk-text-right uk-text-nowrap">
           {r.ref.isWeeklySignal ? formatWeek(r.latest_issue_week) : formatDateISO(r.latest_issue)}