@genspectrum/dashboard-components 0.12.1 → 0.13.1

package/src/query/queryWastewaterMutationsOverTime.ts

@@ -0,0 +1,55 @@
+import z from 'zod';
+
+import { FetchDetailsOperator } from '../operator/FetchDetailsOperator';
+import { type LapisFilter } from '../types';
+import { type Substitution, SubstitutionClass } from '../utils/mutations';
+import { parseDateStringToTemporal, type TemporalClass, toTemporalClass } from '../utils/temporalClass';
+
+export type WastewaterData = {
+    location: string;
+    date: TemporalClass;
+    nucleotideMutationFrequency: { mutation: Substitution; proportion: number | null }[];
+    aminoAcidMutationFrequency: { mutation: Substitution; proportion: number | null }[];
+}[];
+
+export async function queryWastewaterMutationsOverTime(
+    lapis: string,
+    lapisFilter: LapisFilter,
+    signal?: AbortSignal,
+): Promise<WastewaterData> {
+    const fetchData = new FetchDetailsOperator(lapisFilter, [
+        'date',
+        'location',
+        'nucleotideMutationFrequency',
+        'aminoAcidMutationFrequency',
+    ]);
+    const data = (await fetchData.evaluate(lapis, signal)).content;
+
+    return data.map((row) => ({
+        location: row.location as string,
+        date: toTemporalClass(parseDateStringToTemporal(row.date as string, 'day')),
+        nucleotideMutationFrequency:
+            row.nucleotideMutationFrequency !== null
+                ? transformMutations(JSON.parse(row.nucleotideMutationFrequency as string))
+                : [],
+        aminoAcidMutationFrequency:
+            row.aminoAcidMutationFrequency !== null
+                ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency as string))
+                : [],
+    }));
+}
+
+const mutationFrequencySchema = z.record(z.number().nullable());
+
+function transformMutations(input: unknown): { mutation: Substitution; proportion: number | null }[] {
+    const mutationFrequency = mutationFrequencySchema.safeParse(input);
+
+    if (!mutationFrequency.success) {
+        throw new Error(`Failed to parse mutation frequency: ${mutationFrequency.error.message}`);
+    }
+
+    return Object.entries(mutationFrequency.data).map(([key, value]) => ({
+        mutation: SubstitutionClass.parse(key)!,
+        proportion: value,
+    }));
+}

package/src/types.ts

@@ -28,6 +28,9 @@ export const namedLapisFilterSchema = z.object({
 });
 export type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;
 
+export const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined()]));
+export type LapisLocationFilter = z.infer<typeof lapisLocationFilterSchema>;
+
 export const temporalGranularitySchema = z.union([
     z.literal('day'),
     z.literal('week'),

package/src/utilEntrypoint.ts

@@ -34,3 +34,5 @@ export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceI
 export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';
 
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
+export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
+export { TextInputChangedEvent } from './preact/textInput/TextInputChangedEvent';

package/src/utils/map2d.ts

@@ -17,6 +17,8 @@ export interface Map2d<Key1, Key2, Value> {
 
     serializeSecondAxis(key: Key2): string;
 
+    getContents(): Map2DContents<Key1, Key2, Value>;
+
     readonly keysFirstAxis: Map<string, Key1>;
     readonly keysSecondAxis: Map<string, Key2>;
 }
@@ -106,6 +108,35 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
     }
 }
 
+export class SortedMap2d<Key1 extends object | string, Key2 extends object | string, Value> extends Map2dBase<
+    Key1,
+    Key2,
+    Value
+> {
+    constructor(
+        delegate: Map2d<Key1, Key2, Value>,
+        sortFirstAxis: (a: Key1, b: Key1) => number,
+        sortSecondAxis: (a: Key2, b: Key2) => number,
+    ) {
+        const contents = delegate.getContents();
+        const sortedFirstAxisKeys = new Map(
+            [...contents.keysFirstAxis.entries()].sort((a, b) => sortFirstAxis(a[1], b[1])),
+        );
+        const sortedSecondAxisKeys = new Map(
+            [...contents.keysSecondAxis.entries()].sort((a, b) => sortSecondAxis(a[1], b[1])),
+        );
+        super(
+            (key: Key1) => delegate.serializeFirstAxis(key),
+            (key: Key2) => delegate.serializeSecondAxis(key),
+            {
+                keysFirstAxis: sortedFirstAxisKeys,
+                keysSecondAxis: sortedSecondAxisKeys,
+                data: contents.data,
+            },
+        );
+    }
+}
+
 export class Map2dView<Key1 extends object | string, Key2 extends object | string, Value>
     implements Map2d<Key1, Key2, Value>
 {
@@ -175,4 +206,12 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
 
         return this.baseMap.getRow(key);
     }
+
+    getContents() {
+        return {
+            keysFirstAxis: this.keysFirstAxis,
+            keysSecondAxis: this.keysSecondAxis,
+            data: this.baseMap.getContents().data,
+        };
+    }
 }

package/src/web-components/index.ts

@@ -1,3 +1,4 @@
 export { App } from './app.js';
 export * from './visualization';
