@genspectrum/dashboard-components 1.10.3 → 1.11.0

package/dist/util.d.ts

@@ -71,6 +71,19 @@ export declare type ConfidenceIntervalMethod = default_2.infer<typeof confidence
 
 declare const confidenceIntervalMethodSchema: default_2.ZodUnion<[default_2.ZodLiteral<"wilson">, default_2.ZodLiteral<"none">]>;
 
+export declare type CustomColumn = default_2.infer<typeof customColumnSchema>;
+
+declare const customColumnSchema: default_2.ZodObject<{
+    header: default_2.ZodString;
+    values: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodNumber]>>;
+}, "strip", default_2.ZodTypeAny, {
+    values: Record<string, string | number>;
+    header: string;
+}, {
+    values: Record<string, string | number>;
+    header: string;
+}>;
+
 export declare type DateRangeOption = default_2.infer<typeof dateRangeOptionSchema>;
 
 export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
@@ -958,7 +971,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -966,7 +983,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -974,7 +991,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -982,7 +1002,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -990,7 +1010,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -998,7 +1021,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1006,7 +1029,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1014,7 +1041,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1022,7 +1049,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1030,7 +1060,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1038,7 +1068,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1046,7 +1080,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1054,7 +1088,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1062,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1070,7 +1104,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1078,7 +1112,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1086,7 +1120,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1094,7 +1128,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1102,11 +1136,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1114,7 +1144,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1122,7 +1152,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1130,7 +1160,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1138,10 +1168,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1149,7 +1176,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1157,10 +1184,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1168,7 +1192,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1176,10 +1200,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1187,7 +1208,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1195,11 +1216,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1207,7 +1224,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,11 +1232,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1227,7 +1240,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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

@@ -45,7 +45,7 @@ export const NoValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
         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('2025-01-01 - 2025-12-31')).toBeVisible();
         await expect(canvas.getByText('A500-')).toBeVisible();
         await expect(canvas.getByText('No data')).toBeVisible();
     },
@@ -65,9 +65,13 @@ export const WithValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
     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();
+        await expect(canvas.getByText('50.00%')).toBeVisible();
+        await expect(canvas.getByText('100')).toBeVisible();
+        await expect(canvas.getByText('have the mutation A500- out of')).toBeVisible();
+        await expect(canvas.getByText('200')).toBeVisible();
+        await expect(canvas.getByText('with coverage at position 500.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
     },
 };
 
@@ -83,9 +87,10 @@ export const WithValueBelowThreshold: StoryObj<MutationsOverTimeGridTooltipProps
     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();
+        await expect(canvas.getByText('<0.10%')).toBeVisible();
+        await expect(canvas.getByText('None or less than 0.10% have the mutation.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
     },
 };
 
@@ -101,8 +106,8 @@ export const WithWastewaterValue: StoryObj<MutationsOverTimeGridTooltipProps> =
     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();
+        await expect(canvas.getByText('50.00%')).toBeVisible();
+        await expect(canvas.queryByText('total in this date range.')).not.toBeInTheDocument();
+        await expect(canvas.queryByText('coverage')).not.toBeInTheDocument();
     },
 };

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

