@genspectrum/dashboard-components 0.6.2 → 0.6.3

package/src/preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_07.json

@@ -0,0 +1,9 @@
+{
+    "data": [],
+    "info": {
+        "dataVersion": "1720033519",
+        "requestId": "4701b007-bce8-49cf-b417-035785c0273b",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-07-17T14:53:28.668667270",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

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

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterDisplayedSegments, filterMutationTypes, filterProportion } from './getFilteredMutationsOverTimeData';
+import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { Map2d } from '../../utils/Map2d';
+import { Deletion, Substitution } from '../../utils/mutations';
+import { type Temporal } from '../../utils/temporal';
+import { yearMonthDay } from '../../utils/temporalTestHelpers';
+
+describe('getFilteredMutationOverTimeData', () => {
+    describe('filterDisplayedSegments', () => {
+        it('should filter by displayed segments', () => {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+
+            data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), 1);
+            data.set(new Substitution('someOtherSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), 2);
+
+            filterDisplayedSegments(
+                [
+                    { segment: 'someSegment', checked: false, label: 'Some Segment' },
+                    { segment: 'someOtherSegment', checked: true, label: 'Some Other Segment' },
+                ],
+                data,
+            );
+
+            expect(data.getFirstAxisKeys().length).to.equal(1);
+            expect(data.getFirstAxisKeys()[0].segment).to.equal('someOtherSegment');
+        });
+    });
+
+    describe('filterMutationTypes', () => {
+        it('should filter by mutation types', () => {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+
+            data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), 1);
+            data.set(new Deletion('someOtherSegment', 'A', 123), yearMonthDay('2021-01-01'), 2);
+
+            filterMutationTypes(
+                [
+                    { type: 'substitution', checked: false, label: 'Substitution' },
+                    { type: 'deletion', checked: true, label: 'Deletion' },
+                ],
+                data,
+            );
+
+            expect(data.getFirstAxisKeys().length).to.equal(1);
+            expect(data.getFirstAxisKeys()[0].type).to.equal('deletion');
+        });
+    });
+
+    describe('filterProportion', () => {
+        it('should filter by proportion', () => {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+
+            const belowFilter = 0.1;
+            const aboveFilter = 0.99;
+            const proportionInterval = { min: 0.2, max: 0.9 };
+
+            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
+            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
+            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
+
+            filterProportion(data, proportionInterval);
+
+            expect(data.getAsArray(0).length).to.equal(0);
+        });
+
+        it('should not filter if one proportion is within the interval', () => {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+
+            const belowFilter = 0.1;
+            const aboveFilter = 0.99;
+            const inFilter = 0.5;
+            const proportionInterval = { min: 0.2, max: 0.9 };
+
+            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
+            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
+            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
+            data.set(someSubstitution, yearMonthDay('2021-03-03'), inFilter);
+
+            filterProportion(data, proportionInterval);
+
+            expect(data.getRow(someSubstitution, 0).length).to.equal(3);
+        });
+    });
+});

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -0,0 +1,62 @@
+import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
+import type { DisplayedSegment } from '../components/SegmentSelector';
+import type { DisplayedMutationType } from '../components/mutation-type-selector';
+
+export function getFilteredMutationOverTimeData(
+    data: MutationOverTimeDataGroupedByMutation,
+    displayedSegments: DisplayedSegment[],
+    displayedMutationTypes: DisplayedMutationType[],
+    proportionInterval: { min: number; max: number },
+) {
+    const filteredData = data.copy();
+    filterDisplayedSegments(displayedSegments, filteredData);
+    filterMutationTypes(displayedMutationTypes, filteredData);
+    filterProportion(filteredData, proportionInterval);
+
+    return filteredData;
+}
+
+export function filterDisplayedSegments(
+    displayedSegments: DisplayedSegment[],
+    data: MutationOverTimeDataGroupedByMutation,
+) {
+    displayedSegments.forEach((segment) => {
+        if (!segment.checked) {
+            data.getFirstAxisKeys().forEach((mutation) => {
+                if (mutation.segment === segment.segment) {
+                    data.deleteRow(mutation);
+                }
+            });
+        }
+    });
+}
+
+export function filterMutationTypes(
+    displayedMutationTypes: DisplayedMutationType[],
+    data: MutationOverTimeDataGroupedByMutation,
+) {
+    displayedMutationTypes.forEach((mutationType) => {
+        if (!mutationType.checked) {
+            data.getFirstAxisKeys().forEach((mutation) => {
+                if (mutationType.type === mutation.type) {
+                    data.deleteRow(mutation);
+                }
+            });
+        }
+    });
+}
+
+export function filterProportion(
+    data: MutationOverTimeDataGroupedByMutation,
+    proportionInterval: {
+        min: number;
+        max: number;
+    },
+) {
+    data.getFirstAxisKeys().forEach((mutation) => {
+        const row = data.getRow(mutation, 0);
+        if (!row.some((value) => value >= proportionInterval.min && value <= proportionInterval.max)) {
+            data.deleteRow(mutation);
+        }
+    });
+}

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

