@genspectrum/dashboard-components 0.7.1 → 0.7.2

package/dist/genspectrum-components.d.ts

@@ -1039,10 +1039,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1050,7 +1047,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1058,10 +1055,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1069,7 +1063,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,10 +1071,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1088,7 +1079,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1096,11 +1087,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1108,7 +1095,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1116,10 +1103,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1127,7 +1111,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1135,7 +1119,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1143,7 +1127,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1151,7 +1135,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1159,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1167,7 +1151,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1175,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,7 +1170,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1191,7 +1181,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,7 +1189,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1207,7 +1200,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,7 +1208,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1223,7 +1220,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1231,7 +1228,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1239,7 +1239,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.7.1",
+    "version": "0.7.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -111,7 +111,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.10.1",
+        "eslint-plugin-storybook": "^0.11.0",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/operator/SlidingOperator.ts

@@ -14,6 +14,9 @@ export class SlidingOperator<Data, AggregationResult> implements Operator<Aggreg
     async evaluate(lapis: string, signal?: AbortSignal) {
         const childEvaluated = await this.child.evaluate(lapis, signal);
         const content = new Array<AggregationResult>();
+        if (childEvaluated.content.length === 0) {
+            return { content };
+        }
         const numberOfWindows = Math.max(childEvaluated.content.length - this.windowSize, 0) + 1;
         for (let i = 0; i < numberOfWindows; i++) {
             content.push(this.aggregate(childEvaluated.content.slice(i, i + this.windowSize)));

package/src/preact/components/error-display.tsx

@@ -25,6 +25,7 @@ export class UserFacingError extends Error {
 }
 
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+    // eslint-disable-next-line no-console -- Currently we use the following statement for our error handling
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);

package/src/preact/prevalenceOverTime/__mockData__/numeratorFilterNoData.json

@@ -0,0 +1,11 @@
+{
+    "errors": [],
+    "info": {
+        "apiVersion": 1,
+        "dataVersion": 1709685650,
+        "deprecationDate": null,
+        "deprecationInfo": null,
+        "acknowledgement": null
+    },
+    "data": []
+}

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

@@ -9,6 +9,7 @@ import {
 } from '../../query/queryPrevalenceOverTime';
 import { sortNullToBeginningThenByDate } from '../../utils/sort';
 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 { type ConfidenceIntervalMethod, wilson95PercentConfidenceInterval } from '../shared/charts/confideceInterval';
@@ -30,12 +31,18 @@ const PrevalenceOverTimeBarChart = ({
     confidenceIntervalMethod,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBarChartProps) => {
-    const nullFirstData = data.map((variantData) => {
-        return {
-            content: variantData.content.sort(sortNullToBeginningThenByDate),
-            displayName: variantData.displayName,
-        };
-    });
+    const nullFirstData = data
+        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+        .map((variantData) => {
+            return {
+                content: variantData.content.sort(sortNullToBeginningThenByDate),
+                displayName: variantData.displayName,
+            };
+        });
+
+    if (nullFirstData.length === 0) {
+        return <NoDataDisplay />;
+    }
 
     const datasets = nullFirstData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod));
 

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

@@ -5,6 +5,7 @@ import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime
 import { addUnit, minusTemporal } from '../../utils/temporalClass';
 import { getMinMaxNumber } from '../../utils/utils';
 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 { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
@@ -23,12 +24,18 @@ const PrevalenceOverTimeBubbleChart = ({
     yAxisScaleType,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBubbleChartProps) => {
-    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 firstDate = nonNullDateRangeData[0].content[0].dateRange!;
     const total = nonNullDateRangeData.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();

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%',