@genspectrum/dashboard-components 0.10.4 → 0.11.0

package/src/types.ts

@@ -9,7 +9,17 @@ import {
     type SubstitutionClass,
 } from './utils/mutations';
 
-export const lapisFilterSchema = z.record(z.union([z.string(), z.number(), z.null(), z.boolean()]));
+export const mutationsFilterSchema = z.object({
+    nucleotideMutations: z.array(z.string()),
+    aminoAcidMutations: z.array(z.string()),
+    nucleotideInsertions: z.array(z.string()),
+    aminoAcidInsertions: z.array(z.string()),
+});
+export type MutationsFilter = z.infer<typeof mutationsFilterSchema>;
+
+export const lapisFilterSchema = z
+    .record(z.union([z.string(), z.array(z.string()), z.number(), z.null(), z.boolean(), z.undefined()]))
+    .and(mutationsFilterSchema.partial());
 export type LapisFilter = z.infer<typeof lapisFilterSchema>;
 
 export const namedLapisFilterSchema = z.object({
@@ -66,6 +76,3 @@ export const views = {
     bubble: 'bubble',
     map: 'map',
 } as const;
-
-export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
-export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema>;

package/src/utilEntrypoint.ts

@@ -10,12 +10,24 @@ export {
     type LapisFilter,
     type SequenceType,
     views,
-    type MutationComparisonView,
     type TemporalGranularity,
+    type MutationsFilter,
 } from './types';
 
-export { type SelectedMutationFilterStrings } from './preact/mutationFilter/mutation-filter';
+export type { MutationComparisonView, MutationComparisonProps } from './preact/mutationComparison/mutation-comparison';
+export type { MutationsView, MutationsProps } from './preact/mutations/mutations';
+export type { AggregateView, AggregateProps } from './preact/aggregatedData/aggregate';
+export type {
+    NumberSequencesOverTimeView,
+    NumberSequencesOverTimeProps,
+} from './preact/numberSequencesOverTime/number-sequences-over-time';
+export type { PrevalenceOverTimeView, PrevalenceOverTimeProps } from './preact/prevalenceOverTime/prevalence-over-time';
+export type {
+    RelativeGrowthAdvantageView,
+    RelativeGrowthAdvantageProps,
+} from './preact/relativeGrowthAdvantage/relative-growth-advantage';
+export type { StatisticsProps } from './preact/statistic/statistics';
 
-export { type ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
+export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
 
-export { type AxisMax, type YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';
+export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';

package/src/utils/utils.ts

@@ -1,5 +1,3 @@
-import { type LapisFilter } from '../types';
-
 export function getMinMaxNumber(values: Iterable<number>): [number, number] | null {
     let min = null;
     let max = null;
@@ -16,30 +14,3 @@ export function getMinMaxNumber(values: Iterable<number>): [number, number] | nu
     }
     return [min, max];
 }
-
-export function mapLapisFilterToUrlParams(filter: LapisFilter): URLSearchParams {
-    const params = Object.entries(filter).map(([key, value]) => [key, stringifyLapisFilterValue(value)]);
-
-    return new URLSearchParams(params);
-}
-
-function stringifyLapisFilterValue(value: LapisFilter[string]) {
-    if (value === null) {
-        return 'null';
-    }
-    switch (typeof value) {
-        case 'boolean':
-            return value ? 'true' : 'false';
-        case 'number':
-            return value.toString();
-        case 'string':
-            return value;
-    }
-}
-
-export function makeArray<T>(arrayOrSingleItem: T | T[]) {
-    if (Array.isArray(arrayOrSingleItem)) {
-        return arrayOrSingleItem;
-    }
-    return [arrayOrSingleItem];
-}

package/src/web-components/app.ts

@@ -2,7 +2,7 @@ import { provide } from '@lit/context';
 import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import z from 'zod';
 
 import { lapisContext } from './lapis-context';

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -20,7 +20,7 @@ const codeExample = String.raw`
     initialDateFrom="2020-01-01"
     initialDateTo="2021-01-01"
     width="100%"
-    dateColumn="myDateColumn"
+    lapisDateField="myDateColumn"
 ></gs-date-range-selector>`;
 
 const customDateRange = { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' };
@@ -46,7 +46,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
             },
             options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
-        dateColumn: { control: { type: 'text' } },
+        lapisDateField: { control: { type: 'text' } },
         dateRangeOptions: {
             control: {
                 type: 'object',
@@ -72,7 +72,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
         ],
         earliestDate: '1970-01-01',
         initialValue: dateRangeOptionPresets.lastMonth.label,
-        dateColumn: 'aDateColumn',
+        lapisDateField: 'aDateColumn',
         width: '100%',
         initialDateFrom: undefined,
         initialDateTo: undefined,
@@ -93,7 +93,7 @@ export const Default: StoryObj<Required<DateRangeSelectorProps>> = {
                     .initialDateFrom=${args.initialDateFrom}
                     .initialDateTo=${args.initialDateTo}
                     .width=${args.width}
-                    .dateColumn=${args.dateColumn}
+                    .lapisDateField=${args.lapisDateField}
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,

package/src/web-components/input/gs-date-range-selector.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';
@@ -103,10 +103,10 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     width: string = '100%';
 
     /**
-     * The name of the column in LAPIS that contains the date information.
+     * The name of the metadata field in LAPIS that contains the date information.
      */
     @property({ type: String })
-    dateColumn: string = '';
+    lapisDateField: string = '';
 
     override render() {
         return (
@@ -116,7 +116,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
                 initialValue={this.initialValue}
                 initialDateFrom={this.initialDateFrom}
                 initialDateTo={this.initialDateTo}
-                dateColumn={this.dateColumn}
+                lapisDateField={this.lapisDateField}
                 width={this.width}
             />
         );
@@ -161,6 +161,6 @@ type InitialDateToMatches = Expect<
 >;
 type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
 type DateColumnMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps['dateColumn']>
+    Equals<typeof DateRangeSelectorComponent.prototype.lapisDateField, DateRangeSelectorProps['lapisDateField']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/gs-lineage-filter.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';

package/src/web-components/input/gs-location-filter.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';

package/src/web-components/input/gs-mutation-filter.tsx

@@ -1,12 +1,9 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
-import {
-    MutationFilter,
-    type MutationFilterProps,
-    type SelectedMutationFilterStrings,
-} from '../../preact/mutationFilter/mutation-filter';
+import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import type { MutationsFilter } from '../../types';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -64,7 +61,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
      * All values provided must be valid mutations or insertions.
      * Invalid values will be ignored.
      */
-    @property({ type: Object })
+    @property({type: Object})
     initialValue:
         {
             nucleotideMutations: string[];
@@ -98,7 +95,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 

package/src/web-components/input/gs-text-input.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
 import type { Equals, Expect } from '../../utils/typeAssertions';

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -12,7 +12,7 @@ import '../app';
 const codeExample = `
 <gs-aggregate 
     fields='["division", "host"]'
-    filter='{"country": "USA"}'
+    lapisFilter='{"country": "USA"}'
     views='["table"]'
     width='100%'
     height='700px'
@@ -74,7 +74,7 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         <gs-app lapis="${LAPIS_URL}">
             <gs-aggregate
                 .fields=${args.fields}
-                .filter=${args.filter}
+                .lapisFilter=${args.lapisFilter}
                 .views=${args.views}
                 .width=${args.width}
                 .height=${args.height}
@@ -87,7 +87,7 @@ export const Table: StoryObj<Required<AggregateProps>> = {
     args: {
         fields: ['division', 'host'],
         views: ['table'],
-        filter: {
+        lapisFilter: {
             country: 'USA',
         },
         width: '100%',

package/src/web-components/visualization/gs-aggregate.tsx

@@ -1,8 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { Aggregate, type AggregateProps, type View } from '../../preact/aggregatedData/aggregate';
-import { type LapisFilter } from '../../types';
+import { Aggregate, type AggregateProps, type AggregateView } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -38,14 +37,19 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
      * A list of tabs with views that this component should provide.
      */
     @property({ type: Array })
-    views: View[] = ['table'];
+    views: AggregateView[] = ['table'];
 
     /**
      * The filter to apply to the data.
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    filter: LapisFilter = {};
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
 
     /**
      * The width of the component.
@@ -88,7 +92,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
             <Aggregate
                 fields={this.fields}
                 views={this.views}
-                filter={this.filter}
+                lapisFilter={this.lapisFilter}
                 width={this.width}
                 height={this.height}
                 initialSortField={this.initialSortField}
@@ -117,7 +121,7 @@ declare global {
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type FieldsMatches = Expect<Equals<typeof AggregateComponent.prototype.fields, AggregateProps['fields']>>;
 type ViewsMatches = Expect<Equals<typeof AggregateComponent.prototype.views, AggregateProps['views']>>;
-type FilterMatches = Expect<Equals<typeof AggregateComponent.prototype.filter, AggregateProps['filter']>>;
+type FilterMatches = Expect<Equals<typeof AggregateComponent.prototype.lapisFilter, AggregateProps['lapisFilter']>>;
 type WidthMatches = Expect<Equals<typeof AggregateComponent.prototype.width, AggregateProps['width']>>;
 type HeightMatches = Expect<Equals<typeof AggregateComponent.prototype.height, AggregateProps['height']>>;
 type InitialSortFieldMatches = Expect<

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -44,7 +44,12 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
      */
     @property({ type: Array })
     lapisFilters: {
-        lapisFilter: Record<string, string | number | null | boolean>;
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
         displayName: string;
     }[] = [];
 

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -36,7 +36,12 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
      * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     @property({ type: Object })
-    lapisFilter: Record<string, string | number | null | boolean> = {};
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
 
     /**
      * The type of the sequence for which the mutations should be shown.

package/src/web-components/visualization/gs-mutations.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Mutations, type MutationsProps } from '../../preact/mutations/mutations';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -38,7 +38,12 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
      * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     @property({ type: Object })
-    lapisFilter: Record<string, string | number | null | boolean> = {};
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
 
     /**
      * The type of the sequence for which the mutations should be shown.

package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -15,7 +15,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-number-sequences-over-time
-    lapisFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    lapisFilters='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
     lapisDateField="date"
     views='["bar", "line", "table"]'
     width="100%"
@@ -55,7 +55,7 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-number-sequences-over-time
-                .lapisFilter=${args.lapisFilter}
+                .lapisFilters=${args.lapisFilters}
                 .lapisDateField=${args.lapisDateField}
                 .views=${args.views}
                 .width=${args.width}
@@ -68,7 +68,7 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
     `,
     args: {
         views: ['bar', 'line', 'table'],
-        lapisFilter: [
+        lapisFilters: [
             { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-12-01' } },
         ],
         lapisDateField: 'date',
@@ -139,7 +139,7 @@ export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
     ...Template,
     args: {
         ...Template.args,
-        lapisFilter: [
+        lapisFilters: [
             {
                 displayName: 'EG',
                 lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' },
@@ -191,7 +191,7 @@ export const TwoDatasetsWithNonOverlappingDates: StoryObj<NumberSequencesOverTim
     ...Template,
     args: {
         ...Template.args,
-        lapisFilter: [
+        lapisFilters: [
             {
                 displayName: 'XBB',
                 lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' },

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -22,8 +22,6 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  */
 @customElement('gs-number-sequences-over-time')
 export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
-    // prettier-ignore
-    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
@@ -33,16 +31,16 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
      * The `displayName` will be used to label the component views.
      * It should be human-readable.
      *
-     */ @property({type: Object})
-    lapisFilter:
-        {
-            lapisFilter: Record<string, string | number | null | boolean>;
-            displayName: string;
-        }
-        | {
-            lapisFilter: Record<string, string | number | null | boolean>;
-            displayName: string;
-        }[]= { displayName: '', lapisFilter: {} };
+     */ @property({ type: Object })
+    lapisFilters: {
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
+        displayName: string;
+    }[] = [];
 
     /**
      * Required.
@@ -104,7 +102,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     override render() {
         return (
             <NumberSequencesOverTime
-                lapisFilter={this.lapisFilter}
+                lapisFilters={this.lapisFilters}
                 lapisDateField={this.lapisDateField}
                 views={this.views}
                 width={this.width}
@@ -134,7 +132,7 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type LapisFilterMatches = Expect<
-    Equals<typeof NumberSequencesOverTimeComponent.prototype.lapisFilter, NumberSequencesOverTimeProps['lapisFilter']>
+    Equals<typeof NumberSequencesOverTimeComponent.prototype.lapisFilters, NumberSequencesOverTimeProps['lapisFilters']>
 >;
 type LapisDateFieldMatches = Expect<
     Equals<

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -34,8 +34,6 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
     title: 'Visualization/Prevalence over time',
     component: 'gs-prevalence-over-time',
     argTypes: {
-        numeratorFilter: { control: 'object' },
-        denominatorFilter: { control: 'object' },
         granularity: {
             options: ['day', 'week', 'month', 'year'],
             control: { type: 'radio' },
@@ -71,7 +69,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-prevalence-over-time
-                .numeratorFilter=${args.numeratorFilter}
+                .numeratorFilters=${args.numeratorFilters}
                 .denominatorFilter=${args.denominatorFilter}
                 .granularity=${args.granularity}
                 .smoothingWindow=${args.smoothingWindow}
@@ -91,7 +89,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
 export const TwoDatasets: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
-        numeratorFilter: [
+        numeratorFilters: [
             { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
             { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
@@ -165,10 +163,12 @@ export const TwoDatasets: StoryObj<Required<PrevalenceOverTimeProps>> = {
 export const OneDataset: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
-        numeratorFilter: {
-            displayName: 'EG',
-            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
-        },
+        numeratorFilters: [
+            {
+                displayName: 'EG',
+                lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+            },
+        ],
         denominatorFilter: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'week',
         smoothingWindow: 2,

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -1,5 +1,5 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -44,8 +44,6 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  */
 @customElement('gs-prevalence-over-time')
 export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
-    // prettier-ignore
-    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
      *
@@ -57,22 +55,27 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      *
      */
     @property({ type: Object })
-    numeratorFilter:
-        {
-            lapisFilter: Record<string, string | number | null | boolean>;
-            displayName: string;
-        }
-        | {
-        lapisFilter: Record<string, string | number | null | boolean>;
+    numeratorFilters: {
+        lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        };
         displayName: string;
-    }[] = { displayName: '', lapisFilter: {} };
+    }[] = [];
 
     /**
      * The LAPIS filter, to select the data of the reference.
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    denominatorFilter: Record<string, string | number | null | boolean> = {};
+    denominatorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
 
     /**
      * The granularity of the time axis.
@@ -162,7 +165,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     override render() {
         return (
             <PrevalenceOverTime
-                numeratorFilter={this.numeratorFilter}
+                numeratorFilters={this.numeratorFilters}
                 denominatorFilter={this.denominatorFilter}
                 granularity={this.granularity}
                 smoothingWindow={this.smoothingWindow}
@@ -196,7 +199,7 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.numeratorFilter, PrevalenceOverTimeProps['numeratorFilter']>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numeratorFilters, PrevalenceOverTimeProps['numeratorFilters']>
 >;
 type DenominatorMatches = Expect<
     Equals<typeof PrevalenceOverTimeComponent.prototype.denominatorFilter, PrevalenceOverTimeProps['denominatorFilter']>

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -3,12 +3,11 @@ import { html } from 'lit';
 
 import './gs-relative-growth-advantage';
 import '../app';
-// eslint-disable-next-line no-duplicate-imports
-import { type RelativeGrowthAdvantageComponentProps } from './gs-relative-growth-advantage';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominatorFilter from '../../preact/relativeGrowthAdvantage/__mockData__/denominatorFilter.json';
 import numeratorFilter from '../../preact/relativeGrowthAdvantage/__mockData__/numeratorFilter.json';
+import type { RelativeGrowthAdvantageProps } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
 
 const codeExample = String.raw`
 <gs-relative-growth-advantage
@@ -23,7 +22,7 @@ const codeExample = String.raw`
     yAxisMaxLogarithmic="limitTo1"    
 ></gs-relative-growth-advantage>`;
 
-const meta: Meta<RelativeGrowthAdvantageComponentProps> = {
+const meta: Meta<RelativeGrowthAdvantageProps> = {
     title: 'Visualization/Relative growth advantage',
     component: 'gs-relative-growth-advantage',
     argTypes: {
@@ -51,7 +50,7 @@ const meta: Meta<RelativeGrowthAdvantageComponentProps> = {
 
 export default meta;
 
-const Template: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
+const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-relative-growth-advantage
@@ -69,7 +68,7 @@ const Template: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
     `,
 };
 
-export const Default: StoryObj<Required<RelativeGrowthAdvantageComponentProps>> = {
+export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     ...Template,
     args: {
         numeratorFilter: {