Merge remote-tracking branch 'origin/dev' into rzatserkovnyi/persistent-forms

rzats · rzats · commit 9c78def90a77 · 2024-12-18T15:57:48.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "www-epivis",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "private": true,
   "license": "MIT",
   "description": "",
diff --git a/src/components/dialogs/ImportAPIDialog.svelte b/src/components/dialogs/ImportAPIDialog.svelte
@@ -19,7 +19,7 @@
   import NowCast from './dataSources/Nowcast.svelte';
   import CovidHosp from './dataSources/COVIDHosp.svelte';
   import CoviDcast from './dataSources/COVIDcast.svelte';
-  import { navMode } from '../../store';
+  import { navMode, storeApiKeys } from '../../store';
   import { NavMode } from '../chartUtils';
   import { formSelections } from '../../store';
 
@@ -224,10 +224,26 @@
     {/if}
   </form>
 
-  <button slot="footer" class="uk-button uk-button-primary" type="submit" form={id} disabled={loading}>
-    Fetch Data
-    {#if loading}
-      <div uk-spinner />
-    {/if}
-  </button>
+  <div slot="footer">
+    <div class="uk-form-controls uk-form-controls-text container">
+      <button class="uk-button uk-button-primary" type="submit" form={id} disabled={loading}>
+        Fetch Data
+        {#if loading}
+          <div uk-spinner />
+        {/if}
+      </button>
+      <label
+        ><input class="uk-checkbox" type="checkbox" bind:checked={$storeApiKeys} />
+        Save API key (auth token) between visits</label
+      >
+    </div>
+  </div>
 </Dialog>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    column-gap: 2em;
+  }
+</style>
diff --git a/src/components/dialogs/dataSources/CDC.svelte b/src/components/dialogs/dataSources/CDC.svelte
@@ -3,16 +3,20 @@
   import { cdcLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth = '';
-
   export function importDataSet() {
-    return importCDC({ locations: $formSelections.cdc.locations, auth });
+    return importCDC({ locations: $formSelections.cdc.locations, auth: $apiKey });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKey}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={$formSelections.cdc.locations} options={regions} />
diff --git a/src/components/dialogs/dataSources/COVIDcast.svelte b/src/components/dialogs/dataSources/COVIDcast.svelte
@@ -4,16 +4,13 @@
   import type { LabelValue } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
-
-  let api_key = '';
   let data_source = $formSelections.covidcast.dataSource;
   let signal = $formSelections.covidcast.signal;
   let geo_type = $formSelections.covidcast.geoType;
   let geo_value = $formSelections.covidcast.geoValue;
-  let form_key = '';
   let valid_key = true;
 
   let dataSources: (LabelValue & { signals: string[] })[] = [];
@@ -38,12 +35,11 @@
   };
 
   function fetchMetadata() {
-    fetchCOVIDcastMeta(form_key).then((res) => {
+    fetchCOVIDcastMeta($apiKey).then((res) => {
       if (res.length == 0) {
         valid_key = false;
       } else {
         valid_key = true;
-        api_key = form_key; // API key is valid -> use it to fetch data later on
         geoTypes = [...new Set(res.map((d) => d.geo_type))];
         const byDataSource = new Map<string, LabelValue & { signals: string[] }>();
         for (const row of res) {
@@ -71,10 +67,10 @@
   });
 
   export function importDataSet() {
-    return fetchCOVIDcastMeta(api_key).then((res) => {
+    return fetchCOVIDcastMeta($apiKey).then((res) => {
       const meta = res.filter((row) => row.data_source === data_source && row.signal === signal);
       const time_type = meta[0].time_type;
-      return importCOVIDcast({ data_source, signal, geo_type, geo_value, time_type, api_key });
+      return importCOVIDcast({ data_source, signal, geo_type, geo_value, time_type, api_key: $apiKey });
     });
   }
 </script>
@@ -91,7 +87,7 @@
       class:uk-form-danger={!valid_key}
       name="api_key"
       required={false}
-      bind:value={form_key}
+      bind:value={$apiKey}
       on:input={debounce(() => fetchMetadata(), 500)}
     />
     {#if !valid_key}
diff --git a/src/components/dialogs/dataSources/FluView.svelte b/src/components/dialogs/dataSources/FluView.svelte
@@ -4,14 +4,16 @@
   import SelectField from '../inputs/SelectField.svelte';
   import SelectIssue from '../inputs/SelectIssue.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth: string = '';
-
   export function importDataSet() {
-    return importFluView({ regions: $formSelections.fluView.locations, ...$formSelections.fluView.issue, auth });
+    return importFluView({
+      regions: $formSelections.fluView.locations,
+      ...$formSelections.fluView.issue,
+      auth: $apiKey,
+    });
   }
 </script>
 
@@ -21,7 +23,7 @@
   id="{id}-auth"
   name="auth"
   label="Auth Key"
-  bind:value={auth}
+  bind:value={$apiKey}
   required={false}
   placeholder="authorization token"
 />
diff --git a/src/components/dialogs/dataSources/GHT.svelte b/src/components/dialogs/dataSources/GHT.svelte
@@ -3,17 +3,21 @@
   import { ghtLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth = '';
-
   export function importDataSet() {
-    return importGHT({ auth, locations: $formSelections.ght.locations, query: $formSelections.ght.query });
+    return importGHT({ auth: $apiKey, locations: $formSelections.ght.locations, query: $formSelections.ght.query });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKey}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={$formSelections.ght.locations} options={regions} />
 <TextField id="{id}-query" name="query" label="Search Query or Topic" bind:value={$formSelections.ght.query} />
diff --git a/src/components/dialogs/dataSources/Quidel.svelte b/src/components/dialogs/dataSources/Quidel.svelte
@@ -3,16 +3,20 @@
   import { quidelLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth = '';
-
   export function importDataSet() {
-    return importQuidel({ auth, locations: $formSelections.quidel.locations });
+    return importQuidel({ auth: $apiKey, locations: $formSelections.quidel.locations });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKey}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={$formSelections.quidel.locations} options={regions} />
diff --git a/src/components/dialogs/dataSources/Sensors.svelte b/src/components/dialogs/dataSources/Sensors.svelte
@@ -3,17 +3,25 @@
   import { sensorLocations as regions, sensorNames } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth = '';
-
   export function importDataSet() {
-    return importSensors({ auth, names: $formSelections.sensors.names, locations: $formSelections.sensors.locations });
+    return importSensors({
+      auth: $apiKey,
+      names: $formSelections.sensors.names,
+      locations: $formSelections.sensors.locations,
+    });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKey}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-s" label="Name" bind:value={$formSelections.sensors.names} options={sensorNames} name="sensor" />
 <SelectField id="{id}-r" label="Location" bind:value={$formSelections.sensors.locations} options={regions} />
diff --git a/src/components/dialogs/dataSources/Twitter.svelte b/src/components/dialogs/dataSources/Twitter.svelte
@@ -3,22 +3,26 @@
   import { twitterLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { formSelections } from '../../../store';
+  import { apiKey, formSelections } from '../../../store';
 
   export let id: string;
 
-  let auth = '';
-
   export function importDataSet() {
     return importTwitter({
-      auth,
+      auth: $apiKey,
       locations: $formSelections.twitter.locations,
       resolution: $formSelections.twitter.resolution,
     });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKey}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={$formSelections.twitter.locations} options={regions} />
 <div>
   <div class="uk-form-label">Temporal Resolution</div>
diff --git a/src/store.ts b/src/store.ts
@@ -35,6 +35,28 @@ formSelections.subscribe((val) => {
   sessionStorage.setItem('form', JSON.stringify(val));
 });
 
+export const storeApiKeys = writable(localStorage.getItem('store-api-key') === 'true');
+storeApiKeys.subscribe((val) => {
+  localStorage.setItem('store-api-key', val.toString());
+  if (val) {
+    // persist key from session to local storage
+    localStorage.setItem('api-key', sessionStorage.getItem('api-key') || '');
+  } else {
+    // remove key from local storage
+    localStorage.removeItem('api-key');
+  }
+});
+
+export const apiKey = writable(localStorage.getItem('api-key')! || '');
+apiKey.subscribe((val) => {
+  // always keep key around in session storage (resets on page refresh)
+  sessionStorage.setItem('api-key', val);
+  if (localStorage.getItem('store-api-key') === 'true') {
+    // store it in local storage (persistent)
+    localStorage.setItem('api-key', val);
+  }
+});
+
 export function addDataSet(dataset: DataSet | DataGroup): void {
   const root = get(datasetTree);
   root.datasets.push(dataset);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "www-epivis",`
`3`		`- "version": "2.1.4",`
	`3`	`+ "version": "2.1.5",`
`4`	`4`	`"private": true,`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"description": "",`