Upgrade EpiVis dashboard

src/App.svelte

@@ -6,17 +6,44 @@
   import type { IChart } from './store';
   import { onMount } from 'svelte';
   import { tour } from './tour';
+  import { addDataSet } from './store';
+  import { fluViewRegions } from './data/data';
+  import { DEFAULT_ISSUE } from './components/dialogs/utils';
+  import { importFluView } from './api/EpiData';
 
   let chart: Chart | null = null;
   $: ichart = chart as unknown as IChart | null;
 
   onMount(() => {
-    tour.start();
+    if (!localStorage.getItem('shepherd-tour')) {
+      tour.start();
+    }
+
+    // Try fetching the default FluView dataset! (unless the URL has a shared dataset in it)
+    const url = new URL(location.href);
+    const hash = url.hash.slice(1);
+    if (!hash) {
+      let regions = fluViewRegions[0].value;
+      let issue = DEFAULT_ISSUE;
+      let auth: string = '';
+
+      importFluView({ regions, ...issue, auth }).then((ds) => {
+        if (ds) {
+          // add the dataset itself
+          addDataSet(ds);
+          // reset active datasets to fluview -> ili
+          $activeDatasets = [ds.datasets[1]];
+          if (chart) {
+            chart.fitData(true, ds.datasets[1]);
+          }
+        }
+      });
+    }
   });
 </script>
 
 <TopMenu chart={ichart} style="grid-area: menu" />
-<LeftMenu style="grid-area: side" />
+<LeftMenu chart={ichart} style="grid-area: side; max-height: 100vh; overflow: scroll" />
 <Chart
   bind:this={chart}
   style="grid-area: main"

src/api/EpiData.ts

