@genspectrum/dashboard-components 0.6.9 → 0.6.10

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

@@ -61,38 +61,82 @@ describe('getFilteredMutationOverTimeData', () => {
     });
 
     describe('filterProportion', () => {
-        it('should filter by proportion', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+        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 belowFilter = { count: 1, proportion: 0.1 };
-            const aboveFilter = { count: 99, proportion: 0.99 };
-            const proportionInterval = { min: 0.2, max: 0.9 };
+        const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
+        const someOtherMutation = new Substitution('someOtherSegment', 'A', 'G', 9);
 
-            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
-            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
-            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
+        it('should remove mutations where overall proportion is below filter', () => {
+            const data = getMutationOverTimeData();
 
-            filterProportion(data, proportionInterval);
+            filterProportion(data, getOverallMutationData(belowFilter), proportionInterval);
 
-            expect(data.getAsArray({ count: 0, proportion: 0 }).length).to.equal(0);
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
         });
 
-        it('should not filter if one proportion is within the interval', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+        it('should remove mutations where overall proportion is above filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(aboveFilter), proportionInterval);
+
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
+        });
 
-            const belowFilter = { count: 1, proportion: 0.1 };
-            const aboveFilter = { count: 99, proportion: 0.99 };
-            const inFilter = { count: 5, proportion: 0.5 };
-            const proportionInterval = { min: 0.2, max: 0.9 };
+        it('should remove mutations where overall proportion is missing', () => {
+            const data = getMutationOverTimeData();
 
-            const someSubstitution = new Substitution('someSegment', 'A', 'T', 123);
-            data.set(someSubstitution, yearMonthDay('2021-01-01'), belowFilter);
-            data.set(someSubstitution, yearMonthDay('2021-02-02'), aboveFilter);
-            data.set(someSubstitution, yearMonthDay('2021-03-03'), inFilter);
+            filterProportion(data, getOverallMutationData(aboveFilter, someOtherMutation), proportionInterval);
 
-            filterProportion(data, proportionInterval);
+            expect(data.getAsArray({ count: 0, proportion: 0 })).to.toHaveLength(0);
+        });
+
+        it('should not remove mutation where overall proportion is at lower border of filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
 
-            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 }).length).to.equal(3);
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
         });
+
+        it('should not remove mutation where overall proportion is within filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
+        });
+
+        it('should not remove mutation where overall proportion is at upper border of filter', () => {
+            const data = getMutationOverTimeData();
+
+            filterProportion(data, getOverallMutationData(inFilter), proportionInterval);
+
+            expect(data.getRow(someSubstitution, { count: 0, proportion: 0 })).to.toHaveLength(2);
+        });
+
+        function getMutationOverTimeData() {
+            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            data.set(someSubstitution, yearMonthDay('2021-01-01'), { count: 1, proportion: 0.1 });
+            data.set(someSubstitution, yearMonthDay('2021-02-02'), { count: 99, proportion: 0.99 });
+            return data;
+        }
+
+        function getOverallMutationData(proportion: number = 0.1, mutation: Substitution = someSubstitution) {
+            return {
+                content: [
+                    {
+                        type: 'substitution' as const,
+                        count: -1,
+                        mutation,
+                        proportion,
+                    },
+                ],
+            };
+        }
     });
 });

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,9 +1,12 @@
+import { type Dataset } from '../../operator/Dataset';
 import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
+import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import type { DisplayedSegment } from '../components/SegmentSelector';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 
 export function getFilteredMutationOverTimeData(
     data: MutationOverTimeDataGroupedByMutation,
+    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>,
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],
     proportionInterval: { min: number; max: number },
@@ -11,7 +14,7 @@ export function getFilteredMutationOverTimeData(
     const filteredData = data.copy();
     filterDisplayedSegments(displayedSegments, filteredData);
     filterMutationTypes(displayedMutationTypes, filteredData);
-    filterProportion(filteredData, proportionInterval);
+    filterProportion(filteredData, overallMutationData, proportionInterval);
 
     return filteredData;
 }
@@ -48,18 +51,24 @@ export function filterMutationTypes(
 
 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 row = data.getRow(mutation, { count: 0, proportion: 0 });
-        if (
-            !row.some(
-                (value) => value.proportion >= proportionInterval.min && value.proportion <= proportionInterval.max,
-            )
-        ) {
+        const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
+
+        if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
             data.deleteRow(mutation);
         }
     });

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

@@ -14,6 +14,7 @@ import nucleotideMutation_tooManyMutations from './__mockData__/nucleotideMutati
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import nucleotideMutations_byMonthOverall from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_byMonthOverall.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
@@ -90,6 +91,22 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                         body: aggregated_date,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_overall',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-07-10',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations_byMonthOverall,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutations_01',

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

@@ -3,11 +3,19 @@ import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from
 
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
+import { type Dataset } from '../../operator/Dataset';
 import {
     type MutationOverTimeDataGroupedByMutation,
     queryMutationsOverTimeData,
+    queryOverallMutationData,
 } from '../../query/queryMutationsOverTime';
-import { type LapisFilter, type SequenceType, type TemporalGranularity } from '../../types';
+import {
+    type DeletionEntry,
+    type LapisFilter,
+    type SequenceType,
+    type SubstitutionEntry,
+    type TemporalGranularity,
+} from '../../types';
 import { compareTemporal } from '../../utils/temporal';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
