@genspectrum/dashboard-components 1.10.3 → 1.11.1

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> {
@@ -942,7 +955,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -950,7 +963,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -974,7 +987,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -982,7 +995,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -990,7 +1003,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -998,7 +1011,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1006,7 +1019,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1014,7 +1027,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1022,7 +1035,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1030,7 +1043,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1038,7 +1051,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1046,7 +1059,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1054,7 +1067,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1062,7 +1075,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1070,7 +1083,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1078,7 +1091,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1086,7 +1099,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1094,7 +1107,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1122,7 +1135,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1130,7 +1146,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1157,10 +1173,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1168,7 +1184,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1176,10 +1192,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1187,7 +1204,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': 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-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1227,7 +1240,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -68,7 +68,7 @@ export function getFilteredMutationOverTimeData({
     if (hideGaps) {
         const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
             const vals = filteredData.getColumn(dateRange);
-            return !vals.some((v) => v?.type === 'value' && v.totalCount > 0);
+            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
         });
         dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
     }

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,60 @@ 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-.')).toBeVisible();
+        await expect(canvas.getByText('200')).toBeVisible();
+        await expect(canvas.getByText('have coverage at position 500.')).toBeVisible();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithZero: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0,
+            count: 0,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('0.00%')).toBeVisible();
+        await expect(canvas.getByText('0')).toBeVisible();
+        await expect(canvas.getByText('have the mutation A500-.')).toBeVisible();
+        await expect(canvas.queryByText('with coverage at position 500.')).not.toBeInTheDocument();
+        await expect(canvas.getByText('300')).toBeVisible();
+        await expect(canvas.getByText('total in this date range.')).toBeVisible();
+    },
+};
+
+export const WithValueWithCoverage: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'valueWithCoverage',
+            count: 100,
+            coverage: 200,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        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 +134,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 +153,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,68 +21,110 @@ 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>
-    );
-};
+    let proportionText = 'No data';
 
-const TooltipValueDescription: FunctionComponent<{ value: MutationOverTimeMutationValue }> = ({ value }) => {
-    if (value === null) {
-        return <p>No data</p>;
+    if (value !== null) {
+        switch (value.type) {
+            case 'belowThreshold': {
+                proportionText = `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`;
+                break;
+            }
+            case 'value':
+            case 'wastewaterValue': {
+                proportionText = formatProportion(value.proportion);
+                break;
+            }
+            case 'valueWithCoverage': {
+                // value.coverage will always be non-zero if we're in this case
+                proportionText = formatProportion(value.count / value.coverage);
+                break;
+            }
+        }
     }
 
-    const proportion =
-        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 (
-                <>
-                    <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>
-                </>
-            );
+    mutationCode: string;
+    mutationPosition: number;
+}> = ({ value, mutationCode, mutationPosition }) => {
+    if (value.type === 'wastewaterValue') {
+        return;
     }
-};
+    return (
+        <div className='mt-2'>
+            {(() => {
+                switch (value.type) {
+                    case 'belowThreshold':
+                        return (
+                            <p className='text-gray-600'>
+                                None or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the
+                                mutation.
+                            </p>
+                        );
 
-function totalCountWithCoverage(count: number, proportion: number) {
-    if (count === 0) {
-        return 0;
-    }
-    return Math.round(count / proportion);
-}
+                    case 'value':
+                        return (
+                            <>
+                                <p>
+                                    {value.count}{' '}
+                                    <span className='text-gray-600'>have the mutation {mutationCode}.</span>
+                                </p>
+                                {value.proportion > 0 && (
+                                    <p>
+                                        {Math.round(value.count / value.proportion)}{' '}
+                                        <span className='text-gray-600'>
+                                            have coverage at position {mutationPosition}.
+                                        </span>
+                                    </p>
+                                )}
+                            </>
+                        );
+
+                    case 'valueWithCoverage':
+                        return (
+                            <>
+                                <p>
+                                    {value.count}{' '}
+                                    <span className='text-gray-600'>have the mutation {mutationCode} out of</span>
+                                </p>
+                                <p>
+                                    {value.coverage}{' '}
+                                    <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>
+    );
+};
 
 const timeIntervalDisplay = (date: TemporalClass) => {
     if (date instanceof YearMonthDayClass) {

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

@@ -1,9 +1,10 @@
 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';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { getProportion, type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type SequenceType } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type Temporal } from '../../utils/temporalClass';
@@ -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({
@@ -183,7 +211,7 @@ const ProportionCell: FunctionComponent<{
     colorScale: ColorScale;
     tooltipPortalTarget: HTMLElement | null;
 }> = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
-    const proportion = value?.type === 'belowThreshold' ? undefined : value?.proportion;
+    const proportion = getProportion(value);
 
     return (
         <div className={'py-1 w-full h-full'}>