@genspectrum/dashboard-components 1.14.2 → 1.15.0

package/dist/util.d.ts

@@ -753,19 +753,32 @@ declare const queriesOverTimeSchema: default_2.ZodObject<{
         nucleotideInsertions?: string[] | undefined;
         aminoAcidInsertions?: string[] | undefined;
     }>>;
-    queries: default_2.ZodArray<default_2.ZodObject<{
+    queries: default_2.ZodEffects<default_2.ZodArray<default_2.ZodObject<{
         displayLabel: default_2.ZodString;
+        description: default_2.ZodOptional<default_2.ZodString>;
         countQuery: default_2.ZodString;
         coverageQuery: default_2.ZodString;
     }, "strip", default_2.ZodTypeAny, {
         displayLabel: string;
         countQuery: string;
         coverageQuery: string;
+        description?: string | undefined;
     }, {
         displayLabel: string;
         countQuery: string;
         coverageQuery: string;
-    }>, "many">;
+        description?: string | undefined;
+    }>, "many">, {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+        description?: string | undefined;
+    }[], {
+        displayLabel: string;
+        countQuery: string;
+        coverageQuery: string;
+        description?: string | undefined;
+    }[]>;
     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;
@@ -804,6 +817,7 @@ declare const queriesOverTimeSchema: default_2.ZodObject<{
         displayLabel: string;
         countQuery: string;
         coverageQuery: string;
+        description?: string | undefined;
     }[];
     width: string;
     views: "grid"[];
@@ -831,6 +845,7 @@ declare const queriesOverTimeSchema: default_2.ZodObject<{
         displayLabel: string;
         countQuery: string;
         coverageQuery: string;
+        description?: string | undefined;
     }[];
     width: string;
     views: "grid"[];
@@ -856,17 +871,17 @@ 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;
+    displayLabel: default_2.ZodOptional<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>;
@@ -1154,7 +1169,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1162,7 +1177,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>;
         }
     }
 }
@@ -1170,7 +1185,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1178,7 +1193,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>;
         }
     }
 }
@@ -1218,7 +1233,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-queries-over-time': QueriesOverTimeComponent;
     }
 }
 
@@ -1226,7 +1241,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1234,7 +1249,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-queries-over-time': QueriesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1242,7 +1257,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.14.2",
+    "version": "1.15.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(),
+    displayLabel: z.string().optional(),
     countQuery: z.string(),
     coverageQuery: z.string(),
 });

package/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx

@@ -0,0 +1,60 @@
+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<QueriesOverTimeRowLabelTooltipProps> = {
+    title: 'Component/Queries over time row label tooltip',
+    component: QueriesOverTimeRowLabelTooltip,
+    argTypes: {
+        query: { control: 'object' },
+    },
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<QueriesOverTimeRowLabelTooltipProps> = {
+    render: (args) => <QueriesOverTimeRowLabelTooltip {...args} />,
+    args: {
+        query: {
+            displayLabel: 'S:F456L (single mutation)',
+            description: 'This mutation is associated with increased transmissibility.',
+            countQuery: 'S:456L',
+            coverageQuery: '!S:456N',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('S:F456L (single mutation)', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('This mutation is associated with increased transmissibility.')).toBeVisible();
+        await expect(canvas.getByText('Count query:')).toBeVisible();
+        await expect(canvas.getByText('S:456L')).toBeVisible();
+        await expect(canvas.getByText('Coverage query:')).toBeVisible();
+        await expect(canvas.getByText('!S:456N')).toBeVisible();
+    },
+};
+
+export const WithoutDescription: StoryObj<QueriesOverTimeRowLabelTooltipProps> = {
+    render: (args) => <QueriesOverTimeRowLabelTooltip {...args} />,
+    args: {
+        query: {
+            displayLabel: 'S:R346T',
+            countQuery: 'S:346T',
+            coverageQuery: '!S:346N',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('S:R346T', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('Count query:')).toBeVisible();
+        await expect(canvas.getByText('S:346T')).toBeVisible();
+        await expect(canvas.getByText('Coverage query:')).toBeVisible();
+        await expect(canvas.getByText('!S:346N')).toBeVisible();
+    },
+};

package/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx

@@ -0,0 +1,34 @@
+import type { FunctionComponent } from 'preact';
+
+import type { CountCoverageQuery } from './queries-over-time';
+
+export type QueriesOverTimeRowLabelTooltipProps = {
+    query: CountCoverageQuery;
+};
+
+export const QueriesOverTimeRowLabelTooltip: FunctionComponent<QueriesOverTimeRowLabelTooltipProps> = ({ query }) => {
+    return (
+        <div className='flex flex-col gap-2'>
+            <div className='font-bold'>{query.displayLabel}</div>
+            {query.description && <div className='text-sm text-gray-700'>{query.description}</div>}
+            <div className='flex flex-col gap-1'>
+                <div className='text-sm'>
+                    <span className='text-gray-600'>Count query:</span>
+                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
+                        <pre className='text-xs'>
+                            <code>{query.countQuery}</code>
+                        </pre>
+                    </div>
+                </div>
+                <div className='text-sm'>
+                    <span className='text-gray-600'>Coverage query:</span>
+                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
+                        <pre className='text-xs'>
+                            <code>{query.coverageQuery}</code>
+                        </pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -466,6 +466,30 @@ export const WithNoLapisDateFieldField: StoryObj<QueriesOverTimeProps> = {
     },
 };
 
+export const WithDuplicateDisplayLabels: StoryObj<QueriesOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        queries: [
+            {
+                displayLabel: 'S:F456L (single mutation)',
+                countQuery: 'S:456L',
+                coverageQuery: '!S:456N',
+            },
+            {
+                displayLabel: 'S:F456L (single mutation)',
+                countQuery: 'S:346T & S:456L',
+                coverageQuery: '!S:346N & !S:456N',
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'Display labels must be unique');
+        });
+    },
+};
+
 async function expectQueryOnPage(canvas: Canvas, query: string) {
     await waitFor(async () => {
         const queryOnPage = canvas.getAllByText(query)[0];

package/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';
@@ -20,6 +21,7 @@ import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
+import PortalTooltip from '../components/portal-tooltip';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
@@ -37,17 +39,28 @@ const meanProportionIntervalSchema = z.object({
 });
 export type MeanProportionInterval = z.infer<typeof meanProportionIntervalSchema>;
 
+const countCoverageQuerySchema = z.object({
+    displayLabel: z.string(),
+    description: z.string().optional(),
+    countQuery: z.string(),
+    coverageQuery: z.string(),
+});
+export type CountCoverageQuery = z.infer<typeof countCoverageQuerySchema>;
+
 const queriesOverTimeSchema = z.object({
     lapisFilter: lapisFilterSchema,
     queries: z
-        .array(
-            z.object({
-                displayLabel: z.string(),
-                countQuery: z.string(),
-                coverageQuery: z.string(),
-            }),
-        )
-        .min(1),
+        .array(countCoverageQuerySchema)
+        .min(1)
+        .superRefine((queries, ctx) => {
+            const duplicateDisplayLabels = findDuplicateStrings(queries.map((v) => v.displayLabel));
+            if (duplicateDisplayLabels.length > 0) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: `Display labels must be unique. Duplicates: ${duplicateDisplayLabels.join(', ')}`,
+                });
+            }
+        }),
     views: z.array(queriesOverTimeViewSchema),
     granularity: temporalGranularitySchema,
     lapisDateField: z.string().min(1),
@@ -136,19 +149,45 @@ const QueriesOverTimeTabs: FunctionComponent<QueriesOverTimeTabsProps> = ({
         });
     }, [queryOverTimeData, proportionInterval, hideGaps, queryFilterValue]);
 
+    const queryLookupMap = useMemo(
+        () => new Map(originalComponentProps.queries.map((query) => [query.displayLabel, query])),
+        [originalComponentProps.queries],
+    );
+
     const queryRenderer = useMemo<FeatureRenderer<string>>(
         () => ({
             asString: (value: string) => value,
-            renderRowLabel: (value: string) => (
-                <div className='text-center'>
-                    <span>{value}</span>
-                </div>
-            ),
+            renderRowLabel: (value: string) => {
+                const queryObject = queryLookupMap.get(value);
+
+                return (
+                    <PortalTooltip
+                        content={
+                            <QueriesOverTimeRowLabelTooltip
+                                query={
+                                    queryObject ?? {
+                                        displayLabel: value,
+                                        description: undefined,
+                                        countQuery: '',
+                                        coverageQuery: '',
+                                    }
+                                }
+                            />
+                        }
+                        position='right'
+                        portalTarget={tooltipPortalTarget}
+                    >
+                        <div className='text-center'>
+                            <span>{value}</span>
+                        </div>
+                    </PortalTooltip>
+                );
+            },
             renderTooltip: (value: string, temporal: Temporal, proportionValue: ProportionValue) => (
                 <QueriesOverTimeGridTooltip query={value} date={temporal} value={proportionValue} />
             ),
         }),
-        [],
+        [tooltipPortalTarget, queryLookupMap],
     );
 
     const getTab = (view: QueriesOverTimeView) => {
@@ -302,3 +341,13 @@ function getDownloadData(filteredData: ReturnType<typeof getFilteredQueryOverTim
         );
     });
 }
