@genspectrum/dashboard-components 1.11.1 → 1.13.0

package/dist/util.d.ts

@@ -734,6 +734,22 @@ 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 QueryDefinition = default_2.infer<typeof queryDefinition>;
+
+declare const queryDefinition: default_2.ZodObject<{
+    displayLabel: default_2.ZodOptional<default_2.ZodString>;
+    countQuery: default_2.ZodString;
+    coverageQuery: default_2.ZodString;
+}, "strip", default_2.ZodTypeAny, {
+    countQuery: string;
+    coverageQuery: string;
+    displayLabel?: string | undefined;
+}, {
+    countQuery: string;
+    coverageQuery: string;
+    displayLabel?: string | undefined;
+}>;
+
 export declare type RelativeGrowthAdvantageProps = default_2.infer<typeof relativeGrowthAdvantagePropsSchema>;
 
 declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
@@ -955,7 +971,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -963,7 +979,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -971,7 +987,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -979,7 +995,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1019,7 +1035,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1027,7 +1043,23 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1051,7 +1083,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1059,7 +1091,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1230,22 +1262,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare module 'chart.js' {
     interface CartesianScaleTypeRegistry {
         logit: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.11.1",
+    "version": "1.13.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

@@ -62,10 +62,47 @@ export const mutationsOverTimeResponse = makeLapisResponse(
                 }),
             ),
         ),
+        totalCountsByDateRange: z.array(z.number()),
     }),
 );
 export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;
 
+const queryDefinition = z.object({
+    displayLabel: z.string().optional(),
+    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'),

package/src/preact/mutationsOverTime/MutationOverTimeData.ts

@@ -1,5 +1,5 @@
 import {
-    type MutationOverTimeMutationValue,
+    type ProportionValue,
     serializeSubstitutionOrDeletion,
     serializeTemporal,
 } from '../../query/queryMutationsOverTime';
@@ -7,18 +7,20 @@ import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
 import type { Temporal, TemporalClass } from '../../utils/temporalClass';
 
+export type TemporalDataMap<D, T extends Temporal | TemporalClass = Temporal> = Map2d<D, T, ProportionValue>;
+
 export type MutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> = Map2d<
     Substitution | Deletion,
     T,
-    MutationOverTimeMutationValue
+    ProportionValue
 >;
 
 export class BaseMutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> extends Map2dBase<
     Substitution | Deletion,
     T,
-    MutationOverTimeMutationValue
+    ProportionValue
 > {
-    constructor(initialContent?: Map2DContents<Substitution | Deletion, T, MutationOverTimeMutationValue>) {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, T, ProportionValue>) {
         super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
     }
 }