+export * from './wastewaterVisualization';
 export * from './input';

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

@@ -14,8 +14,9 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-lineage-filter 
     lapisField="pangoLineage"
+    lapisFilter='{"counrty": "Germany"}'
     placeholderText="Enter lineage"
-    initialValue="B.1.1.7"
+    value="B.1.1.7"
     width="50%">
 </gs-lineage-filter>`;
 
@@ -34,6 +35,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['pangoLineage'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -50,18 +52,47 @@ const meta: Meta<Required<LineageFilterProps>> = {
         },
     }),
     tags: ['autodocs'],
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'select',
+            },
+            options: ['host'],
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
 };
 
 export default meta;
 
-export const Default: StoryObj<Required<LineageFilterProps>> = {
+const Template: StoryObj<Required<LineageFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-lineage-filter
                     .lapisField=${args.lapisField}
+                    .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
-                    .initialValue=${args.initialValue}
+                    .value=${args.value}
                     .width=${args.width}
                 ></gs-lineage-filter>
             </div>
@@ -69,18 +100,86 @@ export const Default: StoryObj<Required<LineageFilterProps>> = {
     },
     args: {
         lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: 'B.1.1.7',
+        lapisFilter: {
+            country: 'Germany',
+        },
+        placeholderText: 'Enter a lineage',
+        value: 'B.1.1.7',
         width: '100%',
     },
 };
 
+const aggregatedEndpointMatcher = {
+    name: 'pangoLineage',
+    url: AGGREGATED_ENDPOINT,
+    body: {
+        fields: ['pangoLineage'],
+        country: 'Germany',
+    },
+};
+
+export const LineageFilter: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible();
+        });
+    },
+};
+
+export const DelayToShowLoadingState: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                    options: {
+                        delay: 5000,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const FetchingLocationsFails: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 400,
+                        body: {
+                            error: { status: 400, detail: 'Dummy error message from mock LAPIS', type: 'about:blank' },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+
+        await waitFor(() =>
+            expect(canvas.getByText('Oops! Something went wrong.', { exact: false })).toBeInTheDocument(),
+        );
+    },
+};
+
 export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
-    ...Default,
+    ...LineageFilter,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
 
-        const inputField = () => canvas.getByPlaceholderText('Enter lineage');
+        const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
         await step('Setup event listener mock', async () => {
             canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
@@ -99,38 +198,28 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>9/}');
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                pangoLineage: undefined,
-            });
-        });
-
-        await step('Enter a valid lineage value', async () => {
-            await userEvent.type(inputField(), 'B.1.1.7');
+            await userEvent.click(canvas.getByLabelText('toggle menu'));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        pangoLineage: 'B.1.1.7',
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
         });
 
         await step('Enter a valid lineage value', async () => {
-            await userEvent.type(inputField(), '{backspace>9/}');
             await userEvent.type(inputField(), 'B.1.1.7*');
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*' }));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        pangoLineage: 'B.1.1.7*',
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: 'B.1.1.7*',
+                });
+            });
         });
     },
     args: {
-        ...Default.args,
-        initialValue: '',
+        ...LineageFilter.args,
+        value: '',
     },
 };

package/src/web-components/input/gs-lineage-filter.tsx

@@ -1,6 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -13,11 +14,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Currently, it is designed to work well with Pango Lineages,
  * but it may also be used for other lineage types, if suitable.
  *
- * It fetches all available values of the `lapisField` from the LAPIS instance
+ * It fetches all available values of the `lapisField` from the LAPIS instance within the given `lapisFilter`
  * and provides an autocomplete list with the available values of the lineage and sublineage queries
  * (a `*` appended to the lineage value).
  *
- * @fires {CustomEvent<Record<string, string>>} gs-lineage-filter-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-lineage-filter-changed
  * Fired when the input field is changed.
  * The `details` of this event contain an object with the `lapisField` as key and the input value as value.
  * Example:
@@ -33,7 +34,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
      * The initial value to use for this lineage filter.
      */
     @property()
-    initialValue: string = '';
+    value: string = '';
 
     /**
      * Required.
@@ -44,6 +45,19 @@ export class LineageFilterComponent extends PreactLitAdapter {
     @property()
     lapisField = '';
 
+    /**
+     * The filter that is used to fetch the available the autocomplete options.
+     * If not set it fetches all available options.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
+
     /**
      * The placeholder text to display in the input field.
      */
@@ -62,8 +76,9 @@ export class LineageFilterComponent extends PreactLitAdapter {
         return (
             <LineageFilter
                 lapisField={this.lapisField}
+                lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
-                initialValue={this.initialValue}
+                value={this.value}
                 width={this.width}
             />
         );
@@ -76,7 +91,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -90,12 +105,13 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<
-    Equals<typeof LineageFilterComponent.prototype.initialValue, LineageFilterProps['initialValue']>
->;
+type InitialValueMatches = Expect<Equals<typeof LineageFilterComponent.prototype.value, LineageFilterProps['value']>>;
 type LapisFieldMatches = Expect<
     Equals<typeof LineageFilterComponent.prototype.lapisField, LineageFilterProps['lapisField']>
 >;
+type LapisFilterMatches = Expect<
+    Equals<typeof LineageFilterComponent.prototype.lapisFilter, LineageFilterProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof LineageFilterComponent.prototype.placeholderText, LineageFilterProps['placeholderText']>
 >;

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

@@ -15,6 +15,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-location-filter
     fields='["region", "country"]'
+    lapisFilter='{"age": 10}'
     value='{ "region": "Europe", "country": null}'
     width="100%"
     placeholderText="Enter a location"
@@ -54,6 +55,9 @@ const meta: Meta = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            age: 18,
+        },
     },
     tags: ['autodocs'],
 };
@@ -66,6 +70,7 @@ const Template: StoryObj<LocationFilterProps> = {
             <div class="max-w-screen-lg">
                 <gs-location-filter
                     .fields=${args.fields}
+                    .lapisFilter=${args.lapisFilter}
                     .value=${args.value}
                     .width=${args.width}
                     placeholderText=${ifDefined(args.placeholderText)}
@@ -75,6 +80,9 @@ const Template: StoryObj<LocationFilterProps> = {
     },
     args: {
         fields: ['region', 'country', 'division', 'location'],
+        lapisFilter: {
+            age: 18,
+        },
         value: undefined,
         width: '100%',
         placeholderText: 'Enter a location',
@@ -86,6 +94,7 @@ const aggregatedEndpointMatcher = {
     url: AGGREGATED_ENDPOINT,
     body: {
         fields: ['region', 'country', 'division', 'location'],
+        age: 18,
     },
 };
 

package/src/web-components/input/gs-location-filter.tsx

@@ -12,10 +12,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * This component provides an input field to specify filters for locations.
  *
  * It expects a list of fields that form a strict hierarchical order, such as continent, country, and city.
- * The component retrieves a list of all possible values for these fields from the Lapis instance.
+ * The component retrieves a list of all possible values for these fields from the Lapis instance,
+ * within the `lapisFilter`.
  * This list is then utilized to display autocomplete suggestions and to validate the input.
  *
- * @fires {CustomEvent<Record<string, string>>} gs-location-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
  * and the corresponding values as values, even if they are `undefined`.
@@ -35,7 +36,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * The initial value to use for this location filter.
      */
     @property({ type: Object })
-    value: Record<string, string | null | undefined> | undefined = undefined;
+    value: Record<string, string | undefined> | undefined = undefined;
 
     /**
      * Required.
@@ -48,6 +49,19 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: Array })
     fields: string[] = [];
 
+    /**
+     * The filter that is used to fetch the available the autocomplete options.
+     * If not set it fetches all available options.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
+
     /**
      * The width of the component.
      *
@@ -67,6 +81,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
             <LocationFilter
                 value={this.value}
                 fields={this.fields}
+                lapisFilter={this.lapisFilter}
                 width={this.width}
                 placeholderText={this.placeholderText}
             />
@@ -96,6 +111,9 @@ declare global {
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<Equals<typeof LocationFilterComponent.prototype.value, LocationFilterProps['value']>>;
 type FieldsMatches = Expect<Equals<typeof LocationFilterComponent.prototype.fields, LocationFilterProps['fields']>>;
+type LapisFilterMatches = Expect<
+    Equals<typeof LocationFilterComponent.prototype.lapisFilter, LocationFilterProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof LocationFilterComponent.prototype.placeholderText, LocationFilterProps['placeholderText']>
 >;

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

@@ -14,8 +14,9 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-text-input 
     lapisField="host"
+    lapisFilter='{"country": "Germany"}'
     placeholderText="Enter host name"
-    initialValue="Homo sapiens"
+    value="Homo sapiens"
     width="50%">
 </gs-text-input>`;
 
@@ -34,6 +35,7 @@ const meta: Meta<Required<TextInputProps>> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['host'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -60,7 +62,7 @@ const meta: Meta<Required<TextInputProps>> = {
                 type: 'text',
             },
         },
-        initialValue: {
+        value: {
             control: {
                 type: 'text',
             },
@@ -70,6 +72,11 @@ const meta: Meta<Required<TextInputProps>> = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     tags: ['autodocs'],
 };
@@ -82,8 +89,9 @@ export const Default: StoryObj<Required<TextInputProps>> = {
             <div class="max-w-screen-lg">
                 <gs-text-input
                     .lapisField=${args.lapisField}
+                    .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
-                    .initialValue=${args.initialValue}
+                    .value=${args.value}
                     .width=${args.width}
                 ></gs-text-input>
             </div>
@@ -91,8 +99,9 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
     args: {
         lapisField: 'host',
+        lapisFilter: { country: 'Germany' },
         placeholderText: 'Enter host name',
-        initialValue: 'Homo sapiens',
+        value: 'Homo sapiens',
         width: '100%',
     },
 };
@@ -163,6 +172,6 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
     },
     args: {
         ...Default.args,
-        initialValue: '',
+        value: '',
     },
 };