feat(components): gs-prevalence-over-time: don't show confidence inte…

…rval by default, explicitly require 'none' as `confidenceIntervalMethods` to show it (#542) BREAKING CHANGE: pass `['wilson', 'none']` instead of `['wilson']` to `confidenceIntervalMethods` of `gs-prevalence-over-time` to achieve the same behavior as before resolves #537
GenSpectrum · Nov 25, 2024 · b68dfb3 · b68dfb3
1 parent 08d0be3
commit b68dfb3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/components/src/preact/components/confidence-interval-selector.tsx b/components/src/preact/components/confidence-interval-selector.tsx
@@ -20,7 +20,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
 
     const items = [
         { label: 'Confidence interval method', value: 'none', disabled: true },
-        ...confidenceIntervalMethods.concat('none').map((method) => {
+        ...confidenceIntervalMethods.map((method) => {
             switch (method) {
                 case 'wilson':
                     return { label: 'Wilson, 95% CI', value: 'wilson' };

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx
@@ -30,7 +30,7 @@ export default {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },
@@ -73,7 +73,7 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -147,7 +147,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -205,7 +205,7 @@ export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx
@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from 'preact/hooks';
 
 import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
 import PrevalenceOverTimeBarChart from './prevalence-over-time-bar-chart';
@@ -97,6 +97,16 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
         confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
     );
+
+    useEffect(() => {
+        setConfidenceIntervalMethod((confidenceIntervalMethod) => {
+            if (!confidenceIntervalMethods.includes(confidenceIntervalMethod)) {
+                return confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none';
+            }
+            return confidenceIntervalMethod;
+        });
+    }, [confidenceIntervalMethods]);
+
     const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
 
     const getTab = (view: View) => {

diff --git a/components/src/web-components/visualization/gs-prevalence-over-time.stories.ts b/components/src/web-components/visualization/gs-prevalence-over-time.stories.ts
@@ -46,7 +46,7 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },

diff --git a/components/src/web-components/visualization/gs-prevalence-over-time.tsx b/components/src/web-components/visualization/gs-prevalence-over-time.tsx
@@ -103,11 +103,11 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
 
     /**
      * A list of methods to calculate the confidence interval.
-     * The option `none` is always available and disables confidence intervals.
      * Pass an empty array to disable the confidence interval selector.
+     * The first entry will be selected by default.
      */
     @property({ type: Array })
-    confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
+    confidenceIntervalMethods: ('wilson' | 'none')[] = ['none', 'wilson'];
 
     /**
      * The width of the component.