@genspectrum/dashboard-components 1.12.0 → 1.14.0

package/dist/util.d.ts

@@ -734,6 +734,141 @@ export declare type PrevalenceOverTimeView = default_2.infer<typeof prevalenceOv
 
 declare const prevalenceOverTimeViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"bar">, default_2.ZodLiteral<"line">, default_2.ZodLiteral<"bubble">]>;
 
+export declare type QueriesOverTimeProps = default_2.infer<typeof queriesOverTimeSchema>;
+
+declare const queriesOverTimeSchema: default_2.ZodObject<{
+    lapisFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
+        nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+        aminoAcidMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+        nucleotideInsertions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+        aminoAcidInsertions: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
+    }, "strip", default_2.ZodTypeAny, {
+        nucleotideMutations?: string[] | undefined;
+        aminoAcidMutations?: string[] | undefined;
+        nucleotideInsertions?: string[] | undefined;
+        aminoAcidInsertions?: string[] | undefined;
+    }, {
+        nucleotideMutations?: string[] | undefined;
+        aminoAcidMutations?: string[] | undefined;
+        nucleotideInsertions?: string[] | undefined;
+        aminoAcidInsertions?: string[] | undefined;
+    }>>;
+    queries: default_2.ZodArray<default_2.ZodObject<{
+        displayLabel: default_2.ZodString;
+        countQuery: default_2.ZodString;
+        coverageQuery: default_2.ZodString;
+    }, "strip", default_2.ZodTypeAny, {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+    }, {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+    }>, "many">;
+    views: default_2.ZodArray<default_2.ZodLiteral<"grid">, "many">;
+    granularity: default_2.ZodUnion<[default_2.ZodLiteral<"day">, default_2.ZodLiteral<"week">, default_2.ZodLiteral<"month">, default_2.ZodLiteral<"year">]>;
+    lapisDateField: default_2.ZodString;
+    initialMeanProportionInterval: default_2.ZodObject<{
+        min: default_2.ZodNumber;
+        max: default_2.ZodNumber;
+    }, "strip", default_2.ZodTypeAny, {
+        min: number;
+        max: number;
+    }, {
+        min: number;
+        max: number;
+    }>;
+    hideGaps: default_2.ZodOptional<default_2.ZodBoolean>;
+    width: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
+    pageSizes: default_2.ZodUnion<[default_2.ZodArray<default_2.ZodNumber, "many">, default_2.ZodNumber]>;
+    customColumns: default_2.ZodOptional<default_2.ZodArray<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;
+    }>, "many">>;
+}, "strip", default_2.ZodTypeAny, {
+    lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
+        nucleotideMutations?: string[] | undefined;
+        aminoAcidMutations?: string[] | undefined;
+        nucleotideInsertions?: string[] | undefined;
+        aminoAcidInsertions?: string[] | undefined;
+    };
+    queries: {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+    }[];
+    width: string;
+    views: "grid"[];
+    granularity: "day" | "week" | "month" | "year";
+    lapisDateField: string;
+    pageSizes: number | number[];
+    initialMeanProportionInterval: {
+        min: number;
+        max: number;
+    };
+    height?: string | undefined;
+    hideGaps?: boolean | undefined;
+    customColumns?: {
+        values: Record<string, string | number>;
+        header: string;
+    }[] | undefined;
+}, {
+    lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
+        nucleotideMutations?: string[] | undefined;
+        aminoAcidMutations?: string[] | undefined;
+        nucleotideInsertions?: string[] | undefined;
+        aminoAcidInsertions?: string[] | undefined;
+    };
+    queries: {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+    }[];
+    width: string;
+    views: "grid"[];
+    granularity: "day" | "week" | "month" | "year";
+    lapisDateField: string;
+    pageSizes: number | number[];
+    initialMeanProportionInterval: {
+        min: number;
+        max: number;
+    };
+    height?: string | undefined;
+    hideGaps?: boolean | undefined;
+    customColumns?: {
+        values: Record<string, string | number>;
+        header: string;
+    }[] | undefined;
+}>;
+
+export declare type QueriesOverTimeView = default_2.infer<typeof queriesOverTimeViewSchema>;
+
+declare const queriesOverTimeViewSchema: default_2.ZodLiteral<"grid">;
+
+export declare type QueryDefinition = default_2.infer<typeof queryDefinition>;
+
+declare const queryDefinition: default_2.ZodObject<{
+    displayLabel: default_2.ZodString;
+    countQuery: default_2.ZodString;
+    coverageQuery: default_2.ZodString;
+}, "strip", default_2.ZodTypeAny, {
+    displayLabel: string;
+    countQuery: string;
+    coverageQuery: string;
+}, {
+    displayLabel: string;
+    countQuery: string;
+    coverageQuery: string;
+}>;
+
 export declare type RelativeGrowthAdvantageProps = default_2.infer<typeof relativeGrowthAdvantagePropsSchema>;
 
 declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
