@genspectrum/dashboard-components 0.10.3 → 0.11.0

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: {

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

@@ -1,11 +1,10 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     RelativeGrowthAdvantage,
     type RelativeGrowthAdvantageProps,
 } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
-import { type AxisMax } from '../../preact/shared/charts/getYAxisMax';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -42,14 +41,24 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    numeratorFilter: Record<string, string | number | null | boolean> = {};
+    numeratorFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
 
     /**
      * LAPIS filter to select the data of the baseline variant.
      * 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 generation time represents the number of days over which the variant's relative growth advantage is measured.
@@ -120,20 +129,13 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 width={this.width}
                 height={this.height}
                 lapisDateField={this.lapisDateField}
-                yAxisMaxConfig={{
-                    linear: this.yAxisMaxLinear,
-                    logarithmic: this.yAxisMaxLogarithmic,
-                }}
+                yAxisMaxLinear={this.yAxisMaxLinear}
+                yAxisMaxLogarithmic={this.yAxisMaxLogarithmic}
             />
         );
     }
 }
 
-export interface RelativeGrowthAdvantageComponentProps extends Omit<RelativeGrowthAdvantageProps, 'yAxisMaxConfig'> {
-    yAxisMaxLinear?: AxisMax;
-    yAxisMaxLogarithmic?: AxisMax;
-}
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
@@ -186,13 +188,13 @@ type LapisDateFieldMatches = Expect<
 type YAxisMaxLinearMatches = Expect<
     Equals<
         typeof RelativeGrowthAdvantageComponent.prototype.yAxisMaxLinear,
-        Required<RelativeGrowthAdvantageProps['yAxisMaxConfig']>['linear']
+        RelativeGrowthAdvantageProps['yAxisMaxLinear']
     >
 >;
 type YAxisMaxLogarithmicMatches = Expect<
     Equals<
         typeof RelativeGrowthAdvantageComponent.prototype.yAxisMaxLogarithmic,
-        Required<RelativeGrowthAdvantageProps['yAxisMaxConfig']>['logarithmic']
+        RelativeGrowthAdvantageProps['yAxisMaxLogarithmic']
     >
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */