@genspectrum/dashboard-components 0.1.2 → 0.1.4

package/src/preact/aggregatedData/aggregate.tsx

@@ -0,0 +1,102 @@
+import { type FunctionComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { AggregateTable } from './aggregate-table';
+import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
+import { type LapisFilter } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorDisplay } from '../components/error-display';
+import Headline from '../components/headline';
+import Info from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer, type Size } from '../components/resize-container';
+import Tabs from '../components/tabs';
+import { useQuery } from '../useQuery';
+
+export type View = 'table';
+
+export interface AggregateProps {
+    filter: LapisFilter;
+    fields: string[];
+    views: View[];
+    size?: Size;
+}
+
+export const Aggregate: FunctionComponent<AggregateProps> = ({ fields, views, filter, size }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryAggregateData(filter, fields, lapis);
+    }, [filter, fields, lapis]);
+
+    const headline = 'Aggregate';
+
+    if (isLoading) {
+        return (
+            <Headline heading={headline}>
+                <LoadingDisplay />
+            </Headline>
+        );
+    }
+
+    if (error !== null) {
+        return (
+            <Headline heading={headline}>
+                <ErrorDisplay error={error} />
+            </Headline>
+        );
+    }
+
+    if (data === null) {
+        return (
+            <Headline heading={headline}>
+                <NoDataDisplay />
+            </Headline>
+        );
+    }
+
+    return (
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <AggregatedDataTabs data={data} views={views} fields={fields} />
+            </Headline>
+        </ResizeContainer>
+    );
+};
+
+type AggregatedDataTabsProps = {
+    data: AggregateData;
+    fields: string[];
+    views: View[];
+};
+
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields }) => {
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'table':
+                return {
+                    title: 'Table',
+                    content: <AggregateTable data={data} fields={fields} />,
+                };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} />} />;
+};
+
+type ToolbarProps = {
+    data: AggregateData;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
+    return (
+        <div class='flex flex-row'>
+            <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
+            <Info className='mx-1' content='Info for aggregate' />
+        </div>
+    );
+};

package/src/preact/components/ReferenceGenomesAwaiter.tsx

@@ -0,0 +1,25 @@
+import { type ComponentChildren, type FunctionalComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+/**
+ * Sometimes the reference genome is not immediately available.
+ * This component will display a loading spinner until the reference genome is available.
+ * Child components can assume that the reference genome is available on the first render,
+ * which e.g. matters for initial values of `useState`.
+ */
+export const ReferenceGenomesAwaiter: FunctionalComponent<{ children: ComponentChildren }> = ({ children }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    if (isNotInitialized(referenceGenome)) {
+        return <div className='laoding loading-spinner loading-md'>Loading...</div>;
+    }
+
+    return <>{children}</>;
+};
+
+function isNotInitialized(referenceGenome: ReferenceGenome) {
+    return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
+}

package/src/preact/components/csv-download-button.tsx

@@ -1,9 +1,15 @@
 import { type FunctionComponent } from 'preact';
 
+type ToStringable = {
+    toString: () => string;
+};
+
+type DataValue = string | number | boolean | null | ToStringable;
+
 export interface CsvDownloadButtonProps {
     label?: string;
     filename?: string;
-    getData: () => Record<string, string | number | boolean | null>[];
+    getData: () => Record<string, DataValue>[];
     className?: string;
 }
 
@@ -32,7 +38,7 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
         return header + rows;
     };
 
