@genspectrum/dashboard-components 0.1.1

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -0,0 +1,122 @@
+import { type ActiveElement, Chart, type ChartConfiguration, type ChartEvent, registerables } from 'chart.js';
+import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
+import { type FunctionComponent } from 'preact';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+
+import { type MutationData } from './queryMutationData';
+import { type Dataset } from '../../operator/Dataset';
+import GsChart from '../components/chart';
+import { type ProportionInterval } from '../components/proportion-selector';
+
+Chart.register(...registerables, VennDiagramController, ArcSlice);
+
+export interface MutationComparisonVennProps {
+    data: Dataset<MutationData>;
+    proportionInterval: ProportionInterval;
+}
+
+export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennProps> = ({
+    data,
+    proportionInterval,
+}) => {
+    const divRef = useRef<HTMLDivElement>(null);
+    const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
+    const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
+
+    const sets = useMemo(
+        () =>
+            extractSets(
+                data.content
+                    .map((mutationData) => ({
+                        displayName: mutationData.displayName,
+                        data: mutationData.data.filter(
+                            (mutationEntry) =>
+                                mutationEntry.proportion >= proportionInterval.min &&
+                                mutationEntry.proportion <= proportionInterval.max,
+                        ),
+                    }))
+                    .map((mutationData) => {
+                        return {
+                            label: mutationData.displayName,
+                            values: mutationData.data.map((mutationEntry) => mutationEntry.mutation.toString()),
+                        };
+                    }),
+            ),
+        [data, proportionInterval],
+    );
+
+    useEffect(() => {
+        if (divRef.current === null) {
+            return;
+        }
+        if (selectedDatasetIndex === null) {
+            divRef.current.innerText = noElementSelectedMessage;
+            return;
+        }
+
+        const values = sets.datasets[0].data[selectedDatasetIndex].values;
+        const label = sets.datasets[0].data[selectedDatasetIndex].label;
+        divRef.current!.innerText = `${label}: ${values.join(', ')}` || '';
+    }, [divRef, selectedDatasetIndex, sets]);
+
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'venn',
+            data: sets,
+            options: {
+                scales: {
+                    x: {
+                        ticks: {
+                            color: 'black',
+                            font: {
+                                size: 20,
+                            },
+                        },
+                    },
+                    y: {
+                        ticks: {
+                            color: 'blue',
+                            font: {
+                                size: 20,
+                            },
+                        },
+                    },
+                },
+                events: ['click'],
+                onClick(_: ChartEvent, elements: ActiveElement[]) {
+                    if (elements.length === 0) {
+                        setSelectedDatasetIndex(null);
+                    }
+                },
+                backgroundColor: '#f5f5f5',
+                animation: false,
+                layout: {
+                    padding: 30,
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        filter: ({ dataIndex }) => {
+                            setSelectedDatasetIndex(dataIndex);
+                            return false;
+                        },
+                    },
+                },
+            },
+        }),
+        [sets],
+    );
+
+    if (data.content.length > 5) {
+        return <div>Too many variants to display. Maximum are five. </div>;
+    }
+
+    return (
+        <>
+            <GsChart configuration={config} />
+            <div class='flex flex-wrap break-words m-2' ref={divRef} />
+        </>
+    );
+};

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -0,0 +1,152 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+import nucleotideMutationsOtherVariant from './__mockData__/nucleotideMutationsOtherVariant.json';
+import nucleotideMutationsSomeVariant from './__mockData__/nucleotideMutationsSomeVariant.json';
+import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
+import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+const dateToSomeVariant = '2022-01-01';
+
+const dateFromOtherVariant = '2021-01-01';
+const dateToOtherVariant = '2022-01-02';
+
+const meta: Meta<MutationComparisonProps> = {
+    title: 'Visualization/Mutation comparison',
+    component: MutationComparison,
+    argTypes: {
+        variants: [{ control: 'object' }],
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['table', 'venn'],
+            control: { type: 'check' },
+        },
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'nucleotideMutationsSomeVariant',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateTo: dateToSomeVariant,
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutationsSomeVariant,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutationsOtherVariant',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateFrom: dateFromOtherVariant,
+                            dateTo: dateToOtherVariant,
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutationsOtherVariant,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<MutationComparisonProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <MutationComparison variants={args.variants} sequenceType={args.sequenceType} views={args.views} />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const TwoVariants: StoryObj<MutationComparisonProps> = {
+    ...Template,
+    args: {
+        variants: [
+            {
+                displayName: 'Some variant',
+                lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: dateToSomeVariant },
+            },
+            {
+                displayName: 'Other variant',
+                lapisFilter: {
+                    country: 'Switzerland',
+                    pangoLineage: 'B.1.1.7',
+                    dateFrom: dateFromOtherVariant,
+                    dateTo: dateToOtherVariant,
+                },
+            },
+        ],
+        sequenceType: 'nucleotide',
+        views: ['table', 'venn'],
+    },
+};
+
+export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {
+    ...TwoVariants,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const someSubstitution = () => canvas.queryByText('C241T');
+        const someDeletion = () => canvas.queryByText('G199-');
+
+        await waitFor(() => expect(someSubstitution()).toBeVisible());
+        await waitFor(() => expect(someDeletion()).toBeVisible());
+
+        canvas.getByRole('button', { name: /Types:/ }).click();
+        canvas.getByLabelText('Substitutions').click();
+
+        await waitFor(() => expect(someSubstitution()).not.toBeInTheDocument());
+        await waitFor(() => expect(someDeletion()).toBeVisible());
+    },
+};
+
+export const FilterByProportion: StoryObj<MutationComparisonProps> = {
+    ...TwoVariants,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const rareSubstitution = () => canvas.queryByText('T1234C');
+        const frequentSubstitution = () => canvas.queryByText('C241T');
+        const minInput = () => canvas.getAllByLabelText('%')[0];
+        const maxInput = () => canvas.getAllByLabelText('%')[1];
+
+        await waitFor(() => expect(rareSubstitution()).not.toBeInTheDocument());
+        await waitFor(() => expect(frequentSubstitution()).toBeVisible());
+
+        await userEvent.click(canvas.getByRole('button', { name: /Proportion/ }));
+        await userEvent.clear(minInput());
+        await userEvent.type(minInput(), '1');
+
+        await waitFor(() => expect(rareSubstitution()).toBeInTheDocument());
+        await waitFor(() => expect(frequentSubstitution()).toBeVisible());
+
+        await userEvent.clear(maxInput());
+        await userEvent.type(maxInput(), '50');
+
+        await waitFor(() => expect(rareSubstitution()).toBeInTheDocument());
+        await waitFor(() => expect(frequentSubstitution()).not.toBeInTheDocument());
+    },
+};

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -0,0 +1,179 @@
+import { type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+
+import { getMutationComparisonTableData } from './getMutationComparisonTableData';
+import { MutationComparisonTable } from './mutation-comparison-table';
+import { MutationComparisonVenn } from './mutation-comparison-venn';
+import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
+import { type LapisFilter, type SequenceType } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
+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 { 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 Tabs from '../components/tabs';
+import { useQuery } from '../useQuery';
+
+export type View = 'table' | 'venn';
+
+export interface MutationComparisonVariant {
+    lapisFilter: LapisFilter;
+    displayName: string;
+}
+
+export interface MutationComparisonProps {
+    variants: MutationComparisonVariant[];
+    sequenceType: SequenceType;
+    views: View[];
+}
+
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ variants, sequenceType, views }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryMutationData(variants, sequenceType, lapis);
+    }, [variants, sequenceType, lapis]);
+
+    const headline = 'Mutation comparison';
+
+    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 (
+        <Headline heading={headline}>
+            <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />
+        </Headline>
+    );
+};
+
+type MutationComparisonTabsProps = {
+    data: MutationData[];
+    views: View[];
+    sequenceType: SequenceType;
+};
+
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, views, sequenceType }) => {
+    const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
+    const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
+        { label: 'Substitutions', checked: true, type: 'substitution' },
+        { label: 'Deletions', checked: true, type: 'deletion' },
+    ]);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+
+    const filteredData = useMemo(
+        () => filterMutationData(data, displayedSegments, displayedMutationTypes),
+        [data, displayedSegments, displayedMutationTypes],
+    );
+
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'table':
+                return {
+                    title: 'Table',
+                    content: (
+                        <MutationComparisonTable
+                            data={{ content: filteredData }}
+                            proportionInterval={proportionInterval}
+                        />
+                    ),
+                };
+            case 'venn':
+                return {
+                    title: 'Venn',
+                    content: (
+                        <MutationComparisonVenn
+                            data={{ content: filteredData }}
+                            proportionInterval={proportionInterval}
+                        />
+                    ),
+                };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+
+    return (
+        <Tabs
+            tabs={tabs}
+            toolbar={
+                <Toolbar
+                    displayedSegments={displayedSegments}
+                    setDisplayedSegments={setDisplayedSegments}
+                    displayedMutationTypes={displayedMutationTypes}
+                    setDisplayedMutationTypes={setDisplayedMutationTypes}
+                    filteredData={filteredData}
+                    proportionInterval={proportionInterval}
+                    setProportionInterval={setProportionInterval}
+                />
+            }
+        />
+    );
+};
+
+type ToolbarProps = {
+    displayedSegments: DisplayedSegment[];
+    setDisplayedSegments: (segments: DisplayedSegment[]) => void;
+    displayedMutationTypes: DisplayedMutationType[];
+    setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
+    filteredData: MutationData[];
+    proportionInterval: ProportionInterval;
+    setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    displayedSegments,
+    setDisplayedSegments,
+    displayedMutationTypes,
+    setDisplayedMutationTypes,
+    filteredData,
+    proportionInterval,
+    setProportionInterval,
+}) => {
+    return (
+        <div class='flex flex-row'>
+            <ProportionSelectorDropdown
+                proportionInterval={proportionInterval}
+                setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
+                setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+            />
+            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <MutationTypeSelector
+                displayedMutationTypes={displayedMutationTypes}
+                setDisplayedMutationTypes={setDisplayedMutationTypes}
+            />
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
+                filename='mutation_comparison.csv'
+            />
+            <Info className='mx-1' content='Info for mutation comparison' />
+        </div>
+    );
+};

