Improve top panel elements & autofit mode (#54)

* Tour changes
cmu-delphi · Aug 22, 2024 · 430a6b3 · 430a6b3
1 parent 8baf276
commit 430a6b3
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 142 deletions.
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';
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,15 +35,13 @@ export interface SharedState {
   active: DataSet[];
   viewport: null | [number, number, number, number];
   showPoints: boolean;
-  autoFit: boolean;
 }
 
 const DEFAULT_VALUES: SharedState = {
   group: DEFAULT_GROUP,
   active: [],
   viewport: DEFAULT_VIEWPORT,
   showPoints: false,
-  autoFit: true,
 };
 
 const lookups = {

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