@genspectrum/dashboard-components 0.6.18 → 0.6.19

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

@@ -1,190 +1,207 @@
 import { describe, expect, it } from 'vitest';
 
-import { filterDisplayedSegments, filterMutationTypes, filterProportion } from './getFilteredMutationsOverTimeData';
+import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { Map2dBase } from '../../utils/map2d';
-import { Deletion, Substitution } from '../../utils/mutations';
-import { type Temporal } from '../../utils/temporal';
+import { type Deletion, type Substitution } from '../../utils/mutations';
+import { type TemporalClass } from '../../utils/temporalClass';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
 
 describe('getFilteredMutationOverTimeData', () => {
-    describe('filterDisplayedSegments', () => {
-        it('should filter by displayed segments', () => {
-            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
-
-            data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
-                count: 1,
-                proportion: 0.1,
-                totalCount: 10,
-            });
-            data.set(new Substitution('someOtherSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
-                count: 2,
-                proportion: 0.2,
-                totalCount: 10,
-            });
-
-            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');
-        });
+    it('should filter by displayed segments', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+
+        const result = getFilteredMutationOverTimeData(
+            data,
+            overallMutationData,
+            [
+                { segment: 'someSegment', checked: false, label: 'Some Segment' },
+                { segment: 'someOtherSegment', checked: true, label: 'Some Other Segment' },
+            ],
+            [],
+            proportionInterval,
+        );
+
+        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution]);
     });
 
-    describe('filterMutationTypes', () => {
-        it('should filter by mutation types', () => {
-            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+    it('should filter by mutation types', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+
+        const result = getFilteredMutationOverTimeData(
+            data,
+            overallMutationData,
+            [],
+            [
+                {
+                    type: 'substitution',
+                    checked: false,
+                    label: 'Substitution',
+                },
+                {
+                    type: 'deletion',
+                    checked: true,
+                    label: 'Deletion',
+                },
+            ],
+            proportionInterval,
+        );
+
+        expect(result.getFirstAxisKeys()).to.deep.equal([someDeletion]);
+    });
 
-            data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
-                count: 1,
-                proportion: 0.1,
-                totalCount: 10,
-            });
-            data.set(new Deletion('someOtherSegment', 'A', 123), yearMonthDay('2021-01-01'), {
-                count: 2,
-                proportion: 0.2,
-                totalCount: 10,
-            });
+    it('should remove mutations where overall proportion is below filter', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            { ...someSubstitutionEntry, proportion: belowFilter },
+            { ...anotherSubstitutionEntry, proportion: inFilter },
+            { ...someDeletionEntry, proportion: inFilter },
+        ]);
 
-            filterMutationTypes(
-                [
-                    { type: 'substitution', checked: false, label: 'Substitution' },
-                    { type: 'deletion', checked: true, label: 'Deletion' },
-                ],
-                data,
-            );
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            expect(data.getFirstAxisKeys().length).to.equal(1);
-            expect(data.getFirstAxisKeys()[0].type).to.equal('deletion');
-        });
+        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
 
