@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest';
+
+import { getInsertionsTableData } from './getInsertionsTableData';
+import { Insertion } from '../../utils/mutations';
+
+describe('getInsertionsTableData', () => {
+    test('should return the correct data', () => {
+        const data = [
+            {
+                type: 'insertion' as const,
+                mutation: new Insertion('segment1', 123, 'T'),
+                count: 1,
+                proportion: 0.1,
+            },
+            {
+                type: 'insertion' as const,
+                mutation: new Insertion('segment2', 234, 'AAA'),
+                count: 2,
+                proportion: 0.2,
+            },
+        ];
+
+        const result = getInsertionsTableData(data);
+
+        expect(result).toEqual([
+            {
+                insertion: 'ins_segment1:123:T',
+                count: 1,
+            },
+            {
+                insertion: 'ins_segment2:234:AAA',
+                count: 2,
+            },
+        ]);
+    });
+});

package/src/preact/mutations/getInsertionsTableData.ts

@@ -0,0 +1,10 @@
+import { type InsertionEntry } from '../../types';
+
+export function getInsertionsTableData(data: InsertionEntry[]) {
+    return data.map((mutationEntry) => {
+        return {
+            insertion: mutationEntry.mutation.toString(),
+            count: mutationEntry.count,
+        };
+    });
+}

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

@@ -0,0 +1,135 @@
+import { describe, expect, test } from 'vitest';
+
+import { type BasesData, getMutationsGridData, type MutationsGridDataRow } from './getMutationsGridData';
+import { Deletion, Substitution } from '../../utils/mutations';
+
+describe('getMutationsGridData', () => {
+    test('should return the correct data', () => {
+        const data = [
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'C', 123),
+                count: 1,
+                proportion: 0.9,
+            },
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'C', 234),
+                count: 1,
+                proportion: 0.8,
+            },
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'G', 234),
+                count: 1,
+                proportion: 0.05,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new Deletion(undefined, 'T', 234),
+                count: 2,
+                proportion: 0.1,
+            },
+        ];
+
+        const proportionInterval = { min: 0, max: 1 };
+
+        const result = getMutationsGridData(data, 'nucleotide', proportionInterval);
+
+        const expected = [
+            {
+                position: '123',
+                ...({
+                    A: { proportion: 0, isReference: false },
+                    C: { proportion: 0.9, isReference: false },
+                    G: { proportion: 0, isReference: false },
+                    T: { proportion: 0.1, isReference: true },
+                    '-': { proportion: 0, isReference: false },
+                } as BasesData),
+            },
+            {
+                position: '234',
+                ...({
+                    A: { proportion: 0, isReference: false },
+                    C: { proportion: 0.8, isReference: false },
+                    G: { proportion: 0.05, isReference: false },
+                    T: { proportion: 0.05, isReference: true },
+                    '-': { proportion: 0.1, isReference: false },
+                } as BasesData),
+            },
+        ] as MutationsGridDataRow[];
+
+        expectGridDataIsApproximatelyEqual(result, expected);
+    });
+
+    test('should filter out rows where all entries are below/above proportionInterval', () => {
+        const belowInterval = 0.03;
+        const aboveInterval = 0.95;
+        const inInterval = 0.5;
+
+        const data = [
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'C', 123),
+                count: 1,
+                proportion: aboveInterval,
+            },
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'C', 234),
+                count: 1,
+                proportion: inInterval,
+            },
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution(undefined, 'T', 'G', 234),
+                count: 1,
+                proportion: belowInterval,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new Deletion(undefined, 'T', 234),
+                count: 2,
+                proportion: belowInterval,
+            },
+        ];
+
+        const proportionInterval = { min: 0.05, max: 0.9 };
+
+        const result = getMutationsGridData(data, 'nucleotide', proportionInterval);
+
+        const expectedBases: BasesData = {
+            A: { proportion: 0, isReference: false },
+            C: { proportion: inInterval, isReference: false },
+            G: { proportion: belowInterval, isReference: false },
+            T: { proportion: 0.44, isReference: true },
+            '-': { proportion: belowInterval, isReference: false },
+        };
+
+        const expected = [
+            {
+                position: '234',
+                ...expectedBases,
+            },
+        ] as MutationsGridDataRow[];
+
+        expectGridDataIsApproximatelyEqual(result, expected);
+    });
+
+    const expectGridDataIsApproximatelyEqual = (a: MutationsGridDataRow[], b: MutationsGridDataRow[]) => {
+        expect(a.length).toBe(b.length);
+        a.forEach((row, i) => expectRowsAreApproximatelyEqual(row, b[i]));
+    };
+
+    const expectRowsAreApproximatelyEqual = (a: MutationsGridDataRow, b: MutationsGridDataRow) => {
+        const { position: positionA, ...basesA } = a;
+        const { position: positionB, ...basesB } = b;
+        expect(positionA).toBe(positionB);
+
+        expect(Object.keys(basesA).length).toBe(Object.keys(basesB).length);
+        for (const base in basesA) {
+            expect(basesA[base].proportion).toBeCloseTo(basesB[base].proportion);
+            expect(basesA[base].isReference).toBe(basesB[base].isReference);
+        }
+    };
+});

