@genspectrum/dashboard-components 1.4.0 → 1.5.0

package/src/preact/mutationsOverTime/__mockData__/withGaps.ts

@@ -0,0 +1,352 @@
+import { type MutationOverTimeMockData } from './mockConversion';
+
+export const withGaps: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            pangoLineage: 'JN.1*',
+            dateFrom: '2024-01-15',
+            dateTo: '2024-07-10',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'month',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+        displayMutations: ['A19722G', 'G21641T', 'T21652-'],
+        useNewEndpoint: false,
+    },
+    response: {
+        overallMutationData: [
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'A',
+                    substitutionValue: 'G',
+                    position: 19722,
+                    type: 'substitution',
+                    code: 'A19722G',
+                },
+                count: 10234,
+                proportion: 0.09900453714363107,
+            },
+            {
+                type: 'substitution',
+                mutation: {
+                    valueAtReference: 'G',
+                    substitutionValue: 'T',
+                    position: 21641,
+                    type: 'substitution',
+                    code: 'G21641T',
+                },
+                count: 4485,
+                proportion: 0.05001951709139575,
+            },
+            {
+                type: 'deletion',
+                mutation: {
+                    valueAtReference: 'T',
+                    position: 21652,
+                    type: 'deletion',
+                    code: 'T21652-',
+                },
+                count: 17169,
+                proportion: 0.16814713976514833,
+            },
+        ],
+        mutationOverTimeSerializedAsArray: {
+            data: [
+                [
+                    'A19722G',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 36,
+                                proportion: 0.0043859649122807015,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 759,
+                                proportion: 0.08675277174534232,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 6318,
+                                proportion: 0.2995448511283899,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'G21641T',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'value',
+                                count: 1625,
+                                proportion: 0.07085858806087297,
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'value',
+                                count: 419,
+                                proportion: 0.027931471235250985,
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 228,
+                                proportion: 0.03451930355791068,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 666,
+                                proportion: 0.09498003422703936,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 270,
+                                proportion: 0.013585589212035825,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+                [
+                    'T21652-',
+                    [
+                        [
+                            '2024-01',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 26387,
+                            },
+                        ],
+                        [
+                            '2024-02',
+                            {
+                                type: 'belowThreshold',
+                                totalCount: 17340,
+                            },
+                        ],
+                        [
+                            '2024-03',
+                            {
+                                type: 'value',
+                                count: 40,
+                                proportion: 0.004921259842519685,
+                                totalCount: 8236,
+                            },
+                        ],
+                        [
+                            '2024-04',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-05',
+                            {
+                                type: 'value',
+                                count: 1304,
+                                proportion: 0.151504589287789,
+                                totalCount: 8799,
+                            },
+                        ],
+                        [
+                            '2024-06',
+                            {
+                                type: 'value',
+                                count: 0,
+                                proportion: NaN,
+                                totalCount: 0,
+                            },
+                        ],
+                        [
+                            '2024-07',
+                            {
+                                type: 'value',
+                                count: 10815,
+                                proportion: 0.5221610660486674,
+                                totalCount: 21234,
+                            },
+                        ],
+                    ],
+                ],
+            ],
+            keysFirstAxis: [
+                [
+                    'A19722G',
+                    {
+                        type: 'substitution',
+                        code: 'A19722G',
+                        position: 19722,
+                        valueAtReference: 'A',
+                        substitutionValue: 'G',
+                    },
+                ],
+                [
+                    'G21641T',
+                    {
+                        type: 'substitution',
+                        code: 'G21641T',
+                        position: 21641,
+                        valueAtReference: 'G',
+                        substitutionValue: 'T',
+                    },
+                ],
+                [
+                    'T21652-',
+                    {
+                        type: 'deletion',
+                        code: 'T21652-',
+                        position: 21652,
+                        valueAtReference: 'T',
+                    },
+                ],
+            ],
+            keysSecondAxis: [
+                [
+                    '2024-01',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 1,
+                        dateString: '2024-01',
+                    },
+                ],
+                [
+                    '2024-02',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 2,
+                        dateString: '2024-02',
+                    },
+                ],
+                [
+                    '2024-03',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 3,
+                        dateString: '2024-03',
+                    },
+                ],
+                [
+                    '2024-04',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 4,
+                        dateString: '2024-04',
+                    },
+                ],
+                [
+                    '2024-05',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 5,
+                        dateString: '2024-05',
+                    },
+                ],
+                [
+                    '2024-06',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 6,
+                        dateString: '2024-06',
+                    },
+                ],
+                [
+                    '2024-07',
+                    {
+                        type: 'YearMonth',
+                        yearNumber: 2024,
+                        monthNumber: 7,
+                        dateString: '2024-07',
+                    },
+                ],
+            ],
+        },
+    },
+};

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -27,6 +27,7 @@ describe('getFilteredMutationOverTimeData', () => {
             ],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             displayMutations: undefined,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
@@ -62,6 +63,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -85,6 +87,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -108,6 +111,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -132,6 +136,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -156,6 +161,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -178,6 +184,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -201,6 +208,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -224,6 +232,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
+            hideGaps: false,
             mutationFilterValue: { textFilter: '23T', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
@@ -250,6 +259,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 displayedSegments: [],
                 displayedMutationTypes: [],
                 proportionInterval,
+                hideGaps: false,
                 mutationFilterValue: filterValue,
                 sequenceType: 'nucleotide',
                 annotationProvider,
@@ -303,6 +313,28 @@ describe('getFilteredMutationOverTimeData', () => {
         });
     });
 
