feat(components): queries over time component

[fhennig]

resolves #65

Summary

Adds the new "Queries over time" component.

Code example

<gs-queries-over-time
    lapisFilter='{ "pangoLineage": "JN.1*", "dateFrom": "2024-01-15", "dateTo": "2024-04-30" }'
    queries='[
        {
            "displayLabel": "S:F456L (single mutation)",
            "countQuery": "S:456L",
            "coverageQuery": "!S:456N"
        },
        {
            "displayLabel": "R346T + F456L (combination)",
            "countQuery": "S:346T & S:456L",
            "coverageQuery": "!S:346N & !S:456N"
        }
    ]'
    views='["grid"]'
    width='100%'
    height='700px'
    granularity="month"
    lapisDateField="date"
    pageSizes='[5,10]'
></gs-queries-over-time>

Screenshot

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
dashboard-components	Error		Jan 28, 2026 11:52am

[Copilot]

Pull request overview

This PR adds a new "Queries over time" component that displays arbitrary LAPIS queries over time with customizable date ranges and granularity. The component allows users to visualize proportions of custom queries across different time periods using a grid view.

Changes:

• Added gs-queries-over-time web component with configurable properties for filters, queries, granularity, and display options
• Implemented grid view with filtering, pagination, and data export capabilities
• Created supporting utilities for query data filtering and tooltip display

Reviewed changes

Copilot reviewed 21 out of 33 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
components/src/web-components/visualization/gs-queries-over-time.tsx	Main web component definition with property declarations and rendering logic
components/src/web-components/visualization/gs-queries-over-time.stories.ts	Storybook stories demonstrating various component configurations
components/src/preact/queriesOverTime/queries-over-time.tsx	Core Preact component implementing the queries over time visualization
components/src/preact/queriesOverTime/queries-over-time.stories.tsx	Preact component stories with interaction tests
components/src/preact/queriesOverTime/queries-over-time-grid-tooltip.tsx	Tooltip component for grid cells showing detailed query information
components/src/preact/queriesOverTime/getFilteredQueriesOverTimeData.ts	Data filtering logic for proportion intervals and text filters
components/src/lapisApi/lapisTypes.ts	Updated query definition to require displayLabel field
components/src/web-components/visualization/gs-mutations-over-time.tsx	Type fix for hideGaps property consistency
components/tests/visualizationStories.ts	Added test stories for new component

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Making displayLabel required is a breaking change that could affect existing code using this schema with optional display labels. If this field was previously optional elsewhere in the codebase, this change requires careful migration.

Suggested change

	displayLabel: z.string(),
	displayLabel: z.string().optional(),

[fhennig]

Hmm, maybe I can check again if we can keep it optional. But IMO it's good to have this non-optional, and for the collections use case, there are always labels already.

[fengelniederhammer]

You made it non-optional because the component requires it I assume?

[fengelniederhammer]

LGTM!

[fengelniederhammer]

You made it non-optional because the component requires it I assume?

[fhennig]

regarding your last question, it was easier to deal with if the label was required; if we want to we can relax this in the future, but I think it's fine for now to just require it.