From 430a6b39b6835d615e2776f943b54a6c0227a14e Mon Sep 17 00:00:00 2001
From: Rostyslav Zatserkovnyi <zatserkovnyi.rostyslav@gmail.com>
Date: Thu, 22 Aug 2024 20:35:33 +0300
Subject: [PATCH] Improve top panel elements & autofit mode (#54)

* Tour changes
---
 src/components/Chart.svelte                   |   7 +-
 src/components/TopMenu.svelte                 | 127 ++++++++----------
 src/components/chartUtils.ts                  |   7 +-
 src/components/dialogs/ImportAPIDialog.svelte |   4 +
 src/components/tree/TreeLeafNode.svelte       |   7 +-
 src/deriveLinkDefaults.ts                     |   2 -
 src/store.ts                                  |   3 +-
 src/tour.ts                                   | 124 +++++++++--------
 8 files changed, 139 insertions(+), 142 deletions(-)

diff --git a/src/components/Chart.svelte b/src/components/Chart.svelte
index bf42e96..52ed214 100644
--- 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
index c294cc6..878a698 100644
--- 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';
@@ -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"
diff --git a/src/components/chartUtils.ts b/src/components/chartUtils.ts
index 99b22f3..7fc936e 100644
--- 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 {
diff --git a/src/components/dialogs/ImportAPIDialog.svelte b/src/components/dialogs/ImportAPIDialog.svelte
index 55b7613..21b380b 100644
--- a/src/components/dialogs/ImportAPIDialog.svelte
+++ b/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');
       }
diff --git a/src/components/tree/TreeLeafNode.svelte b/src/components/tree/TreeLeafNode.svelte
index b05e633..43e6466 100644
--- a/src/components/tree/TreeLeafNode.svelte
+++ b/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);
     }
   }