+    it('should remove date ranges that have no samples', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([someSubstitutionEntry, someDeletionEntry]);
+        data.set(someSubstitution, anotherTemporal, emptyMutationOverTimeValue);
+        data.set(someDeletion, anotherTemporal, emptyMutationOverTimeValue);
+
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            hideGaps: true,
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
+            sequenceType: 'nucleotide',
+            annotationProvider: () => {
+                return [];
+            },
+        });
+
+        expect(result.getSecondAxisKeys()).to.deep.equal([someTemporal]);
+    });
+
     const belowFilter = 0.1;
     const atFilterMin = 0.2;
     const inFilter = 0.5;
@@ -361,6 +393,12 @@ describe('getFilteredMutationOverTimeData', () => {
         proportion: inFilter,
         totalCount: 10,
     } satisfies MutationOverTimeMutationValue;
+    const emptyMutationOverTimeValue = {
+        type: 'value',
+        count: 0,
+        proportion: NaN,
+        totalCount: 0,
+    } satisfies MutationOverTimeMutationValue;
 
     function prepareMutationOverTimeData(
         mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -22,6 +22,7 @@ export type GetFilteredMutationOverTimeDataArgs = {
     displayedSegments: DisplayedSegment[];
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
+    hideGaps: boolean;
     displayMutations?: DisplayMutations;
     mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
@@ -34,6 +35,7 @@ export function getFilteredMutationOverTimeData({
     displayedSegments,
     displayedMutationTypes,
     proportionInterval,
+    hideGaps,
     mutationFilterValue,
     sequenceType,
     annotationProvider,
@@ -63,6 +65,14 @@ export function getFilteredMutationOverTimeData({
         filteredData.deleteRow(entry.mutation);
     });
 
+    if (hideGaps) {
+        const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
+            const vals = filteredData.getColumn(dateRange);
+            return !vals.some((v) => v?.type === 'value' && v.totalCount > 0);
+        });
+        dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
+    }
+
     return filteredData;
 }
 

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -8,6 +8,7 @@ import { getMutationOverTimeMock } from './__mockData__/mockConversion';
 import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
 import { withDisplayMutations } from './__mockData__/withDisplayMutations';
+import { withGaps } from './__mockData__/withGaps';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
     getMutationOverTimeMock(defaultMockData),
@@ -16,6 +17,7 @@ const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWor
     getMutationOverTimeMock(withDisplayMutations),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
     getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
+    getMutationOverTimeMock(withGaps),
 ];
 
 self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -35,6 +35,7 @@ const meta: Meta<MutationsOverTimeProps> = {
         lapisDateField: { control: 'text' },
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
+        hideGaps: { control: 'boolean' },
         pageSizes: { control: 'object' },
         useNewEndpoint: { control: 'boolean' },
     },
@@ -81,6 +82,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        hideGaps: false,
         useNewEndpoint: false,
         pageSizes: [10, 20, 30, 40, 50],
     },