@@ -987,7 +1122,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -995,7 +1130,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1003,7 +1138,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1011,7 +1146,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1019,7 +1154,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1027,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1035,7 +1170,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1043,7 +1178,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1083,7 +1218,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1091,7 +1226,23 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-queries-over-time': QueriesOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1115,7 +1266,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1123,7 +1274,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1151,10 +1302,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1162,7 +1313,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1170,10 +1321,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1181,7 +1332,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1208,11 +1359,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1220,7 +1371,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1228,11 +1379,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1240,7 +1391,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.12.0",
+    "version": "1.14.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -16,10 +16,6 @@
         "access": "public"
     },
     "imports": {
-        "#mutationOverTime": {
-            "storybook": "./src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts",
-            "default": "./src/preact/mutationsOverTime/mutationOverTimeWorker.ts"
-        },
         "#*": [
             "./*",
             "./*.ts",

package/src/lapisApi/lapisApi.ts

@@ -1,3 +1,4 @@
+import { lineageDefinitionResponseSchema } from './LineageDefinition';
 import { referenceGenomeResponse } from './ReferenceGenome';
 import {
     aggregatedResponse,
@@ -11,9 +12,10 @@ import {
     type ProblemDetail,
     type MutationsOverTimeRequest,
     mutationsOverTimeResponse,
+    type QueriesOverTimeRequest,
+    queriesOverTimeResponse,
 } from './lapisTypes';
 import { type SequenceType } from '../types';
-import { lineageDefinitionResponseSchema } from './LineageDefinition';
 
 export class UnknownLapisError extends Error {
     constructor(
@@ -136,6 +138,23 @@ export async function fetchMutationsOverTime(
     return mutationsOverTimeResponse.parse(await response.json());
 }
 
+export async function fetchQueriesOverTime(lapisUrl: string, body: QueriesOverTimeRequest, signal?: AbortSignal) {
+    const response = await callLapis(
+        queriesOverTimeEndpoint(lapisUrl),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
+        },
+        'queries over time',
+    );
+
+    return queriesOverTimeResponse.parse(await response.json());
+}
+
 export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSignal) {
     const response = await callLapis(
         referenceGenomeEndpoint(lapisUrl),
@@ -244,6 +263,7 @@ export const mutationsOverTimeEndpoint = (lapisUrl: string, sequenceType: Sequen
         ? `${lapisUrl}/component/aminoAcidMutationsOverTime`
         : `${lapisUrl}/component/nucleotideMutationsOverTime`;
 };
+export const queriesOverTimeEndpoint = (lapisUrl: string) => `${lapisUrl}/component/queriesOverTime`;
 export const referenceGenomeEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/referenceGenome`;
 export const lineageDefinitionEndpoint = (lapisUrl: string, lapisField: string) =>
     `${lapisUrl}/sample/lineageDefinition/${lapisField}`;

package/src/lapisApi/lapisTypes.ts

@@ -67,6 +67,42 @@ export const mutationsOverTimeResponse = makeLapisResponse(
 );
 export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;
 
+const queryDefinition = z.object({
+    displayLabel: z.string(),
+    countQuery: z.string(),
+    coverageQuery: z.string(),
+});
+
+export type QueryDefinition = z.infer<typeof queryDefinition>;
+
+export const queriesOverTimeRequest = z.object({
+    filters: z.record(filterValue),
+    queries: z.array(queryDefinition),
+    dateRanges: z.array(dateRange),
+    dateField: z.string(),
+    downloadAsFile: z.boolean().optional(),
+    downloadFileBasename: z.string().optional(),
+    compression: z.enum(['gzip', 'none']).optional(),
+});
+export type QueriesOverTimeRequest = z.infer<typeof queriesOverTimeRequest>;
+
+export const queriesOverTimeResponse = makeLapisResponse(
+    z.object({
+        queries: z.array(z.string()),
+        dateRanges: z.array(dateRange),
+        data: z.array(
+            z.array(
+                z.object({
+                    count: z.number(),
+                    coverage: z.number(),
+                }),
+            ),
+        ),
+        totalCountsByDateRange: z.array(z.number()),
+    }),
+);
+export type QueriesOverTimeResponse = z.infer<typeof queriesOverTimeResponse>;
+
 const insertionCount = z.object({
     insertion: z.string(),
     count: z.number(),

package/src/preact/components/annotated-mutation.tsx

@@ -2,11 +2,11 @@ import DOMPurify from 'dompurify';
 import { useRef } from 'gridjs';
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 
+import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
+import { ButtonWithModalDialog, useModalRef } from './modal';
 import type { SequenceType } from '../../types';
 import type { Deletion, Substitution } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
-import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
-import { ButtonWithModalDialog, useModalRef } from './modal';
 import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 
 export type AnnotatedMutationProps = {

package/src/preact/{mutationsOverTime/mutations-over-time-grid.tsx → components/features-over-time-grid.tsx}

@@ -1,17 +1,13 @@
-import { type FunctionComponent } from 'preact';
+import { type FunctionComponent, type JSX } 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 { getProportion, type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
-import { type SequenceType } from '../../types';
-import { type Deletion, type Substitution } from '../../utils/mutations';
+import { type ColorScale, getColorWithinScale, getTextColorForScale } from './color-scale-selector';
+import PortalTooltip from './portal-tooltip';
+import { type TooltipPosition } from './tooltip';
+import { getProportion, type ProportionValue } from '../../query/queryMutationsOverTime';
 import { type Temporal } from '../../utils/temporalClass';
-import { AnnotatedMutation } from '../components/annotated-mutation';
-import { type ColorScale, getColorWithinScale, getTextColorForScale } from '../components/color-scale-selector';
-import PortalTooltip from '../components/portal-tooltip';
-import { type TooltipPosition } from '../components/tooltip';
+import { type TemporalDataMap } from '../mutationsOverTime/MutationOverTimeData';
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
 import { usePageSizeContext } from '../shared/tanstackTable/pagination-context';
@@ -31,55 +27,56 @@ export const customColumnSchema = z.object({
 });
 export type CustomColumn = z.infer<typeof customColumnSchema>;
 
-export interface MutationsOverTimeGridProps {
-    data: MutationOverTimeDataMap;
+export interface FeatureRenderer<D> {
+    asString(value: D): string;
+    renderRowLabel(value: D): JSX.Element;
+    renderTooltip(value: D, temporal: Temporal, proportionValue: ProportionValue | undefined): JSX.Element;
+}
+
+export interface FeaturesOverTimeGridProps<F> {
+    rowLabelHeader: string;
+    data: TemporalDataMap<F>;
     colorScale: ColorScale;
-    sequenceType: SequenceType;
     pageSizes: PageSizes;
     customColumns?: CustomColumn[];
+    featureRenderer: FeatureRenderer<F>;
     tooltipPortalTarget: HTMLElement | null;
 }
 
-type RowType = {
-    mutation: Substitution | Deletion;
-    values: (MutationOverTimeMutationValue | undefined)[];
+type RowType<F> = {
+    feature: F;
+    values: (ProportionValue | undefined)[];
     customValues: (string | number | undefined)[];
 };
 
 const EMPTY_COLUMNS: CustomColumn[] = [];
 
-const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
+function FeaturesOverTimeGrid<F>({
+    rowLabelHeader,
     data,
     colorScale,
-    sequenceType,
     pageSizes,
     customColumns = EMPTY_COLUMNS,
+    featureRenderer,
     tooltipPortalTarget,
-}) => {
+}: FeaturesOverTimeGridProps<F>) {
     const tableData = useMemo(() => {
-        const allMutations = data.getFirstAxisKeys();
-        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 };
+        const firstAxisKeys = data.getFirstAxisKeys();
+        return data.getAsArray().map((row, index): RowType<F> => {
+            const firstAxisKey = firstAxisKeys[index];
+            const customValues = customColumns.map((col) => col.values[featureRenderer.asString(firstAxisKey)]);
+            return { feature: firstAxisKey, values: [...row], customValues };
         });
-    }, [data, customColumns]);
+    }, [data, customColumns, featureRenderer]);
 
     const columns = useMemo(() => {
-        const columnHelper = createColumnHelper<RowType>();
+        const columnHelper = createColumnHelper<RowType<F>>();
         const dates = data.getSecondAxisKeys();
 
-        const mutationHeader = columnHelper.accessor((row) => row.mutation, {
-            id: 'mutation',
-            header: () => <span>Mutation</span>,
-            cell: ({ getValue }) => {
-                const value = getValue();
-                return (
-                    <div className={'text-center'}>
-                        <AnnotatedMutation mutation={value} sequenceType={sequenceType} />
-                    </div>
-                );
-            },
+        const featureHeader = columnHelper.accessor((row) => row.feature, {
+            id: 'feature',
+            header: () => <span>{rowLabelHeader}</span>,
+            cell: ({ getValue }) => featureRenderer.renderRowLabel(getValue()),
         });
 
         const customColumnHeaders = customColumns.map((customCol, index) => {
@@ -108,12 +105,13 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     const numberOfRows = table.getRowModel().rows.length;
                     const numberOfColumns = table.getAllColumns().length;
 
+                    const tooltip = featureRenderer.renderTooltip(row.original.feature, date, value);
+
                     return (
                         <div className={'text-center'}>
                             <ProportionCell
                                 value={value ?? null}
-                                date={date}
-                                mutation={row.original.mutation}
+                                tooltip={tooltip}
                                 tooltipPosition={getTooltipPosition(
                                     rowIndex -
                                         table.getState().pagination.pageIndex * table.getState().pagination.pageSize,
@@ -130,8 +128,8 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
             });
         });
 
-        return [mutationHeader, ...customColumnHeaders, ...dateHeaders];
-    }, [colorScale, data, sequenceType, customColumns, tooltipPortalTarget]);
+        return [featureHeader, ...customColumnHeaders, ...dateHeaders];
+    }, [colorScale, data, customColumns, tooltipPortalTarget, featureRenderer, rowLabelHeader]);
 
     const { pageSize } = usePageSizeContext();
     const table = usePreactTable({
@@ -183,7 +181,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
             </div>
         </div>
     );
-};
+}
 
 function styleGridHeader(columnIndex: number, numDateColumns: number) {
     if (columnIndex === 0) {
@@ -204,22 +202,17 @@ function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number,
 }
 
 const ProportionCell: FunctionComponent<{
-    value: MutationOverTimeMutationValue;
-    date: Temporal;
-    mutation: Substitution | Deletion;
+    value: ProportionValue;
+    tooltip: JSX.Element;
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
     tooltipPortalTarget: HTMLElement | null;
-}> = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
+}> = ({ value, tooltip, tooltipPosition, colorScale, tooltipPortalTarget }) => {
     const proportion = getProportion(value);
 
     return (
         <div className={'py-1 w-full h-full'}>
-            <PortalTooltip
-                content={<MutationsOverTimeGridTooltip mutation={mutation} date={date} value={value} />}
-                position={tooltipPosition}
-                portalTarget={tooltipPortalTarget}
-            >
+            <PortalTooltip content={tooltip} position={tooltipPosition} portalTarget={tooltipPortalTarget}>
                 <div
                     style={{
                         backgroundColor: getColorWithinScale(proportion, colorScale),
@@ -240,4 +233,4 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
-export default MutationsOverTimeGrid;
+export default FeaturesOverTimeGrid;

package/src/preact/genomeViewer/genome-data-viewer.tsx

@@ -2,12 +2,12 @@ import type { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
+import CDSPlot from './CDSPlot';
+import { loadGff3 } from './loadGff3';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
-import CDSPlot from './CDSPlot';
-import { loadGff3 } from './loadGff3';
 
 const genomeDataViewerPropsSchema = z.object({
     gff3Source: z.string().min(1, 'gff3Source cannot be empty'),