-    const getDataKeys = (data: Record<string, string | number | boolean | null>[]) => {
+    const getDataKeys = (data: Record<string, DataValue>[]) => {
         const keysSet = data
             .map((row) => Object.keys(row))
             .reduce((accumulatedKeys, keys) => {

package/src/preact/components/headline.tsx

@@ -1,15 +1,27 @@
 import { type FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 export interface HeadlineProps {
     heading: string;
 }
 
 const Headline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
+    const ref = useRef<HTMLHeadingElement>(null);
+
+    const [h1Height, setH1Height] = useState('2rem');
+
+    useEffect(() => {
+        if (ref.current) {
+            const h1Height = ref.current.getBoundingClientRect().height;
+            setH1Height(`${h1Height}px`);
+        }
+    }, []);
+
     return (
-        <>
-            <h1>{heading}</h1>
-            {children}
-        </>
+        <div className='h-full w-full'>
+            <h1 ref={ref}>{heading}</h1>
+            <div style={{ height: `calc(100% - ${h1Height})` }}>{children}</div>
+        </div>
     );
 };
 

package/src/preact/components/min-max-range-slider.tsx

@@ -1,6 +1,6 @@
-import { type FunctionComponent } from 'preact';
+import { type FunctionComponent, type JSX } from 'preact';
 import { useState } from 'preact/hooks';
-import { type ChangeEvent } from 'react';
+
 import './min-max-percent-slider.css';
 
 export interface MinMaxPercentSliderProps {
@@ -27,7 +27,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
 
     const [zIndexTo, setZIndexTo] = useState(0);
 
-    const onMinChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const onMinChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const minValue = Number(input.value);
 
@@ -39,7 +39,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
         }
     };
 
-    const onMaxChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const onMaxChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const maxValue = Number(input.value);
 

package/src/preact/components/percent-intput.tsx

@@ -1,6 +1,5 @@
-import { type FunctionComponent } from 'preact';
+import { type FunctionComponent, type JSX } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import { type ChangeEvent } from 'react';
 
 export type PercentInputProps = {
     percentage: number;
@@ -18,7 +17,7 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage,
         setInternalPercentage(percentage);
     }, [percentage]);
 
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const value = Number(input.value);
 

package/src/preact/components/resize-container.tsx

@@ -0,0 +1,23 @@
+import { type FunctionComponent } from 'preact';
+
+export type Size = {
+    width?: string;
+    height?: string;
+};
+
+export interface ResizeContainerProps {
+    size?: Size;
+    defaultSize: Size;
+}
+
+export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size, defaultSize }) => {
+    return <div style={extendByDefault(size, defaultSize)}>{children}</div>;
+};
+
+const extendByDefault = (size: Size | undefined, defaultSize: Size) => {
+    if (size === undefined) {
+        return defaultSize;
+    }
+
+    return { ...defaultSize, ...size };
+};

package/src/preact/components/table.tsx

@@ -3,6 +3,7 @@ import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types'
 import { type PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
+
 import 'gridjs/dist/theme/mermaid.css';
 
 export const tableStyle = {

package/src/preact/components/tabs.stories.tsx

@@ -51,10 +51,10 @@ export const TabsWithToolbarOnlyShowingOnSecondTab: StoryObj = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => expect(canvas.getByLabelText('FirstTab', { selector: 'input' })).toBeVisible());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'SecondTab' })).toBeVisible());
         await expect(canvas.queryByText('Toolbar')).not.toBeInTheDocument();
 
-        await fireEvent.click(canvas.getByLabelText('SecondTab', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'SecondTab' }));
         await waitFor(() => expect(canvas.getByText('Toolbar')).toBeVisible());
     },
 };

package/src/preact/components/tabs.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
 type Tab = {
@@ -14,34 +14,57 @@ interface ComponentTabsProps {
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0].title);
+    const [heightOfTabs, setHeightOfTabs] = useState('3rem');
+    const tabRef = useRef<HTMLDivElement>(null);
 