@@ -113,6 +115,32 @@ export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimePr
     },
 };
 
+export const UsesHideGaps: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21652-'],
+    },
+    play: async ({ canvas, step }) => {
+        await expectDateRangeOnPage(canvas, '2024-04');
+
+        await step('hide gaps', async () => {
+            const hideGapsButton = canvas.getByRole('button', { name: 'Hide gaps' });
+            await userEvent.click(hideGapsButton);
+        });
+
+        const filteredDateRange = canvas.queryByText('2024-04');
+        await expect(filteredDateRange).not.toBeInTheDocument();
+
+        await step('un-hide gaps', async () => {
+            const hideGapsButton = canvas.getByRole('button', { name: 'Gaps hidden' });
+            await userEvent.click(hideGapsButton);
+        });
+
+        await expectDateRangeOnPage(canvas, '2024-04');
+    },
+};
+
 export const UsesPagination: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvas, step }) => {
@@ -175,6 +203,13 @@ async function expectMutationOnPage(canvas: Canvas, mutation: string) {
     });
 }
 
+async function expectDateRangeOnPage(canvas: Canvas, dateRange: string) {
+    await waitFor(async () => {
+        const dateRangeOnFirstPage = canvas.getAllByText(dateRange)[0];
+        await expect(dateRangeOnFirstPage).toBeVisible();
+    });
+}
+
 export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState, useEffect } from 'preact/hooks';
 import z from 'zod';
 
 // @ts-expect-error -- uses subpath imports and vite worker import
@@ -59,6 +59,7 @@ const mutationOverTimeSchema = z.object({
         min: z.number().min(0).max(1),
         max: z.number().min(0).max(1),
     }),
+    hideGaps: z.boolean().optional(),
     width: z.string(),
     height: z.string().optional(),
     pageSizes: pageSizesSchema,
@@ -154,6 +155,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
 
+    const [hideGaps, setHideGaps] = useState<boolean>(originalComponentProps.hideGaps ?? false);
+
+    useEffect(() => setHideGaps(originalComponentProps.hideGaps ?? false), [originalComponentProps.hideGaps]);
+
     const filteredData = useMemo(() => {
         return getFilteredMutationOverTimeData({
             data: mutationOverTimeData,
@@ -161,6 +166,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
+            hideGaps,
             mutationFilterValue,
             sequenceType: originalComponentProps.sequenceType,
             annotationProvider,
@@ -171,6 +177,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         displayedSegments,
         displayedMutationTypes,
         proportionInterval,
+        hideGaps,
         originalComponentProps.sequenceType,
         mutationFilterValue,
         annotationProvider,
@@ -205,6 +212,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             setDisplayedMutationTypes={setDisplayedMutationTypes}
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
+            hideGaps={hideGaps}
+            setHideGaps={setHideGaps}
             filteredData={filteredData}
             colorScale={colorScale}
             setColorScale={setColorScale}
@@ -229,6 +238,8 @@ type ToolbarProps = {
     setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    hideGaps: boolean;
+    setHideGaps: Dispatch<StateUpdater<boolean>>;
     filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
@@ -245,6 +256,8 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setDisplayedMutationTypes,
     proportionInterval,
     setProportionInterval,
+    hideGaps,
+    setHideGaps,
     filteredData,
     colorScale,
     setColorScale,
@@ -255,9 +268,6 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     return (
         <>
             <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
-            {activeTab === 'Grid' && (
-                <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
-            )}
             <SegmentSelector
                 displayedSegments={displayedSegments}
                 setDisplayedSegments={setDisplayedSegments}
@@ -273,6 +283,20 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
                 labelPrefix='Mean proportion'
             />
+            <button
+                className='btn btn-xs w-24'
+                onClick={() => setHideGaps((s) => !s)}
+                title={
+                    hideGaps
+                        ? 'Date ranges that do not contain data are excluded from the table'
+                        : 'Exclude date ranges without data from the table'
+                }
+            >
+                {hideGaps ? 'Gaps hidden' : 'Hide gaps'}
+            </button>
+            {activeTab === 'Grid' && (
+                <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            )}
             <CsvDownloadButton
                 className='btn btn-xs'
                 getData={() => getDownloadData(filteredData)}