Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add persistence to API import forms #67

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

Add persistence to API import forms #67

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fd4aacc
Add persistence to API import forms
rzats Sep 17, 2024
a4ab17f
Merge branch 'dev' into rzatserkovnyi/persistent-forms
rzats Sep 24, 2024
2383b5d
storage: local -> session
rzats Oct 1, 2024
cfb6395
Merge branch 'rzatserkovnyi/persistent-forms' of https://github.com/c…
rzats Oct 1, 2024
0b5ef2c
Merge branch 'dev' into rzatserkovnyi/persistent-forms
rzats Oct 1, 2024
f9af742
session storage
rzats Oct 1, 2024
91dc867
Review fixes
rzats Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/api/EpiData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
fluViewRegions,
gftLocations,
ghtLocations,
nidssDenqueLocations,
nidssDengueLocations,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The NIDSS Dengue signal is referred to as "denque" in a few parts of the codebase. Because of this, it is currently broken on https://delphi.cmu.edu/epivis/. This PR also renames all mentions of "denque" to the correct "dengue".

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch, but it is preferable to have this set of changes in its own PR... Could we break them out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! #68

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Can you merge #68 and then rebase this PR?

nidssFluLocations,
nowcastLocations,
quidelLocations,
Expand Down Expand Up @@ -378,9 +378,9 @@ export function importGHT({
);
}

export function importNIDSSDenque({ locations }: { locations: string }): Promise<DataGroup | null> {
const regionLabel = nidssDenqueLocations.find((d) => d.value === locations)?.label ?? '?';
const title = `[API] NIDSS-Denque: ${regionLabel}`;
export function importNIDSSDengue({ locations }: { locations: string }): Promise<DataGroup | null> {
const regionLabel = nidssDengueLocations.find((d) => d.value === locations)?.label ?? '?';
const title = `[API] NIDSS-Dengue: ${regionLabel}`;
return loadDataSet(
title,
'nidss_dengue',
Expand Down
163 changes: 107 additions & 56 deletions src/components/dialogs/ImportAPIDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,12 @@
import CoviDcast from './dataSources/COVIDcast.svelte';
import { navMode } 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_denque'
| 'sensors'
| 'nowcast'
| 'covidcast'
| 'covid_hosp' = 'fluview';

let loading = false;
let handler: unknown = null;

Expand Down Expand Up @@ -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"
/>
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"
Expand All @@ -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_denque'}
{: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>
Expand Down
5 changes: 3 additions & 2 deletions src/components/dialogs/dataSources/CDC.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
import { cdcLocations as regions } from '../../../data/data';
import SelectField from '../inputs/SelectField.svelte';
import TextField from '../inputs/TextField.svelte';
import { formSelections } from '../../../store';

export let id: string;

let locations = regions[0].value;
let locations = $formSelections.cdc.locations;
let auth = '';

export function importDataSet() {
Expand All @@ -15,4 +16,4 @@
</script>

<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} 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} />
10 changes: 5 additions & 5 deletions src/components/dialogs/dataSources/COVIDHosp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
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;
let states = $formSelections.covidHosp.states;
let issue = $formSelections.covidHosp.issue;

export function importDataSet() {
return importCOVIDHosp({ states, ...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 />
40 changes: 30 additions & 10 deletions src/components/dialogs/dataSources/COVIDcast.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,24 @@
import type { LabelValue } from '../../../data/data';
import SelectField from '../inputs/SelectField.svelte';
import TextField from '../inputs/TextField.svelte';
import { 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 dataSources: (LabelValue & { signals: string[] })[] = [];
let geoTypes: string[] = [];

$: 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;
}
}

Expand Down Expand Up @@ -55,13 +57,31 @@
}
</script>

<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"
/>
10 changes: 5 additions & 5 deletions src/components/dialogs/dataSources/FluSurv.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
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;
let locations = $formSelections.fluSurv.locations;
let issue = $formSelections.fluSurv.issue;

export function importDataSet() {
return importFluSurv({ locations, ...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} />
Loading