@genspectrum/dashboard-components 1.13.0 → 1.14.0

package/dist/util.d.ts

@@ -734,20 +734,139 @@ 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.ZodOptional<default_2.ZodString>;
+    displayLabel: default_2.ZodString;
     countQuery: default_2.ZodString;
     coverageQuery: default_2.ZodString;
 }, "strip", default_2.ZodTypeAny, {
+    displayLabel: string;
     countQuery: string;
     coverageQuery: string;
-    displayLabel?: string | undefined;
 }, {
+    displayLabel: string;
     countQuery: string;
     coverageQuery: string;
-    displayLabel?: string | undefined;
 }>;
 
 export declare type RelativeGrowthAdvantageProps = default_2.infer<typeof relativeGrowthAdvantagePropsSchema>;
@@ -1019,7 +1138,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1027,7 +1146,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1035,7 +1154,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1043,7 +1162,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1067,7 +1186,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1075,7 +1194,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1083,7 +1202,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1091,7 +1210,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1113,6 +1232,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-queries-over-time': QueriesOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-sequences-by-location': SequencesByLocationComponent;

package/package.json

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

package/src/lapisApi/lapisTypes.ts

@@ -68,7 +68,7 @@ export const mutationsOverTimeResponse = makeLapisResponse(
 export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;
 
 const queryDefinition = z.object({
-    displayLabel: z.string().optional(),
+    displayLabel: z.string(),
     countQuery: z.string(),
     coverageQuery: z.string(),
 });

package/src/preact/queriesOverTime/__mockData__/defaultMockData/queriesOverTime.json

@@ -0,0 +1,32 @@
+{
+    "data": {
+        "queries": ["S:F456L (single mutation)", "R346T + F456L (combination)", "C22916T or T22917G (nucleotide OR)"],
+        "dateRanges": [
+            { "dateFrom": "2024-01-01", "dateTo": "2024-01-31" },
+            { "dateFrom": "2024-02-01", "dateTo": "2024-02-29" },
+            { "dateFrom": "2024-03-01", "dateTo": "2024-03-31" },
+            { "dateFrom": "2024-04-01", "dateTo": "2024-04-30" }
+        ],
+        "data": [
+            [
+                { "count": 450, "coverage": 1000 },
+                { "count": 380, "coverage": 950 },
+                { "count": 280, "coverage": 900 },
+                { "count": 120, "coverage": 850 }
+            ],
+            [
+                { "count": 320, "coverage": 1000 },
+                { "count": 420, "coverage": 950 },
+                { "count": 380, "coverage": 900 },
+                { "count": 290, "coverage": 850 }
+            ],
+            [
+                { "count": 80, "coverage": 1000 },
+                { "count": 150, "coverage": 950 },
+                { "count": 340, "coverage": 900 },
+                { "count": 480, "coverage": 850 }
+            ]
+        ],
+        "totalCountsByDateRange": [1000, 950, 900, 850]
+    }
+}

package/src/preact/queriesOverTime/__mockData__/manyQueries.json

@@ -0,0 +1,128 @@
+{
+    "data": {
+        "queries": [
+            "S:F456L",
+            "S:R346T",
+            "S:Q493E",
+            "S:F486P",
+            "S:N460K",
+            "S:L455F",
+            "S:L455S",
+            "S:T572I",
+            "S:R190S",
+            "S:R190T",
+            "S:K478T",
+            "S:T22N",
+            "S:S31P",
+            "ORF1b:S997L",
+            "C875A"
+        ],
+        "dateRanges": [
+            { "dateFrom": "2024-01-01", "dateTo": "2024-01-31" },
+            { "dateFrom": "2024-02-01", "dateTo": "2024-02-29" },
+            { "dateFrom": "2024-03-01", "dateTo": "2024-03-31" },
+            { "dateFrom": "2024-04-01", "dateTo": "2024-04-30" }
+        ],
+        "data": [
+            [
+                { "count": 450, "coverage": 1000 },
+                { "count": 380, "coverage": 950 },
+                { "count": 280, "coverage": 900 },
+                { "count": 120, "coverage": 850 }
+            ],
+            [
+                { "count": 320, "coverage": 1000 },
+                { "count": 420, "coverage": 950 },
+                { "count": 380, "coverage": 900 },
+                { "count": 290, "coverage": 850 }
+            ],
+            [
+                { "count": 80, "coverage": 1000 },
+                { "count": 150, "coverage": 950 },
+                { "count": 340, "coverage": 900 },
+                { "count": 480, "coverage": 850 }
+            ],
+            [
+                { "count": 200, "coverage": 1000 },
+                { "count": 250, "coverage": 950 },
+                { "count": 300, "coverage": 900 },
+                { "count": 350, "coverage": 850 }
+            ],
+            [
+                { "count": 150, "coverage": 1000 },
+                { "count": 200, "coverage": 950 },
+                { "count": 250, "coverage": 900 },
+                { "count": 300, "coverage": 850 }
+            ],
+            [
+                { "count": 100, "coverage": 1000 },
+                { "count": 150, "coverage": 950 },
+                { "count": 200, "coverage": 900 },
+                { "count": 250, "coverage": 850 }
+            ],
+            [
+                { "count": 180, "coverage": 1000 },
+                { "count": 220, "coverage": 950 },
+                { "count": 260, "coverage": 900 },
+                { "count": 300, "coverage": 850 }
+            ],
+            [
+                { "count": 220, "coverage": 1000 },
+                { "count": 280, "coverage": 950 },
+                { "count": 340, "coverage": 900 },
+                { "count": 400, "coverage": 850 }
+            ],
+            [
+                { "count": 90, "coverage": 1000 },
+                { "count": 120, "coverage": 950 },
+                { "count": 150, "coverage": 900 },
+                { "count": 180, "coverage": 850 }
+            ],
+            [
+                { "count": 300, "coverage": 1000 },
+                { "count": 350, "coverage": 950 },
+                { "count": 400, "coverage": 900 },
+                { "count": 450, "coverage": 850 }
+            ],
+            [
+                { "count": 50, "coverage": 1000 },
+                { "count": 75, "coverage": 950 },
+                { "count": 100, "coverage": 900 },
+                { "count": 125, "coverage": 850 }
+            ],
+            [
+                { "count": 270, "coverage": 1000 },
+                { "count": 310, "coverage": 950 },
+                { "count": 350, "coverage": 900 },
+                { "count": 390, "coverage": 850 }
+            ],
+            [
+                { "count": 160, "coverage": 1000 },
+                { "count": 200, "coverage": 950 },
+                { "count": 240, "coverage": 900 },
+                { "count": 280, "coverage": 850 }
+            ],
+            [
+                { "count": 400, "coverage": 1000 },
+                { "count": 420, "coverage": 950 },
+                { "count": 440, "coverage": 900 },
+                { "count": 460, "coverage": 850 }
+            ],
+            [
+                { "count": 330, "coverage": 1000 },
+                { "count": 360, "coverage": 950 },
+                { "count": 390, "coverage": 900 },
+                { "count": 420, "coverage": 850 }
+            ]
+        ],
+        "totalCountsByDateRange": [1000, 950, 900, 850]
+    },
+    "info": {
+        "dataVersion": "test",
+        "requestId": "test-request-many-queries",
+        "requestInfo": "Mock data with many queries for testing pagination",
+        "reportTo": "https://github.com/GenSpectrum/LAPIS/issues",
+        "lapisVersion": "test",
+        "siloVersion": "test"
+    }
+}

package/src/preact/queriesOverTime/__mockData__/request1800s.json

@@ -0,0 +1,16 @@
+{
+    "data": {
+        "queries": [],
+        "dateRanges": [{ "dateFrom": "1800-01-01", "dateTo": "1800-12-31" }],
+        "data": [],
+        "totalCountsByDateRange": []
+    },
+    "info": {
+        "dataVersion": null,
+        "requestId": "test-request-1800s",
+        "requestInfo": "Mock data for 1800s empty dataset test",
+        "reportTo": "https://github.com/GenSpectrum/LAPIS/issues",
+        "lapisVersion": "test",
+        "siloVersion": "test"
+    }
+}

package/src/preact/queriesOverTime/__mockData__/withGaps.json

@@ -0,0 +1,52 @@
+{
+    "data": {
+        "queries": ["S:F456L", "S:R346T", "S:Q493E"],
+        "dateRanges": [
+            { "dateFrom": "2024-01-01", "dateTo": "2024-01-31" },
+            { "dateFrom": "2024-02-01", "dateTo": "2024-02-29" },
+            { "dateFrom": "2024-03-01", "dateTo": "2024-03-31" },
+            { "dateFrom": "2024-04-01", "dateTo": "2024-04-30" },
+            { "dateFrom": "2024-05-01", "dateTo": "2024-05-31" },
+            { "dateFrom": "2024-06-01", "dateTo": "2024-06-30" },
+            { "dateFrom": "2024-07-01", "dateTo": "2024-07-31" }
+        ],
+        "data": [
+            [
+                { "count": 100, "coverage": 1000 },
+                { "count": 150, "coverage": 1050 },
+                { "count": 200, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 250, "coverage": 1200 },
+                { "count": 300, "coverage": 1250 },
+                { "count": 350, "coverage": 1300 }
+            ],
+            [
+                { "count": 200, "coverage": 1000 },
+                { "count": 250, "coverage": 1050 },
+                { "count": 300, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 350, "coverage": 1200 },
+                { "count": 400, "coverage": 1250 },
+                { "count": 450, "coverage": 1300 }
+            ],
+            [
+                { "count": 50, "coverage": 1000 },
+                { "count": 75, "coverage": 1050 },
+                { "count": 100, "coverage": 1100 },
+                { "count": 0, "coverage": 0 },
+                { "count": 125, "coverage": 1200 },
+                { "count": 150, "coverage": 1250 },
+                { "count": 175, "coverage": 1300 }
+            ]
+        ],
+        "totalCountsByDateRange": [1000, 1050, 1100, 0, 1200, 1250, 1300]
+    },
+    "info": {
+        "dataVersion": "test",
+        "requestId": "test-request-gaps",
+        "requestInfo": "Mock data with gaps for testing hide gaps functionality",
+        "reportTo": "https://github.com/GenSpectrum/LAPIS/issues",
+        "lapisVersion": "test",
+        "siloVersion": "test"
+    }
+}

package/src/preact/queriesOverTime/getFilteredQueriesOverTimeData.ts

@@ -0,0 +1,85 @@
+import { type ProportionValue } from '../../query/queryMutationsOverTime';
+import { serializeQuery, serializeTemporal } from '../../query/queryQueriesOverTime';
+import { Map2dBase, Map2dView, type Map2DContents } from '../../utils/map2d';
+import { type Temporal } from '../../utils/temporalClass';
+
+export type QueryFilter = {
+    textFilter: string;
+};
+
+export type GetFilteredQueryOverTimeDataArgs = {
+    data: Map2DContents<string, Temporal, ProportionValue>;
+    proportionInterval: { min: number; max: number };
+    hideGaps: boolean;
+    queryFilterValue: QueryFilter;
+};
+
+/**
+ * Create a Map2d wrapper for query over time data.
+ * Uses displayLabel strings as the first axis (queries) and Temporal objects as the second axis (dates).
+ */
+export class QueryOverTimeDataMap extends Map2dBase<string, Temporal, ProportionValue> {
+    constructor(initialContent: Map2DContents<string, Temporal, ProportionValue>) {
+        super(serializeQuery, serializeTemporal, initialContent);
+    }
+}
+
+export function getFilteredQueryOverTimeData({
+    data,
+    proportionInterval,
+    hideGaps,
+    queryFilterValue,
+}: GetFilteredQueryOverTimeDataArgs) {
+    const dataMap = new QueryOverTimeDataMap(data);
+    const filteredData = new Map2dView(dataMap);
+
+    const queries = filteredData.getFirstAxisKeys();
+    const dates = filteredData.getSecondAxisKeys();
+
+    const queriesToFilterOut = queries.filter((query) => {
+        // Calculate overall proportion for this query
+        let totalCount = 0;
+        let totalCoverage = 0;
+
+        dates.forEach((date) => {
+            const value = filteredData.get(query, date);
+            if (value?.type === 'valueWithCoverage') {
+                totalCount += value.count;
+                totalCoverage += value.coverage;
+            }
+        });
+
+        const overallProportion = totalCoverage > 0 ? totalCount / totalCoverage : 0;
+
+        // Filter by proportion interval
+        if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
+            return true;
+        }
+
+        // Filter by text (case-insensitive search in displayLabel)
+        if (
+            queryFilterValue.textFilter !== '' &&
+            !query.toLowerCase().includes(queryFilterValue.textFilter.toLowerCase())
+        ) {
+            return true;
+        }
+
+        return false;
+    });
+
+    // Remove filtered queries from the data view
+    queriesToFilterOut.forEach((query) => {
+        filteredData.deleteRow(query);
+    });
+
+    // Hide gaps (columns with no data)
+    if (hideGaps) {
+        const dateRangesToFilterOut = filteredData.getSecondAxisKeys().filter((dateRange) => {
+            const vals = filteredData.getColumn(dateRange);
+            return !vals.some((v) => (v?.type === 'value' || v?.type === 'valueWithCoverage') && v.totalCount > 0);
+        });
+        dateRangesToFilterOut.forEach((dateRange) => filteredData.deleteColumn(dateRange));
+    }
+
+    return filteredData;
+}

package/src/preact/queriesOverTime/queries-over-time-filter.tsx

@@ -0,0 +1,25 @@
+import { type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater } from 'preact/hooks';
+
+import { type QueryFilter } from './getFilteredQueriesOverTimeData';
+
+type QueriesOverTimeFilterProps = {
+    value: QueryFilter;
+    setFilterValue: Dispatch<StateUpdater<QueryFilter>>;
+};
+
+export const QueriesOverTimeFilter: FunctionComponent<QueriesOverTimeFilterProps> = ({ value, setFilterValue }) => {
+    return (
+        <input
+            type='text'
+            placeholder='Filter queries...'
+            className='input input-xs input-bordered w-40'
+            value={value.textFilter}
+            onInput={(e) =>
+                setFilterValue({
+                    textFilter: (e.target as HTMLInputElement).value,
+                })
+            }
+        />
+    );
+};