@genspectrum/dashboard-components 0.1.1

package/src/web-components/display/mutation-comparison-component.tsx

@@ -0,0 +1,31 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import {
+    MutationComparison,
+    type MutationComparisonVariant,
+    type View,
+} from '../../preact/mutationComparison/mutation-comparison';
+import { type SequenceType } from '../../types';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+@customElement('gs-mutation-comparison-component')
+export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
+    @property({ type: Array })
+    variants: MutationComparisonVariant[] = [];
+
+    @property({ type: String })
+    sequenceType: SequenceType = 'nucleotide';
+
+    @property({ type: Array })
+    views: View[] = ['table'];
+
+    override render() {
+        return <MutationComparison variants={this.variants} sequenceType={this.sequenceType} views={this.views} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-comparison-component': MutationComparisonComponent;
+    }
+}

package/src/web-components/display/mutations-component.stories.ts

@@ -0,0 +1,107 @@
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './mutations-component';
+import '../app';
+import { LAPIS_URL, NUCLEOTIDE_INSERTIONS_ENDPOINT, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import nucleotideInsertions from '../../preact/mutations/__mockData__/nucleotideInsertions.json';
+import nucleotideMutations from '../../preact/mutations/__mockData__/nucleotideMutations.json';
+import { type MutationsProps } from '../../preact/mutations/mutations';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta<MutationsProps> = {
+    title: 'Visualization/Mutations',
+    component: 'gs-mutations',
+    argTypes: {
+        variant: { control: 'object' },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['table', 'grid', 'insertions'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<MutationsProps> = {
+    render: (args) => html`
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-mutations-component
+                    .variant=${args.variant}
+                    .sequenceType=${args.sequenceType}
+                    .views=${args.views}
+                ></gs-mutations-component>
+            </gs-app>
+        </div>
+    `,
+};
+
+export const Default: StoryObj<MutationsProps> = {
+    ...Template,
+    args: {
+        variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+        sequenceType: 'nucleotide',
+        views: ['grid', 'table', 'insertions'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'nucleotideMutations',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateTo: '2022-01-01',
+                            minProportion: 0,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutations,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideInsertions',
+                        url: NUCLEOTIDE_INSERTIONS_ENDPOINT,
+                        body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideInsertions,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OnTableTab: StoryObj<MutationsProps> = {
+    ...Default,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+
+        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));
+    },
+};
+
+export const OnInsertionsTab: StoryObj<MutationsProps> = {
+    ...Default,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+
+        await waitFor(() => expect(canvas.getByLabelText('Insertions', { selector: 'input' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByLabelText('Insertions', { selector: 'input' }));
+    },
+};

package/src/web-components/display/mutations-component.tsx

@@ -0,0 +1,27 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { Mutations, type View } from '../../preact/mutations/mutations';
+import { type LapisFilter, type SequenceType } from '../../types';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+@customElement('gs-mutations-component')
+export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
+    @property({ type: Object })
+    variant: LapisFilter = { displayName: '' };
+
+    @property({ type: String })
+    sequenceType: SequenceType = 'nucleotide';
+
+    @property({ type: Array })
+    views: View[] = ['table', 'grid'];
+
+    override render() {
+        return <Mutations variant={this.variant} sequenceType={this.sequenceType} views={this.views} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutations-component': MutationsComponent;
+    }
+}

package/src/web-components/display/prevalence-over-time-component.stories.ts

@@ -0,0 +1,205 @@
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../app';
+import './prevalence-over-time-component';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
+import denominatorOneVariant from '../../preact/prevalenceOverTime/__mockData__/denominatorOneVariant.json';
+import numeratorEG from '../../preact/prevalenceOverTime/__mockData__/numeratorEG.json';
+import numeratorJN1 from '../../preact/prevalenceOverTime/__mockData__/numeratorJN1.json';
+import numeratorOneVariant from '../../preact/prevalenceOverTime/__mockData__/numeratorOneVariant.json';
+import { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta<PrevalenceOverTimeProps> = {
+    title: 'Visualization/Prevalence over time',
+    component: 'gs-prevalence-over-time',
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        smoothingWindow: { control: 'number' },
+        views: {
+            options: ['bar', 'line', 'bubble', 'table'],
+            control: { type: 'check' },
+        },
+        confidenceIntervalMethods: {
+            options: ['wilson'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<PrevalenceOverTimeProps> = {
+    render: (args) => html`
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-prevalence-over-time
+                    .numerator=${args.numerator}
+                    .denominator=${args.denominator}
+                    .granularity=${args.granularity}
+                    .smoothingWindow=${args.smoothingWindow}
+                    .views=${args.views}
+                    .confidenceIntervalMethods=${args.confidenceIntervalMethods}
+                ></gs-prevalence-over-time>
+            </gs-app>
+        </div>
+    `,
+};
+
+export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
+    ...Template,
+    args: {
+        numerator: [
+            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
+            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+        ],
+        denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' },
+        granularity: 'month',
+        smoothingWindow: 0,
+        views: ['bar', 'line', 'bubble', 'table'],
+        confidenceIntervalMethods: ['wilson'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorEG,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorJN1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorJN1,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominator',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominator,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
+    ...Template,
+    args: {
+        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' },
+        granularity: 'day',
+        smoothingWindow: 7,
+        views: ['bar', 'line', 'bubble', 'table'],
+        confidenceIntervalMethods: ['wilson'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numeratorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'BA.2.86*',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorOneVariant,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominatorOneVariant',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            dateFrom: '2023-10-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominatorOneVariant,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OneVariantOnLineTab: StoryObj<PrevalenceOverTimeProps> = {
+    ...OneVariant,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
+
+        await waitFor(() => expect(canvas.getByLabelText('Line', { selector: 'input' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByLabelText('Line', { selector: 'input' }));
+    },
+};
+
+export const OneVariantOnBubbleTab: StoryObj<PrevalenceOverTimeProps> = {
+    ...OneVariant,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
+
+        await waitFor(() => expect(canvas.getByLabelText('Bubble', { selector: 'input' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByLabelText('Bubble', { selector: 'input' }));
+    },
+};
+
+export const OneVariantOnTableTab: StoryObj<PrevalenceOverTimeProps> = {
+    ...OneVariant,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
+
+        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));
+    },
+};

package/src/web-components/display/prevalence-over-time-component.tsx

@@ -0,0 +1,46 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import PrevalenceOverTime, { type View } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import { type ConfidenceIntervalMethod } from '../../preact/shared/charts/confideceInterval';
+import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
+
+@customElement('gs-prevalence-over-time')
+export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    @property({ type: Object })
+    numerator: NamedLapisFilter | NamedLapisFilter[] = { displayName: '' };
+
+    @property({ type: Object })
+    denominator: NamedLapisFilter = { displayName: '' };
+
+    @property({ type: String })
+    granularity: TemporalGranularity = 'day';
+
+    @property({ type: Number })
+    smoothingWindow: number = 0;
+
+    @property({ type: Array })
+    views: View[] = ['bar', 'line', 'bubble', 'table'];
+
+    @property({ type: Array })
+    confidenceIntervalMethods: ConfidenceIntervalMethod[] = ['wilson'];
+
+    override render() {
+        return (
+            <PrevalenceOverTime
+                numerator={this.numerator}
+                denominator={this.denominator}
+                granularity={this.granularity}
+                smoothingWindow={this.smoothingWindow}
+                views={this.views}
+                confidenceIntervalMethods={this.confidenceIntervalMethods}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+    }
+}

package/src/web-components/display/relative-growth-advantage-component.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './relative-growth-advantage-component';
+import '../app';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import denominator from '../../preact/relativeGrowthAdvantage/__mockData__/denominator.json';
+import numerator from '../../preact/relativeGrowthAdvantage/__mockData__/numerator.json';
+import { type RelativeGrowthAdvantageProps } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+
+const meta: Meta<RelativeGrowthAdvantageProps> = {
+    title: 'Visualization/Relative growth advantage',
+    component: 'gs-relative-growth-advantage',
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        generationTime: { control: 'number' },
+        views: {
+            options: ['line'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<RelativeGrowthAdvantageProps> = {
+    render: (args) => html`
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-relative-growth-advantage
+                    .numerator=${args.numerator}
+                    .denominator=${args.denominator}
+                    .generationTime=${args.generationTime}
+                    .views=${args.views}
+                ></gs-relative-growth-advantage>
+            </gs-app>
+        </div>
+    `,
+};
+
+export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
+    ...Template,
+    args: {
+        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        generationTime: 7,
+        views: ['line'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'numerator',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            pangoLineage: 'B.1.1.7',
+                            dateFrom: '2020-12-01',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numerator,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'denominator',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'Switzerland',
+                            dateFrom: '2020-12-01',
+                            dateTo: '2021-03-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominator,
+                    },
+                },
+            ],
+        },
+    },
+};

package/src/web-components/display/relative-growth-advantage-component.tsx

@@ -0,0 +1,37 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { RelativeGrowthAdvantage, type View } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
+import type { LapisFilter } from '../../types';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+@customElement('gs-relative-growth-advantage')
+export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
+    @property({ type: Object })
+    numerator: LapisFilter = {};
+
+    @property({ type: Object })
+    denominator: LapisFilter = {};
+
+    @property({ type: Number })
+    generationTime: number = 7;
+
+    @property({ type: Array })
+    views: View[] = ['line'];
+
+    override render() {
+        return (
+            <RelativeGrowthAdvantage
+                numerator={this.numerator}
+                denominator={this.denominator}
+                generationTime={this.generationTime}
+                views={this.views}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+    }
+}

package/src/web-components/index.ts

@@ -0,0 +1,3 @@
+export { App } from './app.js';
+export * from './display';
+export * from './input';

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

@@ -0,0 +1,53 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { expect, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { LAPIS_URL } from '../../constants';
+import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import './date-range-selector-component';
+import '../app';
+import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta<DateRangeSelectorProps> = {
+    title: 'Input/DateRangeSelector',
+    component: 'gs-date-range-selector',
+    parameters: {
+        actions: {
+            handles: ['gs-date-range-changed'],
+        },
+        fetchMock: {},
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
+    render: (args) =>
+        html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-date-range-selector
+                    .customSelectOptions=${args.customSelectOptions}
+                    .earliestDate=${args.earliestDate}
+                ></gs-date-range-selector>
+            </div>
+        </gs-app>`,
+
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
+        const dateTo = () => canvas.getByPlaceholderText('Date to');
+
+        await step('Expect last 6 months to be selected', async () => {
+            await expect(canvas.getByRole('combobox')).toHaveValue('last6Months');
+            await waitFor(() => {
+                expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));
+            });
+        });
+    },
+    args: {
+        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        earliestDate: '1970-01-01',
+    },
+};

package/src/web-components/input/date-range-selector-component.tsx

@@ -0,0 +1,33 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { type CustomSelectOption, DateRangeSelector } from '../../preact/dateRangeSelector/date-range-selector';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * @fires {CustomEvent<{ dateFrom: string; dateTo: string; }>} gs-date-range-changed - When the date range has changed
+ */
+@customElement('gs-date-range-selector')
+export class DateRangeSelectorComponent extends PreactLitAdapter {
+    @property({ type: Array })
+    customSelectOptions: CustomSelectOption[] = [];
+
+    @property({ type: String })
+    earliestDate: string | undefined = '1900-01-01';
+
+    override render() {
+        return <DateRangeSelector customSelectOptions={this.customSelectOptions} earliestDate={this.earliestDate} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<{
+            dateFrom: string;
+            dateTo: string;
+        }>;
+    }
+}

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

@@ -0,0 +1,4 @@
+export { DateRangeSelectorComponent } from './date-range-selector-component';
+export { LocationFilterComponent } from './location-filter-component';
+export { TextInputComponent } from './text-input-component';
+export { MutationFilterComponent } from './mutation-filter-component';