@genspectrum/dashboard-components 0.1.1

package/src/preact/mutationComparison/__mockData__/nucleotideMutationsSomeVariant.json

@@ -0,0 +1,304 @@
+{
+    "info": {
+        "dataVersion": 1709685650
+    },
+    "data": [
+        {
+            "mutation": "C29400T",
+            "proportion": 3.0892801977139327e-4,
+            "count": 5,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 29400
+        },
+        {
+            "mutation": "G210T",
+            "proportion": 0.014548332115899683,
+            "count": 239,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 210
+        },
+        {
+            "mutation": "C241T",
+            "proportion": 0.9940932894897089,
+            "count": 16325,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 241
+        },
+        {
+            "mutation": "C3037T",
+            "proportion": 0.9993348249380177,
+            "count": 16526,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 3037
+        },
+        {
+            "mutation": "C12876T",
+            "proportion": 1.8133462282398453e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 12876
+        },
+        {
+            "mutation": "G4181T",
+            "proportion": 4.8443744701465424e-4,
+            "count": 8,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 4181
+        },
+        {
+            "mutation": "C15495T",
+            "proportion": 6.0240963855421684e-5,
+            "count": 1,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 15495
+        },
+        {
+            "mutation": "C6402T",
+            "proportion": 0.005873448380260369,
+            "count": 97,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 6402
+        },
+        {
+            "mutation": "C18664T",
+            "proportion": 1.2061998673180146e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 18664
+        },
+        {
+            "mutation": "C7124T",
+            "proportion": 4.30530782950981e-4,
+            "count": 7,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 7124
+        },
+        {
+            "mutation": "T8654C",
+            "proportion": 1.2232415902140674e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "C",
+            "position": 8654
+        },
+        {
+            "mutation": "C8986T",
+            "proportion": 7.258210851025222e-4,
+            "count": 12,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 8986
+        },
+        {
+            "mutation": "G9053T",
+            "proportion": 4.836174585902551e-4,
+            "count": 8,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "T",
+            "position": 9053
+        },
+        {
+            "mutation": "A28030G",
+            "proportion": 3.661662394727206e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 28030
+        },
+        {
+            "mutation": "C10029T",
+            "proportion": 1.2097749818533752e-4,
+            "count": 2,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 10029
+        },
+        {
+            "mutation": "A11201G",
+            "proportion": 1.8129079042784627e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 11201
+        },
+        {
+            "mutation": "A11332G",
+            "proportion": 1.8144429660094352e-4,
+            "count": 3,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 11332
+        },
+        {
+            "mutation": "C14408T",
+            "proportion": 0.9990330573517858,
+            "count": 16531,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 14408
+        },
+        {
+            "mutation": "G15451A",
+            "proportion": 9.048681908668637e-4,
+            "count": 15,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "A",
+            "position": 15451
+        },
+        {
+            "mutation": "C16466T",
+            "proportion": 3.6175087423127937e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 16466
+        },
+        {
+            "mutation": "C21618G",
+            "proportion": 3.059975520195838e-4,
+            "count": 5,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "G",
+            "position": 21618
+        },
+        {
+            "mutation": "T22917G",
+            "proportion": 6.888346170705743e-4,
+            "count": 11,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "G",
+            "position": 22917
+        },
+        {
+            "mutation": "C22995A",
+            "proportion": 3.73366521468575e-4,
+            "count": 6,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "A",
+            "position": 22995
+        },
+        {
+            "mutation": "A23403G",
+            "proportion": 0.9993967909277356,
+            "count": 16568,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "G",
+            "position": 23403
+        },
+        {
+            "mutation": "C23604G",
+            "proportion": 0.001029616619223548,
+            "count": 17,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "G",
+            "position": 23604
+        },
+        {
+            "mutation": "A25983T",
+            "proportion": 6.0379181258302136e-5,
+            "count": 1,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "T",
+            "position": 25983
+        },
+        {
+            "mutation": "A17725C",
+            "proportion": 2.409058058299205e-4,
+            "count": 4,
+            "sequenceName": null,
+            "mutationFrom": "A",
+            "mutationTo": "C",
+            "position": 17725
+        },
+        {
+            "mutation": "G24410A",
+            "proportion": 6.027727546714888e-4,
+            "count": 10,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "A",
+            "position": 24410
+        },
+        {
+            "mutation": "C25469T",
+            "proportion": 0.001087087812537746,
+            "count": 18,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 25469
+        },
+        {
+            "mutation": "C14214T",
+            "proportion": 2.414875633904854e-4,
+            "count": 4,
+            "sequenceName": null,
+            "mutationFrom": "C",
+            "mutationTo": "T",
+            "position": 14214
+        },
+        {
+            "mutation": "T26767C",
+            "proportion": 0.0013264198721813579,
+            "count": 22,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "C",
+            "position": 26767
+        },
+        {
+            "mutation": "T1234C",
+            "proportion": 0.012345,
+            "count": 1234,
+            "sequenceName": null,
+            "mutationFrom": "T",
+            "mutationTo": "C",
+            "position": 1234
+        },
+        {
+            "mutation": "G199-",
+            "proportion": 6.128577557148986e-5,
+            "count": 1,
+            "sequenceName": null,
+            "mutationFrom": "G",
+            "mutationTo": "-",
+            "position": 199
+        }
+    ]
+}