package/src/preact/mutations/getMutationsGridData.ts

@@ -0,0 +1,92 @@
+import { type BaseCell } from './mutations-grid';
+import type { SequenceType, SubstitutionOrDeletionEntry } from '../../types';
+import { bases } from '../../utils/mutations';
+import { type ProportionInterval } from '../components/proportion-selector';
+import { sortMutationPositions } from '../shared/sort/sortMutationPositions';
+
+export const getMutationsGridData = (
+    data: SubstitutionOrDeletionEntry[],
+    sequenceType: SequenceType,
+    proportionInterval: ProportionInterval,
+) => {
+    return accumulateByPosition(data, sequenceType).filter((row) => byProportion(row, proportionInterval));
+};
+
+const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType: SequenceType) => {
+    const basesOfView = bases[sequenceType];
+    const positionsToProportionAtBase = new Map<string, Map<string | undefined, number>>();
+    const referenceBases = new Map<string, string | undefined>();
+
+    for (const mutationEntry of data) {
+        const position =
+            (mutationEntry.mutation.segment ? `${mutationEntry.mutation.segment}:` : '') +
+            mutationEntry.mutation.position;
+        referenceBases.set(position, mutationEntry.mutation.valueAtReference);
+
+        const initiallyFillPositionsToProportionAtBase = () => {
+            if (!positionsToProportionAtBase.has(position)) {
+                const empty = new Map();
+                basesOfView.forEach((base) => empty.set(base, 0));
+                empty.set(mutationEntry.mutation.valueAtReference, 1);
+                positionsToProportionAtBase.set(position, empty);
+            }
+        };
+        initiallyFillPositionsToProportionAtBase();
+
+        const substitutionValue =
+            mutationEntry.type === 'substitution' ? mutationEntry.mutation.substitutionValue : '-';
+
+        const subtractSubstitutionValue = () => {
+            const proportionAtBase = positionsToProportionAtBase.get(position)!;
+            proportionAtBase.set(substitutionValue, mutationEntry.proportion);
+            proportionAtBase.set(
+                mutationEntry.mutation.valueAtReference,
+                proportionAtBase.get(mutationEntry.mutation.valueAtReference)! - mutationEntry.proportion,
+            );
+        };
+        subtractSubstitutionValue();
+    }
+    const orderedPositionsToProportionAtBase = [...positionsToProportionAtBase.entries()]
+        .map(([position, proportionsAtBase]) => ({ position, proportions: proportionsAtBase }))
+        .sort((a, b) => {
+            return sortMutationPositions(a.position, b.position);
+        });
+
+    return orderedPositionsToProportionAtBase.map((proportionsForBaseAtPosition) => {
+        const proportions = bases[sequenceType].map((base) => {
+            return {
+                [base]: {
+                    proportion: proportionsForBaseAtPosition.proportions.get(base)!,
+                    isReference: base === referenceBases.get(proportionsForBaseAtPosition.position),
+                },
+            };
+        });
+
+        return {
+            position: proportionsForBaseAtPosition.position,
+            ...proportions.reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+        } as MutationsGridDataRow;
+    });
+};
+
+export type BasesData = {
+    [base: string]: BaseCell;
+};
+export type MutationsGridDataRow = BasesData & { position: string };
+
+const byProportion = (row: MutationsGridDataRow, proportionInterval: ProportionInterval) => {
+    const numbersAndIsReference = Object.values(row).filter(
+        (
+            cell,
+        ): cell is {
+            proportion: number;
+            isReference: boolean;
+        } => typeof cell === 'object',
+    );
+
+    return numbersAndIsReference.some((cell) => {
+        return (
+            !cell.isReference && cell.proportion >= proportionInterval.min && cell.proportion <= proportionInterval.max
+        );
+    });
+};

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

