@genspectrum/dashboard-components 0.17.1 → 0.18.1

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.tsx

@@ -3,12 +3,15 @@ import { type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import {
+    type MutationOverTimeMutationValue,
+    MUTATIONS_OVER_TIME_MIN_PROPORTION,
+} 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 { 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';
@@ -187,38 +190,26 @@ const ProportionCell: FunctionComponent<{
             </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>
-                        </>
-                    )}
-                </>
-            )}
+            <TooltipValueDescription value={value} />
         </div>
     );
 
+    const proportion = value?.type === 'belowThreshold' ? 0 : value?.proportion;
+
     return (
         <div className={'py-1 w-full h-full'}>
             <Tooltip content={tooltipContent} 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,6 +217,50 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
+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;

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

@@ -240,7 +240,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 labelPrefix='Mean proportion'
             />
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />
@@ -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/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -167,7 +167,7 @@ const Toolbar = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalC
                 />
             )}
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity)}
                 filename='number_of_sequences_over_time.csv'
             />

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

@@ -218,7 +218,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 />
             )}
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getPrevalenceOverTimeTableData(data, granularity)}
                 filename='prevalence_over_time.csv'
             />

package/src/preact/sequencesByLocation/sequences-by-location-map.tsx

@@ -106,7 +106,7 @@ const DataMatchInformation: FunctionComponent<DataMatchInformationProps> = ({
 
     return (
         <Modal
-            buttonClassName='text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border'
+            buttonClassName='text-sm absolute bottom-0 px-1 z-1001 bg-white rounded-sm border border-gray-200'
             modalContent={
                 <>
                     <InfoHeadline1>Sequences By Location - Map View</InfoHeadline1>

package/src/preact/sequencesByLocation/sequences-by-location.tsx

@@ -149,15 +149,11 @@ type ToolbarProps = {
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({ originalComponentProps, tableData }) => {
     return (
-        <div class='flex flex-row'>
-            <CsvDownloadButton
-                className='mx-1 btn btn-xs'
-                getData={() => tableData}
-                filename='sequences_by_location.csv'
-            />
+        <>
+            <CsvDownloadButton className='btn btn-xs' getData={() => tableData} filename='sequences_by_location.csv' />
             <SequencesByLocationMapInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
-        </div>
+        </>
     );
 };
 

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/styles/tailwind.css

@@ -1,3 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin "daisyui" {
+  themes: light --default;
+}
+@plugin "@iconify/tailwind4" {
+  prefixes: mdi, mdi-light;
+}
+
+@theme {
+  --container-2xs: 18rem;
+  --container-3xs: 16rem;
+  --container-4xs: 14rem;
+}

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

@@ -78,7 +78,7 @@ export default meta;
 export const Default: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
@@ -94,7 +94,7 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
 export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     earliestDate="${args.earliestDate}"

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

@@ -87,7 +87,7 @@ export default meta;
 const Template: StoryObj<Required<LineageFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-lineage-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}

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

@@ -67,7 +67,7 @@ export default meta;
 const Template: StoryObj<LocationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-location-filter
                     .fields=${args.fields}
                     .lapisFilter=${args.lapisFilter}

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

@@ -46,7 +46,7 @@ export default meta;
 const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
             </div>
         </gs-app>`;

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

@@ -86,7 +86,7 @@ export default meta;
 export const Default: StoryObj<Required<TextFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-text-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}