package/src/preact/mutationComparison/fetchMutationData.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterMutationData } from './queryMutationData';
+import { type SubstitutionOrDeletion, type SubstitutionOrDeletionEntry } from '../../types';
+import { Deletion, Substitution } from '../../utils/mutations';
+
+const segment = 'testSegment';
+const displayedSegment = { segment, label: 'label', checked: true };
+
+describe('filterMutationData', () => {
+    function makeMutation({
+        segment,
+        type,
+    }: {
+        segment: string | undefined;
+        type: SubstitutionOrDeletion;
+    }): SubstitutionOrDeletionEntry {
+        switch (type) {
+            case 'substitution':
+                return {
+                    type: 'substitution',
+                    mutation: new Substitution(segment, 'A', 'B', 0),
+                    count: 0,
+                    proportion: 0,
+                };
+            case 'deletion':
+                return {
+                    type: 'deletion',
+                    mutation: new Deletion(segment, 'A', 0),
+                    count: 0,
+                    proportion: 0,
+                };
+        }
+    }
+
+    it('should filter deletions', () => {
+        const result = filterMutationData(
+            [
+                {
+                    displayName: 'test',
+                    data: [
+                        makeMutation({ segment, type: 'substitution' }),
+                        makeMutation({ segment, type: 'deletion' }),
+                    ],
+                },
+            ],
+            [displayedSegment],
+            [
+                { type: 'deletion', label: 'label', checked: true },
+                { type: 'substitution', label: 'label', checked: false },
+            ],
+        );
+
+        expect(result[0].data).to.have.length(1);
+        expect(result[0].data[0].type).to.equal('deletion');
+    });
+
+    it('should filter substitutions', () => {
+        const result = filterMutationData(
+            [
+                {
+                    displayName: 'test',
+                    data: [
+                        makeMutation({ segment, type: 'substitution' }),
+                        makeMutation({ segment, type: 'deletion' }),
+                    ],
+                },
+            ],
+            [displayedSegment],
+            [
+                { type: 'deletion', label: 'label', checked: false },
+                { type: 'substitution', label: 'label', checked: true },
+            ],
+        );
+
+        expect(result[0].data).to.have.length(1);
+        expect(result[0].data[0].type).to.equal('substitution');
+    });
+
+    it('should filter by segment', () => {
+        const otherSegment = 'otherSegment';
+        const result = filterMutationData(
+            [
+                {
+                    displayName: 'test',
+                    data: [
+                        makeMutation({ segment, type: 'substitution' }),
+                        makeMutation({ segment: otherSegment, type: 'substitution' }),
+                    ],
+                },
+            ],
+            [
+                { segment, label: 'label', checked: true },
+                { segment: otherSegment, label: 'label', checked: false },
+            ],
+            [{ type: 'substitution', label: 'label', checked: true }],
+        );
+
+        expect(result[0].data).to.have.length(1);
+        expect(result[0].data[0].mutation.segment).to.equal(segment);
+    });
+
+    it('should never filter out undefined segments', () => {
+        const result = filterMutationData(
+            [
+                {
+                    displayName: 'test',
+                    data: [makeMutation({ segment: undefined, type: 'substitution' })],
+                },
+            ],
+            [{ segment, label: 'label', checked: false }],
+            [{ type: 'substitution', label: 'label', checked: true }],
+        );
+
+        expect(result[0].data).to.have.length(1);
+        expect(result[0].data[0].mutation.segment).to.equal(undefined);
+    });
+});

