@genspectrum/dashboard-components 0.1.2 → 0.1.4

package/src/preact/mutations/mutations-table.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 
 import { getMutationsTableData } from './getMutationsTableData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type Deletion, type Substitution } from '../../utils/mutations';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -18,10 +19,11 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proporti
             {
                 name: 'Mutation',
                 sort: {
-                    compare: (a: string, b: string) => {
+                    compare: (a: Substitution | Deletion, b: Substitution | Deletion) => {
                         return sortSubstitutionsAndDeletions(a, b);
                     },
                 },
+                formatter: (cell: Substitution | Deletion) => cell.toString(),
             },
             {
                 name: 'Type',

package/src/preact/mutations/mutations.stories.tsx

@@ -22,6 +22,7 @@ const meta: Meta<MutationsProps> = {
             options: ['table', 'grid', 'insertions'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
 };
 
@@ -31,7 +32,12 @@ const Template = {
     render: (args: MutationsProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <Mutations variant={args.variant} sequenceType={args.sequenceType} views={args.views} />
+                <Mutations
+                    variant={args.variant}
+                    sequenceType={args.sequenceType}
+                    views={args.views}
+                    size={args.size}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -43,6 +49,7 @@ export const Default: StoryObj<MutationsProps> = {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {

package/src/preact/mutations/mutations.tsx

@@ -24,6 +24,7 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
@@ -33,9 +34,10 @@ export interface MutationsProps {
     variant: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
+    size?: Size;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequenceType, views }) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequenceType, views, size }) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(variant, sequenceType, lapis);
@@ -67,9 +69,11 @@ export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequence
     }
 
     return (
-        <Headline heading={headline}>
-            <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -182,7 +186,14 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             {activeTab === 'Insertions' && (
                 <CsvDownloadButton
                     className='mx-1 btn btn-xs'
-                    getData={() => getInsertionsTableData(filteredData.insertions)}
+                    getData={() =>
+                        getInsertionsTableData(filteredData.insertions).map((row) => {
+                            return {
+                                insertion: row.insertion.toString(),
+                                count: row.count,
+                            };
+                        })
+                    }
                     filename='insertions.csv'
                 />
             )}

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

@@ -28,6 +28,7 @@ const PrevalenceOverTimeBarChart = ({
             datasets: data.map((graphData, index) => datasets(graphData, index, confidenceIntervalMethod)),
         },
         options: {
+            maintainAspectRatio: false,
             animation: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),

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

@@ -43,6 +43,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
         },
         options: {
             animation: false,
+            maintainAspectRatio: false,
             scales: {
                 x: {
                     ticks: {

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

@@ -36,6 +36,7 @@ const PrevalenceOverTimeLineChart = ({
         },
         options: {
             animation: false,
+            maintainAspectRatio: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),
             },

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

@@ -29,6 +29,7 @@ export default {
             options: ['wilson'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
 };
 
@@ -42,6 +43,7 @@ const Template = {
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
+                size={args.size}
             />
         </LapisUrlContext.Provider>
     ),
@@ -59,6 +61,7 @@ export const TwoVariants = {
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {
@@ -124,6 +127,7 @@ export const OneVariant = {
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {

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

@@ -16,6 +16,7 @@ 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 { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
@@ -31,6 +32,7 @@ export interface PrevalenceOverTimeProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    size?: Size;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -40,6 +42,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    size,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -75,14 +78,16 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     }
 
     return (
-        <Headline heading={headline}>
-            <PrevalenceOverTimeTabs
-                views={views}
-                data={data}
-                granularity={granularity}
-                confidenceIntervalMethods={confidenceIntervalMethods}
-            />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '600px', width: '100%' }}>
+            <Headline heading={headline}>
+                <PrevalenceOverTimeTabs
+                    views={views}
+                    data={data}
+                    granularity={granularity}
+                    confidenceIntervalMethods={confidenceIntervalMethods}
+                />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -134,7 +139,10 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                     content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
                 };
             case 'table':
-                return { title: 'Table', content: <PrevalenceOverTimeTable data={data} granularity={granularity} /> };
+                return {
+                    title: 'Table',
+                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} />,
+                };
         }
     };
 

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

@@ -37,6 +37,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
             datasets: datasets(data),
         },
         options: {
+            maintainAspectRatio: false,
             animation: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),
@@ -51,13 +52,15 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
     };
 
     return (
-        <>
-            <GsChart configuration={config} />
-            <div>
+        <div className='flex flex-col h-full'>
+            <div className='flex-1'>
+                <GsChart configuration={config} />
+            </div>
+            <p>
                 Advantage: {(data.params.fd.value * 100).toFixed(2)}% ({(data.params.fd.ciLower * 100).toFixed(2)}% -{' '}
                 {(data.params.fd.ciUpper * 100).toFixed(2)}%)
-            </div>
-        </>
+            </p>
+        </div>
     );
 };
 

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

@@ -10,6 +10,16 @@ export default {
     parameters: {
         fetchMock: {},
     },
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        generationTime: { control: 'number' },
+        views: {
+            options: ['line'],
+            control: { type: 'check' },
+        },
+        size: [{ control: 'object' }],
+    },
 };
 
 export const Primary = {
@@ -20,6 +30,7 @@ export const Primary = {
                 denominator={args.denominator}
                 generationTime={args.generationTime}
                 views={args.views}
+                size={args.size}
             />
         </LapisUrlContext.Provider>
     ),
@@ -28,6 +39,7 @@ export const Primary = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
+        size: { width: '100%', height: '700px' },
     },
     parameters: {
         fetchMock: {

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

@@ -13,6 +13,7 @@ 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 { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
@@ -25,6 +26,7 @@ export interface RelativeGrowthAdvantageProps {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    size?: Size;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -32,6 +34,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     views,
+    size,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -67,14 +70,16 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     }
 
     return (
-        <Headline heading={headline}>
-            <RelativeGrowthAdvantageTabs
-                data={data}
-                yAxisScaleType={yAxisScaleType}
-                setYAxisScaleType={setYAxisScaleType}
-                views={views}
-            />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <RelativeGrowthAdvantageTabs
+                    data={data}
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                    views={views}
+                />
+            </Headline>
+        </ResizeContainer>
     );
 };
 

package/src/preact/shared/sort/sortInsertions.spec.ts

@@ -1,19 +1,20 @@
 import { describe, expect, test } from 'vitest';
 
 import { sortInsertions } from './sortInsertions';
+import { Insertion } from '../../../utils/mutations';
 
 describe('sortInsertions with no segments', () => {
     test('should sort for positions first', () => {
-        const a = 'ins_1:A';
-        const b = 'ins_2:A';
+        const a = new Insertion(undefined, 1, 'A');
+        const b = new Insertion(undefined, 2, 'A');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for symbols second', () => {
-        const a = 'ins_1:A';
-        const b = 'ins_1:B';
+        const a = new Insertion(undefined, 1, 'A');
+        const b = new Insertion(undefined, 1, 'B');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);
@@ -22,24 +23,24 @@ describe('sortInsertions with no segments', () => {
 
 describe('sortInsertions with segments', () => {
     test('should sort for segments first', () => {
-        const a = 'ins_AA1:1:A';
-        const b = 'ins_BB2:1:A';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('BB1', 1, 'A');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for positions second', () => {
-        const a = 'ins_AA1:1:A';
-        const b = 'ins_AA1:2:A';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('AA1', 2, 'A');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for symbols third', () => {
-        const a = 'ins_AA1:1:A';
-        const b = 'ins_AA1:1:B';
+        const a = new Insertion('AA1', 1, 'A');
+        const b = new Insertion('AA1', 1, 'B');
 
         expect(sortInsertions(a, b)).toBeLessThan(0);
         expect(sortInsertions(b, a)).toBeGreaterThan(0);

package/src/preact/shared/sort/sortInsertions.ts

@@ -1,21 +1,14 @@
-import { Insertion } from '../../../utils/mutations';
+import { comparePositions, compareSegments } from './sortSubstitutionsAndDeletions';
+import { type Insertion } from '../../../utils/mutations';
 
-export const sortInsertions = (a: string, b: string) => {
-    const insertionA = Insertion.parse(a);
-    const insertionB = Insertion.parse(b);
+export const sortInsertions = (a: Insertion, b: Insertion) => {
+    if (a.segment !== b.segment) {
+        return compareSegments(a.segment, b.segment);
+    }
 
-    if (insertionA && insertionB) {
-        const segmentA = insertionA.segment;
-        const segmentB = insertionB.segment;
-        if (segmentA !== undefined && segmentB !== undefined && segmentA !== segmentB) {
-            return segmentA.localeCompare(segmentB);
-        }
-        const positionA = insertionA.position;
-        const positionB = insertionB.position;
-        if (positionA !== positionB) {
-            return positionA - positionB;
-        }
-        return insertionA.insertedSymbols.localeCompare(insertionB.insertedSymbols);
+    if (a.position !== b.position) {
+        return comparePositions(a.position, b.position);
     }
-    throw new Error(`Invalid insertion: ${a} or ${b}`);
+
+    return a.insertedSymbols.localeCompare(b.insertedSymbols);
 };

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.spec.ts

@@ -1,19 +1,28 @@
 import { describe, expect, test } from 'vitest';
 
 import { sortSubstitutionsAndDeletions } from './sortSubstitutionsAndDeletions';
+import { Deletion, Substitution } from '../../../utils/mutations';
 
 describe('sortSubstitutionsAndDeletions with no segments', () => {
     test('should sort for positions first', () => {
-        const a = 'A123B';
-        const b = 'A234B';
+        const a = new Substitution(undefined, 'A', 'B', 123);
+        const b = new Substitution(undefined, 'A', 'B', 234);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for substitutionValue second', () => {
-        const a = 'A123A';
-        const b = 'A123B';
+        const a = new Substitution(undefined, 'A', 'A', 123);
+        const b = new Substitution(undefined, 'A', 'B', 123);
+
+        expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
+        expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
+    });
+
+    test('should sort for substitutionValue over deletion', () => {
+        const a = new Substitution(undefined, 'A', 'A', 123);
+        const b = new Deletion(undefined, 'A', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
@@ -22,24 +31,24 @@ describe('sortSubstitutionsAndDeletions with no segments', () => {
 
 describe('sortSubstitutionsAndDeletions with segments', () => {
     test('should sort for segment first', () => {
-        const a = 'AA1:A123B';
-        const b = 'BB1:A234B';
+        const a = new Substitution('AA1', 'A', 'B', 123);
+        const b = new Substitution('BB1', 'A', 'B', 234);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for position second', () => {
-        const a = 'AA1:A123B';
-        const b = 'AA1:A234B';
+        const a = new Substitution('AA1', 'A', 'B', 123);
+        const b = new Substitution('AA1', 'A', 'B', 234);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);
     });
 
     test('should sort for substitutionValue third', () => {
-        const a = 'AA1:A123A';
-        const b = 'AA1:A123B';
+        const a = new Substitution('AA1', 'A', 'A', 123);
+        const b = new Substitution('AA1', 'A', 'B', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -1,17 +1,50 @@
-export const substitutionAndDeletionRegex = /(?:([A-Za-z0-9]+):)?([A-Za-z])(\d+)([A-Za-z]|-|\*)/;
+import { Deletion, type Substitution } from '../../../utils/mutations';
 
-export const sortSubstitutionsAndDeletions = (a: string, b: string) => {
-    const aMatch = a.match(substitutionAndDeletionRegex);
-    const bMatch = b.match(substitutionAndDeletionRegex);
+export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
+    if (a.segment !== b.segment) {
+        compareSegments(a.segment, b.segment);
+    }
 
-    if (aMatch && bMatch) {
-        if (aMatch[1] !== bMatch[1]) {
-            return aMatch[1].localeCompare(bMatch[1]);
-        }
-        if (aMatch[3] !== bMatch[3]) {
-            return parseInt(aMatch[3], 10) - parseInt(bMatch[3], 10);
+    if (a.position !== b.position) {
+        return comparePositions(a.position, b.position);
+    }
+
+    const aIsDeletion = a instanceof Deletion;
+    const bIsDeletion = b instanceof Deletion;
+
+    if (aIsDeletion !== bIsDeletion) {
+        return aIsDeletion ? 1 : -1;
+    }
+
+    if (!aIsDeletion && !bIsDeletion) {
+        if (a.substitutionValue !== b.substitutionValue) {
+            return compareSubstitutionValues(a.substitutionValue, b.substitutionValue);
         }
-        return aMatch[4].localeCompare(bMatch[4]);
     }
-    throw new Error(`Invalid substitution or deletion: ${a} or ${b}`);
+
+    return 0;
+};
+
+export const compareSegments = (a: string | undefined, b: string | undefined) => {
+    if (a === undefined) {
+        return -1;
+    }
+    if (b === undefined) {
+        return 1;
+    }
+    return a.localeCompare(b);
+};
+
+export const comparePositions = (a: number, b: number) => {
+    return a - b;
+};
+
+const compareSubstitutionValues = (a: string | undefined, b: string | undefined) => {
+    if (a === undefined) {
+        return -1;
+    }
+    if (b === undefined) {
+        return 1;
+    }
+    return a.localeCompare(b);
 };

package/src/preact/textInput/text-input.stories.tsx

@@ -1,5 +1,6 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
@@ -39,7 +40,11 @@ export default meta;
 export const Default: StoryObj<TextInputProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <TextInput lapisField={args.lapisField} placeholderText={args.placeholderText} />
+            <TextInput
+                lapisField={args.lapisField}
+                placeholderText={args.placeholderText}
+                initialValue={args.initialValue}
+            />
         </LapisUrlContext.Provider>
     ),
     args: {
@@ -47,3 +52,19 @@ export const Default: StoryObj<TextInputProps> = {
         placeholderText: 'Enter a host name',
     },
 };
+
+export const WithInitialValue: StoryObj<TextInputProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        initialValue: 'Homo sapiens',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
+            expect(input).toHaveValue('Homo sapiens');
+        });
+    },
+};

package/src/preact/textInput/text-input.tsx

@@ -11,9 +11,10 @@ import { useQuery } from '../useQuery';
 export interface TextInputProps {
     lapisField: string;
     placeholderText?: string;
+    initialValue?: string;
 }
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText }) => {
+export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText, initialValue }) => {
     const lapis = useContext(LapisUrlContext);
 
     const inputRef = useRef<HTMLInputElement>(null);
@@ -62,6 +63,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, place
                 onInput={onInput}
                 ref={inputRef}
                 list={lapisField}
+                value={initialValue}
             />
             <datalist id={lapisField}>
                 {data.map((item) => (

package/src/query/queryAggregateData.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'vitest';
+
+import { queryAggregateData } from './queryAggregateData';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
+
+describe('queryAggregateData', () => {
+    test('should fetch aggregate data', async () => {
+        const fields = ['division', 'host'];
+        const filter = { country: 'USA' };
+
+        lapisRequestMocks.aggregated(
+            { fields, ...filter },
+            {
+                data: [
+                    { count: 4, region: 'region1', host: 'host1' },
+                    { count: 4, region: 'region1', host: 'host2' },
+                    { count: 8, region: 'region2', host: 'host1' },
+                    { count: 16, region: 'region2', host: 'host2' },
+                ],
+            },
+        );
+
+        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL);
+
+        expect(result).to.deep.equal([
+            { proportion: 0.125, count: 4, region: 'region1', host: 'host1' },
+            { proportion: 0.125, count: 4, region: 'region1', host: 'host2' },
+            { proportion: 0.25, count: 8, region: 'region2', host: 'host1' },
+            { proportion: 0.5, count: 16, region: 'region2', host: 'host2' },
+        ]);
+    });
+});