+
+function findDuplicateStrings(items: string[]): string[] {
+    const counts = new Map<string, number>();
+
+    for (const item of items) {
+        counts.set(item, (counts.get(item) ?? 0) + 1);
+    }
+
+    return [...counts.entries()].filter(([, count]) => count > 1).map(([key]) => key);
+}

package/src/web-components/visualization/gs-queries-over-time.stories.ts

@@ -15,11 +15,13 @@ const codeExample = String.raw`
     queries='[
         {
             "displayLabel": "S:F456L (single mutation)",
+            "description": "This mutation is associated with increased transmissibility.",
             "countQuery": "S:456L",
             "coverageQuery": "!S:456N"
         },
         {
             "displayLabel": "R346T + F456L (combination)",
+            "description": "Common mutation combination found in the JN.1 lineage.",
             "countQuery": "S:346T & S:456L",
             "coverageQuery": "!S:346N & !S:456N"
         }
@@ -59,11 +61,13 @@ const meta: Meta<Required<QueriesOverTimeProps>> = {
         queries: [
             {
                 displayLabel: 'S:F456L (single mutation)',
+                description: 'This mutation is associated with increased transmissibility.',
                 countQuery: 'S:456L',
                 coverageQuery: '!S:456N',
             },
             {
                 displayLabel: 'R346T + F456L (combination)',
+                description: 'Common mutation combination found in the JN.1 lineage.',
                 countQuery: 'S:346T & S:456L',
                 coverageQuery: '!S:346N & !S:456N',
             },

package/src/web-components/visualization/gs-queries-over-time.tsx

@@ -42,7 +42,8 @@ export class QueriesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
      * Required.
      *
      * Array of queries to display. Each query has:
-     * - displayLabel: string - The name to show in the grid row label
+     * - displayLabel: string - The name to show in the grid row label. Must be unique.
+     * - description: string (optional) - Optional description shown in tooltip
      * - countQuery: string - Query string to count matches
      * - coverageQuery: string - Query string to determine coverage/denominator
      *
@@ -51,6 +52,7 @@ export class QueriesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Array })
     queries: {
         displayLabel: string;
+        description?: string;
         countQuery: string;
         coverageQuery: string;
     }[] = [];