Merge pull request #67 from cmu-delphi/rzatserkovnyi/persistent-forms

Add persistence to API import forms

src/components/dialogs/ImportAPIDialog.svelte

@@ -21,27 +21,12 @@
   import CoviDcast from './dataSources/COVIDcast.svelte';
   import { navMode, storeApiKeys } from '../../store';
   import { NavMode } from '../chartUtils';
+  import { formSelections } from '../../store';
 
   const dispatch = createEventDispatcher();
 
   const id = randomId();
 
-  let dataSource:
-    | 'fluview'
-    | 'flusurv'
-    | 'gft'
-    | 'ght'
-    | 'twitter'
-    | 'wiki'
-    | 'cdc'
-    | 'quidel'
-    | 'nidss_flu'
-    | 'nidss_dengue'
-    | 'sensors'
-    | 'nowcast'
-    | 'covidcast'
-    | 'covid_hosp' = 'fluview';
-
   let loading = false;
   let handler: unknown = null;
 
@@ -71,68 +56,134 @@
       <div class="uk-form-label">Data Source</div>
       <div class="uk-form-controls uk-form-controls-text">
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="fluview" />
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="fluview"
+          />
           ILINet (aka FluView) (source:
           <a target="_blank" href="https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html">cdc.gov</a>)
         </label>
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="flusurv" /> FluSurv
-          (source: <a target="_blank" href="https://gis.cdc.gov/GRASP/Fluview/FluHospRates.html">cdc.gov</a>)</label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="flusurv"
+          />
+          FluSurv (source:
+          <a target="_blank" href="https://gis.cdc.gov/GRASP/Fluview/FluHospRates.html">cdc.gov</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="gft" /> Google Flu
-          Trends (source: <a target="_blank" href="https://www.google.org/flutrends/">google.com</a>)</label
+          ><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="gft" />
+          Google Flu Trends (source: <a target="_blank" href="https://www.google.org/flutrends/">google.com</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="ght" /> Google Health Trends
-          (source: private Google API)</label
+          ><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="ght" />
+          Google Health Trends (source: private Google API)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="twitter" />
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="twitter"
+          />
           HealthTweets (source: <a target="_blank" href="http://www.healthtweets.org/">healthtweets.org</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="wiki" /> Wikipedia
-          Access (source:
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="wiki"
+          />
+          Wikipedia Access (source:
           <a target="_blank" href="https://dumps.wikimedia.org/other/pagecounts-raw/">dumps.wikimedia.org</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="cdc" /> CDC Page Hits (source:
-          private CDC dataset)</label
+          ><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="cdc" />
+          CDC Page Hits (source: private CDC dataset)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="quidel" /> Quidel Data (source:
-          private Quidel dataset)</label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="quidel"
+          /> Quidel Data (source: private Quidel dataset)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nidss_flu" /> NIDSS -
-          Influenza (source:
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="nidss_flu"
+          />
+          NIDSS - Influenza (source:
           <a target="_blank" href="http://nidss.cdc.gov.tw/en/CDCWNH01.aspx?dc=wnh">nidss.cdc.gov.tw</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nidss_dengue" /> NIDSS
-          - Dengue (source:
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="nidss_dengue"
+          />
+          NIDSS - Dengue (source:
           <a
             target="_blank"
             href="http://nidss.cdc.gov.tw/en/SingleDisease.aspx?dc=1&amp;dt=4&amp;disease=061&amp;position=1"
             >nidss.cdc.gov.tw</a
           >)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="sensors" /> Delphi
-          Sensors (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="sensors"
+          />
+          Delphi Sensors (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nowcast" /> Delphi
-          Nowcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="nowcast"
+          />
+          Delphi Nowcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="covidcast" /> Delphi
-          COVIDcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="covidcast"
+          />
+          Delphi COVIDcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
         >
         <label
-          ><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="covid_hosp" /> COVID
-          Hospitalization (source:
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="covid_hosp"
+          />
+          COVID Hospitalization (source:
           <a
             target="_blank"
             href="https://healthdata.gov/dataset/covid-19-reported-patient-impact-and-hospital-capacity-state-timeseries"
@@ -142,33 +193,33 @@
       </div>
     </div>
 
-    {#if dataSource === 'fluview'}
+    {#if $formSelections.dataSource === 'fluview'}
       <FluView {id} bind:this={handler} />
-    {:else if dataSource === 'flusurv'}
+    {:else if $formSelections.dataSource === 'flusurv'}
       <FluSurv {id} bind:this={handler} />
-    {:else if dataSource === 'gft'}
+    {:else if $formSelections.dataSource === 'gft'}
       <Gft {id} bind:this={handler} />
-    {:else if dataSource === 'ght'}
+    {:else if $formSelections.dataSource === 'ght'}
       <GHT {id} bind:this={handler} />
-    {:else if dataSource === 'twitter'}
+    {:else if $formSelections.dataSource === 'twitter'}
       <Twitter {id} bind:this={handler} />
-    {:else if dataSource === 'wiki'}
+    {:else if $formSelections.dataSource === 'wiki'}
       <Wiki {id} bind:this={handler} />
-    {:else if dataSource === 'quidel'}
+    {:else if $formSelections.dataSource === 'quidel'}
       <Quidel {id} bind:this={handler} />
-    {:else if dataSource === 'nidss_dengue'}
+    {:else if $formSelections.dataSource === 'nidss_dengue'}
       <NidssDengue {id} bind:this={handler} />
-    {:else if dataSource === 'nidss_flu'}
+    {:else if $formSelections.dataSource === 'nidss_flu'}
       <NidssFlu {id} bind:this={handler} />
-    {:else if dataSource === 'cdc'}
+    {:else if $formSelections.dataSource === 'cdc'}
       <Cdc {id} bind:this={handler} />
-    {:else if dataSource === 'sensors'}
+    {:else if $formSelections.dataSource === 'sensors'}
       <Sensors {id} bind:this={handler} />
-    {:else if dataSource === 'nowcast'}
+    {:else if $formSelections.dataSource === 'nowcast'}
       <NowCast {id} bind:this={handler} />
-    {:else if dataSource === 'covid_hosp'}
+    {:else if $formSelections.dataSource === 'covid_hosp'}
       <CovidHosp {id} bind:this={handler} />
-    {:else if dataSource === 'covidcast'}
+    {:else if $formSelections.dataSource === 'covidcast'}
       <CoviDcast {id} bind:this={handler} />
     {/if}
   </form>

src/components/dialogs/dataSources/CDC.svelte

@@ -3,14 +3,12 @@
   import { cdcLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { apiKey } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let locations = regions[0].value;
-
   export function importDataSet() {
-    return importCDC({ locations, auth: $apiKey });
+    return importCDC({ locations: $formSelections.cdc.locations, auth: $apiKey });
   }
 </script>
 
@@ -21,4 +19,4 @@
   bind:value={$apiKey}
   placeholder="authorization token"
 />
-<SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
+<SelectField id="{id}-r" label="Location" bind:value={$formSelections.cdc.locations} options={regions} />

src/components/dialogs/dataSources/COVIDHosp.svelte

@@ -3,17 +3,14 @@
   import { covidHospLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import SelectIssue from '../inputs/SelectIssue.svelte';
-  import { DEFAULT_ISSUE } from '../utils';
+  import { formSelections } from '../../../store';
 
   export let id: string;
 
-  let states = regions[0].value;
-  let issue = DEFAULT_ISSUE;
-
   export function importDataSet() {
-    return importCOVIDHosp({ states, ...issue });
+    return importCOVIDHosp({ states: $formSelections.covidHosp.states, ...$formSelections.covidHosp.issue });
   }
 </script>
 
-<SelectField id="{id}-r" label="State" bind:value={states} options={regions} />
-<SelectIssue {id} bind:value={issue} hasLag={false} hasIssueDay />
+<SelectField id="{id}-r" label="State" bind:value={$formSelections.covidHosp.states} options={regions} />
+<SelectIssue {id} bind:value={$formSelections.covidHosp.issue} hasLag={false} hasIssueDay />

src/components/dialogs/dataSources/COVIDcast.svelte

@@ -4,14 +4,13 @@
   import type { LabelValue } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { apiKey } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
-
-  let data_source = '';
-  let signal = '';
-  let geo_type = '';
-  let geo_value = '';
+  let data_source = $formSelections.covidcast.dataSource;
+  let signal = $formSelections.covidcast.signal;
+  let geo_type = $formSelections.covidcast.geoType;
+  let geo_value = $formSelections.covidcast.geoValue;
   let valid_key = true;
 
   let dataSources: (LabelValue & { signals: string[] })[] = [];
@@ -20,8 +19,9 @@
   $: dataSignals = (dataSources.find((d) => d.value === data_source) || { signals: [] }).signals;
 
   $: {
-    if (data_source) {
-      signal = '';
+    if ($formSelections.covidcast.dataSource) {
+      dataSignals = (dataSources.find((d) => d.value === $formSelections.covidcast.dataSource) || { signals: [] })
+        .signals;
     }
   }
 
@@ -95,13 +95,31 @@
     {/if}
   </div>
 </div>
-<SelectField id="{id}-r" label="Data Source" name="data_source" bind:value={data_source} options={dataSources} />
-<SelectField id="{id}-r" label="Data Signal" name="signal" bind:value={signal} options={dataSignals} />
-<SelectField id="{id}-gt" label="Geographic Type" bind:value={geo_type} name="geo_type" options={geoTypes} />
+<SelectField
+  id="{id}-r"
+  label="Data Source"
+  name="data_source"
+  bind:value={$formSelections.covidcast.dataSource}
+  options={dataSources}
+/>
+<SelectField
+  id="{id}-r"
+  label="Data Signal"
+  name="signal"
+  bind:value={$formSelections.covidcast.signal}
+  options={dataSignals}
+/>
+<SelectField
+  id="{id}-gt"
+  label="Geographic Type"
+  bind:value={$formSelections.covidcast.geoType}
+  name="geo_type"
+  options={geoTypes}
+/>
 <TextField
   id="{id}-gv"
   label="Geographic Value"
-  bind:value={geo_value}
+  bind:value={$formSelections.covidcast.geoValue}
   name="geo_values"
   placeholder="e.g., PA or 42003"
 />

src/components/dialogs/dataSources/FluSurv.svelte

@@ -4,17 +4,14 @@
   import { fluSurvRegions as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import SelectIssue from '../inputs/SelectIssue.svelte';
-  import { DEFAULT_ISSUE } from '../utils';
+  import { formSelections } from '../../../store';
 
   export let id: string;
 
-  let locations = regions[0].value;
-  let issue = DEFAULT_ISSUE;
-
   export function importDataSet() {
-    return importFluSurv({ locations, ...issue });
+    return importFluSurv({ locations: $formSelections.fluSurv.locations, ...$formSelections.fluSurv.issue });
   }
 </script>
 
-<SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
-<SelectIssue {id} bind:value={issue} />
+<SelectField id="{id}-r" label="Location" bind:value={$formSelections.fluSurv.locations} options={regions} />
+<SelectIssue {id} bind:value={$formSelections.fluSurv.issue} />