Merge pull request #1191 from cmu-delphi/release/v3.2.3

Release v3.2.3

Author: duanecmu

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "www-covidcast",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "private": true,
   "license": "MIT",
   "description": "",
@@ -40,89 +40,90 @@
     "prepack": "npm run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@octokit/request": "^5.6.2",
-    "@popperjs/core": "^2.10.2",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/svelte": "^3.0.3",
-    "@tsconfig/svelte": "^2.0.1",
-    "@types/d3-color": "^3.0.2",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@fortawesome/fontawesome-free": "^5",
+    "@octokit/request": "^5.6.3",
+    "@popperjs/core": "^2.11.5",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/svelte": "^3.1.3",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/d3-color": "^3.1.0",
     "@types/d3-dsv": "^3.0.0",
     "@types/d3-format": "^3.0.1",
     "@types/d3-geo": "^3.0.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-time": "^3.0.0",
     "@types/d3-time-format": "^4.0.0",
-    "@types/jest": "^27.0.3",
-    "@types/lodash-es": "^4.17.5",
+    "@types/jest": "^28.1.3",
+    "@types/lodash-es": "^4.17.6",
     "@types/lz-string": "^1.3.34",
-    "@types/marked": "^4.0.1",
-    "@types/node": "^16.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "babel-jest": "^27.3.1",
-    "babel-loader": "^8.2.3",
+    "@types/marked": "^4.0.3",
+    "@types/node": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "babel-jest": "^28.1.1",
+    "babel-loader": "^8.2.5",
     "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^6.4.0",
-    "copy-webpack-plugin": "^10.0.0",
-    "core-js": "^3.19.1",
+    "concurrently": "^7.2.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.23.3",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.1.4",
-    "d3-color": "^3.0.1",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "d3-color": "^3.1.0",
     "d3-dsv": "^3.0.1",
-    "d3-format": "^3.0.1",
+    "d3-format": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-time": "^3.0.0",
-    "d3-time-format": "^4.0.0",
-    "eslint": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "d3-time-format": "^4.1.0",
+    "eslint": "^8.18.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "file-loader": "^6.2.0",
     "geo-albers-usa-territories": "^0.1.0",
     "html-webpack-plugin": "^5.5.0",
-    "http-server": "^14.0.0",
-    "husky": "^7.0.4",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.3.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "js-cookie": "^3.0.1",
     "js-yaml": "^4.1.0",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^13.0.3",
     "lodash-es": "^4.17.21",
-    "marked": "^4.0.10",
-    "mini-css-extract-plugin": "^2.4.5",
-    "node-fetch": "^2.6.7",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.5.0",
+    "marked": "^4.0.17",
+    "mini-css-extract-plugin": "^2.6.1",
+    "node-fetch": "^2",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
     "raw-loader": "^4.0.2",
     "regenerator-runtime": "^0.13.9",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "svelte": "^3.44.2",
-    "svelte-check": "^2.2.10",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
     "svelte-icons": "^2.1.0",
-    "svelte-jester": "^2.1.5",
-    "svelte-loader": "^3.1.2",
-    "svelte-preprocess": "^4.9.8",
-    "ts-jest": "^27.0.7",
-    "ts-loader": "^9.2.6",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.2",
+    "svelte-jester": "^2.3.2",
+    "svelte-loader": "^3.1.3",
+    "svelte-preprocess": "^4.10.7",
+    "ts-jest": "^28.0.5",
+    "ts-loader": "^9.3.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
-    "vega": "^5.21.0",
-    "vega-embed": "6.20.0",
-    "vega-lite": "^5.1.1",
-    "webpack": "^5.64.2",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.5.0"
+    "vega": "^5.22.1",
+    "vega-embed": "6.21.0",
+    "vega-lite": "^5.2.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
-    "uikit": "^3.9.3"
+    "uikit": "^3.14.3"
   },
   "lint-staged": {
     "*.{ts,js,svelte}": "eslint --cache --fix",

package.json

@@ -383,7 +383,6 @@
     filterLine = signals.filter((_, i) => filterLineManaged[i]);
   }
   $: {
-    console.log(filterLineManaged);
     updateFilteredLine(sensor, ageStratifictions, filterLineManaged);
   }
 

