Make sure signals never appear offscreen

src/App.svelte

@@ -31,15 +31,15 @@
         // reset active datasets to fluview -> ili
         $activeDatasets = [ds.datasets[1]];
         if (chart) {
-          chart.fitData(true, [ds.datasets[1]]);
+          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,7 +381,11 @@
     return { x: x + dx, y: y + dy - h, w: w, h: h };
   }
 
-  export function fitData(shouldAnimate = false, extras: DataSet[] = []): void {
+  export function fitData(
+    shouldAnimate = false,
+    include: DataSet | DataGroup | null = null,
+    exclude: DataSet | DataGroup | null = null,
+  ): void {
     if (datasets.length === 0) {
       return;
     }
@@ -389,7 +394,14 @@
     let _xMax = temp[temp.length - 1].getDate().getIndex() + 0.5;
     let _yMin = datasets[0].getPointValue(0);
     let _yMax = _yMin;
-    let dss = [...datasets, ...extras];
+    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);

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);