@genspectrum/dashboard-components 0.11.6 → 0.12.0

package/src/preact/mutations/__mockData__/overallVariantCount.json

@@ -0,0 +1,14 @@
+{
+    "data": [
+        {
+            "count": 16616
+        }
+    ],
+    "info": {
+        "dataVersion": "1736354557",
+        "requestId": "a11bb8e3-cd57-4178-8f51-7ff1210ffebf",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2025-01-09T08:05:35.534992279",
+        "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.",
+        "lapisVersion": "0.3.10"
+    }
+}

package/src/preact/mutations/getMutationsTableData.spec.ts

@@ -22,9 +22,24 @@ describe('getMutationsTableData', () => {
 
         const proportionInterval = { min: 0, max: 1 };
 
-        const result = getMutationsTableData(data, proportionInterval);
+        const result = getMutationsTableData(data, data, 2, proportionInterval);
 
-        expect(result).toEqual(data);
+        expect(result).toEqual([
+            {
+                type: 'substitution' as const,
+                mutation: new SubstitutionClass('segment1', 'A', 'T', 123),
+                count: 1,
+                proportion: 0.1,
+                jaccardSimilarity: 0.5,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new DeletionClass('segment2', 'C', 123),
+                count: 2,
+                proportion: 0.2,
+                jaccardSimilarity: 1,
+            },
+        ]);
     });
 
     test('should filter out data below/above proportionInterval', () => {
@@ -64,7 +79,7 @@ describe('getMutationsTableData', () => {
 
         const proportionInterval = { min: 0.05, max: 0.9 };
 
-        const result = getMutationsTableData(data, proportionInterval);
+        const result = getMutationsTableData(data, data, 2, proportionInterval);
 
         expect(result).toEqual([
             {
@@ -72,12 +87,14 @@ describe('getMutationsTableData', () => {
                 type: 'substitution',
                 count: 1,
                 proportion: inInterval,
+                jaccardSimilarity: 0.5,
             },
             {
                 mutation: deletionInInterval,
                 type: 'deletion',
                 count: 2,
                 proportion: inInterval,
+                jaccardSimilarity: 1,
             },
         ]);
     });

package/src/preact/mutations/getMutationsTableData.ts

@@ -1,12 +1,17 @@
 import { type SubstitutionOrDeletionEntry } from '../../types';
 import { type ProportionInterval } from '../components/proportion-selector';
 
-export function getMutationsTableData(data: SubstitutionOrDeletionEntry[], proportionInterval: ProportionInterval) {
+export function getMutationsTableData(
+    data: SubstitutionOrDeletionEntry[],
+    baselineSubstitutionsOrDeletions: SubstitutionOrDeletionEntry[] | undefined,
+    overallVariantCount: number,
+    proportionInterval: ProportionInterval,
+) {
     const byProportion = (mutationEntry: SubstitutionOrDeletionEntry) => {
         return mutationEntry.proportion >= proportionInterval.min && mutationEntry.proportion <= proportionInterval.max;
     };
 
-    return data.filter(byProportion).map((mutationEntry) => {
+    const tableData = data.filter(byProportion).map((mutationEntry) => {
         return {
             mutation: mutationEntry.mutation,
             type: mutationEntry.type,
@@ -14,4 +19,34 @@ export function getMutationsTableData(data: SubstitutionOrDeletionEntry[], propo
             proportion: mutationEntry.proportion,
         };
     });
+
+    if (baselineSubstitutionsOrDeletions === undefined) {
+        return tableData;
+    }
+
+    const baselineMutationCounts = baselineSubstitutionsOrDeletions.reduce((baselineMutationCounts, mutation) => {
+        baselineMutationCounts.set(mutation.mutation.code, mutation.count);
+        return baselineMutationCounts;
+    }, new Map<string, number>());
+
+    return tableData.map((datum) => {
+        const baselineMutationCount = baselineMutationCounts.get(datum.mutation.code) || 0;
+        const jaccardSimilarity = calculateJaccardSimilarity(overallVariantCount, baselineMutationCount, datum.count);
+
+        return {
+            ...datum,
+            jaccardSimilarity,
+        };
+    });
 }
+
+/**
+ * Taken from https://github.com/GenSpectrum/cov-spectrum-website/blob/9372a618dfd2d0dc5106fb07dce4e9f02fe24471/src/components/VariantMutations.tsx#L484-L486
+ *
+ * @param variantCount The number of sequences of the variant
+ * @param mutationCount The number of sequences with the mutation
+ * @param variantWithMutationCount The number of sequences that belong to the variant and have the mutation
+ */
+const calculateJaccardSimilarity = (variantCount: number, mutationCount: number, variantWithMutationCount: number) => {
+    return variantWithMutationCount / (variantCount + mutationCount - variantWithMutationCount);
+};

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

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 
 import { getMutationsTableData } from './getMutationsTableData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
@@ -10,41 +11,60 @@ import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsTableProps {
     data: SubstitutionOrDeletionEntry[];
+    baselineSubstitutionsOrDeletions: SubstitutionOrDeletionEntry[] | undefined;
+    overallVariantCount: number;
     proportionInterval: ProportionInterval;
     pageSize: boolean | number;
 }
 
-const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval, pageSize }) => {
-    const getHeaders = () => {
-        return [
-            {
-                name: 'Mutation',
-                sort: {
-                    compare: (a: SubstitutionClass | DeletionClass, b: SubstitutionClass | DeletionClass) => {
-                        return sortSubstitutionsAndDeletions(a, b);
-                    },
+const MutationsTable: FunctionComponent<MutationsTableProps> = ({
+    data,
+    baselineSubstitutionsOrDeletions,
+    overallVariantCount,
+    proportionInterval,
+    pageSize,
+}) => {
+    const headers = [
+        {
+            name: 'Mutation',
+            sort: {
+                compare: (a: SubstitutionClass | DeletionClass, b: SubstitutionClass | DeletionClass) => {
+                    return sortSubstitutionsAndDeletions(a, b);
                 },
-                formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
             },
-            {
-                name: 'Type',
-                sort: true,
-            },
-            {
-                name: 'Count',
-                sort: true,
-            },
-            {
-                name: 'Proportion',
-                sort: true,
-                formatter: (cell: number) => formatProportion(cell),
-            },
-        ];
-    };
+            formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
+        },
+        {
+            name: 'Type',
+            sort: true,
+        },
+        {
+            name: 'Count',
+            sort: true,
+        },
+        {
+            name: 'Proportion',
+            sort: true,
+            formatter: (cell: number) => formatProportion(cell),
+        },
+    ];
+    if (baselineSubstitutionsOrDeletions !== undefined) {
+        headers.push({
+            name: 'Jaccard similarity',
+            sort: true,
+            formatter: (cell: number) => cell.toFixed(2),
+        });
+    }
 
-    const tableData = getMutationsTableData(data, proportionInterval).map((row) => Object.values(row));
+    const tableData = useMemo(
+        () =>
+            getMutationsTableData(data, baselineSubstitutionsOrDeletions, overallVariantCount, proportionInterval).map(
+                (row) => Object.values(row),
+            ),
+        [data, baselineSubstitutionsOrDeletions, overallVariantCount, proportionInterval],
+    );
 
-    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
+    return <Table data={tableData} columns={headers} pageSize={pageSize} />;
 };
 
 export default MutationsTable;

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

@@ -4,8 +4,15 @@ import { expect, waitFor, within } from '@storybook/test';
 import nucleotideInsertions from './__mockData__/nucleotideInsertions.json';
 import nucleotideMutations from './__mockData__/nucleotideMutations.json';
 import { Mutations, type MutationsProps } from './mutations';
-import { LAPIS_URL, NUCLEOTIDE_INSERTIONS_ENDPOINT, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import {
+    AGGREGATED_ENDPOINT,
+    LAPIS_URL,
+    NUCLEOTIDE_INSERTIONS_ENDPOINT,
+    NUCLEOTIDE_MUTATIONS_ENDPOINT,
+} from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import baselineNucleotideMutations from '../../preact/mutations/__mockData__/baselineNucleotideMutations.json';
+import overallVariantCount from '../../preact/mutations/__mockData__/overallVariantCount.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
@@ -34,14 +41,7 @@ const Template = {
     render: (args: MutationsProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <Mutations
-                    lapisFilter={args.lapisFilter}
-                    sequenceType={args.sequenceType}
-                    views={args.views}
-                    width={args.width}
-                    height={args.height}
-                    pageSize={args.pageSize}
-                />
+                <Mutations {...args} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -51,6 +51,7 @@ export const Default: StoryObj<MutationsProps> = {
     ...Template,
     args: {
         lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        baselineLapisFilter: { country: 'Switzerland', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
@@ -76,6 +77,37 @@ export const Default: StoryObj<MutationsProps> = {
                         body: nucleotideMutations,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'baselineNucleotideMutations',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            dateTo: '2022-01-01',
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: baselineNucleotideMutations,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'overallVariantCount',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateTo: '2022-01-01',
+                            fields: [],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: overallVariantCount,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideInsertions',

package/src/preact/mutations/mutations.tsx

@@ -7,7 +7,7 @@ import { getMutationsTableData } from './getMutationsTableData';
 import { MutationsGrid } from './mutations-grid';
 import { InsertionsTable } from './mutations-insertions-table';
 import MutationsTable from './mutations-table';
-import { filterMutationsData, queryMutationsData } from './queryMutations';
+import { filterMutationsData, type QueriedMutationsData, queryMutationsData } from './queryMutations';
 import {
     type InsertionEntry,
     lapisFilterSchema,
@@ -35,6 +35,7 @@ export type MutationsView = z.infer<typeof mutationsViewSchema>;
 
 const mutationsPropsSchema = z.object({
     lapisFilter: lapisFilterSchema,
+    baselineLapisFilter: lapisFilterSchema.optional(),
     sequenceType: sequenceTypeSchema,
     views: mutationsViewSchema.array(),
     pageSize: z.union([z.boolean(), z.number()]),
@@ -58,11 +59,11 @@ export const Mutations: FunctionComponent<MutationsProps> = (componentProps) =>
 
 export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
-    const { lapisFilter, sequenceType } = componentProps;
+    const { lapisFilter, baselineLapisFilter, sequenceType } = componentProps;
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationsData(lapisFilter, sequenceType, lapis);
-    }, [lapisFilter, sequenceType, lapis]);
+        return queryMutationsData(lapisFilter, baselineLapisFilter, sequenceType, lapis);
+    }, [lapisFilter, baselineLapisFilter, sequenceType, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -80,7 +81,7 @@ export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps
 };
 
 type MutationTabsProps = {
-    mutationsData: { insertions: InsertionEntry[]; substitutionsOrDeletions: SubstitutionOrDeletionEntry[] };
+    mutationsData: QueriedMutationsData;
     originalComponentProps: MutationsProps;
 };
 
@@ -103,6 +104,8 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, or
                     content: (
                         <MutationsTable
                             data={filteredData.tableData}
+                            baselineSubstitutionsOrDeletions={mutationsData.baselineSubstitutionsOrDeletions}
+                            overallVariantCount={mutationsData.overallVariantCount}
                             proportionInterval={proportionInterval}
                             pageSize={originalComponentProps.pageSize}
                         />
@@ -143,6 +146,8 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, or
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
             originalComponentProps={originalComponentProps}
+            baselineSubstitutionsOrDeletions={mutationsData.baselineSubstitutionsOrDeletions}
+            overallVariantCount={mutationsData.overallVariantCount}
         />
     );
 
@@ -159,6 +164,8 @@ type ToolbarProps = {
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
     originalComponentProps: MutationsProps;
+    baselineSubstitutionsOrDeletions: SubstitutionOrDeletionEntry[] | undefined;
+    overallVariantCount: number;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -171,6 +178,8 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     proportionInterval,
     setProportionInterval,
     originalComponentProps,
+    baselineSubstitutionsOrDeletions,
+    overallVariantCount,
 }) => {
     return (
         <>
@@ -190,7 +199,14 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     />
                     <CsvDownloadButton
                         className='mx-1 btn btn-xs'
-                        getData={() => getMutationsTableData(filteredData.tableData, proportionInterval)}
+                        getData={() =>
+                            getMutationsTableData(
+                                filteredData.tableData,
+                                baselineSubstitutionsOrDeletions,
+                                overallVariantCount,
+                                proportionInterval,
+                            )
+                        }
                         filename='substitutions_and_deletions.csv'
                     />
                 </>

package/src/preact/mutations/queryMutations.ts

@@ -1,30 +1,49 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
 import { queryInsertions } from '../../query/queryInsertions';
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
-import {
-    type InsertionEntry,
-    type LapisFilter,
-    type MutationEntry,
-    type SubstitutionOrDeletionEntry,
-} from '../../types';
+import type { InsertionEntry, LapisFilter, MutationEntry, SubstitutionOrDeletionEntry } from '../../types';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
 import { type DisplayedSegment } from '../components/segment-selector';
 
+export type QueriedMutationsData = {
+    insertions: InsertionEntry[];
+    substitutionsOrDeletions: SubstitutionOrDeletionEntry[];
+    baselineSubstitutionsOrDeletions: SubstitutionOrDeletionEntry[] | undefined;
+    overallVariantCount: number;
+};
+
 export async function queryMutationsData(
     lapisFilter: LapisFilter,
+    baselineLapisFilter: LapisFilter | undefined,
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
-) {
+): Promise<QueriedMutationsData> {
     const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis)).content;
+    const baselineSubstitutionsOrDeletions =
+        baselineLapisFilter === undefined
+            ? undefined
+            : (await querySubstitutionsOrDeletions(baselineLapisFilter, sequenceType, lapis)).content;
     const insertions = (await queryInsertions(lapisFilter, sequenceType, lapis)).content;
 
+    const aggregatedData = await new FetchAggregatedOperator<Record<string, string | null | number>>(
+        lapisFilter,
+        [],
+    ).evaluate(lapis);
+    if (aggregatedData.content.length === 0) {
+        throw new Error('No aggregated data found for the given filters - did LAPIS respond properly?');
+    }
+    const overallVariantCount = aggregatedData.content[0].count;
+
     return {
         substitutionsOrDeletions,
+        baselineSubstitutionsOrDeletions,
         insertions,
+        overallVariantCount,
     };
 }
 
 export function filterMutationsData(
-    data: { insertions: InsertionEntry[]; substitutionsOrDeletions: SubstitutionOrDeletionEntry[] },
+    data: QueriedMutationsData,
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],
 ) {
@@ -51,5 +70,6 @@ export function filterMutationsData(
         insertions: data.insertions.filter(bySelectedSegments),
         tableData: filteredSubstitutionsOrDeletions.filter(byDisplayedMutationTypes),
         gridData: filteredSubstitutionsOrDeletions,
+        baselineSubstitutionsOrDeletions: data.baselineSubstitutionsOrDeletions,
     };
 }