src/blocks/HistoryLineChart.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { formatDateYearDayOfWeekAbbr } from '../formats';
+  import { getLevelInfo } from '../stores';
+
+  /**
+   * @type {import("../data/sensor").Sensor}
+   */
+  export let sensor;
+  /**
+   * @type {Date}
+   */
+  export let date;
+  /**
+   * @type {import("../data/regions").RegionLevel}
+   */
+  export let level;
+
+  /**
+   * @type {import("../data/trend").SensorTrend }
+   */
+  export let trend;
+
+  /**
+   * two way binding
+   */
+  export let suffix = '';
+
+  export let prefix = '*';
+
+  $: showWarning = trend.then((d) => {
+    if (
+      (d != null && (d.value == null || (d.date != null && d.date < date))) ||
+      (d.date_value != null && d.date_value < date)
+    ) {
+      suffix = '*';
+      return d;
+    }
+    suffix = '';
+    return null;
+  });
+</script>
+
+{#await showWarning then d}
+  {#if d != null}
+    <p>
+      {prefix} The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date)} at the geographic level
+      "{getLevelInfo(level).label}", yet. The data from {formatDateYearDayOfWeekAbbr(d.date ?? d.date_value)} is displayed
+      instead.
+    </p>
+  {/if}
+{/await}

src/blocks/IndicatorFallbackWarning.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { formatAPITime } from '../data';
   import { formatDateYearDayOfWeekAbbr } from '../formats';
   import { getLevelInfo } from '../stores';
 
@@ -22,6 +23,9 @@
   function checkSensorData(sensor, date, region) {
     return fetcher.fetch1Sensor1Region1DateDetails(sensor, region, date);
   }