@@ -21,60 +21,66 @@ export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGr
 }: MutationsOverTimeGridTooltipProps) => {
     const dateClass = toTemporalClass(date);
 
-    return (
-        <div className='text-center'>
-            <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);
+    const proportionText =
+        value === null
+            ? 'No data'
+            : value.type === 'belowThreshold'
+              ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`
+              : formatProportion(value.proportion);
 
     return (
-        <>
-            <p>Proportion: {proportion}</p>
-            <TooltipValueCountsDescription value={value} />
-        </>
+        <div>
+            <div className='flex flex-row justify-between gap-4 items-baseline'>
+                <div className='flex flex-col text-left'>
+                    <span className='font-bold'>{mutation.code}</span>
+                    <span>{proportionText}</span>
+                </div>
+                <div className='flex flex-col text-right'>
+                    <span className='font-bold'>{dateClass.englishName()}</span>
+                    <span className='text-gray-600'>{timeIntervalDisplay(dateClass)}</span>
+                </div>
+            </div>
+            {value !== null && (
+                <TooltipValueCountsDescription
+                    value={value}
+                    mutationCode={mutation.code}
+                    mutationPosition={mutation.position}
+                />
+            )}
+        </div>
     );
 };
 
 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 (
+    mutationCode: string;
+    mutationPosition: number;
+}> = ({ value, mutationCode, mutationPosition }) => {
+    if (value.type === 'wastewaterValue') {
+        return;
+    }
+    return (
+        <div className='mt-2'>
+            {value.type === 'belowThreshold' ? (
+                <p className='text-gray-600'>
+                    None or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the mutation.
+                </p>
+            ) : (
                 <>
-                    <p>{value.totalCount} samples are in the timeframe</p>
                     <p>
-                        {totalCountWithCoverage(value.count, value.proportion)} have coverage, of those {value.count}{' '}
-                        have the mutation
+                        {value.count} <span className='text-gray-600'>have the mutation {mutationCode} out of</span>
+                    </p>
+                    <p>
+                        {totalCountWithCoverage(value.count, value.proportion)}{' '}
+                        <span className='text-gray-600'>with coverage at position {mutationPosition}.</span>
                     </p>
                 </>
-            );
-    }
+            )}
+            <p>
+                {value.totalCount} <span className='text-gray-600'>total in this date range.</span>
+            </p>
+        </div>
+    );
 };
 
 function totalCountWithCoverage(count: number, proportion: number) {

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

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useMemo } from 'preact/hooks';
+import z from 'zod';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
@@ -24,29 +25,45 @@ import {
 
 const NON_BREAKING_SPACE = '\u00A0';
 
+export const customColumnSchema = z.object({
+    header: z.string(),
+    values: z.record(z.string(), z.union([z.string(), z.number()])),
+});
+export type CustomColumn = z.infer<typeof customColumnSchema>;
+
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
     sequenceType: SequenceType;
     pageSizes: PageSizes;
+    customColumns?: CustomColumn[];
     tooltipPortalTarget: HTMLElement | null;
 }
 
-type RowType = { mutation: Substitution | Deletion; values: (MutationOverTimeMutationValue | undefined)[] };
+type RowType = {
+    mutation: Substitution | Deletion;
+    values: (MutationOverTimeMutationValue | undefined)[];
+    customValues: (string | number | undefined)[];
+};
+
+const EMPTY_COLUMNS: CustomColumn[] = [];
 
 const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     data,
     colorScale,
     sequenceType,
     pageSizes,
+    customColumns = EMPTY_COLUMNS,
     tooltipPortalTarget,
 }) => {
     const tableData = useMemo(() => {
         const allMutations = data.getFirstAxisKeys();
-        return data.getAsArray().map((row, index) => {
-            return { mutation: allMutations[index], values: [...row] };
+        return data.getAsArray().map((row, index): RowType => {
+            const mutation = allMutations[index];
+            const customValues = customColumns.map((col) => col.values[mutation.code]);
+            return { mutation, values: [...row], customValues };
         });
-    }, [data]);
+    }, [data, customColumns]);
 
     const columns = useMemo(() => {
         const columnHelper = createColumnHelper<RowType>();
@@ -65,6 +82,17 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
             },
         });
 
+        const customColumnHeaders = customColumns.map((customCol, index) => {
+            return columnHelper.accessor((row) => row.customValues[index], {
+                id: `custom-${index}`,
+                header: () => <span>{customCol.header}</span>,
+                cell: ({ getValue }) => {
+                    const value = getValue();
+                    return <div className={'text-center'}>{value ?? ''}</div>;
+                },
+            });
+        });
+
         const dateHeaders = dates.map((date, index) => {
             return columnHelper.accessor((row) => row.values[index], {
                 id: `date-${index}`,
@@ -102,8 +130,8 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
             });
         });
 
-        return [mutationHeader, ...dateHeaders];
-    }, [colorScale, data, sequenceType, tooltipPortalTarget]);
+        return [mutationHeader, ...customColumnHeaders, ...dateHeaders];
+    }, [colorScale, data, sequenceType, customColumns, tooltipPortalTarget]);
 
     const { pageSize } = usePageSizeContext();
     const table = usePreactTable({

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

@@ -38,6 +38,7 @@ const meta: Meta<MutationsOverTimeProps> = {
         hideGaps: { control: 'boolean' },
         pageSizes: { control: 'object' },
         useNewEndpoint: { control: 'boolean' },
+        customColumns: { control: 'object' },
     },
     parameters: {
         fetchMock: {},
@@ -196,6 +197,32 @@ export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
     },
 };
 
+export const WithCustomColumns: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        customColumns: [
+            {
+                header: 'Jaccard Index',
+                values: {
+                    A19722G: 0.75,
+                    G21641T: 'Foobar',
+                },
+            },
+        ],
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('Jaccard Index')).toBeVisible(), {
+            timeout: 5000,
+        });
+
+        await waitFor(() => expect(canvas.getByText('0.75')).toBeVisible());
+
+        await waitFor(() => expect(canvas.getByText('Foobar')).toBeVisible());
+    },
+};
+
 async function expectMutationOnPage(canvas: Canvas, mutation: string) {
     await waitFor(async () => {
         const mutationOnFirstPage = canvas.getAllByText(mutation)[0];

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

@@ -11,7 +11,7 @@ import {
     type MutationFilter,
 } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
-import MutationsOverTimeGrid from './mutations-over-time-grid';
+import MutationsOverTimeGrid, { customColumnSchema } from './mutations-over-time-grid';
 import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
@@ -66,6 +66,7 @@ const mutationOverTimeSchema = z.object({
     width: z.string(),
     height: z.string().optional(),
     pageSizes: pageSizesSchema,
+    customColumns: z.array(customColumnSchema).optional(),
 });
 export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 
@@ -204,6 +205,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                             colorScale={colorScale}
                             sequenceType={originalComponentProps.sequenceType}
                             pageSizes={originalComponentProps.pageSizes}
+                            customColumns={originalComponentProps.customColumns}
                             tooltipPortalTarget={tooltipPortalTarget}
                         />
                     ),

package/src/utilEntrypoint.ts

@@ -51,3 +51,4 @@ export {
 } from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';
 
 export { type MeanProportionInterval } from './preact/mutationsOverTime/mutations-over-time';
+export { type CustomColumn } from './preact/mutationsOverTime/mutations-over-time-grid';