@@ -16,6 +24,7 @@ import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-d
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -63,7 +72,11 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
 }) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
-        return queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity);
+        const [mutationOverTimeData, overallMutationData] = await Promise.all([
+            queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity),
+            queryOverallMutationData(lapisFilter, sequenceType, lapis),
+        ]);
+        return { mutationOverTimeData, overallMutationData };
     }, [lapisFilter, sequenceType, lapis, granularity, lapisDateField]);
 
     if (isLoading) {
@@ -78,19 +91,28 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
         return <NoDataDisplay />;
     }
 
-    return <MutationsOverTimeTabs mutationOverTimeData={data} sequenceType={sequenceType} views={views} />;
+    return (
+        <MutationsOverTimeTabs
+            overallMutationData={data.overallMutationData}
+            mutationOverTimeData={data.mutationOverTimeData}
+            sequenceType={sequenceType}
+            views={views}
+        />
+    );
 };
 
 type MutationOverTimeTabsProps = {
     mutationOverTimeData: MutationOverTimeDataGroupedByMutation;
     sequenceType: SequenceType;
     views: View[];
+    overallMutationData: Dataset<SubstitutionEntry | DeletionEntry>;
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeData,
     sequenceType,
     views,
+    overallMutationData,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
@@ -105,11 +127,12 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         () =>
             getFilteredMutationOverTimeData(
                 mutationOverTimeData,
+                overallMutationData,
                 displayedSegments,
                 displayedMutationTypes,
                 proportionInterval,
             ),
-        [mutationOverTimeData, displayedSegments, displayedMutationTypes, proportionInterval],
+        [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval],
     );
 
     const getTab = (view: View) => {
@@ -188,6 +211,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='mutations_over_time.csv'
             />
             <Info>Info for mutations over time</Info>
+            <Fullscreen />
         </>
     );
 };

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -13,6 +13,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -151,6 +152,7 @@ const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleTy
                 filename='number_of_sequences_over_time.csv'
             />
             <NumberSequencesOverTimeInfo />
+            <Fullscreen />
         </>
     );
 };

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -13,6 +13,7 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -230,6 +231,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             />
 
             <PrevalenceOverTimeInfo />
+            <Fullscreen />
         </>
     );
 };

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -10,6 +10,7 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
+import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -156,6 +157,7 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <Fullscreen />
         </>
     );
 };

package/src/query/queryMutationsOverTime.ts

@@ -36,9 +36,18 @@ export type MutationOverTimeDataGroupedByMutation = Map2d<
 
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 
+export async function queryOverallMutationData(
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    return fetchAndPrepareSubstitutionsOrDeletions(lapisFilter, sequenceType).evaluate(lapis, signal);
+}
+
 export async function queryMutationsOverTimeData(
     lapisFilter: LapisFilter,
-    sequenceType: 'nucleotide' | 'amino acid',
+    sequenceType: SequenceType,
     lapis: string,
     lapisDateField: string,
     granularity: TemporalGranularity,

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -20,6 +20,7 @@ import aminoAcidMutations_23_01_2024 from '../../preact/mutationsOverTime/__mock
 import aminoAcidMutations_24_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_24_01_2024.json';
 import aminoAcidMutations_25_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_25_01_2024.json';
 import aminoAcidMutations_26_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_26_01_2024.json';
+import aminoAcidMutations_byDayOverall from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_byDayOverall.json';
 import nucleotideMutation_01 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_01.json';
 import nucleotideMutation_02 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_02.json';
 import nucleotideMutation_03 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_03.json';
@@ -27,6 +28,8 @@ import nucleotideMutation_04 from '../../preact/mutationsOverTime/__mockData__/n
 import nucleotideMutation_05 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_05.json';
 import nucleotideMutation_06 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_06.json';
 import nucleotideMutation_07 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_07.json';
+import nucleotideMutations_byMonthOverall from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_byMonthOverall.json';
+import nucleotideMutations_byWeekOverall from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_byWeekOverall.json';
 import nucleotideMutation_week3 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week3_2024.json';
 import nucleotideMutation_week4 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week4_2024.json';
 import nucleotideMutation_week5 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week5_2024.json';
@@ -38,7 +41,6 @@ const codeExample = String.raw`
     lapisFilter='{ "pangoLineage": "JN.1*", "dateFrom": "2024-01-15", "dateTo": "2024-07-10" }'
     sequenceType="nucleotide"
     views='["grid"]'
-    headline="Mutations over time"
     width='100%'
     height='700px'
     granularity="month"
@@ -124,6 +126,22 @@ export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
                         body: aggregated_date,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations_overall',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-07-10',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations_byMonthOverall,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutations_01',
@@ -268,6 +286,22 @@ export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
                         body: aggregated_byWeek,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'nucleotideMutation_overall',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-02-11',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations_byWeekOverall,
+                    },
+                },
                 {
                     matcher: {
                         name: 'nucleotideMutation_week3',
@@ -359,6 +393,22 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
                         body: aggregated_byDay,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_overall',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-20',
+                            dateTo: '2024-01-26',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_byDayOverall,
+                    },
+                },
                 {
                     matcher: {
                         name: 'aminoAcidMutations_20_01_2024',