@genspectrum/dashboard-components 0.18.0 → 0.18.2

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type TemporalClass } from '../../utils/temporalClass';
@@ -240,10 +241,11 @@ describe('getFilteredMutationOverTimeData', () => {
     const someTemporal = yearMonthDay('2021-01-01');
     const anotherTemporal = yearMonthDay('2021-02-02');
     const someMutationOverTimeValue = {
+        type: 'value',
         count: 1,
         proportion: inFilter,
         totalCount: 10,
-    };
+    } satisfies MutationOverTimeMutationValue;
 
     function prepareMutationOverTimeData(
         mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],

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

@@ -0,0 +1,108 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+
+import {
+    MutationsOverTimeGridTooltip,
+    type MutationsOverTimeGridTooltipProps,
+} from './mutations-over-time-grid-tooltip';
+
+const meta: Meta<MutationsOverTimeGridTooltipProps> = {
+    title: 'Component/Mutation over time grid tooltip',
+    component: MutationsOverTimeGridTooltip,
+    argTypes: {
+        mutation: { control: 'object' },
+        date: { control: 'object' },
+        value: { control: 'object' },
+    },
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    render: (args: MutationsOverTimeGridTooltipProps) => <MutationsOverTimeGridTooltip {...args} />,
+    args: {
+        mutation: {
+            type: 'deletion',
+            position: 500,
+            code: 'A500-',
+            valueAtReference: 'A',
+        },
+        date: {
+            type: 'Year',
+            year: 2025,
+            dateString: '2025',
+        },
+        value: null,
+    },
+};
+
+export const NoValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('2025', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('(2025-01-01 - 2025-12-31)')).toBeVisible();
+        await expect(canvas.getByText('A500-')).toBeVisible();
+        await expect(canvas.getByText('No data')).toBeVisible();
+    },
+};
+
+export const WithValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0.5,
+            count: 100,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: 50.00%')).toBeVisible();
+        await expect(canvas.getByText('300 samples are in the timeframe')).toBeVisible();
+        await expect(canvas.getByText('200 have coverage, of those 100 have the mutation')).toBeVisible();
+    },
+};
+
+export const WithValueBelowThreshold: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'belowThreshold',
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: <0.10%')).toBeVisible();
+        await expect(canvas.getByText('300 samples are in the timeframe')).toBeVisible();
+        await expect(canvas.getByText('none or less than 0.10% have the mutation')).toBeVisible();
+    },
+};
+
+export const WithWastewaterValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'wastewaterValue',
+            proportion: 0.5,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: 50.00%')).toBeVisible();
+        await expect(canvas.queryByText('samples are in the timeframe')).not.toBeInTheDocument();
+        await expect(canvas.queryByText('have coverage')).not.toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,93 @@
+import type { FunctionComponent } from 'preact';
+
+import {
+    type MutationOverTimeMutationValue,
+    MUTATIONS_OVER_TIME_MIN_PROPORTION,
+} from '../../query/queryMutationsOverTime';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { formatProportion } from '../shared/table/formatProportion';
+
+export type MutationsOverTimeGridTooltipProps = {
+    mutation: Substitution | Deletion;
+    date: Temporal;
+    value: MutationOverTimeMutationValue;
+};
+
+export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGridTooltipProps> = ({
+    mutation,
+    date,
+    value,
+}: MutationsOverTimeGridTooltipProps) => {
+    const dateClass = toTemporalClass(date);
+
+    return (
+        <div>
+            <p>
+                <span className='font-bold'>{dateClass.englishName()}</span>
+            </p>
+            <p>({timeIntervalDisplay(dateClass)})</p>
+            <p>{mutation.code}</p>
+            <TooltipValueDescription value={value} />
+        </div>
+    );
+};
+
+const TooltipValueDescription: FunctionComponent<{ value: MutationOverTimeMutationValue }> = ({ value }) => {
+    if (value === null) {
+        return <p>No data</p>;
+    }
+
+    const proportion =
+        value.type === 'belowThreshold'
+            ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`
+            : formatProportion(value.proportion);
+
+    return (
+        <>
+            <p>Proportion: {proportion}</p>
+            <TooltipValueCountsDescription value={value} />
+        </>
+    );
+};
+
+const TooltipValueCountsDescription: FunctionComponent<{
+    value: NonNullable<MutationOverTimeMutationValue>;
+}> = ({ value }) => {
+    switch (value.type) {
+        case 'wastewaterValue':
+            return;
+        case 'belowThreshold':
+            return (
+                <>
+                    <p>{value.totalCount} samples are in the timeframe</p>
+                    <p>none or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the mutation</p>
+                </>
+            );
+        case 'value':
+            return (
+                <>
+                    <p>{value.totalCount} samples are in the timeframe</p>
+                    <p>
+                        {totalCountWithCoverage(value.count, value.proportion)} have coverage, of those {value.count}{' '}
+                        have the mutation
+                    </p>
+                </>
+            );
+    }
+};
+
+function totalCountWithCoverage(count: number, proportion: number) {
+    if (count === 0) {
+        return 0;
+    }
+    return Math.round(count / proportion);
+}
+
+const timeIntervalDisplay = (date: TemporalClass) => {
+    if (date instanceof YearMonthDayClass) {
+        return date.toString();
+    }
+
+    return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};

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

@@ -3,12 +3,13 @@ import { type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
+import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type SequenceType } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { type Temporal } from '../../utils/temporalClass';
 import { AnnotatedMutation } from '../components/annotated-mutation';
-import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
+import { type ColorScale, getColorWithinScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
@@ -178,47 +179,25 @@ const ProportionCell: FunctionComponent<{
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
 }> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
-    const dateClass = toTemporalClass(date);
-
-    const tooltipContent = (
-        <div>
-            <p>
-                <span className='font-bold'>{dateClass.englishName()}</span>
-            </p>
-            <p>({timeIntervalDisplay(dateClass)})</p>
-            <p>{mutation.code}</p>
-            {value === null ? (
-                <p>No data</p>
-            ) : (
-                <>
-                    <p>Proportion: {formatProportion(value.proportion)}</p>
-                    {value.count !== null && value.totalCount !== null && (
-                        <>
-                            <p>
-                                {value.count} / {totalCountWithCoverage(value.count, value.proportion)} with coverage
-                            </p>
-                            <p>{value.totalCount} in timeframe</p>
-                        </>
-                    )}
-                </>
-            )}
-        </div>
-    );
+    const proportion = value?.type === 'belowThreshold' ? 0 : value?.proportion;
 
     return (
         <div className={'py-1 w-full h-full'}>
-            <Tooltip content={tooltipContent} position={tooltipPosition}>
+            <Tooltip
+                content={<MutationsOverTimeGridTooltip mutation={mutation} date={date} value={value} />}
+                position={tooltipPosition}
+            >
                 <div
                     style={{
-                        backgroundColor: getColorWithingScale(value?.proportion, colorScale),
-                        color: getTextColorForScale(value?.proportion, colorScale),
+                        backgroundColor: getColorWithinScale(proportion, colorScale),
+                        color: getTextColorForScale(proportion, colorScale),
                     }}
                     className={`w-full h-full hover:font-bold text-xs group @container`}
                 >
                     {value === null ? (
-                        <span className={'invisible'}>No data</span>
+                        <span className='invisible'>No data</span>
                     ) : (
-                        <span className='invisible @[2rem]:visible'>{formatProportion(value.proportion, 0)}</span>
+                        <span className='invisible @[2rem]:visible'>{formatProportion(proportion ?? 0, 0)}</span>
                     )}
                 </div>
             </Tooltip>
@@ -226,19 +205,4 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
-function totalCountWithCoverage(count: number, proportion: number) {
-    if (count === 0) {
-        return 0;
-    }
-    return Math.round(count / proportion);
-}
-
-const timeIntervalDisplay = (date: TemporalClass) => {
-    if (date instanceof YearMonthDayClass) {
-        return date.toString();
-    }
-
-    return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
-};
-
 export default MutationsOverTimeGrid;

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

@@ -283,7 +283,8 @@ function getDownloadData(filteredData: MutationOverTimeDataMap) {
     return filteredData.getFirstAxisKeys().map((mutation) => {
         return dates.reduce(
             (accumulated, date) => {
-                const proportion = filteredData.get(mutation, date)?.proportion ?? '';
+                const value = filteredData.get(mutation, date);
+                const proportion = value?.type === 'value' || value?.type === 'wastewaterValue' ? value.proportion : '';
                 return {
                     ...accumulated,
                     [date.dateString]: proportion,

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.spec.ts

@@ -59,10 +59,10 @@ describe('groupMutationDataByLocation', () => {
             temporalCache.getYearMonthDay('2025-01-02'),
         ]);
         expect(location1Data.getAsArray()).to.deep.equal([
-            [{ count: null, proportion: 0.1, totalCount: null }, null],
+            [{ type: 'wastewaterValue', proportion: 0.1 }, null],
             [
-                { count: null, proportion: 0.2, totalCount: null },
-                { count: null, proportion: 0.3, totalCount: null },
+                { type: 'wastewaterValue', proportion: 0.2 },
+                { type: 'wastewaterValue', proportion: 0.3 },
             ],
         ]);
     });
@@ -96,8 +96,8 @@ describe('groupMutationDataByLocation', () => {
         expect(location1Data.getFirstAxisKeys()).to.deep.equal([mutation2, mutation3]);
         expect(location1Data.getSecondAxisKeys()).to.deep.equal([temporalCache.getYearMonthDay('2025-01-01')]);
         expect(location1Data.getAsArray()).to.deep.equal([
-            [{ count: null, proportion: 0.2, totalCount: null }],
-            [{ count: null, proportion: 0.3, totalCount: null }],
+            [{ type: 'wastewaterValue', proportion: 0.2 }],
+            [{ type: 'wastewaterValue', proportion: 0.3 }],
         ]);
     });
 

package/src/preact/wastewater/mutationsOverTime/computeWastewaterMutationsOverTimeDataPerLocation.ts

@@ -33,9 +33,7 @@ export function groupMutationDataByLocation(data: WastewaterData, sequenceType:
             map.set(
                 mutation.mutation,
                 row.date,
-                mutation.proportion !== null
-                    ? { proportion: mutation.proportion, count: null, totalCount: null }
-                    : null,
+                mutation.proportion !== null ? { type: 'wastewaterValue', proportion: mutation.proportion } : null,
             );
         }
     }

package/src/query/queryMutationsOverTime.spec.ts

@@ -101,14 +101,14 @@ describe('queryMutationsOverTime', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 12 },
-                { proportion: 0, count: 0, totalCount: 13 },
+                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
+                { type: 'belowThreshold', totalCount: 13 },
             ],
             [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0.2, count: 2, totalCount: 12 },
-                { proportion: 0.3, count: 3, totalCount: 13 },
+                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                { type: 'value', proportion: 0.2, count: 2, totalCount: 12 },
+                { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
             ],
         ]);
 
@@ -251,8 +251,16 @@ describe('queryMutationsOverTime', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, { proportion: 0, count: 0, totalCount: 13 }],
-            [{ proportion: 0.1, count: 1, totalCount: 11 }, null, { proportion: 0.3, count: 3, totalCount: 13 }],
+            [
+                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
+                null,
+                { type: 'belowThreshold', totalCount: 13 },
+            ],
+            [
+                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                null,
+                { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
+            ],
         ]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
@@ -444,8 +452,8 @@ describe('queryMutationsOverTime', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { proportion: 0.2, count: 2, totalCount: 11 },
-                { proportion: 0.3, count: 3, totalCount: 12 },
+                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
+                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
             ],
         ]);
 
@@ -536,8 +544,8 @@ describe('queryMutationsOverTime', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0.2, count: 2, totalCount: 12 },
+                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                { type: 'value', proportion: 0.2, count: 2, totalCount: 12 },
             ],
         ]);
 
@@ -598,13 +606,7 @@ describe('queryMutationsOverTime', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [
-                {
-                    proportion: 0.2,
-                    count: 2,
-                    totalCount: 11,
-                },
-            ],
+            [{ type: 'value', proportion: 0.2, count: 2, totalCount: 11 }],
         ]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
@@ -693,12 +695,12 @@ describe('queryMutationsOverTime', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 12 },
+                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 12 },
             ],
             [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0.2, count: 2, totalCount: 12 },
+                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                { type: 'value', proportion: 0.2, count: 2, totalCount: 12 },
             ],
         ]);
 
@@ -741,7 +743,7 @@ describe('queryMutationsOverTime', () => {
         expect(dates.length).toBe(0);
     });
 
-    it('should fill with 0 if the mutation does not exist in a date range but count > 0', async () => {
+    it('should fill with "belowThreshold" if the mutation does not exist in a date range but count > 0', async () => {
         const lapisFilter = { field1: 'value1', field2: 'value2' };
         const dateField = 'dateField';
 
@@ -820,8 +822,8 @@ describe('queryMutationsOverTime', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 11 },
+                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                { type: 'belowThreshold', totalCount: 11 },
             ],
         ]);
     });

package/src/query/queryMutationsOverTime.ts

@@ -34,13 +34,25 @@ export type MutationOverTimeData = {
     totalCount: number;
 };
 
-export type MutationOverTimeMutationValue = {
-    proportion: number;
-    count: number | null;
-    totalCount: number | null;
-} | null;
+export type MutationOverTimeMutationValue =
+    | {
+          type: 'value';
+          proportion: number;
+          count: number;
+          totalCount: number;
+      }
+    | {
+          type: 'wastewaterValue';
+          proportion: number;
+      }
+    | {
+          type: 'belowThreshold';
+          totalCount: number | null;
+      }
+    | null;
 
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
+export const MUTATIONS_OVER_TIME_MIN_PROPORTION = 0.001;
 
 export async function queryOverallMutationData({
     lapisFilter,
@@ -204,7 +216,7 @@ function fetchAndPrepareDates<LapisDateField extends string>(
 }
 
 function fetchAndPrepareSubstitutionsOrDeletions(filter: LapisFilter, sequenceType: SequenceType) {
-    return new FetchSubstitutionsOrDeletionsOperator(filter, sequenceType, 0.001);
+    return new FetchSubstitutionsOrDeletionsOperator(filter, sequenceType, MUTATIONS_OVER_TIME_MIN_PROPORTION);
 }
 
 export function serializeSubstitutionOrDeletion(mutation: Substitution | Deletion) {
@@ -248,6 +260,7 @@ export function groupByMutation(
 
             if (dataArray.get(mutation, date) !== undefined) {
                 dataArray.set(mutation, date, {
+                    type: 'value',
                     count: mutationEntry.count,
                     proportion: mutationEntry.proportion,
                     totalCount: mutationData.totalCount,
@@ -258,8 +271,7 @@ export function groupByMutation(
         for (const firstAxisKey of dataArray.getFirstAxisKeys()) {
             if (dataArray.get(firstAxisKey, date) === null) {
                 dataArray.set(firstAxisKey, date, {
-                    count: 0,
-                    proportion: 0,
+                    type: 'belowThreshold',
                     totalCount: mutationData.totalCount,
                 });
             }

package/src/web-components/input/gs-date-range-filter.stories.ts

@@ -98,7 +98,7 @@ export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryOb
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     earliestDate="${args.earliestDate}"
-                    value="${args.value}"
+                    value="${args.value ?? 'null'}"
                     width="${args.width}"
                     lapisDateField="${args.lapisDateField}"
                     placeholder="${args.placeholder}"

package/src/web-components/input/gs-date-range-filter.tsx

@@ -38,12 +38,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *  Use this event, when you want to use the filter directly as a LAPIS filter.
  *
  *
- * @fires {CustomEvent<{ string | {dateFrom: string, dateTo: string}}>} gs-date-range-option-changed
+ * @fires {CustomEvent<string | {dateFrom: string, dateTo: string} | null>} gs-date-range-option-changed
  * Fired when:
  * - The select field is changed,
  * - A date is selected in either of the date pickers,
- * - A date was typed into either of the date input fields, and the input field loses focus ("on blur").
- * Contains the selected dateRangeOption or when users select custom values it contains the selected dates.
+ * - A date was typed into either of the date input fields, and the input field loses focus ("on blur"),
+ * - The user deletes the current value by clicking the 'x' button.
+ * Contains the selected dateRangeOption or when users select custom values it contains the selected dates
+ * or `null` when the input was deleted.
  *
  * Use this event, when you want to control this component in your JS application.
  * You can supply the `detail` of this event to the `value` attribute of this component.
@@ -80,7 +82,7 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
     @property({
         converter: (value) => {
             if (value === null) {
-                return undefined;
+                return null;
             }
             try {
                 const result = JSON.parse(value) as unknown;
@@ -93,7 +95,7 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
             }
         },
     })
-    value: string | { dateFrom?: string; dateTo?: string } | undefined = undefined;
+    value: string | { dateFrom?: string; dateTo?: string } | null = null;
 
     /**
      * The width of the component.