diff --git a/src/deriveLinkDefaults.ts b/src/deriveLinkDefaults.ts
index 38f35a8..2743042 100644
--- a/src/deriveLinkDefaults.ts
+++ b/src/deriveLinkDefaults.ts
@@ -35,7 +35,6 @@ export interface SharedState {
   active: DataSet[];
   viewport: null | [number, number, number, number];
   showPoints: boolean;
-  autoFit: boolean;
 }
 
 const DEFAULT_VALUES: SharedState = {
@@ -43,7 +42,6 @@ const DEFAULT_VALUES: SharedState = {
   active: [],
   viewport: DEFAULT_VIEWPORT,
   showPoints: false,
-  autoFit: true,
 };
 
 const lookups = {
diff --git a/src/store.ts b/src/store.ts
index 22adbea..7bcc73b 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -15,8 +15,7 @@ export const expandedDataGroups = writable([defaults.group]);
 
 export const isShowingPoints = writable(defaults.showPoints);
 export const initialViewport = writable(defaults.viewport);
-export const navMode = writable(NavMode.pan);
-export const autoFit = writable(defaults.autoFit);
+export const navMode = writable(NavMode.autofit);
 
 export function addDataSet(dataset: DataSet | DataGroup): void {
   const root = get(datasetTree);
diff --git a/src/tour.ts b/src/tour.ts
index 86ee130..dd3c708 100644
--- a/src/tour.ts
+++ b/src/tour.ts
@@ -48,21 +48,6 @@ tour.addStep({
   buttons: nextCancel,
 });
 
-tour.addStep({
-  attachTo: {
-    element: '[data-tour=browser]',
-    on: 'right',
-  },
-  title: 'Data Browser',
-  text: `<p>
-    The left panel shows the loaded datasets. It has several options to load new datasets, which are going to be explained as part of this tour.
-  </p>
-  <p>
-    The datasets are organized in a hierarchial structure. Each dataset can be individually shown in the chart by clicking on it.
-  </p>`,
-  buttons: nextCancel,
-});
-
 tour.addStep({
   attachTo: {
     element: '[data-tour=chart]',
@@ -79,51 +64,51 @@ tour.addStep({
 
 tour.addStep({
   attachTo: {
-    element: '[data-tour=top]',
-    on: 'auto',
+    element: '[data-tour=chart]',
+    on: 'bottom-end',
   },
-  title: 'Chart Menu',
-  text: `The menu on top of the chart features several different options, such as changing colors or exporting the chart as an image.`,
+  title: 'Mouse Panning',
+  text: `Pressing the mouse and dragging it will pan the view. Using the mouse wheel will zoom the view.`,
   buttons: nextCancel,
 });
 
 tour.addStep({
   attachTo: {
-    element: '[data-tour=csv]',
-    on: 'auto',
+    element: '[data-tour=chart]',
+    on: 'bottom-end',
   },
-  title: 'Load CSV File',
-  text: `EpiVis supports loading CSV files to explore custom datasets.`,
+  title: 'Mouse Cropping',
+  text: `Dragging the mouse while the <code>Shift</code> key is pressed will temporarily switch to the Crop navigation mode, which will span a rectangle of interest.`,
   buttons: nextCancel,
 });
 
 tour.addStep({
   attachTo: {
-    element: '[data-tour=api]',
-    on: 'auto',
+    element: '[data-tour=chart]',
+    on: 'bottom-end',
   },
-  title: 'Load Data from EpiData API',
-  text: `A more common option is to load existing time series from numerous data sources provided by the EpiData API.`,
+  title: 'Mouse Zooming',
+  text: `Dragging the mouse while the <code>Ctrl/Control</code> key is pressed will temporarily switch to the zoom mode. Moving the mouse up will zoom in and down will zoom out in the value domain. Similarly, moving the mouse left or right will zoom in or out on the date domain.`,
   buttons: nextCancel,
 });
 
 tour.addStep({
   attachTo: {
-    element: '[data-tour=manually]',
+    element: '[data-tour=top]',
     on: 'auto',
   },
-  title: 'Draw a custom line (Advanced)',
-  text: `Another more advanced option is to define a custom line that should be drawn in the chart.`,
+  title: 'Chart Menu',
+  text: `The menu on top of the chart features several different options, such as changing colors or exporting the chart as an image.`,
   buttons: nextCancel,
 });
 
 tour.addStep({
   attachTo: {
-    element: '[data-tour=kernel]',
+    element: '[data-tour=navmode]',
     on: 'auto',
   },
-  title: 'Derive via a kernel function (Advanced)',
-  text: `And another option is to derive one dataset by applying a kernel function to combine other datasets. For example, create a new dataset representing the average of two other datasets.`,
+  title: 'Toggle between Navigation Modes',
+  text: `EpiVis supports four navigation modes: Autofit (the default) ensures that all enabled datasets are fully displayed within the chart, while Pan, Crop, and Zoom can be used to manipulate the view.`,
   buttons: nextCancel,
 });
 
@@ -136,31 +121,24 @@ tour.addStep({
   text: `This action will recolor all visible datasets. Keyboard Shortcut: r`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=fit]',
-    on: 'auto',
-  },
-  title: 'Fit Data to Screen',
-  text: `This action will changes the chart view such that all selected datasets are fully shown. Keyboard Shortcut: f`,
-  buttons: nextCancel,
-});
-tour.addStep({
-  attachTo: {
-    element: '[data-tour=autofit]',
+    element: '[data-tour=points]',
     on: 'auto',
   },
-  title: 'Automatically Fit Data',
-  text: `This action changes whether the chart should be re-scaled every time a dataset is added or removed, to ensure all datasets are fully shown. Keyboard Shortcut: a`,
+  title: 'Toggle Point Rendering',
+  text: `This action will change whether points should be rendered representing individual data points of the time series. Keyboard Shortcut: s`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=points]',
+    element: '[data-tour=scale]',
     on: 'auto',
   },
-  title: 'Toggle Point Rendering',
-  text: `This action will change whether points should be rendered representing individual data points of the time series. Keyboard Shortcut: s`,
+  title: 'Dataset Scaling',
+  text: `The "Scale by 1/mean" action will bring all currently enabled signals within a more similar range, while "Reset Dataset Scaling" will reset them to their actual magnitudes.`,
   buttons: nextCancel,
 });
 
@@ -173,6 +151,7 @@ tour.addStep({
   text: `This action will download the current view in PNG format.`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
     element: '[data-tour=link]',
@@ -182,40 +161,59 @@ tour.addStep({
   text: `This action will show a shareable link that can be used to reproduce the current view (if possible).`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=navmode]',
+    element: '[data-tour=browser]',
+    on: 'right',
+  },
+  title: 'Data Browser',
+  text: `<p>
+    The left panel shows the loaded datasets. It has several options to load new datasets, which are going to be explained as part of this tour.
+  </p>
+  <p>
+    The datasets are organized in a hierarchial structure. Each dataset can be individually shown in the chart by clicking on it.
+  </p>`,
+  buttons: nextCancel,
+});
+
+tour.addStep({
+  attachTo: {
+    element: '[data-tour=csv]',
     on: 'auto',
   },
-  title: 'Toggle between Navigation Modes',
-  text: `EpiVis supports three navigation modes: Pan, Crop, and Zoom to manipulate the view.`,
+  title: 'Load CSV File',
+  text: `EpiVis supports loading CSV files to explore custom datasets.`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=chart]',
-    on: 'bottom-end',
+    element: '[data-tour=api]',
+    on: 'auto',
   },
-  title: 'Mouse Panning',
-  text: `Pressing the mouse and dragging it will pan the view. Using the mouse wheel will zoom the view.`,
+  title: 'Load Data from EpiData API',
+  text: `A more common option is to load existing time series from numerous data sources provided by the EpiData API.`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=chart]',
-    on: 'bottom-end',
+    element: '[data-tour=manually]',
+    on: 'auto',
   },
-  title: 'Mouse Cropping',
-  text: `Dragging the mouse while the <code>Shift</code> key is pressed will temporarily switch to the Crop navigation mode, which will span a rectangle of interest.`,
+  title: 'Draw a custom line (Advanced)',
+  text: `Another more advanced option is to define a custom line that should be drawn in the chart.`,
   buttons: nextCancel,
 });
+
 tour.addStep({
   attachTo: {
-    element: '[data-tour=chart]',
-    on: 'bottom-end',
+    element: '[data-tour=kernel]',
+    on: 'auto',
   },
-  title: 'Mouse Zooming',
-  text: `Dragging the mouse while the <code>Ctrl/Control</code> key is pressed will temporarily switch to the zoom mode. Moving the mouse up will zoom in and down will zoom out in the value domain. Similarly, moving the mouse left or right will zoom in or out on the date domain.`,
+  title: 'Derive via a kernel function (Advanced)',
+  text: `And another option is to derive one dataset by applying a kernel function to combine other datasets. For example, create a new dataset representing the average of two other datasets.`,
   buttons: nextCancel,
 });