Merge branch 'dev' into rzatserkovnyi/api-key

cmu-delphi · Oct 1, 2024 · 3773169 · 3773169
2 parents 51c1dbc + d944baf
commit 3773169
Show file tree

Hide file tree

Showing 14 changed files with 181 additions and 167 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "www-epivis",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "private": true,
   "license": "MIT",
   "description": "",

diff --git a/src/App.svelte b/src/App.svelte
@@ -31,8 +31,8 @@
         if (ds) {
           // add the dataset itself
           addDataSet(ds);
-          // reset active datasets to fluview -> ili
-          $activeDatasets = [ds.datasets[1]];
+          // reset active datasets to fluview -> wili
+          $activeDatasets = [ds.datasets[0]];
           if (chart) {
             chart.fitData(true);
           }

diff --git a/src/api/EpiData.ts b/src/api/EpiData.ts
@@ -9,7 +9,7 @@ import {
   fluViewRegions,
   gftLocations,
   ghtLocations,
-  nidssDenqueLocations,
+  nidssDengueLocations,
   nidssFluLocations,
   nowcastLocations,
   quidelLocations,
@@ -64,9 +64,11 @@ function loadEpidata(
   name: string,
   epidata: Record<string, unknown>[],
   columns: string[],
+  columnRenamings: Record<string, string>,
   params: Record<string, unknown>,
 ): DataGroup {
   const datasets: DataSet[] = [];
+  const colRenamings = new Map(Object.entries(columnRenamings));
 
   for (const col of columns) {
     const points: EpiPoint[] = [];
@@ -91,7 +93,11 @@ function loadEpidata(
       }
       points.push(new EpiPoint(date, row[col] as number));
     }
-    datasets.push(new DataSet(points, col, params));
+    if (points.length > 0) {
+      // overwrite default column name if there's an overwrite in columnRenamings
+      const title = colRenamings.has(col) ? colRenamings.get(col) : col;
+      datasets.push(new DataSet(points, title, params));
+    }
   }
   return new DataGroup(name, datasets);
 }
@@ -113,6 +119,7 @@ export function loadDataSet(
   userParams: Record<string, unknown>,
   columns: string[],
   api_key = '',
+  columnRenamings: Record<string, string> = {},
 ): Promise<DataGroup | null> {
   const duplicates = get(expandedDataGroups).filter((d) => d.title == title);
   if (duplicates.length > 0) {
@@ -140,7 +147,18 @@ export function loadDataSet(
   url.searchParams.set('format', 'json');
   return fetchImpl<Record<string, unknown>[]>(url)
     .then((res) => {
-      return loadEpidata(title, res, columns, { _endpoint: endpoint, ...params });
+      const data = loadEpidata(title, res, columns, columnRenamings, { _endpoint: endpoint, ...params });
+      if (data.datasets.length == 0) {
+        return UIkit.modal
+          .alert(
+            `
+        <div class="uk-alert uk-alert-error">
+          <a href="${url.href}">API Link</a> returned no data.
+        </div>`,
+          )
+          .then(() => null);
+      }
+      return data;
     })
     .catch((error) => {
       console.warn('failed fetching data', error);
@@ -330,7 +348,7 @@ export function importFluView({
   auth?: string;
 }): Promise<DataGroup | null> {
   const regionLabel = fluViewRegions.find((d) => d.value === regions)?.label ?? '?';
-  const title = appendIssueToTitle(`[API] FluView: ${regionLabel}`, { issues, lag });
+  const title = appendIssueToTitle(`[API] ILINet (aka FluView): ${regionLabel}`, { issues, lag });
   return loadDataSet(
     title,
     'fluview',
@@ -351,6 +369,10 @@ export function importFluView({
       'num_age_4',
       'num_age_5',
     ],
+    {
+      wili: '%wILI',
+      ili: '%ILI',
+    },
   );
 }
 
@@ -390,9 +412,9 @@ export function importGHT({
   );
 }
 
-export function importNIDSSDenque({ locations }: { locations: string }): Promise<DataGroup | null> {
-  const regionLabel = nidssDenqueLocations.find((d) => d.value === locations)?.label ?? '?';
-  const title = `[API] NIDSS-Denque: ${regionLabel}`;
+export function importNIDSSDengue({ locations }: { locations: string }): Promise<DataGroup | null> {
+  const regionLabel = nidssDengueLocations.find((d) => d.value === locations)?.label ?? '?';
+  const title = `[API] NIDSS-Dengue: ${regionLabel}`;
   return loadDataSet(
     title,
     'nidss_dengue',

diff --git a/src/components/Chart.svelte b/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 {

diff --git a/src/components/TopMenu.svelte b/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';
@@ -50,10 +49,8 @@
       return;
     }
     switch (e.key) {
-      case 'f':
-        if (chart) {
-          chart.fitData(true);
-        }
+      case 'a':
+        $navMode = NavMode.autofit;
         break;
       case 'p':
         $navMode = NavMode.pan;
@@ -70,9 +67,6 @@
       case 's':
         $isShowingPoints = !$isShowingPoints;
         break;
-      case 'a':
-        $autoFit = !$autoFit;
-        break;
       case 'h':
         tour.cancel();
         tour.start();
@@ -82,35 +76,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 +135,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 +147,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 +184,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"

diff --git a/src/components/chartUtils.ts b/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 {