@@ -21,6 +21,8 @@ import {
 import DataSet, { DataGroup } from '../data/DataSet';
 import EpiDate from '../data/EpiDate';
 import EpiPoint from '../data/EpiPoint';
+import { get } from 'svelte/store';
+import { expandedDataGroups } from '../store';
 
 // import DataSet from "../data/DataSet";
 // import EpiDate from "../data/EpiDate";
@@ -111,6 +113,17 @@ export function loadDataSet(
   userParams: Record<string, unknown>,
   columns: string[],
 ): Promise<DataGroup | null> {
+  const duplicates = get(expandedDataGroups).filter((d) => d.title == title);
+  if (duplicates.length > 0) {
+    return UIkit.modal
+      .alert(
+        `
+    <div class="uk-alert uk-alert-error">
+      Cannot import duplicate dataset: <b>${title}.</b>
+    </div>`,
+      )
+      .then(() => null);
+  }
   const url = new URL(ENDPOINT + `/${endpoint}/`);
   const params = cleanParams(userParams);
   Object.entries(fixedParams).forEach(([key, value]) => {

src/components/Chart.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import type DataSet from '../data/DataSet';
+  import type DataGroup from '../data/DataSet';
   import { DEFAULT_VIEWPORT } from '../data/DataSet';
   import EpiDate from '../data/EpiDate';
   import { Align, contains, isTouchEvent, NavMode, zeroPad } from './chartUtils';
@@ -380,16 +381,47 @@
     return { x: x + dx, y: y + dy - h, w: w, h: h };
   }
 
-  export function fitData(shouldAnimate = false): void {
-    if (datasets.length === 0) {
+  // Fit viewport to the currently available datasets.
+  // Since there is a delay to new changes propagating to the datasets variable, the
+  // include and exclude arguments are used to make sure a recently selected
+  // or de-selected dataset is properly accounted for.
+  export function fitData(
+    shouldAnimate = false,
+    include: DataSet | DataGroup | null = null,
+    exclude: DataSet | DataGroup | null = null,
+  ): void {
+    // No data, nothing to fit
+    if (datasets.length === 0 && !include) {
+      return;
+    }
+    // Just deselected the only dataset, nothing to fit
+    if (datasets.length === 1 && exclude) {
       return;
     }
-    const temp = datasets[0].data;
-    let _xMin = temp[0].getDate().getIndex() - 0.5;
-    let _xMax = temp[temp.length - 1].getDate().getIndex() + 0.5;
-    let _yMin = datasets[0].getPointValue(0);
+    let temp = null;
+    if (datasets.length === 0 && include) {
+      // If no previous data, set dataset to the new one
+      temp = include;
+    } else if (datasets[0] && datasets[0] == exclude) {
+      // If we just deselected the first dataset, don't fit to that one
+      temp = datasets[1];
+    } else {
+      // Generally fit to the first dataset
+      temp = datasets[0];
+    }
+    let _xMin = temp.data[0].getDate().getIndex() - 0.5;
+    let _xMax = temp.data[temp.data.length - 1].getDate().getIndex() + 0.5;
+    let _yMin = temp.getPointValue(0);
     let _yMax = _yMin;
-    for (const ds of datasets) {
+    let dss = null;
+    if (include) {
+      dss = [...datasets, include];
+    } else if (exclude) {
+      dss = datasets.filter((d) => d !== exclude);
+    } else {
+      dss = datasets;
+    }
+    for (const ds of dss) {
       const data = ds.data;
       _xMin = Math.min(_xMin, data[0].getDate().getIndex() - 0.5);
       _xMax = Math.max(_xMax, data[data.length - 1].getDate().getIndex() + 0.5);

src/components/LeftMenu.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
   import DataSet from '../data/DataSet';
+  import type { IChart } from '../store';
   import { datasetTree, version } from '../store';
   import ImportDataSetsMenu from './ImportDataSetsMenu.svelte';
   import TreeInnerNode from './tree/TreeInnerNode.svelte';
   import TreeLeafNode from './tree/TreeLeafNode.svelte';
 
   export let style = '';
+  export let chart: IChart | null;
 </script>
 
 <side class="left" {style} data-tour="browser">
   <ImportDataSetsMenu />
   <div class="tree">
     {#each $datasetTree.datasets as child (child.title)}
       {#if child instanceof DataSet}
-        <TreeLeafNode node={child} />
+        <TreeLeafNode {chart} node={child} />
       {:else}
-        <TreeInnerNode node={child} />
+        <TreeInnerNode {chart} node={child} />
       {/if}
     {/each}
   </div>

src/components/TopMenu.svelte

@@ -9,13 +9,16 @@
     faImage,
     faLink,
     faPaintBrush,
+    faQuestion,
     faReceipt,
     faSearchPlus,
+    faUpDown,
   } from '@fortawesome/free-solid-svg-icons';
   import Fa from 'svelte-fa';
-  import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean } from '../store';
+  import { activeDatasets, isShowingPoints, navMode, randomizeColors, reset, scaleMean, autoFit } from '../store';
   import type { IChart } from '../store';
   import { NavMode } from './chartUtils';
+  import { tour } from '../tour';
   import RegressionDialog from './dialogs/RegressionDialog.svelte';
   import DirectLinkDialog from './dialogs/DirectLinkDialog.svelte';
 
@@ -67,6 +70,13 @@
       case 's':
         $isShowingPoints = !$isShowingPoints;
         break;
+      case 'a':
+        $autoFit = !$autoFit;
+        break;
+      case 'h':
+        tour.cancel();
+        tour.start();
+        break;
     }
   }
 </script>
@@ -90,6 +100,16 @@
       data-tour="fit"
       uk-tooltip><Fa icon={faExpand} /></button
     >
+    <button
+      type="button"
+      class="uk-button uk-button-default uk-button-small"
+      disabled={!chart}
+      class:uk-active={$autoFit === true}
+      on:click|preventDefault={() => ($autoFit = !$autoFit)}
+      title="Automatically Fit Data<br/>(Keyboard Shortcut: a)"
+      data-tour="autofit"
+      uk-tooltip><Fa icon={faUpDown} /></button
+    >
     <button
       type="button"
       class="uk-button uk-button-default uk-button-small"
@@ -168,6 +188,20 @@
       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"
+      disabled={!chart}
+      title="View introductory tour<br/>(Keyboard Shortcut: h)"
+      uk-tooltip
+      data-tour="datatour"
+      on:click|preventDefault={() => {
+        tour.cancel();
+        tour.start();
+      }}><Fa icon={faQuestion} /></button
+    >
+  </div>
 </div>
 
 {#if doDialog === 'regress'}

src/components/tree/TreeInnerNode.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import DataSet from '../../data/DataSet';
   import type { DataGroup } from '../../data/DataSet';
+  import type { IChart } from '../store';
   import { expandedDataGroups } from '../../store';
   import TreeLeafNode from './TreeLeafNode.svelte';
   import Fa from 'svelte-fa';
   import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
   export let node: DataGroup;
+  export let chart: IChart | null;
 
   function toggleExpanded() {
     if (expanded) {
@@ -28,7 +30,7 @@
   {#if expanded}
     {#each node.datasets as child (child.title)}
       {#if child instanceof DataSet}
-        <TreeLeafNode node={child} />
+        <TreeLeafNode {chart} node={child} />
       {:else}
         <svelte:self node={child} />
       {/if}

src/components/tree/TreeLeafNode.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   import type DataSet from '../../data/DataSet';
-  import { activeDatasets } from '../../store';
+  import { activeDatasets, autoFit } from '../../store';
   import Fa from 'svelte-fa';
   import { faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
+  import type { IChart } from '../store';
 
   export let node: DataSet;
+  export let chart: IChart | null;
 
   function toggleSelected() {
     if (selected) {
       $activeDatasets = $activeDatasets.filter((d) => d !== node);
+      if (chart && $autoFit === true) {
+        chart.fitData(true, null, node);
+      }
     } else {
       $activeDatasets = [node, ...$activeDatasets];
+      if (chart && $autoFit === true) {
+        chart.fitData(true, node);
+      }
     }
   }
   $: selected = $activeDatasets.includes(node);

src/data/DataSet.ts

@@ -26,7 +26,7 @@ export default class DataSet {
 
   constructor(
     public readonly data: readonly EpiPoint[],
-    public readonly title = '',
+    public title = '',
     public readonly params: Record<string, unknown> | unknown[] | null = null,
     public color = getRandomColor(),
   ) {
@@ -100,24 +100,6 @@ export default class DataSet {
   }
 }
 
-export const SAMPLE_DATASET: DataSet = ((): DataSet => {
-  // initial dataset, just for fun
-  const data = new Array<EpiPoint>(365);
-  const now = new Date();
-  const baseIndex = new EpiDate(now.getFullYear(), now.getMonth() + 1, now.getDate()).getIndex() - 182;
-  for (let i = 0; i < data.length; i++) {
-    const x = 6 - (12 * i) / (data.length - 1);
-    const xp = x * Math.PI;
-    const v = x === 0 ? 1 : Math.sin(xp) / xp;
-    data[i] = new EpiPoint(EpiDate.fromIndex(baseIndex + i), v);
-  }
-  const ds = new DataSet(data, 'EpiVis Sample');
-
-  //sampleDataset.lineWidth = 5;
-  //sampleDataset.color = '#dd3311';
-  return ds;
-})();
-
 export class DataGroup {
   public parent?: DataGroup;
 
@@ -134,7 +116,7 @@ export class DataGroup {
   }
 }
 
-export const DEFAULT_GROUP: DataGroup = new DataGroup('All Datasets', [SAMPLE_DATASET]);
+export const DEFAULT_GROUP: DataGroup = new DataGroup('All Datasets', []);
 
 export function flatten(dataset: DataSet | DataGroup): DataSet[] {
   if (dataset instanceof DataSet) {

src/deriveLinkDefaults.ts

@@ -14,7 +14,7 @@ import {
   importTwitter,
   importWiki,
 } from './api/EpiData';
-import DataSet, { DataGroup, DEFAULT_GROUP, flatten, SAMPLE_DATASET, DEFAULT_VIEWPORT } from './data/DataSet';
+import DataSet, { DataGroup, DEFAULT_GROUP, flatten, DEFAULT_VIEWPORT } from './data/DataSet';
 import EpiDate from './data/EpiDate';
 import EpiPoint from './data/EpiPoint';
 
@@ -35,13 +35,15 @@ export interface SharedState {
   active: DataSet[];
   viewport: null | [number, number, number, number];
   showPoints: boolean;
+  autoFit: boolean;
 }
 
 const DEFAULT_VALUES: SharedState = {
   group: DEFAULT_GROUP,
-  active: [SAMPLE_DATASET],
+  active: [],
   viewport: DEFAULT_VIEWPORT,
   showPoints: false,
+  autoFit: true,
 };
 
 const lookups = {
@@ -130,11 +132,6 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
     }
 
     for (const ds of datasets) {
-      if (ds.title === SAMPLE_DATASET.title) {
-        SAMPLE_DATASET.color = ds.color;
-        resolvedDataSets.push(SAMPLE_DATASET);
-        continue;
-      }
       if (ds.params && ds.params._type === 'line') {
         const d = new DataSet(
           [
@@ -158,7 +155,17 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
       }
     }
 
-    return Promise.all(resolvedDataSets).then((data) => data.filter((d): d is DataSet => d != null));
+    return Promise.all(resolvedDataSets).then((data) => {
+      const cleaned = data.filter((d): d is DataSet => d != null);
+      cleaned.forEach((d) => {
+        if (d.params && !Array.isArray(d.params) && d.params._endpoint && d.params.regions) {
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          d.title = `${d.params._endpoint} | ${d.params.regions} | ${d.title}`;
+        }
+        add(d);
+      });
+      return cleaned;
+    });
   };
 }
 
@@ -194,10 +201,6 @@ export function getDirectLinkImpl(state: SharedState): { url: URL; anySkipped: b
   };
   let anySkipped = false;
   state.active.forEach((data) => {
-    if (data === SAMPLE_DATASET) {
-      config.datasets.push({ title: data.title, color: data.color, params: {} });
-      return;
-    }
     if (data.params) {
       config.datasets.push({
         color: data.color,