package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+
+import { getMutationComparisonTableData } from './getMutationComparisonTableData';
+import { type MutationData } from './queryMutationData';
+import { type Dataset } from '../../operator/Dataset';
+import { type SubstitutionEntry } from '../../types';
+import { Substitution } from '../../utils/mutations';
+
+describe('getPrevalenceOverTimeTableData', () => {
+    it('should flatten the data to CSV format', () => {
+        const data: Dataset<MutationData> = {
+            content: [
+                {
+                    displayName: 'Test 1',
+                    data: [
+                        {
+                            type: 'substitution',
+                            mutation: new Substitution(undefined, 'A', 'T', 123),
+                            count: 1,
+                            proportion: 0.123,
+                        },
+                        {
+                            type: 'substitution',
+                            mutation: new Substitution(undefined, 'G', 'A', 234),
+                            count: 2,
+                            proportion: 0.567,
+                        },
+                    ],
+                },
+                {
+                    displayName: 'Test 2',
+                    data: [
+                        {
+                            type: 'substitution',
+                            mutation: new Substitution(undefined, 'A', 'T', 123),
+                            count: 3,
+                            proportion: 0.345,
+                        },
+                        {
+                            type: 'substitution',
+                            mutation: new Substitution(undefined, 'G', 'A', 234),
+                            count: 4,
+                            proportion: 0.789,
+                        },
+                    ],
+                },
+            ],
+        };
+
+        const result = getMutationComparisonTableData(data, { min: 0, max: 1 });
+
+        expect(result).toEqual([
+            {
+                mutation: 'A123T',
+                'Test 1 prevalence': 0.123,
+                'Test 2 prevalence': 0.345,
+            },
+            {
+                mutation: 'G234A',
+                'Test 1 prevalence': 0.567,
+                'Test 2 prevalence': 0.789,
+            },
+        ]);
+    });
+
+    it('should filter out when no proportion value is in interval', () => {
+        function makeSubstitutionWithProportionAtPosition(proportion: number, position: number): SubstitutionEntry {
+            return {
+                type: 'substitution',
+                mutation: new Substitution(undefined, 'A', 'T', position),
+                count: 1,
+                proportion,
+            };
+        }
+
+        const belowRange = 0.1;
+        const inRange = 0.2;
+        const aboveRange = 0.3;
+
+        const data: Dataset<MutationData> = {
+            content: [
+                {
+                    displayName: 'Test 1',
+                    data: [
+                        makeSubstitutionWithProportionAtPosition(belowRange, 100),
+                        makeSubstitutionWithProportionAtPosition(inRange, 200),
+                        makeSubstitutionWithProportionAtPosition(inRange, 300),
+                        makeSubstitutionWithProportionAtPosition(inRange, 400),
+                        makeSubstitutionWithProportionAtPosition(aboveRange, 500),
+                    ],
+                },
+                {
+                    displayName: 'Test 2',
+                    data: [
+                        makeSubstitutionWithProportionAtPosition(belowRange, 100),
+                        makeSubstitutionWithProportionAtPosition(belowRange, 200),
+                        makeSubstitutionWithProportionAtPosition(inRange, 300),
+                        makeSubstitutionWithProportionAtPosition(aboveRange, 400),
+                        makeSubstitutionWithProportionAtPosition(aboveRange, 500),
+                    ],
+                },
+            ],
+        };
+
+        const result = getMutationComparisonTableData(data, { min: 0.15, max: 0.25 });
+
+        expect(result).toEqual([
+            {
+                mutation: 'A200T',
+                'Test 1 prevalence': inRange,
+                'Test 2 prevalence': belowRange,
+            },
+            {
+                mutation: 'A300T',
+                'Test 1 prevalence': inRange,
+                'Test 2 prevalence': inRange,
+            },
+            {
+                mutation: 'A400T',
+                'Test 1 prevalence': inRange,
+                'Test 2 prevalence': aboveRange,
+            },
+        ]);
+    });
+});

