Upgrade EpiVis dashboard

src/App.svelte

@@ -6,17 +6,40 @@
   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!
+    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" />
 <Chart
   bind:this={chart}
   style="grid-area: main"

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,46 @@
     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.
+  // As the store can take a while to update, the arguments here include extra datasets
+  // to be included (in case a new one was just selected) or excluded (de-selected)
+  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/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

@@ -3,14 +3,22 @@
   import { activeDatasets } 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) {
+        chart.fitData(true, null, node);
+      }
     } else {
       $activeDatasets = [node, ...$activeDatasets];
+      if (chart) {
+        chart.fitData(true, node);
+      }
     }
   }
   $: selected = $activeDatasets.includes(node);

src/tour.ts

@@ -16,6 +16,15 @@ export const tour = new Shepherd.Tour({
 const next = tour.next.bind(tour);
 const cancel = tour.cancel.bind(tour);
 
+// Dismiss tour on future runs once it is cancelled or completed.
+function dismissTour() {
+  if (!localStorage.getItem('shepherd-tour')) {
+    localStorage.setItem('shepherd-tour', 'yes');
+  }
+}
+tour.on('cancel', dismissTour);
+tour.on('complete', dismissTour);
+
 const nextCancel = [
   {
     text: 'Next',