@genspectrum/dashboard-components 0.1.4 → 0.2.0

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 { ErrorDisplay } from './error-display';
+import { ErrorDisplay, UserFacingError } from './error-display';
+import { ResizeContainer } from './resize-container';
 
 const meta: Meta = {
     title: 'Component/Error',
@@ -12,11 +13,31 @@ const meta: Meta = {
 export default meta;
 
 export const ErrorStory: StoryObj = {
-    render: () => <ErrorDisplay error={new Error('some message')} />,
+    render: () => (
+        <ResizeContainer defaultSize={{ 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 defaultSize={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('some message')} />
+        </ResizeContainer>
+    ),
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
+        await waitFor(() => expect(error).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('some message')).toBeInTheDocument());
     },
 };

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

@@ -1,5 +1,18 @@
 import { type FunctionComponent } from 'preact';
 
+export class UserFacingError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'UserFacingError';
+    }
+}
+
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
-    return <div>Error: {error.message}</div>;
+    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.</div>
+            {error instanceof UserFacingError && <div className='text-sm text-gray-600'>{error.message}</div>}
+        </div>
+    );
 };

package/src/preact/components/headline.stories.tsx

@@ -3,10 +3,13 @@ import { expect, within } from '@storybook/test';
 
 import Headline, { type HeadlineProps } from './headline';
 
-const meta: Meta<typeof Headline> = {
+const meta: Meta<HeadlineProps> = {
     title: 'Component/Headline',
     component: Headline,
     parameters: { fetchMock: {} },
+    argTypes: {
+        heading: { control: 'text' },
+    },
 };
 
 export default meta;
@@ -27,3 +30,18 @@ export const HeadlineStory: StoryObj<HeadlineProps> = {
         await expect(canvas.getByText('Some Content')).toBeInTheDocument();
     },
 };
+
+export const NoHeadlineStory: StoryObj<HeadlineProps> = {
+    render: (args) => (
+        <Headline {...args}>
+            <div class='flex justify-center px-4 py-16 bg-base-200'>Some Content</div>
+        </Headline>
+    ),
+    args: {},
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.queryByText('My Headline')).not.toBeInTheDocument();
+        await expect(canvas.getByText('Some Content')).toBeInTheDocument();
+    },
+};

package/src/preact/components/headline.tsx

@@ -2,10 +2,18 @@ import { type FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 export interface HeadlineProps {
-    heading: string;
+    heading?: string;
 }
 
 const Headline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
+    if (!heading) {
+        return <>{children}</>;
+    }
+
+    return <ResizingHeadline heading={heading}>{children}</ResizingHeadline>;
+};
+
+const ResizingHeadline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
     const ref = useRef<HTMLHeadingElement>(null);
 
     const [h1Height, setH1Height] = useState('2rem');

package/src/preact/components/info.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, waitFor, within } from '@storybook/test';
 
 import Info, { type InfoProps } from './info';
 
@@ -7,16 +8,36 @@ const meta: Meta<InfoProps> = {
     component: Info,
     parameters: { fetchMock: {} },
     args: {
-        content: 'This is a tooltip which shows some information.',
+        size: { width: '400px', height: '100px' },
     },
 };
 
 export default meta;
 
+const tooltipText = 'This is a tooltip which shows some information.';
+
 export const InfoStory: StoryObj<InfoProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16 bg-base-200'>
-            <Info {...args} />
+        <div class='flex justify-center px-4 py-16'>
+            <Info {...args}>{tooltipText}</Info>
         </div>
     ),
 };
+
+export const ShowsInfoOnClick: StoryObj<InfoProps> = {
+    ...InfoStory,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loading = canvas.getByRole('button', { name: '?' });
+
+        await waitFor(() => expect(loading).toBeInTheDocument());
+
+        await fireEvent.click(loading);
+
+        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Close' }));
+
+        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeInTheDocument());
+    },
+};

package/src/preact/components/info.tsx

@@ -1,16 +1,60 @@
 import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 export interface InfoProps {
-    content: string;
-    className?: string;
+    size?: {
+        height?: string;
+        width?: string;
+    };
 }
 
-const Info: FunctionComponent<InfoProps> = ({ content, className }) => {
+const Info: FunctionComponent<InfoProps> = ({ children, size }) => {
+    const [showHelp, setShowHelp] = useState(false);
+
+    const toggleHelp = () => {
+        setShowHelp(!showHelp);
+    };
+
     return (
-        <div class={`${className} tooltip`} data-tip={content}>
-            <button class='btn btn-xs'>?</button>
+        <div className='relative'>
+            <button className='btn btn-xs' onClick={toggleHelp}>
+                ?
+            </button>
+            {showHelp && (
+                <div
+                    className='absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50'
+                    style={size}
+                >
+                    <div className='flex flex-col'>{children}</div>
+                    <div className='flex justify-end'>
+                        <button className='text-sm underline mt-2' onClick={toggleHelp}>
+                            Close
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };
 
+export const InfoHeadline1: FunctionComponent = ({ children }) => {
+    return <h1 className='text-lg font-bold'>{children}</h1>;
+};
+
+export const InfoHeadline2: FunctionComponent = ({ children }) => {
+    return <h2 className='text-base font-bold mt-4'>{children}</h2>;
+};
+
+export const InfoParagraph: FunctionComponent = ({ children }) => {
+    return <p className='text-justify my-1'>{children}</p>;
+};
+
+export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {
+    return (
+        <a className='text-blue-600 hover:text-blue-800' href={href} target='_blank' rel='noopener noreferrer'>
+            {children}
+        </a>
+    );
+};
+
 export default Info;

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 defaultSize={{ 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/dateRangeSelector/date-range-selector.stories.tsx

@@ -40,11 +40,27 @@ 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,
+        width: '100%',
     },
     decorators: [withActions],
 };
@@ -58,6 +74,7 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
                 customSelectOptions={args.customSelectOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
+                width={args.width}
             />
         </LapisUrlContext.Provider>
     ),

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

@@ -3,12 +3,18 @@ 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;
@@ -38,9 +44,31 @@ export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
     initialValue,
+    width,
+}: DateRangeSelectorProps<CustomLabel>) => {
+    const defaultSize = { width: '100%', height: '3rem' };
+    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+
+    return (
+        <ErrorBoundary defaultSize={defaultSize} size={size}>
+            <ResizeContainer defaultSize={defaultSize} size={size}>
+                <DateRangeSelectorInner
+                    customSelectOptions={customSelectOptions}
+                    earliestDate={earliestDate}
+                    initialValue={initialValue}
+                />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const DateRangeSelectorInner = <CustomLabel extends string>({
+    customSelectOptions,
+    earliestDate = '1900-01-01',
+    initialValue,
 }: DateRangeSelectorProps<CustomLabel>) => {
-    const datePickerRef = useRef<HTMLInputElement>(null);
-    const endDatePickerRef = useRef<HTMLInputElement>(null);
+    const fromDatePickerRef = useRef<HTMLInputElement>(null);
+    const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
@@ -64,18 +92,18 @@ export const DateRangeSelector = <CustomLabel extends string>({
             dateFormat: 'Y-m-d',
         };
 
-        if (datePickerRef.current) {
+        if (fromDatePickerRef.current) {
             setDateFromPicker(
-                flatpickr(datePickerRef.current, {
+                flatpickr(fromDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateFrom,
                 }),
             );
         }
 
-        if (endDatePickerRef.current) {
+        if (toDatePickerRef.current) {
             setDateToPicker(
-                flatpickr(endDatePickerRef.current, {
+                flatpickr(toDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateTo,
                 }),
@@ -87,7 +115,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
             dateToPicker?.destroy();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [datePickerRef, endDatePickerRef]);
+    }, [fromDatePickerRef, toDatePickerRef]);
 
     const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
         setSelectedDateRange(value);
@@ -151,11 +179,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,20 +192,20 @@ 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={datePickerRef}
+                ref={fromDatePickerRef}
                 onChange={onChangeDateFrom}
                 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={endDatePickerRef}
+                ref={toDatePickerRef}
                 onChange={onChangeDateTo}
-                onBlur={onChangeDateFrom}
+                onBlur={onChangeDateTo}
             />
         </div>
     );

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,37 @@
+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 defaultSize = { width: '100%', height: '3rem' };
+    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+
+    return (
+        <ErrorBoundary defaultSize={defaultSize} size={size}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <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 +41,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 +81,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

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