package/src/preact/mutationComparison/getMutationComparisonTableData.ts

@@ -0,0 +1,40 @@
+import { type MutationData } from './queryMutationData';
+import { type Dataset } from '../../operator/Dataset';
+import { type ProportionInterval } from '../components/proportion-selector';
+
+type Proportions = {
+    [displayName: string]: number;
+};
+
+export function getMutationComparisonTableData(data: Dataset<MutationData>, proportionInterval: ProportionInterval) {
+    const mutationsToProportions = new Map<string, Proportions>();
+
+    for (const mutationData of data.content) {
+        for (const mutationEntry of mutationData.data) {
+            const mutation = mutationEntry.mutation.toString();
+            const proportions = mutationsToProportions.get(mutation) || {};
+            proportions[mutationData.displayName] = mutationEntry.proportion;
+            mutationsToProportions.set(mutation, proportions);
+        }
+    }
+
+    return [...mutationsToProportions.entries()]
+        .map(([mutation, proportions]) => {
+            return {
+                mutation,
+                ...data.content
+                    .map((mutationData) => {
+                        return {
+                            [`${mutationData.displayName} prevalence`]: proportions[mutationData.displayName] || 0,
+                        };
+                    })
+                    .reduce((acc, val) => ({ ...acc, ...val }), {}),
+            } as { mutation: string } & Proportions;
+        })
+        .filter((row) =>
+            Object.values(row).some(
+                (value) =>
+                    typeof value === 'number' && value >= proportionInterval.min && value <= proportionInterval.max,
+            ),
+        );
+}

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

@@ -0,0 +1,43 @@
+import { type FunctionComponent } from 'preact';
+
+import { getMutationComparisonTableData } from './getMutationComparisonTableData';
+import { type MutationData } from './queryMutationData';
+import { type Dataset } from '../../operator/Dataset';
+import { type ProportionInterval } from '../components/proportion-selector';
+import { Table } from '../components/table';
+import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
+import { formatProportion } from '../shared/table/formatProportion';
+
+export interface MutationsTableProps {
+    data: Dataset<MutationData>;
+    proportionInterval: ProportionInterval;
+}
+
+export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+    const getHeaders = () => {
+        return [
+            {
+                name: 'Mutation',
+                sort: {
+                    compare: (a: string, b: string) => {
+                        return sortSubstitutionsAndDeletions(a, b);
+                    },
+                },
+            },
+            {
+                name: 'Prevalence',
+                columns: data.content.map((mutationData) => {
+                    return {
+                        name: mutationData.displayName,
+                        sort: true,
+                        formatter: (cell: number) => formatProportion(cell),
+                    };
+                }),
+            },
+        ];
+    };
+
+    const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
+
+    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+};