-    describe('filterProportion', () => {
-        const belowFilter = 0.1;
-        const atFilterMin = 0.2;
-        const inFilter = 0.5;
-        const atFilterMax = 0.9;
-        const aboveFilter = 0.99;
-        const proportionInterval = { min: atFilterMin, max: atFilterMax };
-
-        const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
-        const someOtherMutation = new Substitution('someOtherSegment', 'A', 'G', 9);
-
-        it('should remove mutations where overall proportion is below filter', () => {
-            const data = getMutationOverTimeData();
-
-            filterProportion(data, getOverallMutationData(belowFilter), proportionInterval);
-
-            expect(
-                data.getAsArray({
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(0);
-        });
-
-        it('should remove mutations where overall proportion is above filter', () => {
-            const data = getMutationOverTimeData();
+    it('should remove mutations where overall proportion is above filter', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            { ...someSubstitutionEntry, proportion: aboveFilter },
+            { ...anotherSubstitutionEntry, proportion: inFilter },
+            { ...someDeletionEntry, proportion: inFilter },
+        ]);
 
-            filterProportion(data, getOverallMutationData(aboveFilter), proportionInterval);
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            expect(
-                data.getAsArray({
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(0);
-        });
+        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
+    });
 
-        it('should remove mutations where overall proportion is missing', () => {
-            const data = getMutationOverTimeData();
+    it('should not remove mutations where overall proportion is above filter but single proportion is below filter', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+        data.set(someSubstitution, someTemporal, { ...someMutationOverTimeValue, proportion: belowFilter });
 
-            filterProportion(data, getOverallMutationData(aboveFilter, someOtherMutation), proportionInterval);
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            expect(
-                data.getAsArray({
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(0);
-        });
+        expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
+    });
 
-        it('should not remove mutation where overall proportion is at lower border of filter', () => {
-            const data = getMutationOverTimeData();
+    it('should not remove mutations where overall proportion is below max but single proportion is above max', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+        data.set(someSubstitution, someTemporal, { ...someMutationOverTimeValue, proportion: aboveFilter });
 
-            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            expect(
-                data.getRow(someSubstitution, {
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(2);
-        });
+        expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
+    });
 
-        it('should not remove mutation where overall proportion is within filter', () => {
-            const data = getMutationOverTimeData();
+    it('should not remove mutations where overall proportion is at lower bound of filter', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            { ...someSubstitutionEntry, proportion: atFilterMin },
+            { ...anotherSubstitutionEntry, proportion: inFilter },
+            { ...someDeletionEntry, proportion: inFilter },
+        ]);
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+        expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
+    });
 
-            expect(
-                data.getRow(someSubstitution, {
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(2);
-        });
+    it('should not remove mutations where overall proportion is at upper bound of filter', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            { ...someSubstitutionEntry, proportion: atFilterMax },
+            { ...anotherSubstitutionEntry, proportion: inFilter },
+            { ...someDeletionEntry, proportion: inFilter },
+        ]);
 
-        it('should not remove mutation where overall proportion is at upper border of filter', () => {
-            const data = getMutationOverTimeData();
+        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
 
-            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+        expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
+    });
 
-            expect(
-                data.getRow(someSubstitution, {
-                    count: 0,
-                    proportion: 0,
-                    totalCount: 10,
-                }),
-            ).to.toHaveLength(2);
+    const belowFilter = 0.1;
+    const atFilterMin = 0.2;
+    const inFilter = 0.5;
+    const atFilterMax = 0.9;
+    const aboveFilter = 0.99;
+    const proportionInterval = { min: atFilterMin, max: atFilterMax };
+
+    const someSubstitution: Substitution = {
+        type: 'substitution',
+        valueAtReference: 'A',
+        substitutionValue: 'T',
+        code: 'A123T',
+        segment: 'someSegment',
+        position: 123,
+    };
+    const someSubstitutionEntry: SubstitutionEntry<Substitution> = {
+        type: 'substitution',
+        mutation: someSubstitution,
+        count: 234,
+        proportion: inFilter,
+    };
+
+    const anotherSubstitution: Substitution = {
+        type: 'substitution',
+        valueAtReference: 'G',
+        substitutionValue: 'C',
+        code: 'G345C',
+        segment: 'someOtherSegment',
+        position: 345,
+    };
+    const anotherSubstitutionEntry: SubstitutionEntry<Substitution> = {
+        type: 'substitution',
+        mutation: anotherSubstitution,
+        count: 456,
+        proportion: inFilter,
+    };
+
+    const someDeletion: Deletion = {
+        type: 'deletion',
+        valueAtReference: 'A',
+        segment: 'someSegment',
+        position: 567,
+        code: 'A123-',
+    };
+    const someDeletionEntry: DeletionEntry<Deletion> = {
+        type: 'deletion',
+        mutation: someDeletion,
+        count: 789,
+        proportion: inFilter,
+    };
+    const someTemporal = yearMonthDay('2021-01-01');
+    const anotherTemporal = yearMonthDay('2021-02-02');
+    const someMutationOverTimeValue = {
+        count: 1,
+        proportion: inFilter,
+        totalCount: 10,
+    };
+
+    function prepareMutationOverTimeData(
+        mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],
+        temporals: TemporalClass[] = [someTemporal, anotherTemporal],
+    ) {
+        const data = new Map2dBase<Substitution | Deletion, TemporalClass, MutationOverTimeMutationValue>();
+
+        temporals.forEach((temporal) => {
+            mutationEntries.forEach((entry) => {
+                data.set(entry.mutation, temporal, someMutationOverTimeValue);
+            });
         });
 
-        function getMutationOverTimeData() {
-            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
-            data.set(someSubstitution, yearMonthDay('2021-01-01'), {
-                count: 1,
-                proportion: 0.1,
-                totalCount: 10,
-            });
-            data.set(someSubstitution, yearMonthDay('2021-02-02'), {
-                count: 99,
-                proportion: 0.99,
-                totalCount: 10,
-            });
-            return data;
-        }
-
-        function getOverallMutationData(proportion: number = 0.1, mutation: Substitution = someSubstitution) {
-            return {
-                content: [
-                    {
-                        type: 'substitution' as const,
-                        count: -1,
-                        mutation,
-                        proportion,
-                    },
-                ],
-            };
-        }
-    });
+        return { data, overallMutationData: mutationEntries };
+    }
 });

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,76 +1,34 @@
-import { type Dataset } from '../../operator/Dataset';
-import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
-import { type DeletionEntry, type SubstitutionEntry } from '../../types';
+import { type MutationOverTimeData } from './mutations-over-time';
+import { type SubstitutionOrDeletionEntry } from '../../types';
 import { Map2dView } from '../../utils/map2d';
+import type { Deletion, Substitution } from '../../utils/mutations';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
 export function getFilteredMutationOverTimeData(
-    data: MutationOverTimeDataGroupedByMutation,
-    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>,
+    data: MutationOverTimeData,
+    overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[],
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],
     proportionInterval: { min: number; max: number },
 ) {
     const filteredData = new Map2dView(data);
-    filterDisplayedSegments(displayedSegments, filteredData);
-    filterMutationTypes(displayedMutationTypes, filteredData);
-    filterProportion(filteredData, overallMutationData, 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);
-                }
-            });
+    const mutationsToFilterOut = overallMutationData.filter((entry) => {
+        if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
+            return true;
         }
-    });
-}
-
-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);
-                }
-            });
+        if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
+            return true;
         }