@@ -0,0 +1,94 @@
+import { describe, expect, test } from 'vitest';
+
+import { getMutationsTableData } from './getMutationsTableData';
+import { Deletion, Substitution } from '../../utils/mutations';
+
+describe('getMutationsTableData', () => {
+    test('should return the correct data', () => {
+        const data = [
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution('segment1', 'A', 'T', 123),
+                count: 1,
+                proportion: 0.1,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new Deletion('segment2', 'C', 123),
+                count: 2,
+                proportion: 0.2,
+            },
+        ];
+
+        const proportionInterval = { min: 0, max: 1 };
+
+        const result = getMutationsTableData(data, proportionInterval);
+
+        expect(result).toEqual([
+            {
+                mutation: 'segment1:A123T',
+                type: 'substitution',
+                count: 1,
+                proportion: 0.1,
+            },
+            {
+                mutation: 'segment2:C123-',
+                type: 'deletion',
+                count: 2,
+                proportion: 0.2,
+            },
+        ]);
+    });
+
+    test('should filter out data below/above proportionInterval', () => {
+        const belowInterval = 0.03;
+        const aboveInterval = 0.95;
+        const inInterval = 0.5;
+
+        const data = [
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution('segment1', 'A', 'T', 123),
+                count: 1,
+                proportion: inInterval,
+            },
+            {
+                type: 'substitution' as const,
+                mutation: new Substitution('segment1', 'A', 'T', 234),
+                count: 1,
+                proportion: belowInterval,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new Deletion('segment2', 'C', 123),
+                count: 2,
+                proportion: inInterval,
+            },
+            {
+                type: 'deletion' as const,
+                mutation: new Deletion('segment2', 'C', 456),
+                count: 2,
+                proportion: aboveInterval,
+            },
+        ];
+
+        const proportionInterval = { min: 0.05, max: 0.9 };
+
+        const result = getMutationsTableData(data, proportionInterval);
+
+        expect(result).toEqual([
+            {
+                mutation: 'segment1:A123T',
+                type: 'substitution',
+                count: 1,
+                proportion: inInterval,
+            },
+            {
+                mutation: 'segment2:C123-',
+                type: 'deletion',
+                count: 2,
+                proportion: inInterval,
+            },
+        ]);
+    });
+});

package/src/preact/mutations/getMutationsTableData.ts

@@ -0,0 +1,17 @@
+import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type ProportionInterval } from '../components/proportion-selector';
+
+export function getMutationsTableData(data: SubstitutionOrDeletionEntry[], proportionInterval: ProportionInterval) {
+    const byProportion = (mutationEntry: SubstitutionOrDeletionEntry) => {
+        return mutationEntry.proportion >= proportionInterval.min && mutationEntry.proportion <= proportionInterval.max;
+    };
+
+    return data.filter(byProportion).map((mutationEntry) => {
+        return {
+            mutation: mutationEntry.mutation.toString(),
+            type: mutationEntry.type,
+            count: mutationEntry.count,
+            proportion: mutationEntry.proportion,
+        };
+    });
+}

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