@@ -0,0 +1,92 @@
+import { Fragment, type FunctionComponent } from 'preact';
+
+import {
+    type MutationOverTimeDataGroupedByMutation,
+    type MutationOverTimeMutationValue,
+} from '../../query/queryMutationsOverTime';
+import { type Deletion, type Substitution } from '../../utils/mutations';
+import { compareTemporal, type Temporal } from '../../utils/temporal';
+import { singleGraphColorRGBByName } from '../shared/charts/colors';
+import { formatProportion } from '../shared/table/formatProportion';
+
+export interface MutationsOverTimeGridProps {
+    data: MutationOverTimeDataGroupedByMutation;
+}
+
+const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data }) => {
+    const mutations = data.getFirstAxisKeys();
+    const dates = data.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                gridTemplateRows: `repeat(${mutations.length}, 24px)`,
+                gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`,
+            }}
+        >
+            {mutations.map((mutation, i) => {
+                return (
+                    <Fragment key={`fragment-${mutation.toString()}`}>
+                        <div
+                            key={`mutation-${mutation.toString()}`}
+                            style={{ gridRowStart: i + 1, gridColumnStart: 1 }}
+                        >
+                            <MutationCell mutation={mutation} />
+                        </div>
+                        {dates.map((date, j) => {
+                            const value = data.get(mutation, date) ?? 0;
+                            return (
+                                <div
+                                    style={{ gridRowStart: i + 1, gridColumnStart: j + 2 }}
+                                    key={`${mutation.toString()}-${date.toString()}`}
+                                >
+                                    <ProportionCell value={value} date={date} mutation={mutation} />
+                                </div>
+                            );
+                        })}
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+};
+
+const ProportionCell: FunctionComponent<{
+    value: MutationOverTimeMutationValue;
+    date: Temporal;
+    mutation: Substitution | Deletion;
+}> = ({ value }) => {
+    // TODO(#353): Add tooltip with date, mutation and proportion
+    return (
+        <>
+            <div className={'py-1'}>
+                <div
+                    style={{ backgroundColor: backgroundColor(value), color: textColor(value) }}
+                    className='text-center hover:font-bold text-xs'
+                >
+                    {formatProportion(value, 0)}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const backgroundColor = (proportion: number) => {
+    // TODO(#353): Make minAlpha and maxAlpha configurable
+    const minAlpha = 0.0;
+    const maxAlpha = 1;
+
+    const alpha = minAlpha + (maxAlpha - minAlpha) * proportion;
+    return singleGraphColorRGBByName('indigo', alpha);
+};
+
+const textColor = (proportion: number) => {
+    return proportion > 0.5 ? 'white' : 'black';
+};
+
+const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
+    return <div className='text-center'>{mutation.toString()}</div>;
+};
+
+export default MutationsOverTimeGrid;

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

@@ -0,0 +1,206 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import aggregated_date from './__mockData__/aggregated_date.json';
+import nucleotideMutation_01 from './__mockData__/nucleotideMutations_2024_01.json';
+import nucleotideMutation_02 from './__mockData__/nucleotideMutations_2024_02.json';
+import nucleotideMutation_03 from './__mockData__/nucleotideMutations_2024_03.json';
+import nucleotideMutation_04 from './__mockData__/nucleotideMutations_2024_04.json';
+import nucleotideMutation_05 from './__mockData__/nucleotideMutations_2024_05.json';
+import nucleotideMutation_06 from './__mockData__/nucleotideMutations_2024_06.json';
+import nucleotideMutation_07 from './__mockData__/nucleotideMutations_2024_07.json';
+import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
+import { AGGREGATED_ENDPOINT, LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+const meta: Meta<MutationsOverTimeProps> = {
+    title: 'Visualization/Mutation over time',
+    component: MutationsOverTime,
+    argTypes: {
+        lapisFilter: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['grid'],
+            control: { type: 'check' },
+        },
+        width: { control: 'text' },
+        height: { control: 'text' },
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        lapisDateField: { control: 'text' },
+    },
+};
+
+export default meta;
+
+const Template = {
+    render: (args: MutationsOverTimeProps) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <MutationsOverTime
+                    lapisFilter={args.lapisFilter}
+                    sequenceType={args.sequenceType}
+                    views={args.views}
+                    width={args.width}
+                    height={args.height}
+                    granularity={args.granularity}
+                    lapisDateField={args.lapisDateField}
+                />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const Default: StoryObj<MutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+        sequenceType: 'nucleotide',
+        views: ['grid'],
+        width: '100%',
+        height: '700px',
+        granularity: 'month',
+        lapisDateField: 'date',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated_dates',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-07-10',
+                            fields: ['date'],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_date,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_01',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-01',
+                            dateTo: '2024-01-31',
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_01,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_02',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-02-01',
+                            dateTo: '2024-02-29',
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_02,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_03',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-03-01',
+                            dateTo: '2024-03-31',
+                            minProportion: 0,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_03,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_04',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-04-01',
+                            dateTo: '2024-04-30',
+                            minProportion: 0,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_04,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_05',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-05-01',
+                            dateTo: '2024-05-31',
+                            minProportion: 0,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_05,
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_06',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-06-01',
+                            dateTo: '2024-06-30',
+                            minProportion: 0,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_06,
+                        },
+                    },
+                },
+
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_07',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-07-01',
+                            dateTo: '2024-07-31',
+                            minProportion: 0,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_07,
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

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

@@ -0,0 +1,170 @@
+import { type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+
+import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import MutationsOverTimeGrid from './mutations-over-time-grid';
+import {
+    type MutationOverTimeDataGroupedByMutation,
+    queryMutationsOverTimeData,
+} from '../../query/queryMutationsOverTime';
+import { type LapisFilter, type SequenceType, type TemporalGranularity } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import Info from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
+import { NoDataDisplay } from '../components/no-data-display';
+import type { ProportionInterval } from '../components/proportion-selector';
+import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
+import { ResizeContainer } from '../components/resize-container';
+import Tabs from '../components/tabs';
+import { useQuery } from '../useQuery';
+
+export type View = 'grid';
+
+export interface MutationsOverTimeInnerProps {
+    lapisFilter: LapisFilter;
+    sequenceType: SequenceType;
+    views: View[];
+    granularity: TemporalGranularity;
+    lapisDateField: string;
+}
+
+export interface MutationsOverTimeProps extends MutationsOverTimeInnerProps {
+    width: string;
+    height: string;
+}
+
+export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = ({ width, height, ...innerProps }) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <MutationsOverTimeInner {...innerProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerProps> = ({
+    lapisFilter,
+    sequenceType,
+    views,
+    granularity,
+    lapisDateField,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity);
+    }, [lapisFilter, sequenceType, lapis, granularity, lapisDateField]);
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        return <ErrorDisplay error={error} />;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    return <MutationsOverTimeTabs mutationOverTimeData={data} sequenceType={sequenceType} views={views} />;
+};
+
+type MutationOverTimeTabsProps = {
+    mutationOverTimeData: MutationOverTimeDataGroupedByMutation;
+    sequenceType: SequenceType;
+    views: View[];
+};
+
+const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
+    mutationOverTimeData,
+    sequenceType,
+    views,
+}) => {
+    const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
+
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
+        { label: 'Substitutions', checked: true, type: 'substitution' },
+        { label: 'Deletions', checked: true, type: 'deletion' },
+    ]);
+
+    const filteredData = useMemo(
+        () =>
+            getFilteredMutationOverTimeData(
+                mutationOverTimeData,
+                displayedSegments,
+                displayedMutationTypes,
+                proportionInterval,
+            ),
+        [mutationOverTimeData, displayedSegments, displayedMutationTypes, proportionInterval],
+    );
+
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'grid':
+                return {
+                    title: 'Grid',
+                    content: <MutationsOverTimeGrid data={filteredData} />,
+                };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+
+    const toolbar = () => (
+        <Toolbar
+            displayedSegments={displayedSegments}
+            setDisplayedSegments={setDisplayedSegments}
+            displayedMutationTypes={displayedMutationTypes}
+            setDisplayedMutationTypes={setDisplayedMutationTypes}
+            proportionInterval={proportionInterval}
+            setProportionInterval={setProportionInterval}
+        />
+    );
+
+    return <Tabs tabs={tabs} toolbar={toolbar} />;
+};
+
+type ToolbarProps = {
+    displayedSegments: DisplayedSegment[];
+    setDisplayedSegments: (segments: DisplayedSegment[]) => void;
+    displayedMutationTypes: DisplayedMutationType[];
+    setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
+    proportionInterval: ProportionInterval;
+    setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    displayedSegments,
+    setDisplayedSegments,
+    displayedMutationTypes,
+    setDisplayedMutationTypes,
+    proportionInterval,
+    setProportionInterval,
+}) => {
+    return (
+        <>
+            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <MutationTypeSelector
+                setDisplayedMutationTypes={setDisplayedMutationTypes}
+                displayedMutationTypes={displayedMutationTypes}
+            />
+            <>
+                <ProportionSelectorDropdown
+                    proportionInterval={proportionInterval}
+                    setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
+                    setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+                />
+                {/*    TODO(#362): Add download button */}
+            </>
+            <Info height={'100px'}>Info for mutations over time</Info>
+        </>
+    );
+};

package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts

@@ -21,7 +21,7 @@ export const getNumberOfSequencesOverTimeTableData = <DateRangeKey extends strin
         return [];
     }
 
-    const allDateRanges: (Temporal | null)[] = generateAllInRange(...minMax);
+    const allDateRanges: (Temporal | null)[] = generateAllInRange(minMax.min, minMax.max);
 
     if (allDateRangesThatOccurInData.has(null)) {
         allDateRanges.unshift(null);

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

@@ -33,6 +33,7 @@ export default {
         height: { control: 'text' },
         pageSize: { control: 'object' },
         yAxisMaxConfig: { control: 'object' },
+        lapisDateField: { control: 'text' },
     },
 };
 

package/src/preact/shared/table/formatProportion.ts

@@ -1,3 +1,3 @@
-export const formatProportion = (proportion: number) => {
-    return `${(proportion * 100).toFixed(2)}%`;
+export const formatProportion = (proportion: number, digits: number = 2) => {
+    return `${(proportion * 100).toFixed(digits)}%`;
 };