Merge pull request #714 from cmu-delphi/release-v1.12.3

release v1.12.3

CHANGELOG.md

@@ -1,3 +1,18 @@
+# Release 1.12.3
+
+## Signal Changes
+
+- Add "Vaccine Acceptance" signal to map and survey dashboard
+
+## New Features
+
+- [#709](https://github.com/cmu-delphi/www-covidcast/pull/709), [#710](https://github.com/cmu-delphi/www-covidcast/pull/710), [#708](https://github.com/cmu-delphi/www-covidcast/pull/708) Improve loading performance especially for the survey dashboard
+- [#712](https://github.com/cmu-delphi/www-covidcast/pull/712) Improve map style
+
+## Bug-fixes
+
+- [#713](https://github.com/cmu-delphi/www-covidcast/pull/713) fix trend color for decreasing trends
+
 # Release 1.12.1
 
 Bugfix release for changed signal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "www-covidcast",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "private": true,
   "license": "MIT",
   "description": "",

src/components/MapBox/AMapBoxWrapper.js

@@ -4,7 +4,7 @@ import { defaultRegionOnStartup, levelMegaCounty } from '../../stores/constants'
 import { MAP_THEME, MISSING_COLOR } from '../../theme';
 import { MISSING_VALUE } from './encodings/utils';
 import InteractiveMap from './InteractiveMap';
-import { toFillLayer, toHoverLayer } from './layers';
+import { toBorderLayer, toFillLayer, toHoverLayer } from './layers';
 import style from './mapbox_albers_usa_style.json';
 import { toBorderSource, toCenterSource } from './sources';
 import ZoomMap from './ZoomMap';
@@ -228,7 +228,7 @@ export default class AMapBoxWrapper {
     });
   }
 
-  addFillLevelLayer(level) {
+  addFillLevelLayer(level, border = true) {
     this.map.addLayer({
       id: toFillLayer(level),
       source: toBorderSource(level),
@@ -237,7 +237,6 @@ export default class AMapBoxWrapper {
         visibility: 'none',
       },
       paint: {
-        'fill-outline-color': MAP_THEME.countyOutlineWhenFilled,
         'fill-color': MAP_THEME.countyFill,
         'fill-opacity': [
           'case',
@@ -248,6 +247,22 @@ export default class AMapBoxWrapper {
           1,
         ],
         ...this.animationOptions('fill-color'),
+        ...(border ? { 'fill-outline-color': MAP_THEME.countyOutlineWhenFilled } : {}),
+      },
+    });
+  }
+
+  addBorderLevelLayer(level) {
+    this.map.addLayer({
+      id: toBorderLayer(level),
+      source: toBorderSource(level),
+      type: 'line',
+      layout: {
+        visibility: 'none',
+      },
+      paint: {
+        'line-color': MAP_THEME.countyOutlineWhenFilled,
+        'line-width': 1,
       },
     });
   }
@@ -298,6 +313,15 @@ export default class AMapBoxWrapper {
     return level;
   }
 
+  getAllEncodingLayers() {
+    const allEncodingLayers = this.encodings.flatMap((d) => d.layers);
+    allEncodingLayers.push(...this.levels.map((level) => toFillLayer(level)));
+    if (this.hasMegaCountyLevel) {
+      allEncodingLayers.push(toFillLayer(levelMegaCounty.id));
+    }
+    return allEncodingLayers;
+  }
+
   updateOptions(encoding, level, sensor, sensorType, valueMinMax, stops, stopsMega, scale) {
     level = this.validateLevel(level);
     // changed the visibility of layers
@@ -317,11 +341,7 @@ export default class AMapBoxWrapper {
       this.zoom.showStateLabels(level === 'state');
     }
 
-    const allEncodingLayers = this.encodings.flatMap((d) => d.layers);
-    allEncodingLayers.push(...this.levels.map((level) => toFillLayer(level)));
-    if (this.hasMegaCountyLevel) {
-      allEncodingLayers.push(toFillLayer(levelMegaCounty.id));
-    }
+    const allEncodingLayers = this.getAllEncodingLayers();
     const visibleLayers = new Set(this.encoding.getVisibleLayers(level));
 
     allEncodingLayers.forEach((layer) => {

src/components/MapBox/USMapBoxWrapper.js

@@ -1,9 +1,10 @@
-import { bounds, loadSources } from '../../maps';
+import { loadSources } from '../../maps';
+import bounds from '../../maps/processed/bounds.json';
 import { levelMegaCounty, levels } from '../../stores/constants';
 import { ENCODING_BUBBLE_THEME, ENCODING_SPIKE_THEME, MAP_THEME, MISSING_COLOR } from '../../theme';
 import AMapBoxWrapper from './AMapBoxWrapper';
 import { BubbleEncoding, ChoroplethEncoding, SpikeEncoding } from './encodings';
-import { addCityLayers, addStateLabelLayer, L } from './layers';
+import { addCityLayers, addStateLabelLayer, L, toBorderLayer } from './layers';
 import { toBorderSource, S } from './sources';
 
 const geoJsonSources = loadSources();
@@ -85,8 +86,10 @@ export default class USMapBoxWrapper extends AMapBoxWrapper {
 
     this.addFillLevelLayer(levelMegaCounty.id);
     this.levels.forEach((level) => {
-      this.addFillLevelLayer(level);
+      this.addFillLevelLayer(level, level !== 'county');
     });
+    this.addBorderLevelLayer('state'); // for county
+
     this.addHoverLevelLayer(levelMegaCounty.id);
     this.levels.forEach((level) => {
       this.addHoverLevelLayer(level);
@@ -99,4 +102,10 @@ export default class USMapBoxWrapper extends AMapBoxWrapper {
     addCityLayers(map);
     addStateLabelLayer(map);
   }
+
+  getAllEncodingLayers() {
+    const r = super.getAllEncodingLayers();
+    r.push(toBorderLayer('state'));
+    return r;
+  }
 }

src/components/MapBox/ZoomMap.js

@@ -1,5 +1,4 @@
 import { L } from './layers';
-import { LngLatBounds } from 'mapbox-gl';
 import bbox from '@turf/bbox';
 
 let SHRINK_FACTOR = 0.75;
@@ -11,7 +10,7 @@ export default class ZoomMap {
      */
     this.map = null;
     this.onZoom = onZoom;
-    this.resetBounds = new LngLatBounds(bounds);
+    this.resetBounds = bounds;
     this.resetBoundsOptions = {
       padding: 30, //px
       linear: false,

src/components/MapBox/encodings/choropleth.js

@@ -1,4 +1,4 @@
-import { toFillLayer } from '../layers';
+import { toBorderLayer, toFillLayer } from '../layers';
 import { levelMegaCounty } from '../../../stores/constants';
 import { interpolateValue } from './utils';
 
@@ -9,7 +9,11 @@ export default class ChoroplethEncoding {
   }
 
   getVisibleLayers(level) {
-    return [toFillLayer(level), level === 'county' && toFillLayer(levelMegaCounty.id)].filter(Boolean);
+    return [
+      toFillLayer(level),
+      level === 'county' && toFillLayer(levelMegaCounty.id),
+      level === 'county' && toBorderLayer('state'),
+    ].filter(Boolean);
   }
 
   addLayers() {

src/components/MapBox/layers.js

@@ -25,6 +25,9 @@ export function toBubbleLayer(level) {
 export function toSpikeLayer(level) {
   return `${level}-spike`;
 }
+export function toBorderLayer(level) {
+  return `${level}-border`;
+}
 
 export const L = {
   outline: 'state-stroke',

src/components/MapContainer.svelte

@@ -0,0 +1,83 @@
+<script>
+  import MapBox from './MapBox/MapBox.svelte';
+  import {
+    currentSensor,
+    currentLevel,
+    encoding,
+    colorScale,
+    colorStops,
+    bubbleRadiusScale,
+    spikeHeightScale,
+    currentRegion,
+    signalCasesOrDeathOptions,
+    currentSensorMapTitle,
+  } from '../stores';
+  import { createEventDispatcher } from 'svelte';
+  import USMapBoxWrapper from './MapBox/USMapBoxWrapper';
+  import MapOverlays from './MapOverlays.svelte';
+
+  const dispatch = createEventDispatcher();
+  /**
+   * @type {MapBox}
+   */
+  let map;
+
+  let zoom = 1.0;
+
+  export let mapLoading = false;
+  export let legendLoading = false;
+  export let summary = null;
+  export let showDate = false;
+
+  export let data;
+  /**
+   * @type {{info: import('../../maps/nameIdInfo').NameInfo, color: string}[]}
+   */
+  export let selections = [];
+
+  /**
+   * @type {import('../../maps').NameInfo | null}
+   */
+  export let focusOn = null;
+  export let selectRandomOnReady = false;
+
+  function updatedEncoding(info) {
+    if (!info) {
+      return;
+    }
+    if (info.scale) {
+      colorScale.set(info.scale);
+    }
+    colorStops.set(info.stops);
+    if ($encoding === 'bubble' && info.custom) {
+      bubbleRadiusScale.set(info.custom);
+    }
+    if ($encoding === 'spike' && info.custom) {
+      spikeHeightScale.set(info.custom);
+    }
+  }
+
+  function initialReady() {
+    if (!$currentRegion && selectRandomOnReady) {
+      map.selectRandom();
+    }
+  }
+</script>
+
+<MapOverlays {map} {mapLoading} {legendLoading} {zoom} {summary} {showDate} />
+<MapBox
+  bind:this={map}
+  {data}
+  sensor={$currentSensor}
+  level={$currentLevel}
+  signalOptions={$signalCasesOrDeathOptions}
+  {selections}
+  {focusOn}
+  encoding={$encoding}
+  on:zoom={(e) => (zoom = e.detail)}
+  on:updatedEncoding={(e) => updatedEncoding(e.detail)}
+  on:loading={(e) => dispatch('loading', e.detail)}
+  on:select={(e) => dispatch('select', e.detail)}
+  on:ready={initialReady}
+  wrapperClass={USMapBoxWrapper}
+  title={$currentSensorMapTitle} />

src/components/MapSummary.svelte

@@ -3,7 +3,7 @@
 
   export let summary = null;
 
-  $: total = summary ? summary.items.reduce((acc, d) => acc + (d.level === summary.level ? 1 : 0), 0) : 0;
+  $: total = summary && summary.items ? summary.items.length : 0;
 
   $: info = getLevelInfo(summary ? summary.level : 'county');