Release v2.1.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "www-epivis",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "license": "MIT",
   "description": "",

src/api/EpiData.ts

@@ -150,13 +150,17 @@ export function loadDataSet(
     });
 }
 
-export function fetchCOVIDcastMeta(): Promise<{ geo_type: string; signal: string; data_source: string }[]> {
+export function fetchCOVIDcastMeta(): Promise<
+  { geo_type: string; signal: string; data_source: string; time_type?: string }[]
+> {
   const url = new URL(ENDPOINT + `/covidcast_meta/`);
   url.searchParams.set('format', 'json');
-  return fetchImpl<{ geo_type: string; signal: string; data_source: string }[]>(url).catch((error) => {
-    console.warn('failed fetching data', error);
-    return [];
-  });
+  return fetchImpl<{ geo_type: string; signal: string; data_source: string; time_type?: string }[]>(url).catch(
+    (error) => {
+      console.warn('failed fetching data', error);
+      return [];
+    },
+  );
 }
 
 export function importCDC({ locations, auth }: { locations: string; auth?: string }): Promise<DataGroup | null> {
@@ -182,17 +186,20 @@ export function importCOVIDcast({
 }: {
   data_source: string;
   signal: string;
-  time_type?: 'day';
+  time_type?: string;
   geo_type: string;
   geo_value: string;
 }): Promise<DataGroup | null> {
-  const title = `[API] Delphi CODIDcast: ${geo_value} ${signal} (${data_source})`;
+  const title = `[API] COVIDcast: ${data_source}:${signal} (${geo_type}:${geo_value})`;
   return loadDataSet(
     title,
     'covidcast',
     {
-      time_type: 'day',
-      time_values: epiRange(firstDate.covidcast, currentDate),
+      time_type: time_type,
+      time_values:
+        time_type === 'day'
+          ? epiRange(firstDate.covidcast, currentDate)
+          : epiRange(firstEpiWeek.covidcast, currentEpiWeek),
     },
     { data_source, signal, time_type, geo_type, geo_value },
     ['value', 'stderr', 'sample_size'],

src/components/Chart.svelte

@@ -134,7 +134,9 @@
         setNavMode(NavMode.zoom);
       }
     }
-    if (navMode == NavMode.crop) {
+    if (navMode == NavMode.autofit) {
+      navMode = NavMode.pan;
+    } else if (navMode == NavMode.crop) {
       navBox = { x: m.x, y: m.y, w: 0, h: 0 };
     }
   }
@@ -268,6 +270,9 @@
     dx = ((xMax - xMin) / 2) * fx;
     dy = ((yMax - yMin) / 2) * fy;
     setViewport(xMin - dx, yMin - dy, xMax - dx, yMax - dy);
+    if (navMode == NavMode.autofit) {
+      navMode = NavMode.pan;
+    }
   }
 
   function zoom(x: number, y: number): void {

src/components/TopMenu.svelte

@@ -10,12 +10,11 @@
     faLink,
     faPaintBrush,
     faQuestion,
-    faReceipt,
     faSearchPlus,
-    faUpDown,
+    faShuffle,
   } from '@fortawesome/free-solid-svg-icons';
   import Fa from 'svelte-fa';
-  import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean, autoFit } from '../store';
+  import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean } from '../store';
   import type { IChart } from '../store';
   import { NavMode } from './chartUtils';
   import { tour } from '../tour';
@@ -55,6 +54,9 @@
           chart.fitData(true);
         }
         break;
+      case 'a':
+        $navMode = NavMode.autofit;
+        break;
       case 'p':
         $navMode = NavMode.pan;
         break;
@@ -70,9 +72,6 @@
       case 's':
         $isShowingPoints = !$isShowingPoints;
         break;
-      case 'a':
-        $autoFit = !$autoFit;
-        break;
       case 'h':
         tour.cancel();
         tour.start();
@@ -82,35 +81,57 @@
 </script>
 
 <div class="menu" {style} data-tour="top">
-  <div class="uk-button-group">
+  <div class="uk-button-group" data-tour="navmode">
     <button
       type="button"