package/src/preact/mutationComparison/queryMutationData.ts

@@ -0,0 +1,53 @@
+import { type MutationComparisonVariant } from './mutation-comparison';
+import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
+import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type DisplayedSegment } from '../components/SegmentSelector';
+import { type DisplayedMutationType } from '../components/mutation-type-selector';
+
+export type MutationData = {
+    displayName: string;
+    data: SubstitutionOrDeletionEntry[];
+};
+
+export async function queryMutationData(
+    variants: MutationComparisonVariant[],
+    sequenceType: 'nucleotide' | 'amino acid',
+    lapis: string,
+) {
+    const mutationData = await Promise.all(
+        variants.map(async (variant) => {
+            return {
+                displayName: variant.displayName,
+                data: (await querySubstitutionsOrDeletions(variant.lapisFilter, sequenceType, lapis)).content,
+            };
+        }),
+    );
+    return { mutationData };
+}
+
+export function filterMutationData(
+    data: MutationData[],
+    displayedSegments: DisplayedSegment[],
+    displayedMutationTypes: DisplayedMutationType[],
+) {
+    const byDisplayedSegments = (mutationEntry: SubstitutionOrDeletionEntry) => {
+        if (mutationEntry.mutation.segment === undefined) {
+            return true;
+        }
+        return displayedSegments.some(
+            (displayedSegment) =>
+                displayedSegment.segment === mutationEntry.mutation.segment && displayedSegment.checked,
+        );
+    };
+    const byDisplayedMutationTypes = (mutationEntry: SubstitutionOrDeletionEntry) => {
+        return displayedMutationTypes.some(
+            (displayedMutationType) =>
+                displayedMutationType.checked && displayedMutationType.type === mutationEntry.type,
+        );
+    };
+
+    return data.map((mutationEntry) => ({
+        displayName: mutationEntry.displayName,
+        data: mutationEntry.data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes),
+    }));
+}

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

