Release v2.1.11

package.json

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

src/api/EpiData.ts

@@ -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/components/Chart.svelte

@@ -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/LeftMenu.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/dialogs/ImportAPIDialog.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/dataSources/FluViewClinical.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/formSelections.ts

@@ -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/tree/TreeInnerNode.svelte

@@ -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/TreeLeafNode.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>
 

src/data/DataSet.ts

@@ -34,6 +34,11 @@ export default class DataSet {
     this.gap = computeGap(data);
   }
 
+  displayTitle(): string {
+    // for display to user; use custom title if available, otherwise default to title
+    return this.customTitle || this.title;
+  }
+
   randomize(): void {
     this.color = getRandomColor();
   }
@@ -108,6 +113,11 @@ export class DataGroup {
 
   constructor(public readonly title: string, public readonly datasets: (DataSet | DataGroup)[]) {}
 
+  displayTitle(): string {
+    // for interface compatibility with `DataSet.displayTitle()`
+    return this.title;
+  }
+
   flat(arr: DataSet[]): void {
     for (const child of this.datasets) {
       if (child instanceof DataSet) {

src/deriveLinkDefaults.ts

@@ -4,6 +4,7 @@ import {
   importCOVIDcast,
   importFluSurv,
   importFluView,
+  importFluViewClinical,
   importGFT,
   importGHT,
   importNIDSSDengue,
@@ -54,6 +55,7 @@ const lookups = {
   covidcast: importCOVIDcast,
   flusurv: importFluSurv,
   fluview: importFluView,
+  fluview_clinical: importFluViewClinical,
   gft: importGFT,
   ght: importGHT,
   nidss_dengue: importNIDSSDengue,
@@ -73,6 +75,7 @@ const argOrders: Record<string, string[]> = {
   covid_hosp: ['states', 'issues'],
   flusurv: ['locations', 'issues', 'lag'],
   fluview: ['regions', 'issues', 'lag', 'auth'],
+  fluview_clinical: ['regions', 'issues', 'lag'],
   gft: ['locations'],
   ght: ['auth', 'locations', 'query'],
   nidss_dengue: ['locations'],
@@ -181,12 +184,7 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
 
     return Promise.all(resolvedDataSets).then((data) => {
       const cleaned = data.filter((d): d is DataSet => d != null);
-      cleaned.forEach((d) => {
-        if (d.customTitle) {
-          d.title = d.customTitle;
-        }
-        add(d);
-      });
+      cleaned.forEach((d) => add(d));
       return cleaned;
     });
   };
@@ -228,11 +226,15 @@ export function getDirectLinkImpl(state: SharedState): { url: URL; anySkipped: b
   let anySkipped = false;
   state.active.forEach((data) => {
     if (data.params) {
-      config.datasets.push({
+      const ds = {
         color: data.color,
         title: data.title,
         params: data.params as unknown as Record<string, unknown>,
-      });
+      };
+      if (data.customTitle) {
+        ds.params.custom_title = data.customTitle;
+      }
+      config.datasets.push(ds);
     } else {
       console.log('unable to get direct link to dataset:', data.title);
       anySkipped = true;