-      class="uk-button uk-button-default uk-button-small"
-      on:click|preventDefault={randomizeColors}
-      title="Randomize Colors<br/>(Keyboard Shortcut: r)"
-      data-tour="random"
-      uk-tooltip><Fa icon={faPaintBrush} /></button
+      class="uk-button uk-button-small"
+      disabled={!chart}
+      class:uk-active={$navMode === NavMode.autofit}
+      class:uk-button-secondary={$navMode === NavMode.autofit}
+      class:uk-button-default={$navMode !== NavMode.autofit}
+      on:click|preventDefault={() => ($navMode = NavMode.autofit)}
+      title="Autofit Mode<br/>(Keyboard Shortcut: a)"
+      uk-tooltip><Fa icon={faExpand} /></button
     >
     <button
       type="button"
-      class="uk-button uk-button-default uk-button-small"
-      disabled={!chart}
-      on:click|preventDefault={() => (chart ? chart.fitData(true) : null)}
-      title="Fit Data to Screen<br/>(Keyboard Shortcut: f)"
-      data-tour="fit"
-      uk-tooltip><Fa icon={faExpand} /></button
+      class="uk-button uk-button-small"
+      class:uk-active={$navMode === NavMode.pan}
+      title="Pan Mode<br/>(Keyboard Shortcut: p)"
+      class:uk-button-secondary={$navMode === NavMode.pan}
+      class:uk-button-default={$navMode !== NavMode.pan}
+      uk-tooltip
+      on:click|preventDefault={() => ($navMode = NavMode.pan)}><Fa icon={faArrowsAlt} /></button
     >
     <button
       type="button"
       class="uk-button uk-button-small"
-      disabled={!chart}
-      class:uk-active={$autoFit}
-      class:uk-button-secondary={$autoFit}
-      class:uk-button-default={!$autoFit}
-      on:click|preventDefault={() => ($autoFit = !$autoFit)}
-      title="Automatically Fit Data<br/>(Keyboard Shortcut: a)"
-      data-tour="autofit"
-      uk-tooltip><Fa icon={faUpDown} /></button
+      class:uk-active={$navMode === NavMode.crop}
+      class:uk-button-secondary={$navMode === NavMode.crop}
+      class:uk-button-default={$navMode !== NavMode.crop}
+      title="Crop Mode<br/>(Keyboard Shortcut: c)"
+      uk-tooltip
+      on:click|preventDefault={() => ($navMode = NavMode.crop)}><Fa icon={faCrop} /></button
+    >
+    <button
+      type="button"
+      class="uk-button uk-button-small"
+      class:uk-active={$navMode === NavMode.zoom}
+      class:uk-button-secondary={$navMode === NavMode.zoom}
+      class:uk-button-default={$navMode !== NavMode.zoom}
+      title="Zoom Mode<br/>(Keyboard Shortcut: z)"
+      uk-tooltip
+      on:click|preventDefault={() => ($navMode = NavMode.zoom)}><Fa icon={faSearchPlus} /></button
+    >
+  </div>
+  <div class="uk-button-group">
+    <button
+      type="button"
+      class="uk-button uk-button-default uk-button-small"
+      on:click|preventDefault={randomizeColors}
+      title="Randomize Colors<br/>(Keyboard Shortcut: r)"
+      data-tour="random"
+      uk-tooltip><Fa icon={faPaintBrush} /></button
     >
     <button
       type="button"
@@ -119,17 +140,10 @@
       class:uk-button-secondary={$isShowingPoints}
       class:uk-button-default={!$isShowingPoints}
       on:click|preventDefault={() => ($isShowingPoints = !$isShowingPoints)}
-      title="Show or Hide points<br/>(Keyboard Shortcut: s)"
+      title="Show or Hide Points<br/>(Keyboard Shortcut: s)"
       data-tour="points"
       uk-tooltip><Fa icon={faEllipsisH} /></button
     >
-    <button
-      type="button"
-      class="uk-button uk-button-default uk-button-small"
-      on:click|preventDefault={scaleMean}
-      title="Scale by 1/mean"
-      uk-tooltip><Fa icon={faAnchor} /></button
-    >
     <button
       type="button"
       class="uk-button uk-button-default uk-button-small"
@@ -138,12 +152,21 @@
       uk-tooltip
       disabled={$activeDatasets.length < 2}><Fa icon={faChartLine} /></button
     >
+  </div>
+  <div class="uk-button-group" data-tour="scale">
+    <button
+      type="button"
+      class="uk-button uk-button-default uk-button-small"
+      on:click|preventDefault={scaleMean}
+      title="Scale by 1/mean"
+      uk-tooltip><Fa icon={faAnchor} /></button
+    >
     <button
       type="button"
       class="uk-button uk-button-default uk-button-small"
       on:click|preventDefault={reset}