@@ -0,0 +1,164 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
+
+import { MutationFilter, type MutationFilterProps } from './mutation-filter';
+import { LAPIS_URL } from '../../constants';
+import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+const meta: Meta<MutationFilterProps> = {
+    title: 'Input/MutationFilter',
+    component: MutationFilter,
+    parameters: {
+        actions: {
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+        },
+        fetchMock: {},
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Default: StoryObj<MutationFilterProps> = {
+    render: () => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <MutationFilter />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField(canvas)).toBeEnabled();
+            });
+        });
+
+        await step('Enters an invalid mutation', async () => {
+            await submitMutation(canvas, 'notAMutation');
+            await expect(listenerMock).not.toHaveBeenCalled();
+
+            await userEvent.type(inputField(canvas), '{backspace>12/}');
+        });
+
+        await step('Enter a valid mutation', async () => {
+            await submitMutation(canvas, 'A123T');
+
+            await waitFor(() =>
+                expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+
+        await step('Enter a second valid nucleotide mutation', async () => {
+            await submitMutation(canvas, 'A234-');
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        nucleotideMutations: ['A123T', 'A234-'],
+                        aminoAcidMutations: [],
+                        nucleotideInsertions: [],
+                        aminoAcidInsertions: [],
+                    },
+                }),
+            );
+        });
+
+        await step('Enter another valid mutation', async () => {
+            await submitMutation(canvas, 'ins_123:AA');
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        nucleotideMutations: ['A123T', 'A234-'],
+                        aminoAcidMutations: [],
+                        nucleotideInsertions: ['ins_123:AA'],
+                        aminoAcidInsertions: [],
+                    },
+                }),
+            );
+        });
+
+        await step('Remove the first mutation', async () => {
+            const firstMutationDeleteButton = canvas.getAllByRole('button')[0];
+            await waitFor(() => fireEvent.click(firstMutationDeleteButton));
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        nucleotideMutations: ['A234-'],
+                        aminoAcidMutations: [],
+                        nucleotideInsertions: ['ins_123:AA'],
+                        aminoAcidInsertions: [],
+                    },
+                }),
+            );
+        });
+    },
+};
+
+export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField(canvas)).toBeEnabled();
+            });
+        });
+
+        await step('Move outside of input', async () => {
+            await submitMutation(canvas, 'A234T');
+            await submitMutation(canvas, 'S:A123G');
+            await submitMutation(canvas, 'ins_123:AAA');
+            await submitMutation(canvas, 'ins_S:123:AAA');
+            await userEvent.tab();
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        nucleotideMutations: ['A234T'],
+                        aminoAcidMutations: ['S:A123G'],
+                        nucleotideInsertions: ['ins_123:AAA'],
+                        aminoAcidInsertions: ['ins_S:123:AAA'],
+                    },
+                }),
+            );
+        });
+    },
+};
+
+const submitMutation = async (canvas: ReturnType<typeof within>, mutation: string) => {
+    await userEvent.type(inputField(canvas), mutation);
+    await waitFor(() => submitButton(canvas).click());
+};
+const inputField = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Enter a mutation');
+const submitButton = (canvas: ReturnType<typeof within>) => canvas.getByRole('button', { name: '+' });