@@ -0,0 +1,84 @@
+import { type Row } from 'gridjs';
+import { type FunctionComponent } from 'preact';
+
+import { getMutationsGridData } from './getMutationsGridData';
+import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
+import { bases } from '../../utils/mutations';
+import { type ProportionInterval } from '../components/proportion-selector';
+import { Table, tableStyle } from '../components/table';
+import { sortMutationPositions } from '../shared/sort/sortMutationPositions';
+import { formatProportion } from '../shared/table/formatProportion';
+
+interface MutationsGridProps {
+    data: SubstitutionOrDeletionEntry[];
+    sequenceType: SequenceType;
+    proportionInterval: ProportionInterval;
+}
+
+export type BaseCell = {
+    proportion: number;
+    isReference: boolean;
+};
+
+export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({ data, sequenceType, proportionInterval }) => {
+    const getHeaders = () => {
+        return [
+            {
+                name: 'Position',
+                sort: {
+                    compare: (a: string, b: string) => {
+                        return sortMutationPositions(a, b);
+                    },
+                },
+            },
+            ...getBasesHeaders(),
+        ];
+    };
+
+    const getBasesHeaders = () => {
+        return bases[sequenceType].map((base) => {
+            return {
+                name: base,
+                sort: {
+                    compare: (a: BaseCell, b: BaseCell) => {
+                        const aProportion = a.proportion;
+                        const bProportion = b.proportion;
+                        if (aProportion < bProportion) {
+                            return -1;
+                        }
+                        if (aProportion > bProportion) {
+                            return 1;
+                        }
+
+                        return 0;
+                    },
+                },
+                formatter: (cell: BaseCell) => formatProportion(cell.proportion),
+                attributes: (cell: BaseCell, row: Row) => {
+                    // grid-js: the cell and row are null for header cells
+                    if (row === null) {
+                        return {};
+                    }
+
+                    return styleCells(cell);
+                },
+            };
+        });
+    };
+
+    const styleCells = (cell: BaseCell) => {
+        if (cell.isReference || cell.proportion < 0.0001) {
+            return {
+                style: {
+                    ...tableStyle.td,
+                    color: 'gray',
+                },
+            };
+        }
+        return {};
+    };
+
+    const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
+
+    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+};

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

@@ -0,0 +1,33 @@
+import { type FunctionComponent } from 'preact';
+
+import { getInsertionsTableData } from './getInsertionsTableData';
+import { type InsertionEntry } from '../../types';
+import { Table } from '../components/table';
+import { sortInsertions } from '../shared/sort/sortInsertions';
+
+export interface InsertionsTableProps {
+    data: InsertionEntry[];
+}
+
+export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data }) => {
+    const getHeaders = () => {
+        return [
+            {
+                name: 'Insertion',
+                sort: {
+                    compare: (a: string, b: string) => {
+                        return sortInsertions(a, b);
+                    },
+                },
+            },
+            {
+                name: 'Count',
+                sort: true,
+            },
+        ];
+    };
+
+    const tableData = getInsertionsTableData(data).map((row) => Object.values(row));
+
+    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+};

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

@@ -0,0 +1,47 @@
+import { type FunctionComponent } from 'preact';
+
+import { getMutationsTableData } from './getMutationsTableData';
+import { type SubstitutionOrDeletionEntry } from '../../types';
+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: SubstitutionOrDeletionEntry[];
+    proportionInterval: ProportionInterval;
+}
+
+const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+    const getHeaders = () => {
+        return [
+            {
+                name: 'Mutation',
+                sort: {
+                    compare: (a: string, b: string) => {
+                        return sortSubstitutionsAndDeletions(a, b);
+                    },
+                },
+            },
+            {
+                name: 'Type',
+                sort: true,
+            },
+            {
+                name: 'Count',
+                sort: true,
+            },
+            {
+                name: 'Proportion',
+                sort: true,
+                formatter: (cell: number) => formatProportion(cell),
+            },
+        ];
+    };
+
+    const tableData = getMutationsTableData(data, proportionInterval).map((row) => Object.values(row));
+
+    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+};
+
+export default MutationsTable;

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

@@ -0,0 +1,95 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+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 referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+const meta: Meta<MutationsProps> = {
+    title: 'Visualization/Mutations',
+    component: Mutations,
+    argTypes: {
+        variant: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['table', 'grid', 'insertions'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+export default meta;
+
+const Template = {
+    render: (args: MutationsProps) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <Mutations variant={args.variant} sequenceType={args.sequenceType} views={args.views} />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const Default: StoryObj<MutationsProps> = {
+    ...Template,
+    args: {
+        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        sequenceType: 'nucleotide',
+        views: ['grid', 'table', 'insertions'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'nucleotideMutations',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateTo: '2022-01-01',
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideInsertions',
+                        url: NUCLEOTIDE_INSERTIONS_ENDPOINT,
+                        body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideInsertions,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const GridTab: StoryObj<MutationsProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const mutationAboveThreshold = () => canvas.getAllByText('51.03%');
+        const mutationBelowThreshold = () => canvas.getAllByText('3.51%');
+
+        await step('All proportions are displayed, when one is above threshold', async () => {
+            await waitFor(() => expect(mutationAboveThreshold()[0]).toBeVisible());
+            await waitFor(() => expect(mutationBelowThreshold()[0]).toBeVisible());
+        });
+    },
+};