Switch date from a bound variable to a store

Workaround for the behavior in the second REPL here:

sveltejs/svelte#4265 (comment)

causing two gridded data fetches to happen per change instead of one.
(And fast enough that the Fetcher object doesn't seem to be able to
abort them? Might be a separate issue.)

Also a good time to learn how to use stores, I guess. I think having the
bound variables is clearer in this case so we may want to revert this
once the Svelte bug is fixed, but stores are still pretty neat.

Author: zqianem

src/App.svelte

@@ -14,6 +14,7 @@
   import Controls from './Controls.svelte';
   import colormaps from './map/colormaps/';
   import projections from './map/projections/';
+  import date from './date.js'
 
   import { onMount } from 'svelte';
 
@@ -23,10 +24,9 @@
 
   let openedMenu = null;
   let fetcher = new Fetcher(inventory);
-  let date = new Date('2020-08-08T18:00:00.000Z');
-  $: date, (async () => {
-    let uPath = `/data/gfs-0p25-u-wind-velocity-10m/${date.toISOString()}.fp16`;
-    let vPath = `/data/gfs-0p25-v-wind-velocity-10m/${date.toISOString()}.fp16`;
+  $: $date, (async () => {
+    let uPath = `/data/gfs-0p25-u-wind-velocity-10m/${$date.toISOString()}.fp16`;
+    let vPath = `/data/gfs-0p25-v-wind-velocity-10m/${$date.toISOString()}.fp16`;
 
     let uArray = fetcher.fetch(uPath, 'particle');
     let vArray = await fetcher.fetch(vPath, 'particle', false);
@@ -96,7 +96,6 @@
       on:resize={updateWebglSize}>
   <GriddedDatasets
     {fetcher}
-    bind:date
     bind:griddedData
     bind:griddedDomain
     bind:griddedColormap
@@ -139,7 +138,6 @@
     />
     <Loading {fetcher} />
     <Legend
-      {date}
       {griddedData}
       {griddedColormap}
       {griddedDomain}

src/Legend.svelte

@@ -3,12 +3,12 @@
   import { axisBottom } from 'd3-axis';
   import { scaleLinear } from 'd3-scale';
   import { onMount } from 'svelte';
+  import date from './date.js'
 
   export let griddedData = { description: 'Loading...' };
   export let griddedColormap;
   export let griddedDomain = [0, 0];
   export let particleDisplay;
-  export let date;
 
   // see options parameter here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
   let dateStringOptions = {
@@ -42,7 +42,7 @@
 
 <div class="legend-wrapper">
   <span class="datetime">
-    {date.toLocaleDateString(undefined, dateStringOptions)}
+    {$date.toLocaleDateString(undefined, dateStringOptions)}
   </span>
   <span class="streamlines">
     Streamlines for wind at 10m above ground level, moving

src/menus/GriddedDatasets.svelte

@@ -1,11 +1,11 @@
 <script>
   import colormaps from '../map/colormaps/';
+  import date from '../date.js'
 
   export let griddedData;
   export let griddedDomain;
   export let griddedColormap;
   export let fetcher;
-  export let date;
 
   let datasets = [
     {
@@ -42,15 +42,15 @@
     },
   ];
   let dataset = datasets[3];
-  $: date, dataset, updateData();
+  $: $date, dataset, updateData();
 
   let canForward, canBack, interval;
-  $: canForward = date < fetcher.inventory[dataset.path].end;
-  $: canBack = date > fetcher.inventory[dataset.path].start;
+  $: canForward = $date < fetcher.inventory[dataset.path].end;
+  $: canBack = $date > fetcher.inventory[dataset.path].start;
   $: interval = fetcher.inventory[dataset.path].intervalInHours;
 
   async function updateData() {
-    let path = dataset.path + date.toISOString() + '.fp16';
+    let path = dataset.path + $date.toISOString() + '.fp16';
     let array = await fetcher.fetch(path, 'gridded');
     if (!array) return;
 
@@ -64,6 +64,13 @@
     griddedDomain = dataset.domain;
     griddedColormap = dataset.colormap;
   }
+
+  function adjustDate(hours) {
+    date.update(d => {
+      d.setHours(d.getHours() + hours);
+      return d;
+    });
+  }
 </script>
 
 <p>Choose a dataset:</p>
@@ -81,13 +88,13 @@
 <p>Step through time:</p>
 <button
   disabled={!canBack}
-  on:click={() => { date.setHours(date.getHours() - interval); date = date }}
+  on:click={() => adjustDate(-interval)}
 >
   Back {interval} hours
 </button>
 <button
   disabled={!canForward}
-  on:click={() => { date.setHours(date.getHours() + interval); date = date }}
+  on:click={() => adjustDate(interval)}
 >
   Forward {interval} hours
 </button>