@genspectrum/dashboard-components 0.3.1 → 0.4.0

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -7,7 +7,6 @@ import { type Deletion, type Insertion, type Mutation, type Substitution } from
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import Info from '../components/info';
-import { ResizeContainer } from '../components/resize-container';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -17,7 +16,6 @@ export interface MutationFilterInnerProps {
 
 export interface MutationFilterProps extends MutationFilterInnerProps {
     width: string;
-    height: string;
 }
 
 export type SelectedFilters = {
@@ -31,14 +29,12 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width, height }) => {
-    const size = { height, width };
-
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width }) => {
     return (
-        <ErrorBoundary size={size}>
-            <ResizeContainer size={size}>
+        <ErrorBoundary size={{ height: '3.375rem', width }}>
+            <div style={width}>
                 <MutationFilterInner initialValue={initialValue} />
-            </ResizeContainer>
+            </div>
         </ErrorBoundary>
     );
 };
@@ -54,6 +50,9 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
 
     const handleSubmit = (event: Event) => {
         event.preventDefault();
+        if (inputValue === '') {
+            return;
+        }
 
         const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
 
@@ -102,30 +101,33 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
     };
 
     return (
-        <div class={`h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`}>
-            <div class='flex justify-between'>
+        <form className='w-full border boder-gray-300 rounded-md relative' onSubmit={handleSubmit} ref={formRef}>
+            <div className='absolute -top-3 -right-3'>
+                <Info height={'100px'}>Info for mutation filter</Info>
+            </div>
+            <div className='w-full flex p-2 flex-wrap items-center'>
                 <SelectedMutationDisplay
                     selectedFilters={selectedFilters}
                     setSelectedFilters={setSelectedFilters}
                     fireChangeEvent={fireChangeEvent}
                 />
-                <Info>Info for mutation filter</Info>
-            </div>
-
-            <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>
-                <label className={`input flex items-center gap-2 ${isError ? 'input-error' : 'input-bordered'}`}>
+                <div
+                    className={`w-full flex border ${isError ? 'border-red-500' : 'border-gray-300'} border-solid m-2 text-sm focus-within:border-gray-400 `}
+                >
                     <input
-                        className='grow min-w-0'
+                        className='grow flex-1 p-1 border-none focus:outline-none focus:ring-0'
                         type='text'
                         value={inputValue}
                         onInput={handleInputChange}
                         placeholder={getPlaceholder(referenceGenome)}
                         onBlur={handleOnBlur}
                     />
-                    <button className='btn btn-sm'>+</button>
-                </label>
-            </form>
-        </div>
+                    <button type='submit' className='btn btn-xs m-1'>
+                        +
+                    </button>
+                </div>
+            </div>
+        </form>
     );
 };
 
@@ -193,44 +195,36 @@ const SelectedMutationDisplay: FunctionComponent<{
     };
 
     return (
-        <ul class='flex flex-wrap'>
+        <>
             {selectedFilters.nucleotideMutations.map((mutation) => (
-                <li key={mutation.toString()}>
-                    <SelectedNucleotideMutation
-                        mutation={mutation}
-                        onDelete={(mutation: Substitution | Deletion) =>
-                            onSelectedRemoved(mutation, 'nucleotideMutations')
-                        }
-                    />
-                </li>
+                <SelectedNucleotideMutation
+                    key={mutation.toString()}
+                    mutation={mutation}
+                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'nucleotideMutations')}
+                />
             ))}
             {selectedFilters.aminoAcidMutations.map((mutation) => (
-                <li key={mutation.toString()}>
-                    <SelectedAminoAcidMutation
-                        mutation={mutation}
-                        onDelete={(mutation: Substitution | Deletion) =>
-                            onSelectedRemoved(mutation, 'aminoAcidMutations')
-                        }
-                    />
-                </li>
+                <SelectedAminoAcidMutation
+                    key={mutation.toString()}
+                    mutation={mutation}
+                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'aminoAcidMutations')}
+                />
             ))}
             {selectedFilters.nucleotideInsertions.map((insertion) => (
-                <li key={insertion.toString()}>
-                    <SelectedNucleotideInsertion
-                        insertion={insertion}
-                        onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
-                    />
-                </li>
+                <SelectedNucleotideInsertion
+                    key={insertion.toString()}
+                    insertion={insertion}
+                    onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
+                />
             ))}
             {selectedFilters.aminoAcidInsertions.map((insertion) => (
-                <li key={insertion.toString()}>
-                    <SelectedAminoAcidInsertion
-                        insertion={insertion}
-                        onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
-                    />
-                </li>
+                <SelectedAminoAcidInsertion
+                    key={insertion.toString()}
+                    insertion={insertion}
+                    onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
+                />
             ))}