+        return displayedMutationTypes.some(
+            (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
+        );
     });
-}
-
-export function filterProportion(
-    data: MutationOverTimeDataGroupedByMutation,
-    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>,
-    proportionInterval: {
-        min: number;
-        max: number;
-    },
-) {
-    const overallProportionsByMutation = overallMutationData.content.reduce(
-        (acc, { mutation, proportion }) => ({
-            ...acc,
-            [mutation.toString()]: proportion,
-        }),
-        {} as Record<string, number>,
-    );
 
-    data.getFirstAxisKeys().forEach((mutation) => {
-        const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
-
-        if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
-            data.deleteRow(mutation);
-        }
+    mutationsToFilterOut.forEach((entry) => {
+        filteredData.deleteRow(entry.mutation);
     });
+
+    return filteredData;
 }

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -0,0 +1,27 @@
+import { aminoAcidMutationsByDay } from './__mockData__/aminoAcidMutationsByDay';
+import { getMutationOverTimeWorkerFunction, type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
+import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
+import { workerFunction } from '../webWorkers/workerFunction';
+import { byWeek } from './__mockData__/byWeek';
+import { defaultMockData } from './__mockData__/defaultMockData';
+import { getMutationOverTimeMock } from './__mockData__/mockConversion';
+import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
+
+const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
+    getMutationOverTimeMock(defaultMockData),
+    getMutationOverTimeMock(showsMessageWhenTooManyMutations),
+    getMutationOverTimeMock(byWeek),
+    getMutationOverTimeMock(aminoAcidMutationsByDay),
+];
+
+self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {
+    await workerFunction(async () => {
+        const query = mockQueries.find((mockQuery) => JSON.stringify(mockQuery.query) === JSON.stringify(event.data));
+
+        if (query !== undefined) {
+            return query.response;
+        }
+
+        return await getMutationOverTimeWorkerFunction(event);
+    });
+};

package/src/preact/mutationsOverTime/mutationOverTimeWorker.ts

@@ -0,0 +1,29 @@
+import {
+    type MutationOverTimeMutationValue,
+    type MutationOverTimeQuery,
+    queryMutationsOverTimeData,
+} from '../../query/queryMutationsOverTime';
+import type { SubstitutionOrDeletionEntry } from '../../types';
+import { type Map2DContents } from '../../utils/map2d';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import type { Temporal } from '../../utils/temporalClass';
+import { workerFunction } from '../webWorkers/workerFunction';
+
+export type MutationOverTimeWorkerResponse = {
+    overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
+    mutationOverTimeSerialized: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+};
+
+export async function getMutationOverTimeWorkerFunction(event: MessageEvent<MutationOverTimeQuery>) {
+    const mutationOverTimeData = await queryMutationsOverTimeData(event.data);
+
+    const workerResponse: MutationOverTimeWorkerResponse = {
+        overallMutationData: mutationOverTimeData.overallMutationData,
+        mutationOverTimeSerialized: mutationOverTimeData.mutationOverTimeData.getContents(),
+    };
+    return workerResponse;
+}
+
+self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {
+    await workerFunction(() => getMutationOverTimeWorkerFunction(event));
+};

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

@@ -1,19 +1,16 @@
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import {
-    type MutationOverTimeDataGroupedByMutation,
-    type MutationOverTimeMutationValue,
-} from '../../query/queryMutationsOverTime';
+import { type MutationOverTimeData } from './mutations-over-time';
+import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { compareTemporal, type Temporal, YearMonthDay } from '../../utils/temporal';
+import { toTemporalClass, type Temporal, type TemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
-import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsOverTimeGridProps {
-    data: MutationOverTimeDataGroupedByMutation;
+    data: MutationOverTimeData;
     colorScale: ColorScale;
 }
 
@@ -21,10 +18,10 @@ const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MUTATION_CELL_WIDTH_REM = 8;
 
 const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data, colorScale }) => {
-    const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
+    const allMutations = data.getFirstAxisKeys();
     const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
 
-    const dates = data.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
+    const dates = data.getSecondAxisKeys();
 
     const [showProportionText, setShowProportionText] = useState(false);
     const gridRef = useRef<HTMLDivElement>(null);
@@ -128,12 +125,14 @@ const ProportionCell: FunctionComponent<{
     showProportionText: boolean;
     colorScale: ColorScale;
 }> = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
+    const dateClass = toTemporalClass(date);
+
     const tooltipContent = (
         <div>
             <p>
-                <span className='font-bold'>{date.englishName()}</span>
+                <span className='font-bold'>{dateClass.englishName()}</span>
             </p>
-            <p>({timeIntervalDisplay(date)})</p>
+            <p>({timeIntervalDisplay(dateClass)})</p>
             <p>{mutation.code}</p>
             <p>Proportion: {formatProportion(value.proportion)}</p>
             <p>
@@ -159,8 +158,8 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
-const timeIntervalDisplay = (date: Temporal) => {
-    if (date instanceof YearMonthDay) {
+const timeIntervalDisplay = (date: TemporalClass) => {
+    if (date instanceof YearMonthDayClass) {
         return date.toString();
     }
 
@@ -168,7 +167,7 @@ const timeIntervalDisplay = (date: Temporal) => {
 };
 
 const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
-    return <div className='text-center'>{mutation.toString()}</div>;
+    return <div className='text-center'>{mutation.code}</div>;
 };
 
 export default MutationsOverTimeGrid;