From ff469a848a4b8ff112c7f55367d914d6e2cf2e9b Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Thu, 5 Feb 2026 16:23:18 +0100 Subject: [PATCH 1/2] implement tooltip stub --- ...es-over-time-row-label-tooltip.stories.tsx | 32 +++++++++++++++++++ .../queries-over-time-row-label-tooltip.tsx | 17 ++++++++++ .../queriesOverTime/queries-over-time.tsx | 16 +++++++--- 3 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx create mode 100644 components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx diff --git a/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx b/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx new file mode 100644 index 00000000..96350b0e --- /dev/null +++ b/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx @@ -0,0 +1,32 @@ +import { type Meta, type StoryObj } from '@storybook/preact'; +import { expect, within } from '@storybook/test'; + +import { + QueriesOverTimeRowLabelTooltip, + type QueriesOverTimeRowLabelTooltipProps, +} from './queries-over-time-row-label-tooltip'; + +const meta: Meta = { + title: 'Component/Queries over time row label tooltip', + component: QueriesOverTimeRowLabelTooltip, + argTypes: { + query: { control: 'text' }, + }, + parameters: { + fetchMock: {}, + }, +}; + +export default meta; + +export const Default: StoryObj = { + render: (args) => , + args: { + query: 'S:F456L (single mutation)', + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect(canvas.getByText('S:F456L (single mutation)', { exact: true })).toBeVisible(); + await expect(canvas.getByText('foobar')).toBeVisible(); + }, +}; diff --git a/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx b/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx new file mode 100644 index 00000000..254dd6cb --- /dev/null +++ b/components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx @@ -0,0 +1,17 @@ +import type { FunctionComponent } from 'preact'; + +export type QueriesOverTimeRowLabelTooltipProps = { + query: string; // displayLabel -- TODO -- we need to pass in the queries and description as well +}; + +export const QueriesOverTimeRowLabelTooltip: FunctionComponent = ({ + query, +}: QueriesOverTimeRowLabelTooltipProps) => { + // TODO: Implement actual tooltip content with query details + return ( +
+
{query}
+
foobar
+
+ ); +}; diff --git a/components/src/preact/queriesOverTime/queries-over-time.tsx b/components/src/preact/queriesOverTime/queries-over-time.tsx index 36885d41..075e7e02 100644 --- a/components/src/preact/queriesOverTime/queries-over-time.tsx +++ b/components/src/preact/queriesOverTime/queries-over-time.tsx @@ -5,6 +5,7 @@ import z from 'zod'; import { getFilteredQueryOverTimeData, type QueryFilter } from './getFilteredQueriesOverTimeData'; import { QueriesOverTimeFilter } from './queries-over-time-filter'; import { QueriesOverTimeGridTooltip } from './queries-over-time-grid-tooltip'; +import { QueriesOverTimeRowLabelTooltip } from './queries-over-time-row-label-tooltip'; import { type ProportionValue, getProportion } from '../../query/queryMutationsOverTime'; import { queryQueriesOverTimeData } from '../../query/queryQueriesOverTime'; import { lapisFilterSchema, temporalGranularitySchema, views } from '../../types'; @@ -13,6 +14,7 @@ import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinished import { useLapisUrl } from '../LapisUrlContext'; import { type ColorScale } from '../components/color-scale-selector'; import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown'; +import PortalTooltip from '../components/portal-tooltip'; import { CsvDownloadButton } from '../components/csv-download-button'; import { ErrorBoundary } from '../components/error-boundary'; import FeaturesOverTimeGrid, { type FeatureRenderer, customColumnSchema } from '../components/features-over-time-grid'; @@ -140,15 +142,21 @@ const QueriesOverTimeTabs: FunctionComponent = ({ () => ({ asString: (value: string) => value, renderRowLabel: (value: string) => ( -
- {value} -
+ } + position='right' + portalTarget={tooltipPortalTarget} + > +
+ {value} +
+ ), renderTooltip: (value: string, temporal: Temporal, proportionValue: ProportionValue) => ( ), }), - [], + [tooltipPortalTarget], ); const getTab = (view: QueriesOverTimeView) => { From 2cc1f5d5f06b1d18ea157da7f0f7965c42a73cf4 Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Thu, 5 Feb 2026 16:38:26 +0100 Subject: [PATCH 2/2] Add note --- .../src/preact/queriesOverTime/queries-over-time.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/components/src/preact/queriesOverTime/queries-over-time.tsx b/components/src/preact/queriesOverTime/queries-over-time.tsx index 075e7e02..08777dfd 100644 --- a/components/src/preact/queriesOverTime/queries-over-time.tsx +++ b/components/src/preact/queriesOverTime/queries-over-time.tsx @@ -141,6 +141,13 @@ const QueriesOverTimeTabs: FunctionComponent = ({ const queryRenderer = useMemo>( () => ({ asString: (value: string) => value, + // TODO - in the tooltip below, we need to use the value to look up the complete query object + // in the 'queries' const, and then pass in the complete query object to the tooltip. + // the tooltip needs to be changed to accept the whole query object. + // ... but is a lookup even valid? We didn't enforce uniqueness of the labels I'm afraid. + // ... + /// actually, we already rely on the uniqueness of the labels. Maybe we should change it so + // we have an ID and a label? We need the unique thing because in Map2D we use it as a unique key renderRowLabel: (value: string) => ( }