@genspectrum/dashboard-components 0.13.0 → 0.13.2

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/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/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './gs-wastewater-mutations-over-time';
+import '../app';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../constants';
+import details from '../../preact/wastewater/mutationsOverTime/__mockData__/details.json';
+import { type WastewaterMutationsOverTimeProps } from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
+
+const codeExample = String.raw`
+<gs-wastewater-mutations-over-time
+    lapisFilter='{ "dateFrom": "2024-01-01" }'
+    sequenceType='nucleotide'
+    width='100%'
+    height='700px'
+></gs-wastewater-mutations-over-time>`;
+
+const meta: Meta<Required<WastewaterMutationsOverTimeProps>> = {
+    title: 'Wastewater visualization/Wastewater mutations over time',
+    component: 'gs-wastewater-mutations-over-time',
+    argTypes: {
+        lapisFilter: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    args: {
+        lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false },
+        sequenceType: 'nucleotide',
+        width: '100%',
+        height: '700px',
+    },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+        fetchMock: {},
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const WastewaterMutationsOverTime: StoryObj<Required<WastewaterMutationsOverTimeProps>> = {
+    render: (args) => html`
+        <gs-app lapis="${WISE_LAPIS_URL}">
+            <gs-wastewater-mutations-over-time
+                .lapisFilter=${args.lapisFilter}
+                .sequenceType=${args.sequenceType}
+                .width=${args.width}
+                .height=${args.height}
+            ></gs-wastewater-mutations-over-time>
+        </gs-app>
+    `,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'details',
+                        url: WISE_DETAILS_ENDPOINT,
+                        body: {
+                            fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'],
+                            versionStatus: 'LATEST_VERSION',
+                            isRevocation: false,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: details,
+                    },
+                },
+            ],
+        },
+    },
+};

package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx

@@ -0,0 +1,112 @@
+import { customElement, property } from 'lit/decorators.js';
+import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+
+import {
+    WastewaterMutationsOverTime,
+    type WastewaterMutationsOverTimeProps,
+} from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
+import { type Equals, type Expect } from '../../utils/typeAssertions';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+/**
+ * ## Context
+ *
+ * This component displays mutations for Swiss wastewater data generated within the WISE consortium. It is designed
+ * only for this purpose and is not designed to be reused outside the WISE project.
+ *
+ * It relies on a LAPIS instance that has the fields `nucleotideMutationFrequency` and `aminoAcidMutationFrequency`.
+ * Those fields are expected to be JSON strings of the format `{ [mutation]: frequency | null }`
+ * (e.g. `{ "A123T": 0.5, "C456G": 0.7, "T789G": null }`).
+ *
+ * The component will stratify by `location`.
+ * Every location will be rendered in a separate tab.
+ * The content of the tab is a "mutations over time" grid, similar to the one used in the `gs-mutations-over-time` component.
+ *
+ * This component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.
+ */
+@customElement('gs-wastewater-mutations-over-time')
+export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * Required.
+     *
+     * LAPIS filter to select the displayed data.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
+
+    /**
+     * Required.
+     *
+     * Whether to display nucleotide or amino acid mutations.
+     */
+    @property({ type: String })
+    sequenceType: 'nucleotide' | 'amino acid' = 'nucleotide';
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    height: string = '700px';
+
+    override render() {
+        return (
+            <WastewaterMutationsOverTime
+                lapisFilter={this.lapisFilter}
+                sequenceType={this.sequenceType}
+                width={this.width}
+                height={this.height}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type LapisFilterMatches = Expect<
+    Equals<
+        typeof WastewaterMutationsOverTimeComponent.prototype.lapisFilter,
+        WastewaterMutationsOverTimeProps['lapisFilter']
+    >
+>;
+type SequenceTypeMatches = Expect<
+    Equals<
+        typeof WastewaterMutationsOverTimeComponent.prototype.sequenceType,
+        WastewaterMutationsOverTimeProps['sequenceType']
+    >
+>;
+type WidthMatches = Expect<
+    Equals<typeof WastewaterMutationsOverTimeComponent.prototype.width, WastewaterMutationsOverTimeProps['width']>
+>;
+type HeightMatches = Expect<
+    Equals<typeof WastewaterMutationsOverTimeComponent.prototype.height, WastewaterMutationsOverTimeProps['height']>
+>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/wastewaterVisualization/index.ts

@@ -0,0 +1 @@
+export { WastewaterMutationsOverTimeComponent } from './gs-wastewater-mutations-over-time';