-    const tabNames = tabs.map((tab) => tab.title).join(', ');
-
-    const tabElements = tabs.map((tab) => {
-        return (
-            <Fragment key={tab.title}>
-                <input
-                    type='radio'
-                    name={tabNames}
-                    role='tab'
-                    className='tab'
-                    aria-label={tab.title}
-                    checked={activeTab === tab.title}
-                    onChange={() => setActiveTab(tab.title)}
-                />
-                <div role='tabpanel' className='tab-content bg-base-100 border-base-300 rounded-box p-1'>
-                    {tab.content}
-                </div>
-            </Fragment>
-        );
-    });
+    useEffect(() => {
+        if (tabRef.current) {
+            const heightOfTabs = tabRef.current.getBoundingClientRect().height;
+            setHeightOfTabs(`${heightOfTabs}px`);
+        }
+    }, []);
+
+    const tabElements = (
+        <div className='flex flex-row'>
+            {tabs.map((tab) => {
+                return (
+                    <Fragment key={tab.title}>
+                        <button
+                            className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
+                                activeTab === tab.title
+                                    ? 'border-b-2 border-gray-400'
+                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                            }`}
+                            onClick={() => {
+                                setActiveTab(tab.title);
+                            }}
+                        >
+                            {tab.title}
+                        </button>
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
 
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div role='tablist' className='tabs tabs-lifted'>
-            {tabElements}
-            {toolbar && <div className='m-1 col-[9999]'>{toolbarElement}</div>}
+        <div className='h-full w-full'>
+            <div ref={tabRef} className='flex flex-row justify-between'>
+                {tabElements}
+                {toolbar && <div className='py-2'>{toolbarElement}</div>}
+            </div>
+            <div
+                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}
+                style={{ height: `calc(100% - ${heightOfTabs})` }}
+            >
+                {tabs.map((tab) => (
+                    <div className='h-full overflow-auto' key={tab.title} hidden={activeTab !== tab.title}>
+                        {tab.content}
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -1,11 +1,21 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import {
+    DateRangeSelector,
+    type DateRangeSelectorProps,
+    PRESET_VALUE_ALL_TIMES,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_2_MONTHS,
+    PRESET_VALUE_LAST_2_WEEKS,
+    PRESET_VALUE_LAST_3_MONTHS,
+    PRESET_VALUE_LAST_6_MONTHS,
+    PRESET_VALUE_LAST_MONTH,
+} from './date-range-selector';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
-const meta: Meta<DateRangeSelectorProps> = {
+const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
@@ -14,19 +24,41 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                PRESET_VALUE_CUSTOM,
+                PRESET_VALUE_ALL_TIMES,
+                PRESET_VALUE_LAST_2_WEEKS,
+                PRESET_VALUE_LAST_MONTH,
+                PRESET_VALUE_LAST_2_MONTHS,
+                PRESET_VALUE_LAST_3_MONTHS,
+                PRESET_VALUE_LAST_6_MONTHS,
+                'CustomDateRange',
+            ],
+        },
+    },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
+        initialValue: PRESET_VALUE_LAST_3_MONTHS,
     },
     decorators: [withActions],
 };
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps> = {
+export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <DateRangeSelector customSelectOptions={args.customSelectOptions} earliestDate={args.earliestDate} />
+            <DateRangeSelector
+                customSelectOptions={args.customSelectOptions}
+                earliestDate={args.earliestDate}
+                initialValue={args.initialValue}
+            />
         </LapisUrlContext.Provider>
     ),
 };

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,5 +1,4 @@
 import flatpickr from 'flatpickr';
-import { type FunctionComponent } from 'preact';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -7,24 +6,53 @@ import { toYYYYMMDD } from './dateConversion';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export type CustomSelectOption = { label: string; dateFrom: string; dateTo: string };
+export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
-export interface DateRangeSelectorProps {
-    customSelectOptions: CustomSelectOption[];
+export interface DateRangeSelectorProps<CustomLabel extends string> {
+    customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
+    initialValue?: PresetOptionValues | CustomLabel;
 }
 
-export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
+export const PRESET_VALUE_CUSTOM = 'custom';
+export const PRESET_VALUE_ALL_TIMES = 'allTimes';
+export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
+export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
+export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
+export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
+export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
+
+export const presets = {
+    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
+    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
+    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
+    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
+    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
+    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
+    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
+};
+
+export type PresetOptionValues = keyof typeof presets;
+
+export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
-}) => {
+    initialValue,
+}: DateRangeSelectorProps<CustomLabel>) => {
     const datePickerRef = useRef<HTMLInputElement>(null);
     const endDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState('last6Months');
+    const selectableOptions = getSelectableOptions(customSelectOptions);
+
+    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+        initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
+            ? initialValue
+            : PRESET_VALUE_LAST_6_MONTHS,
+    );
+
     const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
         dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
         dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
@@ -61,27 +89,7 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [datePickerRef, endDatePickerRef]);
 
-    const selectableOptions = () => {
-        const presetOptions = [
-            { label: 'Custom', value: 'custom' },
-            { label: 'All times', value: 'allTimes' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 months', value: 'last2Months' },
-            { label: 'Last 3 months', value: 'last3Months' },
-            { label: 'Last 6 months', value: 'last6Months' },
-        ];
-
-        const customOptions = customSelectOptions.map((customSelectOption) => {
-            return { label: customSelectOption.label, value: customLabelToOptionValue(customSelectOption.label) };
-        });
-
-        return [...presetOptions, ...customOptions];
-    };
-
-    const onSelectChange = (value: string) => {
+    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
         setSelectedDateRange(value);
 
         const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -145,14 +153,14 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
     return (
         <div class='join' ref={divRef}>
             <Select
-                items={selectableOptions()}
+                items={selectableOptions}
                 selected={selectedDateRange}
                 selectStyle='select-bordered rounded-none join-item'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value);
+                    onSelectChange(value as CustomLabel | PresetOptionValues);
                 }}
             />
             <input
@@ -175,51 +183,57 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
     );
 };
 
-const customLabelToOptionValue = (customLabel: string) => {
-    return `${customLabel}customLabel`;
+const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
+    const presetOptions = Object.entries(presets).map(([key, value]) => {
+        return { label: value.label, value: key };
+    });
+
+    const customOptions = customSelectOptions.map((customSelectOption) => {
+        return { label: customSelectOption.label, value: customSelectOption.label };
+    });
+
+    return [...presetOptions, ...customOptions];
 };
 
-const getDatesForSelectorValue = (
+const getDatesForSelectorValue = <Label extends string>(
     selectorValue: string,
-    customSelectOptions: CustomSelectOption[],
+    customSelectOptions: CustomSelectOption<Label>[],
     earliestDate: string,
 ) => {
     const today = new Date();
 
-    const customSelectOption = customSelectOptions.find(
-        (option) => customLabelToOptionValue(option.label) === selectorValue,
-    );
+    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
     if (customSelectOption) {
         return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
     }
 
     switch (selectorValue) {
-        case 'last2Weeks': {
+        case PRESET_VALUE_LAST_2_WEEKS: {
             const twoWeeksAgo = new Date(today);
             twoWeeksAgo.setDate(today.getDate() - 14);
             return { dateFrom: twoWeeksAgo, dateTo: today };
         }
-        case 'lastMonth': {
+        case PRESET_VALUE_LAST_MONTH: {
             const lastMonth = new Date(today);
             lastMonth.setMonth(today.getMonth() - 1);
             return { dateFrom: lastMonth, dateTo: today };
         }
-        case 'last2Months': {
+        case PRESET_VALUE_LAST_2_MONTHS: {
             const twoMonthsAgo = new Date(today);
             twoMonthsAgo.setMonth(today.getMonth() - 2);
             return { dateFrom: twoMonthsAgo, dateTo: today };
         }
-        case 'last3Months': {
+        case PRESET_VALUE_LAST_3_MONTHS: {
             const threeMonthsAgo = new Date(today);
             threeMonthsAgo.setMonth(today.getMonth() - 3);
             return { dateFrom: threeMonthsAgo, dateTo: today };
         }
-        case 'last6Months': {
+        case PRESET_VALUE_LAST_6_MONTHS: {
             const sixMonthsAgo = new Date(today);
             sixMonthsAgo.setMonth(today.getMonth() - 6);
             return { dateFrom: sixMonthsAgo, dateTo: today };
         }
-        case 'allTimes': {
+        case PRESET_VALUE_ALL_TIMES: {
             return { dateFrom: new Date(earliestDate), dateTo: today };
         }
         default:

package/src/preact/locationFilter/location-filter.tsx

@@ -5,11 +5,11 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { useQuery } from '../useQuery';
 
 export type LocationFilterProps = {
-    value?: string;
+    initialValue?: string;
     fields: string[];
 };
 
-export const LocationFilter = ({ value: initialValue, fields }: LocationFilterProps) => {
+export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');

package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts

@@ -51,12 +51,12 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A123T',
+                mutation: new Substitution(undefined, 'A', 'T', 123),
                 'Test 1 prevalence': 0.123,
                 'Test 2 prevalence': 0.345,
             },
             {
-                mutation: 'G234A',
+                mutation: new Substitution(undefined, 'G', 'A', 234),
                 'Test 1 prevalence': 0.567,
                 'Test 2 prevalence': 0.789,
             },
@@ -106,17 +106,17 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A200T',
+                mutation: new Substitution(undefined, 'A', 'T', 200),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': belowRange,
             },
             {
-                mutation: 'A300T',
+                mutation: new Substitution(undefined, 'A', 'T', 300),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': inRange,
             },
             {
-                mutation: 'A400T',
+                mutation: new Substitution(undefined, 'A', 'T', 400),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': aboveRange,
             },