@genspectrum/dashboard-components 0.7.0 → 0.7.2

package/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx

@@ -4,6 +4,7 @@ import { type TooltipItem } from 'chart.js/dist/types';
 import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
 import GsChart from '../components/chart';
+import { NoDataDisplay } from '../components/no-data-display';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import {
@@ -29,12 +30,18 @@ const PrevalenceOverTimeLineChart = ({
     confidenceIntervalMethod,
     yAxisMaxConfig,
 }: PrevalenceOverTimeLineChartProps) => {
-    const nonNullDateRangeData = data.map((variantData) => {
-        return {
-            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-            displayName: variantData.displayName,
-        };
-    });
+    const nonNullDateRangeData = data
+        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+        .map((variantData) => {
+            return {
+                content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+                displayName: variantData.displayName,
+            };
+        });
+
+    if (nonNullDateRangeData.length === 0) {
+        return <NoDataDisplay />;
+    }
 
     const datasets = nonNullDateRangeData
         .map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod))

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -1,11 +1,15 @@
+import type { StoryObj } from '@storybook/preact';
+import { expect, waitFor } from '@storybook/test';
+
+import { LapisUrlContext } from '../LapisUrlContext';
 import denominatorFilter from './__mockData__/denominatorFilter.json';
 import denominatorOneDataset from './__mockData__/denominatorFilterOneDataset.json';
 import numeratorFilterEG from './__mockData__/numeratorFilterEG.json';
 import numeratorFilterJN1 from './__mockData__/numeratorFilterJN1.json';
+import numeratorFilterNoData from './__mockData__/numeratorFilterNoData.json';
 import numeratorOneDataset from './__mockData__/numeratorFilterOneDataset.json';
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
 
 export default {
     title: 'Visualization/PrevalenceOverTime',
@@ -58,7 +62,7 @@ const Template = {
     ),
 };
 
-export const TwoVariants = {
+export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
     ...Template,
     args: {
         numeratorFilter: [
@@ -74,10 +78,8 @@ export const TwoVariants = {
         height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
-        yAxisMaxConfig: {
-            linear: 1,
-            logarithmic: 1,
-        },
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
     },
     parameters: {
         fetchMock: {
@@ -134,7 +136,7 @@ export const TwoVariants = {
     },
 };
 
-export const OneVariant = {
+export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
     ...Template,
     args: {
         numeratorFilter: {
@@ -150,10 +152,8 @@ export const OneVariant = {
         height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
-        yAxisMaxConfig: {
-            linear: 1,
-            logarithmic: 1,
-        },
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
     },
     parameters: {
         fetchMock: {
@@ -193,3 +193,66 @@ export const OneVariant = {
         },
     },
 };
+
+export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
+    ...Template,
+    args: {
+        numeratorFilter: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
+        denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
+        granularity: 'day',
+        smoothingWindow: 7,
+        views: ['bar', 'line', 'bubble', 'table'],
+        confidenceIntervalMethods: ['wilson'],
+        width: '100%',
+        height: '700px',
+        lapisDateField: 'date',
+        pageSize: 10,
+        yAxisMaxLinear: 1,
+        yAxisMaxLogarithmic: 1,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'BA.2.86*',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorFilterNoData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominatorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorFilterNoData,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
+            timeout: 10000,
+        });
+    },
+};

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -80,7 +80,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
         return <ErrorDisplay error={error} />;
     }
 
-    if (data === null) {
+    if (data === null || data.every((variant) => variant.content.length === 0)) {
         return <NoDataDisplay />;
     }
 

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -1,3 +1,5 @@
+import { type StoryObj } from '@storybook/preact';
+
 import denominator from './__mockData__/denominatorFilter.json';
 import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
@@ -11,8 +13,8 @@ export default {
         fetchMock: {},
     },
     argTypes: {
-        numerator: { control: 'object' },
-        denominator: { control: 'object' },
+        numeratorFilter: { control: 'object' },
+        denominatorFilter: { control: 'object' },
         generationTime: { control: 'number' },
         views: {
             options: ['line'],
@@ -24,7 +26,7 @@ export default {
     },
 };
 
-export const Primary = {
+export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args: RelativeGrowthAdvantageProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <RelativeGrowthAdvantage
@@ -40,8 +42,13 @@ export const Primary = {
         </LapisUrlContext.Provider>
     ),
     args: {
-        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
-        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        numeratorFilter: {
+            country: 'Switzerland',
+            pangoLineage: 'B.1.1.7',
+            dateFrom: '2020-12-01',
+            dateTo: '2021-03-01',
+        },
+        denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
         width: '100%',

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -11,7 +11,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -23,12 +23,9 @@ import { useQuery } from '../useQuery';
 
 export type View = 'line';
 
-export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
+export interface RelativeGrowthAdvantageProps {
     width: string;
     height: string;
-}
-
-export interface RelativeGrowthAdvantagePropsInner {
     numeratorFilter: LapisFilter;
     denominatorFilter: LapisFilter;
     generationTime: number;
@@ -37,36 +34,28 @@ export interface RelativeGrowthAdvantagePropsInner {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
-    width,
-    height,
-    ...innerProps
-}) => {
+export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <RelativeGrowthAdvantageInner {...innerProps} />
+                <RelativeGrowthAdvantageInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numeratorFilter,
-    denominatorFilter,
-    generationTime,
-    views,
-    lapisDateField,
-    yAxisMaxConfig,
-}) => {
+export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
+
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, lapisDateField],
     );
 
     if (isLoading) {
@@ -86,9 +75,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             data={data}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
-            views={views}
-            generationTime={generationTime}
-            yAxisMaxConfig={yAxisMaxConfig}
+            originalComponentProps={componentProps}
         />
     );
 };
@@ -97,18 +84,14 @@ type RelativeGrowthAdvantageTabsProps = {
     data: NonNullable<RelativeGrowthAdvantageData>;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    views: View[];
-    generationTime: number;
-    yAxisMaxConfig: YAxisMaxConfig;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
     data,
     yAxisScaleType,
     setYAxisScaleType,
-    views,
-    generationTime,
-    yAxisMaxConfig,
+    originalComponentProps,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -123,17 +106,17 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
-                            yAxisMaxConfig={yAxisMaxConfig}
+                            yAxisMaxConfig={originalComponentProps.yAxisMaxConfig}
                         />
                     ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
     const toolbar = () => (
         <RelativeGrowthAdvantageToolbar
-            generationTime={generationTime}
+            originalComponentProps={originalComponentProps}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
         />
@@ -145,24 +128,29 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 type RelativeGrowthAdvantageToolbarProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    generationTime: number;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
-    generationTime,
+    originalComponentProps,
 }) => {
     return (
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
-            <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <RelativeGrowthAdvantageInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
+const RelativeGrowthAdvantageInfo: FunctionComponent<{ originalComponentProps: RelativeGrowthAdvantageProps }> = ({
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+    const generationTime = originalComponentProps.generationTime;
+
     return (
         <Info>
             <InfoHeadline1>Relative growth advantage</InfoHeadline1>
@@ -193,6 +181,11 @@ const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }>
                     10.1016/j.epidem.2021.100480
                 </InfoLink>
             </InfoParagraph>
+            <InfoComponentCode
+                componentName='relative-growth-advantage'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
         </Info>
     );
 };