-      title="Reset DataSet Scaling"
-      uk-tooltip><Fa icon={faReceipt} /></button
+      title="Reset Dataset Scaling"
+      uk-tooltip><Fa icon={faShuffle} /></button
     >
   </div>
   <div class="uk-button-group">
@@ -166,38 +189,6 @@
       on:click|preventDefault={() => (doDialog = 'directLink')}><Fa icon={faLink} /></button
     >
   </div>
-  <div class="uk-button-group" data-tour="navmode">
-    <button
-      type="button"
-      class="uk-button uk-button-small"
-      class:uk-active={$navMode === NavMode.pan}
-      title="Pan Mode<br/>(Keyboard Shortcut: p)"
-      class:uk-button-secondary={$navMode === NavMode.pan}
-      class:uk-button-default={$navMode !== NavMode.pan}
-      uk-tooltip
-      on:click|preventDefault={() => ($navMode = NavMode.pan)}><Fa icon={faArrowsAlt} /></button
-    >
-    <button
-      type="button"
-      class="uk-button uk-button-small"
-      class:uk-active={$navMode === NavMode.crop}
-      class:uk-button-secondary={$navMode === NavMode.crop}
-      class:uk-button-default={$navMode !== NavMode.crop}
-      title="Crop Mode<br/>(Keyboard Shortcut: c)"
-      uk-tooltip
-      on:click|preventDefault={() => ($navMode = NavMode.crop)}><Fa icon={faCrop} /></button
-    >
-    <button
-      type="button"
-      class="uk-button uk-button-small"
-      class:uk-active={$navMode === NavMode.zoom}
-      class:uk-button-secondary={$navMode === NavMode.zoom}
-      class:uk-button-default={$navMode !== NavMode.zoom}
-      title="Zoom Mode<br/>(Keyboard Shortcut: z)"
-      uk-tooltip
-      on:click|preventDefault={() => ($navMode = NavMode.zoom)}><Fa icon={faSearchPlus} /></button
-    >
-  </div>
   <div class="uk-button-group">
     <button
       type="button"

src/components/chartUtils.ts

@@ -1,7 +1,8 @@
 export enum NavMode {
-  pan = 0,
-  crop = 1,
-  zoom = 2,
+  autofit = 0,
+  pan = 1,
+  crop = 2,
+  zoom = 3,
 }
 
 export enum Align {

src/components/dialogs/ImportAPIDialog.svelte

@@ -19,6 +19,8 @@
   import NowCast from './dataSources/Nowcast.svelte';
   import CovidHosp from './dataSources/COVIDHosp.svelte';
   import CoviDcast from './dataSources/COVIDcast.svelte';
+  import { navMode } from '../../store';
+  import { NavMode } from '../chartUtils';
 
   const dispatch = createEventDispatcher();
 
@@ -54,6 +56,8 @@
       loading = false;
       if (ds) {
         dispatch('imported', ds);
+        // reset viewport and make sure new data is displayed
+        $navMode = NavMode.autofit;
       } else {
         dispatch('close');
       }

src/components/dialogs/dataSources/COVIDcast.svelte

@@ -47,7 +47,11 @@
   });
 
   export function importDataSet() {
-    return importCOVIDcast({ data_source, signal, geo_type, geo_value });
+    return fetchCOVIDcastMeta().then((res) => {
+      const meta = res.filter((row) => row.data_source === data_source && row.signal === signal);
+      const time_type = meta[0].time_type;
+      return importCOVIDcast({ data_source, signal, geo_type, geo_value, time_type });
+    });
   }
 </script>
 

src/components/tree/TreeLeafNode.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type DataSet from '../../data/DataSet';
-  import { activeDatasets, autoFit } from '../../store';
+  import { activeDatasets, navMode } from '../../store';
   import Fa from 'svelte-fa';
   import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
-  import type { IChart } from '../store';
+  import type { IChart } from '../../store';
+  import { NavMode } from '../chartUtils';
 
   export let node: DataSet;
   export let chart: IChart | null;
@@ -17,7 +18,7 @@
   }
   $: {
     // runs whenever $activeDatasets is updated
-    if ($activeDatasets && chart && $autoFit) {
+    if ($activeDatasets && chart && $navMode == NavMode.autofit) {
       chart.fitData(true);
     }
   }

src/data/data.ts

@@ -385,6 +385,7 @@ export const firstEpiWeek = {
   quidel: 201535,
   sensors: 201030,
   nowcast: 200901,
+  covidcast: 202001,
 };
 
 // first available date for each data source