@genspectrum/dashboard-components 0.12.1 → 0.13.1

package/src/web-components/input/gs-text-input.tsx

@@ -1,6 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { type TextInputChangedEvent } from '../../preact/textInput/TextInputChangedEvent';
 import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -11,7 +12,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * This component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.
  *
- * @fires {CustomEvent<Record<string, string>>} gs-text-input-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-input-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:
@@ -27,7 +28,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The initial value to use for this text input.
      */
     @property()
-    initialValue: string | undefined = undefined;
+    value: string | undefined = undefined;
 
     /**
      * Required.
@@ -38,6 +39,19 @@ export class TextInputComponent 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.
      */
@@ -56,8 +70,9 @@ export class TextInputComponent extends PreactLitAdapter {
         return (
             <TextInput
                 lapisField={this.lapisField}
+                lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
-                initialValue={this.initialValue}
+                value={this.value}
                 width={this.width}
             />
         );
@@ -70,7 +85,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -84,10 +99,11 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.initialValue, TextInputProps['initialValue']>
->;
+type InitialValueMatches = Expect<Equals<typeof TextInputComponent.prototype.value, TextInputProps['value']>>;
 type LapisFieldMatches = Expect<Equals<typeof TextInputComponent.prototype.lapisField, TextInputProps['lapisField']>>;
+type LapisFilterMatches = Expect<
+    Equals<typeof TextInputComponent.prototype.lapisFilter, TextInputProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof TextInputComponent.prototype.placeholderText, TextInputProps['placeholderText']>
 >;

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