+  function switchDate() {
+    date.set(sensor.timeFrame.max);
+  }
 </script>
 
 {#if !sensor.value.levels.includes(region.level)}
@@ -32,7 +36,11 @@
   {#await checkSensorData(sensor, date, region) then hasData}
     {#if !hasData}
       <div data-uk-alert class="uk-alert-warning">
-        The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date.value)}, yet.
+        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
+        >.
       </div>
     {/if}
   {/await}

src/blocks/IndicatorWarning.svelte

@@ -7,6 +7,7 @@
   import DownloadMenu from '../components/DownloadMenu.svelte';
   import RegionMapTooltip from './RegionMapTooltip.svelte';
   import FullWidthWrapper from '../components/FullWidthWrapper.svelte';
+  import IndicatorFallbackWarning from './IndicatorFallbackWarning.svelte';
 
   /**
    * @type {import("../../stores/params").DateParam}
@@ -25,10 +26,15 @@
    */
   export let fetcher;
 
+  /**
+   * two way binding
+   */
+  export let suffix = '';
+
   $: spec = generateStateMapWithCountyDataSpec({
     ...sensor.vegaSchemeDomain('county'),
   });
-  $: data = fetcher.fetch1SensorNRegions1Date(sensor, 'county', date);
+  $: data = fetcher.fetch1SensorNRegions1DateWithFallback(sensor, 'county', date);
 
   function onClickHandler(evt) {
     const item = evt.detail.item;
@@ -61,3 +67,11 @@
     />
   </div>
 </FullWidthWrapper>
+
+<IndicatorFallbackWarning
+  sensor={sensor.value}
+  level="county"
+  date={date.value}
+  trend={data.then((rows) => rows[0])}
+  bind:suffix
+/>

src/blocks/RegionCountyMap.svelte

@@ -7,6 +7,7 @@
   import DownloadMenu from '../components/DownloadMenu.svelte';
   import FullWidthWrapper from '../components/FullWidthWrapper.svelte';
   import RegionMapTooltip from './RegionMapTooltip.svelte';
+  import IndicatorFallbackWarning from './IndicatorFallbackWarning.svelte';
 
   /**
    * @type {import("../../stores/params").DateParam}
@@ -59,20 +60,25 @@
     const hasCounty = sensor.value.levels.includes('county');
     if (region.level === 'state' && hasCounty) {
       const counties = getCountiesOfState(region.value);
-      const countyData = fetcher.fetch1SensorNRegions1Date(
+      const countyData = fetcher.fetch1SensorNRegions1DateWithFallback(
         sensor,
         [...counties, getInfoByName(`${region.id}000`)],
         date,
       );
-      const stateData = fetcher.fetch1SensorNRegions1Date(sensor, 'state', date);
+      const stateData = fetcher.fetch1SensorNRegions1DateWithFallback(sensor, 'state', date);
       return Promise.all([countyData, stateData]).then((r) => r.flat());
     }
     if (region.level === 'county' && hasCounty) {
       return fetcher.fetch1SensorNRegions1Date(sensor, 'county', date);
     }
-    return fetcher.fetch1SensorNRegions1Date(sensor, 'state', date);
+    return fetcher.fetch1SensorNRegions1DateWithFallback(sensor, 'state', date);
   }
 
+  $: fallbackLevel =
+    region.level === 'county' || (region.level === 'state' && sensor.value.levels.includes('county'))
+      ? 'county'
+      : 'state';
+
   function generateFileName(sensor, date, region) {
     const hasCounty = sensor.value.levels.includes('county');
     let regionName = region.level === 'nation' || !hasCounty ? 'US States' : 'US Counties';
@@ -115,3 +121,19 @@
     <DownloadMenu {vegaRef} {data} {sensor} absolutePos {fileName} />
   </div>
 </FullWidthWrapper>
+
+<IndicatorFallbackWarning
+  sensor={sensor.value}
+  level={fallbackLevel}
+  date={date.value}
+  trend={data.then((rows) => rows[0])}
+/>
+{#if fallbackLevel === 'county'}
+  <IndicatorFallbackWarning
+    prefix="†"
+    sensor={sensor.value}
+    level={'state'}
+    date={date.value}
+    trend={data.then((rows) => rows.find((d) => d.level === 'state'))}
+  />
+{/if}

src/blocks/RegionMap.svelte

@@ -22,6 +22,8 @@
    */
   export let fetcher;
 
+  let suffix = '';
+
   $: hasCounties = sensor.value.levels.includes('county');
   let showChoropleth = false;
 </script>
@@ -34,11 +36,16 @@
     Click on a state to explore further
   </p>
   <div class="toggle-center-wrapper">
-    <Toggle bind:checked={showChoropleth} before="Beehive Grid"><span>Choropleth Map</span></Toggle>
+    <Toggle bind:checked={showChoropleth} before="Beehive Grid"
+      ><span>
+        Choropleth Map
+        {#if showChoropleth && hasCounties}{suffix}{/if}</span
+      ></Toggle
+    >
   </div>
   {#if showChoropleth}
     {#if hasCounties}
-      <RegionCountyMap {region} {date} {sensor} {fetcher} />
+      <RegionCountyMap {region} {date} {sensor} {fetcher} bind:suffix />
     {:else}
       <RegionMap {region} {date} {sensor} {fetcher} />
     {/if}
@@ -64,7 +71,7 @@
   }
 
   .toggle-center-wrapper :global(span) {
-    width: 8em;
+    width: 9em;
   }
 
   .ux-hint {

src/blocks/RegionMapWrapper.svelte

@@ -9,10 +9,13 @@
   export let sub = null;
 
   export let loading = false;
+
+  export let asterisk = false;
 </script>
 
 <span class="text" class:loading>{text || 'N/A'}</span>
 {#if sub}<span class="fraction">{sub}</span>{/if}
+{#if asterisk}<span class="text">*</span>{/if}
 
 <style>
   .text {