@genspectrum/dashboard-components 1.14.1 → 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>;
@@ -1106,11 +1121,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1118,7 +1129,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1126,10 +1137,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-mutation-comparison': MutationComparisonComponent;
     }
 }
 
@@ -1137,7 +1145,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1145,10 +1153,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -1156,7 +1161,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1164,10 +1169,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1175,7 +1177,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,11 +1185,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
-        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1195,7 +1193,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1203,11 +1201,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1215,7 +1209,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1223,7 +1217,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1231,7 +1225,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1239,7 +1233,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison': MutationComparisonComponent;
+        'gs-queries-over-time': QueriesOverTimeComponent;
     }
 }
 
@@ -1247,7 +1241,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1255,7 +1249,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1263,7 +1257,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1271,7 +1265,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1279,7 +1273,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1287,7 +1281,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1295,7 +1289,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1303,7 +1297,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1311,7 +1309,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1319,7 +1317,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1327,7 +1328,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1335,7 +1336,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-text-filter': TextFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1343,7 +1347,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1351,7 +1355,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1359,7 +1366,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1367,7 +1374,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1375,7 +1386,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1383,7 +1394,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-queries-over-time': QueriesOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1391,7 +1406,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.14.1",
+    "version": "1.15.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -126,7 +126,6 @@
         "depcheck": "^1.4.7",
         "eslint": "^9.31.0",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-storybook": "^0.12.0",

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/components/features-over-time-grid.tsx

@@ -30,7 +30,7 @@ export type CustomColumn = z.infer<typeof customColumnSchema>;
 export interface FeatureRenderer<D> {
     asString(value: D): string;
     renderRowLabel(value: D): JSX.Element;
-    renderTooltip(value: D, temporal: Temporal, proportionValue: ProportionValue | undefined): JSX.Element;
+    renderTooltip(value: D, temporal: Temporal, proportionValue: ProportionValue): JSX.Element;
 }
 
 export interface FeaturesOverTimeGridProps<F> {
@@ -99,12 +99,20 @@ function FeaturesOverTimeGrid<F>({
                     </div>
                 ),
                 cell: ({ getValue, row, column, table }) => {
-                    const value = getValue();
+                    const valueRaw = getValue();
+                    const value = valueRaw ?? null;
                     const rowIndex = row.index;
                     const columnIndex = column.getIndex();
                     const numberOfRows = table.getRowModel().rows.length;
                     const numberOfColumns = table.getAllColumns().length;
 
+                    if (valueRaw === undefined) {
+                        // eslint-disable-next-line no-console -- We want to warn that something might be wrong.
+                        console.error(
+                            `Found undefined value for ${row.original.feature} - ${date.dateString}. This shouldn't happen.`,
+                        );
+                    }
+
                     const tooltip = featureRenderer.renderTooltip(row.original.feature, date, value);
 
                     return (

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];