Skip to content

Commit f9a3a19

Browse files
rzatsrzats
authored
Merge pull request #67 from cmu-delphi/rzatserkovnyi/persistent-forms
Add persistence to API import forms
2 parents 6b6fe3b + 9c78def commit f9a3a19

17 files changed

+391
-155
lines changed

‎src/components/dialogs/ImportAPIDialog.svelte‎

Lines changed: 107 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,12 @@
2121
import CoviDcast from './dataSources/COVIDcast.svelte';
2222
import { navMode, storeApiKeys } from '../../store';
2323
import { NavMode } from '../chartUtils';
24+
import { formSelections } from '../../store';
2425
2526
const dispatch = createEventDispatcher();
2627
2728
const id = randomId();
2829
29-
let dataSource:
30-
| 'fluview'
31-
| 'flusurv'
32-
| 'gft'
33-
| 'ght'
34-
| 'twitter'
35-
| 'wiki'
36-
| 'cdc'
37-
| 'quidel'
38-
| 'nidss_flu'
39-
| 'nidss_dengue'
40-
| 'sensors'
41-
| 'nowcast'
42-
| 'covidcast'
43-
| 'covid_hosp' = 'fluview';
44-
4530
let loading = false;
4631
let handler: unknown = null;
4732
@@ -71,68 +56,134 @@
7156
<div class="uk-form-label">Data Source</div>
7257
<div class="uk-form-controls uk-form-controls-text">
7358
<label
74-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="fluview" />
59+
><input
60+
class="uk-radio"
61+
type="radio"
62+
name="dataSource"
63+
bind:group={$formSelections.dataSource}
64+
value="fluview"
65+
/>
7566
ILINet (aka FluView) (source:
7667
<a target="_blank" href="https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html">cdc.gov</a>)
7768
</label>
7869
<label
79-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="flusurv" /> FluSurv
80-
(source: <a target="_blank" href="https://gis.cdc.gov/GRASP/Fluview/FluHospRates.html">cdc.gov</a>)</label
70+
><input
71+
class="uk-radio"
72+
type="radio"
73+
name="dataSource"
74+
bind:group={$formSelections.dataSource}
75+
value="flusurv"
76+
/>
77+
FluSurv (source:
78+
<a target="_blank" href="https://gis.cdc.gov/GRASP/Fluview/FluHospRates.html">cdc.gov</a>)</label
8179
>
8280
<label
83-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="gft" /> Google Flu
84-
Trends (source: <a target="_blank" href="https://www.google.org/flutrends/">google.com</a>)</label
81+
><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="gft" />
82+
Google Flu Trends (source: <a target="_blank" href="https://www.google.org/flutrends/">google.com</a>)</label
8583
>
8684
<label
87-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="ght" /> Google Health Trends
88-
(source: private Google API)</label
85+
><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="ght" />
86+
Google Health Trends (source: private Google API)</label
8987
>
9088
<label
91-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="twitter" />
89+
><input
90+
class="uk-radio"
91+
type="radio"
92+
name="dataSource"
93+
bind:group={$formSelections.dataSource}
94+
value="twitter"
95+
/>
9296
HealthTweets (source: <a target="_blank" href="http://www.healthtweets.org/">healthtweets.org</a>)</label
9397
>
9498
<label
95-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="wiki" /> Wikipedia
96-
Access (source:
99+
><input
100+
class="uk-radio"
101+
type="radio"
102+
name="dataSource"
103+
bind:group={$formSelections.dataSource}
104+
value="wiki"
105+
/>
106+
Wikipedia Access (source:
97107
<a target="_blank" href="https://dumps.wikimedia.org/other/pagecounts-raw/">dumps.wikimedia.org</a>)</label
98108
>
99109
<label
100-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="cdc" /> CDC Page Hits (source:
101-
private CDC dataset)</label
110+
><input class="uk-radio" type="radio" name="dataSource" bind:group={$formSelections.dataSource} value="cdc" />
111+
CDC Page Hits (source: private CDC dataset)</label
102112
>
103113
<label
104-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="quidel" /> Quidel Data (source:
105-
private Quidel dataset)</label
114+
><input
115+
class="uk-radio"
116+
type="radio"
117+
name="dataSource"
118+
bind:group={$formSelections.dataSource}
119+
value="quidel"
120+
/> Quidel Data (source: private Quidel dataset)</label
106121
>
107122
<label
108-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nidss_flu" /> NIDSS -
109-
Influenza (source:
123+
><input
124+
class="uk-radio"
125+
type="radio"
126+
name="dataSource"
127+
bind:group={$formSelections.dataSource}
128+
value="nidss_flu"
129+
/>
130+
NIDSS - Influenza (source:
110131
<a target="_blank" href="http://nidss.cdc.gov.tw/en/CDCWNH01.aspx?dc=wnh">nidss.cdc.gov.tw</a>)</label
111132
>
112133
<label
113-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nidss_dengue" /> NIDSS
114-
- Dengue (source:
134+
><input
135+
class="uk-radio"
136+
type="radio"
137+
name="dataSource"
138+
bind:group={$formSelections.dataSource}
139+
value="nidss_dengue"
140+
/>
141+
NIDSS - Dengue (source:
115142
<a
116143
target="_blank"
117144
href="http://nidss.cdc.gov.tw/en/SingleDisease.aspx?dc=1&amp;dt=4&amp;disease=061&amp;position=1"
118145
>nidss.cdc.gov.tw</a
119146
>)</label
120147
>
121148
<label
122-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="sensors" /> Delphi
123-
Sensors (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
149+
><input
150+
class="uk-radio"
151+
type="radio"
152+
name="dataSource"
153+
bind:group={$formSelections.dataSource}
154+
value="sensors"
155+
/>
156+
Delphi Sensors (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
124157
>
125158
<label
126-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="nowcast" /> Delphi
127-
Nowcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
159+
><input
160+
class="uk-radio"
161+
type="radio"
162+
name="dataSource"
163+
bind:group={$formSelections.dataSource}
164+
value="nowcast"
165+
/>
166+
Delphi Nowcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
128167
>
129168
<label
130-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="covidcast" /> Delphi
131-
COVIDcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
169+
><input
170+
class="uk-radio"
171+
type="radio"
172+
name="dataSource"
173+
bind:group={$formSelections.dataSource}
174+
value="covidcast"
175+
/>
176+
Delphi COVIDcast (source: <a target="_blank" href="https://delphi.cmu.edu/">delphi.cmu.edu</a>)</label
132177
>
133178
<label
134-
><input class="uk-radio" type="radio" name="dataSource" bind:group={dataSource} value="covid_hosp" /> COVID
135-
Hospitalization (source:
179+
><input
180+
class="uk-radio"
181+
type="radio"
182+
name="dataSource"
183+
bind:group={$formSelections.dataSource}
184+
value="covid_hosp"
185+
/>
186+
COVID Hospitalization (source:
136187
<a
137188
target="_blank"
138189
href="https://healthdata.gov/dataset/covid-19-reported-patient-impact-and-hospital-capacity-state-timeseries"
@@ -142,33 +193,33 @@
142193
</div>
143194
</div>
144195

145-
{#if dataSource === 'fluview'}
196+
{#if $formSelections.dataSource === 'fluview'}
146197
<FluView {id} bind:this={handler} />
147-
{:else if dataSource === 'flusurv'}
198+
{:else if $formSelections.dataSource === 'flusurv'}
148199
<FluSurv {id} bind:this={handler} />
149-
{:else if dataSource === 'gft'}
200+
{:else if $formSelections.dataSource === 'gft'}
150201
<Gft {id} bind:this={handler} />
151-
{:else if dataSource === 'ght'}
202+
{:else if $formSelections.dataSource === 'ght'}
152203
<GHT {id} bind:this={handler} />
153-
{:else if dataSource === 'twitter'}
204+
{:else if $formSelections.dataSource === 'twitter'}
154205
<Twitter {id} bind:this={handler} />
155-
{:else if dataSource === 'wiki'}
206+
{:else if $formSelections.dataSource === 'wiki'}
156207
<Wiki {id} bind:this={handler} />
157-
{:else if dataSource === 'quidel'}
208+
{:else if $formSelections.dataSource === 'quidel'}
158209
<Quidel {id} bind:this={handler} />
159-
{:else if dataSource === 'nidss_dengue'}
210+
{:else if $formSelections.dataSource === 'nidss_dengue'}
160211
<NidssDengue {id} bind:this={handler} />
161-
{:else if dataSource === 'nidss_flu'}
212+
{:else if $formSelections.dataSource === 'nidss_flu'}
162213
<NidssFlu {id} bind:this={handler} />
163-
{:else if dataSource === 'cdc'}
214+
{:else if $formSelections.dataSource === 'cdc'}
164215
<Cdc {id} bind:this={handler} />
165-
{:else if dataSource === 'sensors'}
216+
{:else if $formSelections.dataSource === 'sensors'}
166217
<Sensors {id} bind:this={handler} />
167-
{:else if dataSource === 'nowcast'}
218+
{:else if $formSelections.dataSource === 'nowcast'}
168219
<NowCast {id} bind:this={handler} />
169-
{:else if dataSource === 'covid_hosp'}
220+
{:else if $formSelections.dataSource === 'covid_hosp'}
170221
<CovidHosp {id} bind:this={handler} />
171-
{:else if dataSource === 'covidcast'}
222+
{:else if $formSelections.dataSource === 'covidcast'}
172223
<CoviDcast {id} bind:this={handler} />
173224
{/if}
174225
</form>

‎src/components/dialogs/dataSources/CDC.svelte‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@
33
import { cdcLocations as regions } from '../../../data/data';
44
import SelectField from '../inputs/SelectField.svelte';
55
import TextField from '../inputs/TextField.svelte';
6-
import { apiKey } from '../../../store';
6+
import { apiKey, formSelections } from '../../../store';
77
88
export let id: string;
99
10-
let locations = regions[0].value;
11-
1210
export function importDataSet() {
13-
return importCDC({ locations, auth: $apiKey });
11+
return importCDC({ locations: $formSelections.cdc.locations, auth: $apiKey });
1412
}
1513
</script>
1614

@@ -21,4 +19,4 @@
2119
bind:value={$apiKey}
2220
placeholder="authorization token"
2321
/>
24-
<SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
22+
<SelectField id="{id}-r" label="Location" bind:value={$formSelections.cdc.locations} options={regions} />

‎src/components/dialogs/dataSources/COVIDHosp.svelte‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,14 @@
33
import { covidHospLocations as regions } from '../../../data/data';
44
import SelectField from '../inputs/SelectField.svelte';
55
import SelectIssue from '../inputs/SelectIssue.svelte';
6-
import { DEFAULT_ISSUE } from '../utils';
6+
import { formSelections } from '../../../store';
77
88
export let id: string;
99
10-
let states = regions[0].value;
11-
let issue = DEFAULT_ISSUE;
12-
1310
export function importDataSet() {
14-
return importCOVIDHosp({ states, ...issue });
11+
return importCOVIDHosp({ states: $formSelections.covidHosp.states, ...$formSelections.covidHosp.issue });
1512
}
1613
</script>
1714

18-
<SelectField id="{id}-r" label="State" bind:value={states} options={regions} />
19-
<SelectIssue {id} bind:value={issue} hasLag={false} hasIssueDay />
15+
<SelectField id="{id}-r" label="State" bind:value={$formSelections.covidHosp.states} options={regions} />
16+
<SelectIssue {id} bind:value={$formSelections.covidHosp.issue} hasLag={false} hasIssueDay />

‎src/components/dialogs/dataSources/COVIDcast.svelte‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@
44
import type { LabelValue } from '../../../data/data';
55
import SelectField from '../inputs/SelectField.svelte';
66
import TextField from '../inputs/TextField.svelte';
7-
import { apiKey } from '../../../store';
7+
import { apiKey, formSelections } from '../../../store';
88
99
export let id: string;
10-
11-
let data_source = '';
12-
let signal = '';
13-
let geo_type = '';
14-
let geo_value = '';
10+
let data_source = $formSelections.covidcast.dataSource;
11+
let signal = $formSelections.covidcast.signal;
12+
let geo_type = $formSelections.covidcast.geoType;
13+
let geo_value = $formSelections.covidcast.geoValue;
1514
let valid_key = true;
1615
1716
let dataSources: (LabelValue & { signals: string[] })[] = [];
@@ -20,8 +19,9 @@
2019
$: dataSignals = (dataSources.find((d) => d.value === data_source) || { signals: [] }).signals;
2120
2221
$: {
23-
if (data_source) {
24-
signal = '';
22+
if ($formSelections.covidcast.dataSource) {
23+
dataSignals = (dataSources.find((d) => d.value === $formSelections.covidcast.dataSource) || { signals: [] })
24+
.signals;
2525
}
2626
}
2727
@@ -95,13 +95,31 @@
9595
{/if}
9696
</div>
9797
</div>
98-
<SelectField id="{id}-r" label="Data Source" name="data_source" bind:value={data_source} options={dataSources} />
99-
<SelectField id="{id}-r" label="Data Signal" name="signal" bind:value={signal} options={dataSignals} />
100-
<SelectField id="{id}-gt" label="Geographic Type" bind:value={geo_type} name="geo_type" options={geoTypes} />
98+
<SelectField
99+
id="{id}-r"
100+
label="Data Source"
101+
name="data_source"
102+
bind:value={$formSelections.covidcast.dataSource}
103+
options={dataSources}
104+
/>
105+
<SelectField
106+
id="{id}-r"
107+
label="Data Signal"
108+
name="signal"
109+
bind:value={$formSelections.covidcast.signal}
110+
options={dataSignals}
111+
/>
112+
<SelectField
113+
id="{id}-gt"
114+
label="Geographic Type"
115+
bind:value={$formSelections.covidcast.geoType}
116+
name="geo_type"
117+
options={geoTypes}
118+
/>
101119
<TextField
102120
id="{id}-gv"
103121
label="Geographic Value"
104-
bind:value={geo_value}
122+
bind:value={$formSelections.covidcast.geoValue}
105123
name="geo_values"
106124
placeholder="e.g., PA or 42003"
107125
/>

‎src/components/dialogs/dataSources/FluSurv.svelte‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,14 @@
44
import { fluSurvRegions as regions } from '../../../data/data';
55
import SelectField from '../inputs/SelectField.svelte';
66
import SelectIssue from '../inputs/SelectIssue.svelte';
7-
import { DEFAULT_ISSUE } from '../utils';
7+
import { formSelections } from '../../../store';
88
99
export let id: string;
1010
11-
let locations = regions[0].value;
12-
let issue = DEFAULT_ISSUE;
13-
1411
export function importDataSet() {
15-
return importFluSurv({ locations, ...issue });
12+
return importFluSurv({ locations: $formSelections.fluSurv.locations, ...$formSelections.fluSurv.issue });
1613
}
1714
</script>
1815

19-
<SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
20-
<SelectIssue {id} bind:value={issue} />
16+
<SelectField id="{id}-r" label="Location" bind:value={$formSelections.fluSurv.locations} options={regions} />
17+
<SelectIssue {id} bind:value={$formSelections.fluSurv.issue} />

0 commit comments

Comments
 (0)