Add custom URL functionality to various download buttons

Author: rzats

src/blocks/HistoryLineChart.svelte

@@ -418,7 +418,7 @@
     <Toggle bind:checked={singleRaw}>Raw Data</Toggle>
   {/if}
   <div class="spacer" />
-  <DownloadMenu {fileName} {vegaRef} {data} {sensor} {raw} {stderr} />
+  <DownloadMenu {fileName} {vegaRef} {data} {date} {region} {sensor} {raw} {stderr} />
 </div>
 
 {#if showAgeStratifications}

src/blocks/RegionCountyMap.svelte

@@ -61,6 +61,8 @@
     <DownloadMenu
       {vegaRef}
       {data}
+      {date}
+      {region}
       {sensor}
       absolutePos
       fileName="{sensor.name}_US Counties_{formatDateISO(date.value)}"

src/blocks/RegionHexMap.svelte

@@ -153,7 +153,14 @@
     <div>Hex fill color: value at selected date</div>
   </div>
   <ColorLegend {sensor} level="state" gradientLength={$isMobileDevice ? 250 : 280}>
-    <DownloadMenu fileName="{sensor.name}_US_States_{formatDateISO(date.value)}" data={dumpData} absolutePos {sensor} />
+    <DownloadMenu
+      fileName="{sensor.name}_US_States_{formatDateISO(date.value)}"
+      data={dumpData}
+      absolutePos
+      {date}
+      {region}
+      {sensor}
+    />
   </ColorLegend>
 </div>
 

src/blocks/RegionMap.svelte

@@ -118,7 +118,7 @@
       on:click={onClickHandler}
       eventListeners={['click']}
     />
-    <DownloadMenu {vegaRef} {data} {sensor} absolutePos {fileName} />
+    <DownloadMenu {vegaRef} {data} {date} {region} {sensor} absolutePos {fileName} />
   </div>
 </FullWidthWrapper>
 

src/components/DownloadMenu.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { downloadUrl, scrollToTop } from '../util';
+  import { downloadUrl } from '../util';
   import { csvFormat } from 'd3-dsv';
   import { formatDateISO } from '../formats';
   import { modeByID } from '../modes';
@@ -13,6 +13,14 @@
 
   export let data = null;
 
+  /**
+   * @type {import("../stores/params").DateParam}
+   */
+  export let date = null;
+  /**
+   * @type {import("../stores/params").RegionParam}
+   */
+  export let region = null;
   /**
    * @type {import("../stores/params").SensorParam}
    */
@@ -112,8 +120,24 @@
   function exportData() {
     // switch to export mode
     currentMode.set(modeByID.export);
-    sensor.set(sensor.value, true);
-    scrollToTop();
+  }
+
+  let exportURL = '';
+  $: {
+    exportURL = '';
+    if (sensor && sensor.key.split('-').length >= 2) {
+      // Given a sensor key formatted "sensor-name-here-signal_name_here", split on the last dash
+      let [last, ...rest] = sensor.key.split('-').reverse();
+      rest = rest.reverse().join('-');
+      exportURL += `data_source=${rest}&signal=${last}`;
+
+      if (region) {
+        exportURL += `&geo_type=${region.level}&geo_value=${region.propertyId}`;
+      }
+      if (date) {
+        exportURL += `&start_day=${formatDateISO(date.value)}&end_day=${formatDateISO(date.value)}`;
+      }
+    }
   }
 </script>
 
@@ -140,7 +164,7 @@
       {#if advanced}
         <li class="uk-nav-divider" />
         <li>
-          <a href="../{modeByID.export.id}" on:click|preventDefault={exportData}>Advanced Data Export</a>
+          <a href={`../${modeByID.export.id}/?${exportURL}`} on:click={exportData}>Advanced Data Export</a>
         </li>
       {/if}
     </ul>

src/modes/indicator/GeoTable.svelte

@@ -182,7 +182,7 @@
 
 <div class="uk-position-relative">
   <FancyHeader anchor="table">{title.title}</FancyHeader>
-  <DownloadMenu {fileName} data={loadedData} absolutePos prepareRow={(row) => row.dump} />
+  <DownloadMenu {fileName} data={loadedData} absolutePos prepareRow={(row) => row.dump} {date} {region} {sensor} />
   <p class="uk-text-center uk-text-italic ux-hint">
     <span class="inline-svg-icon">
       {@html mousePointerIcon}

src/modes/indicator/IndicatorAbout.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { modeByID } from '..';
+  import { currentMode } from '../../stores';
   import { formatDateISO } from '../../formats';
   import AboutSection from '../../components/AboutSection.svelte';
 
@@ -15,6 +17,11 @@
    */
   export let sensor;
 
+  function exportData() {
+    // switch to export mode
+    currentMode.set(modeByID.export);
+  }
+
   let exportURL = '';
   $: {
     exportURL = '';
@@ -52,7 +59,7 @@
             </li>
           {/each}
           <li>
-            <a href={`../export/?${exportURL}`}>Export Data</a>
+            <a href={`../${modeByID.export.id}/?${exportURL}`} on:click={exportData}>Export Data</a>
           </li>
         </ul>
       {/if}