-        </ul>
+        </>
     );
 };
 
@@ -313,15 +307,15 @@ const SelectedFilter = <MutationType extends Mutation>({
     textColor,
 }: SelectedFilterProps<MutationType>) => {
     return (
-        <div
-            class='flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max'
+        <span
+            class='inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full'
             style={{ backgroundColor, color: textColor }}
         >
-            <div className='whitespace-nowrap min-w-max'>{mutation.toString()}</div>
+            {mutation.toString()}
             <button type='button' onClick={() => onDelete(mutation)}>
                 <DeleteIcon />
             </button>
-        </div>
+        </span>
     );
 };
 

package/src/preact/mutations/mutations.tsx

@@ -205,7 +205,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info>Info for mutations</Info>
+            <Info height={'100px'}>Info for mutations</Info>
         </div>
     );
 };

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

@@ -48,6 +48,7 @@ const Template = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -68,6 +69,7 @@ export const TwoVariants = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -139,6 +141,7 @@ export const OneVariant = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

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

@@ -39,6 +39,7 @@ export interface PrevalenceOverTimeInnerProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    lapisDateField: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -51,6 +52,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     width,
     height,
     headline = 'Prevalence over time',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -65,6 +67,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -79,11 +82,12 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
+        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
         [lapis, numerator, denominator, granularity, smoothingWindow],
     );
 
@@ -226,9 +230,9 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     );
 };
 
