@genspectrum/dashboard-components 0.14.1 → 0.14.2

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -285,7 +285,7 @@ export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -295,12 +295,9 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const filterChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
-        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-    });
-
     const optionChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
         canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
     });
 

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -148,7 +148,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 
@@ -167,7 +167,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -85,7 +85,7 @@ export const Default: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change lineage filter value fires event', async () => {
+        await step('change lineage filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'B.1');
@@ -105,7 +105,7 @@ export const ClearSelection: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -123,7 +123,7 @@ export const OnBlurInput: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -144,7 +144,7 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -154,11 +154,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const lineageChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('A.1');
         });

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -43,7 +43,7 @@ export async function fetchAutocompletionList({
 
     return [...locationValues]
         .map<EntryWithNullValues>(([json, count]) => ({
-            value: JSON.parse(json),
+            value: JSON.parse(json) as Record<string, string | null>,
             count,
         }))
         .sort(compareLocationEntries(fields))

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -84,7 +84,7 @@ export const Primary: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change location filter value fires event', async () => {
+        await step('change location filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'Germany');
@@ -107,7 +107,7 @@ export const ClearSelection: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -128,7 +128,7 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -151,11 +151,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const locationChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('Europe');
         });
@@ -171,7 +171,7 @@ export const WithNoFields: StoryObj<LocationFilterProps> = {
         fields: [],
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'Array must contain at least 1 element(s)');
         });
     },

package/src/preact/map/sequences-by-location.stories.tsx

@@ -134,7 +134,7 @@ export const InvalidProps: StoryObj<SequencesByLocationProps> = {
         lapisLocationField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(
                 canvasElement,
                 '"lapisLocationField": String must contain at least 1 character(s)',

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -223,7 +223,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const changedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
     });
 
@@ -265,5 +265,5 @@ const testNoOptionsExist = async (canvas: ReturnType<typeof within>, mutation: s
     await expect(options).toHaveLength(0);
 };
 
-const inputField = (canvas: ReturnType<typeof within>) =>
+const inputField = (canvas: ReturnType<typeof within>): HTMLElement =>
     canvas.getByPlaceholderText('Enter a mutation', { exact: false });

package/src/preact/mutations/getMutationsGridData.ts

@@ -25,7 +25,7 @@ const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType:
 
         const initiallyFillPositionsToProportionAtBase = () => {
             if (!positionsToProportionAtBase.has(position)) {
-                const empty = new Map();
+                const empty = new Map<string | undefined, number>();
                 basesOfView.forEach((base) => empty.set(base, 0));
                 empty.set(mutationEntry.mutation.valueAtReference, 1);
                 positionsToProportionAtBase.set(position, empty);

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -62,9 +62,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                 ))}
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
-                        <Fragment key={`fragment-${mutation.toString()}`}>
+                        <Fragment key={`fragment-${mutation.code}`}>
                             <div
-                                key={`mutation-${mutation.toString()}`}
+                                key={`mutation-${mutation.code}`}
                                 style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
@@ -80,7 +80,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 return (
                                     <div
                                         style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
-                                        key={`${mutation.toString()}-${date.toString()}`}
+                                        key={`${mutation.code}-${date.dateString}`}
                                     >
                                         <ProportionCell
                                             value={value}

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -164,7 +164,7 @@ export const WithNoLapisDateFieldField: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -78,6 +78,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         messageToWorker,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         MutationOverTimeWorker,
     );
 

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -129,7 +129,7 @@ export const WithNoLapisDateField: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx

@@ -87,13 +87,13 @@ const PrevalenceOverTimeBubbleChart = ({
                     intersect: false,
                     callbacks: {
                         title: (context) => {
-                            const dataset = nonNullDateRangeData[context[0].datasetIndex!];
-                            const dataPoint = dataset.content[context[0].dataIndex!];
+                            const dataset = nonNullDateRangeData[context[0].datasetIndex];
+                            const dataPoint = dataset.content[context[0].dataIndex];
                             return dataPoint.dateRange?.toString();
                         },
                         label: (context) => {
-                            const dataset = nonNullDateRangeData[context.datasetIndex!];
-                            const dataPoint = dataset.content[context.dataIndex!];
+                            const dataset = nonNullDateRangeData[context.datasetIndex];
+                            const dataPoint = dataset.content[context.dataIndex];
 
                             const percentage = (dataPoint.prevalence * 100).toFixed(2);
                             const count = dataPoint.count.toFixed(0);

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -254,7 +254,7 @@ export const WithNoLapisDateField: StoryObj<PrevalenceOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -188,7 +188,7 @@ export const WithNoLapisDateField: StoryObj<RelativeGrowthAdvantageProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/shared/floating-ui/hooks.ts

@@ -20,7 +20,7 @@ export function useFloatingUi(
         const { current: floating } = floatingRef;
 
         const update = () => {
-            computePosition(reference, floating, {
+            void computePosition(reference, floating, {
                 placement,
                 middleware,
             }).then(({ x, y }) => {

package/src/preact/textInput/text-input.stories.tsx

@@ -92,13 +92,13 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
         const canvas = within(canvasElement);
 
         const changedListenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
         });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
-            expect(input).toHaveValue('Homo sapiens');
+            await expect(input).toHaveValue('Homo sapiens');
         });
 
         await step('Remove initial value', async () => {
@@ -122,7 +122,7 @@ export const WithNoLapisField: StoryObj<TextInputProps> = {
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/utils/map2d.ts

@@ -150,6 +150,7 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         this.keysSecondAxis = new Map(map.keysSecondAxis);
 
         if (map instanceof Map2dView) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- the generics match, we know that.
             this.baseMap = map.baseMap;
         }
         this.baseMap = map;

package/src/web-components/gs-app.stories.ts

@@ -50,9 +50,9 @@ export const Default: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText(LAPIS_URL)).toBeVisible();
-            expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText(LAPIS_URL)).toBeVisible();
+            await expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
         });
     },
 };
@@ -66,8 +66,8 @@ export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
         });
     },
 };
@@ -103,8 +103,8 @@ export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -16,7 +16,7 @@ const codeExample = String.raw`
 <gs-date-range-selector
     dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
-    valule="Year 2021"
+    value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
 ></gs-date-range-selector>`;
@@ -99,15 +99,15 @@ export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
 
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
             canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {
             await expect(selectField(canvas)).toHaveValue('Last month');
-            await waitFor(() => {
-                expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
+            await waitFor(async () => {
+                await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
             });
         });
 
@@ -133,5 +133,5 @@ export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
     },
 };
 
-const dateToPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date to');
-const selectField = (canvas: ReturnType<typeof within>) => canvas.getByRole('combobox');
+const dateToPicker = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByPlaceholderText('Date to');
+const selectField = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByRole('combobox');

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -181,7 +181,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
         });
 

package/src/web-components/input/gs-location-filter.stories.ts

@@ -188,7 +188,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
         const inputField = () => canvas.getByRole('combobox');
 
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-location-changed', listenerMock);
         });
 

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -72,7 +72,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
         });
 
@@ -154,18 +154,18 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const placeholderText = inputField().getAttribute('placeholder');
 
-            expect(placeholderText).toEqual(
+            await expect(placeholderText).toEqual(
                 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)',
             );
         });
 
-        await waitFor(() => {
-            expect(canvas.getByText('seg1:123T')).toBeVisible();
-            expect(canvas.getByText('gene2:56')).toBeVisible();
-            return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('seg1:123T')).toBeVisible();
+            await expect(canvas.getByText('gene2:56')).toBeVisible();
+            await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
         });
     },
 };

package/src/web-components/input/gs-text-input.stories.ts

@@ -113,7 +113,7 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-text-input-changed', listenerMock);
         });
 
@@ -140,8 +140,8 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
         });
 
         await step('Verify event is fired with correct detail', async () => {
-            await waitFor(() => {
-                expect(listenerMock).toHaveBeenCalledWith(
+            await waitFor(async () => {
+                await expect(listenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {
                             host: 'Homo sapiens',

package/src/web-components/visualization/gs-aggregate.tsx

@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { Aggregate, type AggregateProps, type AggregateView } from '../../preact/aggregatedData/aggregate';
+import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -47,7 +47,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
      * A list of tabs with views that this component should provide.
      */
     @property({ type: Array })
-    views: AggregateView[] = ['table'];
+    views: ('table' | 'bar')[] = ['table'];
 
     /**
      * The filter to apply to the data.