@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/src/preact/components/error-boundary.stories.tsx

@@ -0,0 +1,54 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { ErrorBoundary } from './error-boundary';
+
+const meta: Meta = {
+    title: 'Component/Error boundary',
+    component: ErrorBoundary,
+    parameters: { fetchMock: {} },
+    argTypes: {
+        size: { control: 'object' },
+        defaultSize: { control: 'object' },
+        headline: { control: 'text' },
+    },
+    args: {
+        size: { height: '600px', width: '100%' },
+        headline: 'Some headline',
+    },
+};
+
+export default meta;
+
+export const ErrorBoundaryWithoutErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} headline={args.headline}>
+            <div>Some content</div>
+        </ErrorBoundary>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.getByText('Some content', { exact: false });
+        await waitFor(() => expect(content).toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText('Some headline')).not.toBeInTheDocument());
+    },
+};
+
+export const ErrorBoundaryWithErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} headline={args.headline}>
+            <ContentThatThrowsError />
+        </ErrorBoundary>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.queryByText('Some content.', { exact: false });
+        await waitFor(() => expect(content).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Some headline')).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Error')).toBeInTheDocument());
+    },
+};
+
+const ContentThatThrowsError = () => {
+    throw new Error('Some error');
+};

package/src/preact/components/error-boundary.tsx

@@ -0,0 +1,22 @@
+import type { FunctionComponent } from 'preact';
+import { useErrorBoundary } from 'preact/hooks';
+
+import { ErrorDisplay } from './error-display';
+import { ResizeContainer, type Size } from './resize-container';
+import Headline from '../components/headline';
+
+export const ErrorBoundary: FunctionComponent<{ size: Size; headline?: string }> = ({ size, headline, children }) => {
+    const [internalError] = useErrorBoundary();
+
+    if (internalError) {
+        return (
+            <ResizeContainer size={size}>
+                <Headline heading={headline}>
+                    <ErrorDisplay error={internalError} />
+                </Headline>
+            </ResizeContainer>
+        );
+    }
+
+    return <>{children}</>;
+};

package/src/preact/components/error-display.stories.tsx

@@ -1,7 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import { ErrorDisplay } from './error-display';
+import { ErrorDisplay, UserFacingError } from './error-display';
+import { ResizeContainer } from './resize-container';
 
 const meta: Meta = {
     title: 'Component/Error',
@@ -12,11 +13,38 @@ const meta: Meta = {
 export default meta;
 
 export const ErrorStory: StoryObj = {
-    render: () => <ErrorDisplay error={new Error('some message')} />,
+    render: () => (
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new Error('some message')} />
+        </ResizeContainer>
+    ),
 
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const error = canvas.getByText('Error: ', { exact: false });
+        const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
         await waitFor(() => expect(error).toBeInTheDocument());
+        await waitFor(() => expect(canvas.queryByText('some message')).not.toBeInTheDocument());
+    },
+};
+
+export const UserFacingErrorStory: StoryObj = {
+    render: () => (
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} />
+        </ResizeContainer>
+    ),
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
+        const detailMessage = () => canvas.getByText('some message');
+        await waitFor(() => expect(error).toBeInTheDocument());
+        await waitFor(() => {
+            expect(detailMessage()).not.toBeVisible();
+        });
+        await userEvent.click(canvas.getByText('Show details.'));
+        await waitFor(() => {
+            expect(detailMessage()).toBeVisible();
+        });
     },
 };

package/src/preact/components/error-display.tsx

@@ -1,5 +1,52 @@
 import { type FunctionComponent } from 'preact';
+import { useRef } from 'preact/hooks';
+
+export class UserFacingError extends Error {
+    constructor(
+        public readonly headline: string,
+        message: string,
+    ) {
+        super(message);
+        this.name = 'UserFacingError';
+    }
+}
 
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
-    return <div>Error: {error.message}</div>;
+    console.error(error);
+
+    const ref = useRef<HTMLDialogElement>(null);
+
+    return (
+        <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col'>
+            <div className='text-red-700 font-bold'>Error</div>
+            <div>
+                Oops! Something went wrong.
+                {error instanceof UserFacingError && (
+                    <>
+                        {' '}
+                        <button
+                            className='text-sm text-gray-600 hover:text-gray-300'
+                            onClick={() => ref.current?.showModal()}
+                        >
+                            Show details.
+                        </button>
+                        <dialog ref={ref} class='modal'>
+                            <div class='modal-box'>
+                                <form method='dialog'>
+                                    <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>
+                                        ✕
+                                    </button>
+                                </form>
+                                <h1 class='text-lg'>{error.headline}</h1>
+                                <p class='py-4'>{error.message}</p>
+                            </div>
+                            <form method='dialog' class='modal-backdrop'>
+                                <button>close</button>
+                            </form>
+                        </dialog>
+                    </>
+                )}
+            </div>
+        </div>
+    );
 };

package/src/preact/components/loading-display.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
 
 import { LoadingDisplay } from './loading-display';
+import { ResizeContainer } from './resize-container';
 
 const meta: Meta = {
     title: 'Component/Loading',
@@ -12,9 +12,9 @@ const meta: Meta = {
 export default meta;
 
 export const LoadingStory: StoryObj = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const loading = canvas.getByText('Loading...');
-        await waitFor(() => expect(loading).toBeInTheDocument());
-    },
+    render: () => (
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <LoadingDisplay />
+        </ResizeContainer>
+    ),
 };

package/src/preact/components/loading-display.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
 
 export const LoadingDisplay: FunctionComponent = () => {
-    return <div>Loading...</div>;
+    return <div aria-label={'Loading'} className='h-full w-full skeleton' />;
 };

package/src/preact/components/no-data-display.tsx

@@ -1,5 +1,9 @@
 import { type FunctionComponent } from 'preact';
 
 export const NoDataDisplay: FunctionComponent = () => {
-    return <div>No data available.</div>;
+    return (
+        <div className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center'>
+            <div>No data available.</div>
+        </div>
+    );
 };

package/src/preact/components/resize-container.tsx

@@ -1,23 +1,14 @@
 import { type FunctionComponent } from 'preact';
 
 export type Size = {
-    width?: string;
-    height?: string;
+    width: string;
+    height: string;
 };
 
 export interface ResizeContainerProps {
-    size?: Size;
-    defaultSize: Size;
+    size: Size;
 }
 
-export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size, defaultSize }) => {
-    return <div style={extendByDefault(size, defaultSize)}>{children}</div>;
-};
-
-const extendByDefault = (size: Size | undefined, defaultSize: Size) => {
-    if (size === undefined) {
-        return defaultSize;
-    }
-
-    return { ...defaultSize, ...size };
+export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size }) => {
+    return <div style={size}>{children}</div>;
 };

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -40,11 +40,28 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
                 'CustomDateRange',
             ],
         },
+        customSelectOptions: {
+            control: {
+                type: 'object',
+            },
+        },
+        earliestDate: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
         initialValue: PRESET_VALUE_LAST_3_MONTHS,
+        dateColumn: 'aDateColumn',
+        width: '100%',
     },
     decorators: [withActions],
 };
@@ -58,6 +75,8 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
                 customSelectOptions={args.customSelectOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
+                width={args.width}
+                dateColumn={args.dateColumn}
             />
         </LapisUrlContext.Provider>
     ),

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -3,15 +3,22 @@ import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { toYYYYMMDD } from './dateConversion';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ResizeContainer } from '../components/resize-container';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
-export interface DateRangeSelectorProps<CustomLabel extends string> {
+export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
+    width: string;
+}
+
+export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
     initialValue?: PresetOptionValues | CustomLabel;
+    dateColumn: string;
 }
 
 export const PRESET_VALUE_CUSTOM = 'custom';
@@ -38,7 +45,31 @@ export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
     initialValue,
+    width,
+    dateColumn,
 }: DateRangeSelectorProps<CustomLabel>) => {
+    const size = { width, height: '3rem' };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <DateRangeSelectorInner
+                    customSelectOptions={customSelectOptions}
+                    earliestDate={earliestDate}
+                    initialValue={initialValue}
+                    dateColumn={dateColumn}
+                />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const DateRangeSelectorInner = <CustomLabel extends string>({
+    customSelectOptions,
+    earliestDate = '1900-01-01',
+    initialValue,
+    dateColumn,
+}: DateRangeSelectorPropsInner<CustomLabel>) => {
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
     const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
@@ -137,8 +168,8 @@ export const DateRangeSelector = <CustomLabel extends string>({
         const dateTo = toYYYYMMDD(dateToPicker?.selectedDates[0]);
 
         const detail = {
-            ...(dateFrom !== undefined && { dateFrom }),
-            ...(dateTo !== undefined && { dateTo }),
+            ...(dateFrom !== undefined && { [`${dateColumn}From`]: dateFrom }),
+            ...(dateTo !== undefined && { [`${dateColumn}To`]: dateTo }),
         };
 
         divRef.current?.dispatchEvent(
@@ -151,11 +182,11 @@ export const DateRangeSelector = <CustomLabel extends string>({
     };
 
     return (
-        <div class='join' ref={divRef}>
+        <div class='join w-full' ref={divRef}>
             <Select
                 items={selectableOptions}
                 selected={selectedDateRange}
-                selectStyle='select-bordered rounded-none join-item'
+                selectStyle='select-bordered rounded-none join-item grow'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
@@ -164,7 +195,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 }}
             />
             <input
-                class='input input-bordered rounded-none join-item'
+                class='input input-bordered rounded-none join-item grow'
                 type='text'
                 placeholder='Date from'
                 ref={fromDatePickerRef}
@@ -172,7 +203,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 onBlur={onChangeDateFrom}
             />
             <input
-                class='input input-bordered rounded-none join-item'
+                class='input input-bordered rounded-none join-item grow'
                 type='text'
                 placeholder='Date to'
                 ref={toDatePickerRef}

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -1,4 +1,6 @@
+import { LapisError } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import { UserFacingError } from '../components/error-display';
 
 export async function fetchAutocompletionList(fields: string[], lapis: string, signal?: AbortSignal) {
     const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
@@ -8,7 +10,19 @@ export async function fetchAutocompletionList(fields: string[], lapis: string, s
 
     const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>({}, fields);
 
-    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    let data;
+    try {
+        data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    } catch (error) {
+        if (error instanceof LapisError) {
+            throw new UserFacingError(
+                `Failed to fetch autocomplete list from LAPIS: ${error.problemDetail.status} ${error.problemDetail.title ?? ''}`,
+                error.problemDetail.detail ?? error.message,
+            );
+        }
+        throw error;
+    }
+
     const locationValues = data
         .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
         .reduce<Set<string>>((setOfAllHierarchies, entry) => {

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -6,7 +6,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
-const meta: Meta<typeof LocationFilter> = {
+const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',
     component: LocationFilter,
     parameters: {
@@ -32,7 +32,26 @@ const meta: Meta<typeof LocationFilter> = {
         },
     },
     args: {
+        width: '100%',
         fields: ['region', 'country', 'division', 'location'],
+        initialValue: 'United States',
+    },
+    argTypes: {
+        fields: {
+            control: {
+                type: 'object',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
 };
@@ -41,10 +60,8 @@ export default meta;
 
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
-        <div class='max-w-screen-lg'>
-            <LapisUrlContext.Provider value={LAPIS_URL}>
-                <LocationFilter fields={args.fields} />
-            </LapisUrlContext.Provider>
-        </div>
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <LocationFilter fields={args.fields} initialValue={args.initialValue} width={args.width} />
+        </LapisUrlContext.Provider>
     ),
 };

package/src/preact/locationFilter/location-filter.tsx

@@ -1,15 +1,36 @@
+import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import { LoadingDisplay } from '../components/loading-display';
+import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export type LocationFilterProps = {
+export interface LocationFilterInnerProps {
     initialValue?: string;
     fields: string[];
+}
+
+export interface LocationFilterProps extends LocationFilterInnerProps {
+    width: string;
+}
+
+export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, initialValue, fields }) => {
+    const size = { width, height: '3rem' };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <LocationFilterInner initialValue={initialValue} fields={fields} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
 };
 
-export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) => {
+export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');
@@ -19,22 +40,11 @@ export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) =>
 
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
-    if (isLoading)
-        return (
-            <form class='flex'>
-                <input type='text' class='input input-bordered grow' value={value} disabled />
-                <button class='btn ml-1' disabled type='submit'>
-                    Loading...
-                </button>
-            </form>
-        );
-
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
     if (error) {
-        return (
-            <p>
-                Error: {error.name} {error.message} {error.stack}
-            </p>
-        );
+        return <ErrorDisplay error={error} />;
     }
 
     const onInput = (event: InputEvent) => {
@@ -70,7 +80,7 @@ export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) =>
     };
 
     return (
-        <form class='flex' onSubmit={submit} ref={formRef}>
+        <form class='flex w-full' onSubmit={submit} ref={formRef}>
             <input
                 type='text'
                 class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}

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

@@ -27,7 +27,8 @@ const meta: Meta<MutationComparisonProps> = {
             options: ['table', 'venn'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: {
@@ -81,7 +82,8 @@ const Template: StoryObj<MutationComparisonProps> = {
                     variants={args.variants}
                     sequenceType={args.sequenceType}
                     views={args.views}
-                    size={args.size}
+                    width={args.width}
+                    height={args.height}
                     headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
@@ -109,7 +111,8 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         ],
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Mutation comparison',
     },
 };