@genspectrum/dashboard-components 0.5.7 → 0.6.1

package/src/preact/lineageFilter/fetchLineageAutocompleteList.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'vitest';
+
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
+
+describe('fetchLineageAutocompleteList', () => {
+    test('should add sublineage values', async () => {
+        lapisRequestMocks.aggregated({ fields: ['lineageField'] }, { data: [{ lineageField: 'B.1.1.7', count: 1 }] });
+
+        const result = await fetchLineageAutocompleteList(DUMMY_LAPIS_URL, 'lineageField');
+
+        expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
+    });
+});

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -0,0 +1,9 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+
+export async function fetchLineageAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+
+    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+
+    return data.flatMap((item) => [item[field], `${item[field]}*`]).sort();
+}

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

@@ -0,0 +1,56 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { LineageFilter, type LineageFilterProps } from './lineage-filter';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+const meta: Meta = {
+    title: 'Input/LineageFilter',
+    component: LineageFilter,
+    parameters: {
+        actions: {
+            handles: ['gs-lineage-filter-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'pangoLineage',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['pangoLineage'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Default: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <LineageFilter
+                lapisField={args.lapisField}
+                placeholderText={args.placeholderText}
+                initialValue={args.initialValue}
+                width={args.width}
+            />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: '',
+        width: '100%',
+    },
+};

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

@@ -0,0 +1,100 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useRef } from 'preact/hooks';
+
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
+import { useQuery } from '../useQuery';
+
+export interface LineageFilterInnerProps {
+    lapisField: string;
+    placeholderText?: string;
+    initialValue?: string;
+}
+
+export interface LineageFilterProps extends LineageFilterInnerProps {
+    width: string;
+}
+
+export const LineageFilter: FunctionComponent<LineageFilterProps> = ({ width, ...innerProps }) => {
+    const size = { width, height: '3rem' };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <LineageFilterInner {...innerProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
+    lapisField,
+    placeholderText,
+    initialValue,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const { data, error, isLoading } = useQuery(
+        () => fetchLineageAutocompleteList(lapis, lapisField),
+        [lapisField, lapis],
+    );
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        return <ErrorDisplay error={error} />;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    const onInput = () => {
+        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
+
+        if (isValidValue(value)) {
+            inputRef.current?.dispatchEvent(
+                new CustomEvent('gs-lineage-filter-changed', {
+                    detail: { [lapisField]: value },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        }
+    };
+
+    const isValidValue = (value: string | undefined) => {
+        if (value === undefined) {
+            return true;
+        }
+        return data.includes(value);
+    };
+
+    return (
+        <>
+            <input
+                type='text'
+                class='input input-bordered w-full'
+                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
+                onInput={onInput}
+                ref={inputRef}
+                list={lapisField}
+                value={initialValue}
+            />
+            <datalist id={lapisField}>
+                {data.map((item) => (
+                    <option value={item} key={item} />
+                ))}
+            </datalist>
+        </>
+    );
+};

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<MutationComparisonProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
     parameters: {
@@ -85,7 +84,6 @@ const Template: StoryObj<MutationComparisonProps> = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -115,7 +113,6 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         views: ['table', 'venn'],
         width: '100%',
         height: '700px',
-        headline: 'Mutation comparison',
         pageSize: 10,
     },
 };

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -11,7 +11,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -27,7 +26,6 @@ export type View = 'table' | 'venn';
 export interface MutationComparisonProps extends MutationComparisonInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface MutationComparisonInnerProps {
@@ -37,20 +35,13 @@ export interface MutationComparisonInnerProps {
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
-    width,
-    height,
-    headline = 'Mutation comparison',
-    ...innerProps
-}) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationComparisonInner {...innerProps} />
-                </Headline>
+                <MutationComparisonInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/preact/mutations/mutations.stories.tsx

@@ -24,7 +24,6 @@ const meta: Meta<MutationsProps> = {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
     },
 };
@@ -41,7 +40,6 @@ const Template = {
                     views={args.views}
                     width={args.width}
                     height={args.height}
-                    headline={args.headline}
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
@@ -57,7 +55,6 @@ export const Default: StoryObj<MutationsProps> = {
         views: ['grid', 'table', 'insertions'],
         width: '100%',
         height: '700px',
-        headline: 'Mutations',
         pageSize: 10,
     },
     parameters: {

package/src/preact/mutations/mutations.tsx

@@ -18,7 +18,6 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
@@ -41,23 +40,15 @@ export interface MutationsInnerProps {
 export interface MutationsProps extends MutationsInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({
-    width,
-    height,
-    headline = 'Mutations',
-    ...innerProps
-}) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <MutationsInner {...innerProps} />
-                </Headline>
+                <MutationsInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json

@@ -244,10 +244,6 @@
             "count": 416,
             "date": "2023-09-18"
         },
-        {
-            "count": 208,
-            "date": null
-        },
         {
             "count": 271,
             "date": "2023-09-15"
@@ -624,10 +620,6 @@
             "count": 313,
             "date": "2023-10-26"
         },
-        {
-            "count": 1,
-            "date": "2022-01-23"
-        },
         {
             "count": 91,
             "date": "2023-12-31"

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

@@ -35,7 +35,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 granularity={args.granularity}
                 smoothingWindow={args.smoothingWindow}
                 pageSize={args.pageSize}
@@ -50,7 +49,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: 'date',
         width: '100%',
         height: '700px',
-        headline: 'Number of sequences over time',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

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

@@ -13,7 +13,6 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -28,7 +27,6 @@ type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
     width: string;
     height: string;
-    headline: string;
 }
 
 interface NumberSequencesOverTimeInnerProps {
@@ -40,15 +38,13 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <NumberSequencesOverTimeInner {...innerProps} />
-                </Headline>
+                <NumberSequencesOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

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

@@ -31,7 +31,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         pageSize: { control: 'object' },
         yAxisMaxConfig: { control: 'object' },
     },
@@ -49,7 +48,6 @@ const Template = {
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
                 yAxisMaxConfig={args.yAxisMaxConfig}
@@ -72,7 +70,6 @@ export const TwoVariants = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {
@@ -149,7 +146,6 @@ export const OneVariant = {
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
         height: '700px',
-        headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxConfig: {

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

@@ -13,7 +13,6 @@ import { ConfidenceIntervalSelector } from '../components/confidence-interval-se
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -30,7 +29,6 @@ export type View = 'bar' | 'line' | 'bubble' | 'table';
 export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface PrevalenceOverTimeInnerProps {
@@ -45,20 +43,13 @@ export interface PrevalenceOverTimeInnerProps {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    width,
-    height,
-    headline = 'Prevalence over time',
-    ...innerProps
-}) => {
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({ width, height, ...innerProps }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <PrevalenceOverTimeInner {...innerProps} />
-                </Headline>
+                <PrevalenceOverTimeInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

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

@@ -20,7 +20,6 @@ export default {
         },
         width: { control: 'text' },
         height: { control: 'text' },
-        headline: { control: 'text' },
         yAxisMaxConfig: { control: 'object' },
     },
 };
@@ -35,7 +34,6 @@ export const Primary = {
                 views={args.views}
                 width={args.width}
                 height={args.height}
-                headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 yAxisMaxConfig={args.yAxisMaxConfig}
             />
@@ -48,7 +46,6 @@ export const Primary = {
         views: ['line'],
         width: '100%',
         height: '700px',
-        headline: 'Relative growth advantage',
         lapisDateField: 'date',
         yAxisMaxConfig: {
             linear: 1,

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

@@ -10,7 +10,6 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
-import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -26,7 +25,6 @@ export type View = 'line';
 export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
     width: string;
     height: string;
-    headline?: string;
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
@@ -41,17 +39,14 @@ export interface RelativeGrowthAdvantagePropsInner {
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     width,
     height,
-    headline = 'Relative growth advantage',
     ...innerProps
 }) => {
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} headline={headline}>
+        <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <Headline heading={headline}>
-                    <RelativeGrowthAdvantageInner {...innerProps} />
-                </Headline>
+                <RelativeGrowthAdvantageInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );

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

@@ -32,11 +32,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerPr
     );
 };
 
-export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
-    lapisField,
-    placeholderText,
-    initialValue,
-}) => {
+const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, placeholderText, initialValue }) => {
     const lapis = useContext(LapisUrlContext);
 
     const inputRef = useRef<HTMLInputElement>(null);

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

@@ -0,0 +1,137 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import '../app';
+import './gs-lineage-filter';
+import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const codeExample = String.raw`
+<gs-lineage-filter 
+    lapisField="pangoLineage"
+    placeholderText="Enter lineage"
+    initialValue="B.1.1.7"
+    width="50%">
+</gs-lineage-filter>`;
+
+const meta: Meta<Required<LineageFilterProps>> = {
+    title: 'Input/Lineage filter',
+    component: 'gs-lineage-filter',
+    parameters: withComponentDocs({
+        actions: {
+            handles: ['gs-lineage-filter-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'pangoLineage',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['pangoLineage'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    decorators: [withActions],
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<Required<LineageFilterProps>> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-lineage-filter
+                    .lapisField=${args.lapisField}
+                    .placeholderText=${args.placeholderText}
+                    .initialValue=${args.initialValue}
+                    .width=${args.width}
+                ></gs-lineage-filter>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: 'B.1.1.7',
+        width: '100%',
+    },
+};
+
+export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter lineage');
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
+
+        await step('Enters an invalid lineage value', async () => {
+            await userEvent.type(inputField(), 'notInList');
+            await expect(listenerMock).not.toHaveBeenCalled();
+        });
+
+        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 expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        pangoLineage: 'B.1.1.7',
+                    },
+                }),
+            );
+        });
+
+        await step('Enter a valid lineage value', async () => {
+            await userEvent.type(inputField(), '{backspace>9/}');
+            await userEvent.type(inputField(), 'B.1.1.7*');
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        pangoLineage: 'B.1.1.7*',
+                    },
+                }),
+            );
+        });
+    },
+    args: {
+        ...Default.args,
+        initialValue: '',
+    },
+};