Merge pull request #120 from cmu-delphi/release/v2.1.11

Release v2.1.11

Author: melange396

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "www-epivis",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "private": true,
   "license": "MIT",
   "description": "",

package.json

@@ -437,6 +437,35 @@ export function importFluView({
   });
 }
 
+export function importFluViewClinical({
+  regions,
+  issues,
+  lag,
+}: {
+  regions: string;
+  issues?: number | null;
+  lag?: number | null;
+}): Promise<DataGroup | null> {
+  const regionLabel = fluViewRegions.find((d) => d.value === regions)?.label ?? '?';
+  const title = appendIssueToTitle(`[API] FluView Clinical: ${regionLabel}`, { issues, lag });
+  return loadDataSet(
+    title,
+    'fluview_clinical',
+    {
+      epiweeks: epiRange(firstEpiWeek.fluview, currentEpiWeek),
+    },
+    { regions, issues, lag },
+    ['total_specimens', 'total_a', 'total_b', 'percent_positive', 'percent_a', 'percent_b'],
+  ).then((ds) => {
+    // get inside the Promise and make sure its not null,
+    // then enable display of 'percent_positive' data
+    if (ds instanceof DataGroup) {
+      ds.defaultEnabled = ['percent_positive'];
+    }
+    return ds;
+  });
+}
+
 export function importGFT({ locations }: { locations: string }): Promise<DataGroup | null> {
   const regionLabel = gftLocations.find((d) => d.value === locations)?.label ?? '?';
   const title = `[API] GFT: ${regionLabel}`;

src/api/EpiData.ts

@@ -751,7 +751,7 @@
     let labelOffset = 0;
     for (const ds of datasets) {
       ctx.fillStyle = ds.color;
-      const label = `— ${ds.title}`;
+      const label = `— ${ds.displayTitle()}`;
       drawText(ctx, label, width - 10, height - 10 - labelOffset, 0, Align.right, Align.bottom);
       labelOffset += 12;
     }

src/components/Chart.svelte

@@ -13,7 +13,7 @@
 <side class="left" {style} data-tour="browser">
   <ImportDataSetsMenu />
   <div class="tree">
-    {#each $datasetTree.datasets as child (child.title)}
+    {#each $datasetTree.datasets as child (child.displayTitle())}
       {#if child instanceof DataSet}
         <TreeLeafNode {chart} node={child} />
       {:else}

src/components/LeftMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import FluSurv from './dataSources/FluSurv.svelte';
   import FluView from './dataSources/FluView.svelte';
+  import FluViewClinical from './dataSources/FluViewClinical.svelte';
 
   import { createEventDispatcher } from 'svelte';
 
@@ -81,6 +82,17 @@
             >cmu-delphi.github.io</a
           >)</label
         >
+        <label
+          ><input
+            class="uk-radio"
+            type="radio"
+            name="dataSource"
+            bind:group={$formSelections.dataSource}
+            value="fluview_clinical"
+          />
+          FluView Clinical (source:
+          <a target="_blank" href="https://gis.cdc.gov/grasp/fluview/fluportaldashboard.html">cdc.gov</a>)
+        </label>
         <label
           ><input
             class="uk-radio"
@@ -200,6 +212,8 @@
 
     {#if $formSelections.dataSource === 'fluview'}
       <FluView {id} bind:this={handler} />
+    {:else if $formSelections.dataSource === 'fluview_clinical'}
+      <FluViewClinical {id} bind:this={handler} />
     {:else if $formSelections.dataSource === 'flusurv'}
       <FluSurv {id} bind:this={handler} />
     {:else if $formSelections.dataSource === 'gft'}

src/components/dialogs/ImportAPIDialog.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { importFluViewClinical } from '../../../api/EpiData';
+  import { fluViewRegions } from '../../../data/data';
+  import SelectField from '../inputs/SelectField.svelte';
+  import SelectIssue from '../inputs/SelectIssue.svelte';
+  import { formSelections } from '../../../store';
+
+  export let id: string;
+
+  export function importDataSet() {
+    return importFluViewClinical({
+      regions: $formSelections.fluViewClinical.locations,
+      ...$formSelections.fluViewClinical.issue,
+    });
+  }
+</script>
+
+<SelectField
+  id="{id}-r"
+  label="Region"
+  bind:value={$formSelections.fluViewClinical.locations}
+  options={fluViewRegions}
+/>
+<SelectIssue {id} bind:value={$formSelections.fluViewClinical.issue} />

src/components/dialogs/dataSources/FluViewClinical.svelte

@@ -44,6 +44,11 @@ export class FluViewSelections {
   issue = DEFAULT_ISSUE;
 }
 
+export class FluViewClinicalSelections {
+  locations = fluViewRegions[0].value;
+  issue = DEFAULT_ISSUE;
+}
+
 export class GftSelections {
   locations = gftLocations[0].value;
 }
@@ -93,6 +98,7 @@ export class WikiSelections {
 export default class FormSelections {
   dataSource:
     | 'fluview'
+    | 'fluview_clinical'
     | 'flusurv'
     | 'gft'
     | 'ght'
@@ -111,6 +117,7 @@ export default class FormSelections {
   covidHosp = new CovidHospSelections();
   fluSurv = new FluSurvSelections();
   fluView = new FluViewSelections();
+  fluViewClinical = new FluViewClinicalSelections();
   gft = new GftSelections();
   ght = new GhtSelections();
   nidssDengue = new NidssDengueSelections();

src/components/dialogs/formSelections.ts

@@ -24,11 +24,11 @@
   <span on:click={toggleExpanded}>
     <Fa icon={expanded ? faChevronDown : faChevronRight} style="width: 0.9em; margin-right: 0.5em" />
     <span>
-      {node.title}
+      {node.displayTitle()}
     </span>
   </span>
   {#if expanded}
-    {#each node.datasets as child (child.title)}
+    {#each node.datasets as child (child.displayTitle())}
       {#if child instanceof DataSet}
         <TreeLeafNode {chart} node={child} />
       {:else}

src/components/tree/TreeInnerNode.svelte

@@ -35,7 +35,7 @@
 >
   <Fa icon={selected ? faEye : faEyeSlash} {color} style="width: 1em; margin-right: 0.5em" />
   <span>
-    {node.title}
+    {node.displayTitle()}
   </span>
 </div>