-const PrevalenceOverTimeInfo: FunctionComponent = () => {
+const PrevalenceOverTimeInfo: FunctionComponent = ({}) => {
     return (
-        <Info size={{ width: '600px', height: '30vh' }}>
+        <Info height={'100px'}>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
             <InfoParagraph>Prevalence over time info.</InfoParagraph>
         </Info>

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

@@ -35,6 +35,7 @@ export const Primary = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -46,6 +47,7 @@ export const Primary = {
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

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

@@ -33,6 +33,7 @@ export interface RelativeGrowthAdvantagePropsInner {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    lapisDateField: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -43,6 +44,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     headline = 'Relative growth advantage',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -55,6 +57,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                         numerator={numerator}
                         denominator={denominator}
                         generationTime={generationTime}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -67,12 +70,13 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     denominator,
     generationTime,
     views,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
+        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
         [lapis, numerator, denominator, generationTime, views],
     );
 
@@ -166,7 +170,7 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
 
 const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
     return (
-        <Info size={{ width: '600px', height: '30vh' }}>
+        <Info>
             <InfoHeadline1>Relative growth advantage</InfoHeadline1>
             <InfoParagraph>
                 If variants spread pre-dominantly by local transmission across demographic groups, this estimate

package/src/query/queryPrevalenceOverTime.ts

@@ -3,6 +3,7 @@ import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { FillMissingOperator } from '../operator/FillMissingOperator';
 import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { SlidingOperator } from '../operator/SlidingOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../types';
@@ -27,14 +28,15 @@ export function queryPrevalenceOverTime(
     granularity: TemporalGranularity,
     smoothingWindow: number,
     lapis: string,
+    lapisDateField: string,
     signal?: AbortSignal,
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
+    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
         const { displayName, lapisFilter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
+        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -60,11 +62,15 @@ function makeArray<T>(arrayOrSingleItem: T | T[]) {
     return [arrayOrSingleItem];
 }
 
-function fetchAndPrepare(filter: LapisFilter, granularity: TemporalGranularity, smoothingWindow: number) {
-    const fetchData = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(filter, ['date']);
-    const mapData = new MapOperator(fetchData, (d) => mapDateToGranularityRange(d, granularity));
+function fetchAndPrepare<LapisDateField extends string>(
+    filter: LapisFilter,
+    granularity: TemporalGranularity,
+    smoothingWindow: number,
+    lapisDateField: LapisDateField,
+) {
+    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+    const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
+    const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
     const fillData = new FillMissingOperator(
         groupByData,

package/src/query/queryRelativeGrowthAdvantage.ts

@@ -1,25 +1,29 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { type LapisFilter } from '../types';
 import { getMinMaxTemporal, TemporalCache, type YearMonthDay } from '../utils/temporal';
 
 export type RelativeGrowthAdvantageData = Awaited<ReturnType<typeof queryRelativeGrowthAdvantage>>;
 
-export async function queryRelativeGrowthAdvantage(
+export async function queryRelativeGrowthAdvantage<LapisDateField extends string>(
     numerator: LapisFilter,
     denominator: LapisFilter,
     generationTime: number,
     lapis: string,
+    lapisDateField: LapisDateField,
     signal?: AbortSignal,
 ) {
     const fetchNumerator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(numerator, ['date']);
+        [key in LapisDateField]: string | null;
+    }>(numerator, [lapisDateField]);
     const fetchDenominator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(denominator, ['date']);
-    const mapNumerator = new MapOperator(fetchNumerator, toYearMonthDay);
-    const mapDenominator = new MapOperator(fetchDenominator, toYearMonthDay);
+        [key in LapisDateField]: string | null;
+    }>(denominator, [lapisDateField]);
+    const mapToFixedDateKeyNumerator = new RenameFieldOperator(fetchNumerator, lapisDateField, 'date');
+    const mapToFixedDateKeyDenominator = new RenameFieldOperator(fetchDenominator, lapisDateField, 'date');
+    const mapNumerator = new MapOperator(mapToFixedDateKeyNumerator, toYearMonthDay);
+    const mapDenominator = new MapOperator(mapToFixedDateKeyDenominator, toYearMonthDay);
     const [numeratorData, denominatorData] = await Promise.all([
         mapNumerator.evaluate(lapis, signal),
         mapDenominator.evaluate(lapis, signal),

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

@@ -5,8 +5,11 @@ import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
+import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import './gs-date-range-selector';
+import '../app';
+import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import {
-    type DateRangeSelectorProps,
     PRESET_VALUE_ALL_TIMES,
     PRESET_VALUE_CUSTOM,
     PRESET_VALUE_LAST_2_MONTHS,
@@ -14,10 +17,7 @@ import {
     PRESET_VALUE_LAST_3_MONTHS,
     PRESET_VALUE_LAST_6_MONTHS,
     PRESET_VALUE_LAST_MONTH,
-} from '../../preact/dateRangeSelector/date-range-selector';
-import './gs-date-range-selector';
-import '../app';
-import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
+} from '../../preact/dateRangeSelector/selectableOptions';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,6 +25,8 @@ const codeExample = String.raw`
     customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
     initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    initialDateFrom="2020-01-01"
+    initialDateTo="2021-01-01"
     width="100%"
     dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
@@ -82,6 +84,8 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         initialValue: PRESET_VALUE_LAST_6_MONTHS,
         dateColumn: 'aDateColumn',
         width: '100%',
+        initialDateFrom: '',
+        initialDateTo: '',
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -97,6 +101,8 @@ export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'C
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
+                    .initialDateFrom=${args.initialDateFrom}
+                    .initialDateTo=${args.initialDateTo}
                     .width=${args.width}
                     .dateColumn=${args.dateColumn}
                 ></gs-date-range-selector>

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

@@ -1,10 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-    type CustomSelectOption,
-    DateRangeSelector,
-    type PresetOptionValues,
-} from '../../preact/dateRangeSelector/date-range-selector';
+import { DateRangeSelector } from '../../preact/dateRangeSelector/date-range-selector';
+import { type CustomSelectOption, type PresetOptionValues } from '../../preact/dateRangeSelector/selectableOptions';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -61,6 +58,8 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
      *
      * If the value is invalid, the component will default to `'last6Months'`.
+     *
+     * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
      */
     @property()
     initialValue:
@@ -73,6 +72,22 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
         | 'last6Months'
         | string = 'last6Months';
 
+    /**
+     * A date string in the format `YYYY-MM-DD`.
+     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
+     * If `initialDateTo` is set, but this is unset, it will default to `earliestDate`.
+     */
+    @property()
+    initialDateFrom: string = '';
+
+    /**
+     * A date string in the format `YYYY-MM-DD`.
+     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
+     * If `initialDateFrom` is set, but this is unset, it will default to the current date.
+     */
+    @property()
+    initialDateTo: string = '';
+
     /**
      * The width of the component.
      *
@@ -93,6 +108,8 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
                 customSelectOptions={this.customSelectOptions}
                 earliestDate={this.earliestDate}
                 initialValue={this.initialValue}
+                initialDateFrom={this.initialDateFrom}
+                initialDateTo={this.initialDateTo}
                 dateColumn={this.dateColumn}
                 width={this.width}
             />

package/src/web-components/input/gs-location-filter.stories.ts

@@ -190,13 +190,12 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Select Asia', async () => {
             await userEvent.type(inputField(), 'Asia');
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        region: 'Asia',
-                    },
-                }),
-            );
+            await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({
+                region: 'Asia',
+                country: undefined,
+                division: undefined,
+                location: undefined,
+            });
         });
 
         await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {

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

@@ -20,13 +20,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
- * and the corresponding values as values, if they are not `undefined`.
+ * and the corresponding values as values, even if they are `undefined`.
  * Example:
  * ```
  * {
  *   continent: "Asia",
  *   country: "China",
- *   city: "Beijing"
+ *   city: "Beijing",
+ *   district: undefined,
  * }
  * ```
  */

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -14,7 +14,6 @@ const codeExample = String.raw`
 <gs-mutation-filter 
     initialValue='["A123T"]'
     width='100%'
-    height='6.5rem'
 ></gs-mutation-filter>`;
 
 const meta: Meta<MutationFilterProps> = {
@@ -38,7 +37,6 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
         width: { control: 'text' },
-        height: { control: 'text' },
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -50,18 +48,13 @@ const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-mutation-filter
-                    .initialValue=${args.initialValue}
-                    .width=${args.width}
-                    .height=${args.height}
-                ></gs-mutation-filter>
+                <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
     args: {
         initialValue: [],
         width: '100%',
-        height: '3rem',
     },
 };
 

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

@@ -91,18 +91,10 @@ export class MutationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
-    /**
-     * The height of the component.
-     *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
-     */
-    @property({ type: String })
-    height: string = '6.5rem';
-
     override render() {
         return (
             <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} width={this.width} height={this.height} />
+                <MutationFilter initialValue={this.initialValue} width={this.width} />
             </ReferenceGenomesAwaiter>
         );
     }

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

@@ -23,8 +23,9 @@ const codeExample = String.raw`
     views='["bar", "line", "bubble", "table"]'
     confidenceIntervalMethods='["wilson"]'
     headline="Prevalence over time"
-    width='100%'
-    height='700px'
+    width="100%"
+    height="700px"
+    lapisDateField="date"
 ></gs-prevalence-over-time>`;
 
 const meta: Meta<Required<PrevalenceOverTimeProps>> = {
@@ -75,6 +76,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .lapisDateField=${args.lapisDateField}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -95,6 +97,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -166,6 +169,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {