@genspectrum/dashboard-components 0.18.1 → 0.18.2

package/dist/util.d.ts

@@ -138,7 +138,7 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
 
 export declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
 
-declare const dateRangeValueSchema: default_2.ZodOptional<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
+declare const dateRangeValueSchema: default_2.ZodNullable<default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
     dateFrom: default_2.ZodOptional<default_2.ZodString>;
     dateTo: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
@@ -890,7 +890,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -898,7 +898,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -906,11 +906,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -918,7 +914,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -926,10 +922,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -937,7 +930,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -945,10 +938,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -956,7 +946,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -964,10 +954,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -975,7 +962,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -983,10 +970,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -994,7 +978,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1002,7 +986,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1010,7 +994,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,7 +1002,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1026,7 +1010,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1034,7 +1018,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1042,7 +1026,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1050,7 +1034,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1058,7 +1046,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1066,7 +1054,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1074,7 +1065,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1082,7 +1073,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1090,7 +1084,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1098,7 +1092,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1106,7 +1103,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1114,7 +1111,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1122,7 +1122,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1130,7 +1130,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1138,7 +1138,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-DkvWdq_G.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-ixHQkq8y.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.1",
+    "version": "0.18.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/dateRangeFilter/computeInitialValues.spec.ts

@@ -18,8 +18,8 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
-    it('should return undefined for unedfined value', () => {
-        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
+    it('should return undefined for null value', () => {
+        const result = computeInitialValues(null, earliestDate, dateRangeOptions);
 
         expect(result).toBeUndefined();
     });

package/src/preact/dateRangeFilter/computeInitialValues.ts

@@ -3,7 +3,7 @@ import { getDatesForSelectorValue, getSelectableOptions } from './selectableOpti
 import { UserFacingError } from '../components/error-display';
 
 export function computeInitialValues(value: DateRangeValue, earliestDate: string, dateRangeOptions: DateRangeOption[]) {
-    if (value === undefined) {
+    if (value === null) {
         return undefined;
     }
 

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -56,7 +56,7 @@ const meta: Meta<DateRangeFilterProps> = {
     args: {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
-        value: undefined,
+        value: null,
         lapisDateField: 'aDateColumn',
         width: '100%',
         placeholder,
@@ -194,16 +194,14 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
-            const [value, setValue] = useState<DateRangeValue | undefined>('Last month');
+            const [value, setValue] = useState<DateRangeValue>('Last month');
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
                 ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
-                    const newValue = (event as CustomEvent).detail;
-                    setValue(newValue ?? undefined);
+                    setValue(event.detail);
                 });
             }, []);
-
             return (
                 <div ref={ref}>
                     <LapisUrlContextProvider value={LAPIS_URL}>

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -179,13 +179,18 @@ export const DateRangeFilterInner = ({
     };
 
     const fireOptionChangedEvent = (state: DateRangeFilterState) => {
-        const eventDetail =
-            state?.label === customOption
-                ? {
-                      dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
-                      dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
-                  }
-                : state?.label;
+        const eventDetail = (() => {
+            if (state === null) {
+                return null;
+            }
+            if (state.label === customOption) {
+                return {
+                    dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
+                    dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
+                };
+            }
+            return state.label;
+        })();
 
         divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
     };

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -30,7 +30,7 @@ export const dateRangeValueSchema = z
             dateTo: z.string().date().optional(),
         }),
     ])
-    .optional();
+    .nullable();
 
 export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 

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()}`;
+};