@genspectrum/dashboard-components 0.8.0 → 0.8.1

package/dist/genspectrum-components.d.ts

@@ -1029,7 +1029,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1037,7 +1040,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1045,7 +1048,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1053,7 +1059,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1067,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1069,7 +1078,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,7 +1086,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1085,7 +1097,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1093,7 +1105,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1101,7 +1116,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1109,7 +1124,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1117,7 +1132,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1125,7 +1140,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1133,7 +1148,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1141,10 +1156,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1152,7 +1164,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1160,10 +1172,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1171,7 +1180,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1179,10 +1188,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1190,7 +1196,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1198,10 +1204,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1209,7 +1212,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1217,10 +1220,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1228,7 +1228,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -2525,6 +2525,36 @@ input.tab:checked + .tab-content,
   --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
       var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
 }
+.artboard.phone-1.horizontal,
+      .artboard.phone-1.artboard-horizontal {
+  width: 568px;
+  height: 320px;
+}
+.artboard.phone-2.horizontal,
+      .artboard.phone-2.artboard-horizontal {
+  width: 667px;
+  height: 375px;
+}
+.artboard.phone-3.horizontal,
+      .artboard.phone-3.artboard-horizontal {
+  width: 736px;
+  height: 414px;
+}
+.artboard.phone-4.horizontal,
+      .artboard.phone-4.artboard-horizontal {
+  width: 812px;
+  height: 375px;
+}
+.artboard.phone-5.horizontal,
+      .artboard.phone-5.artboard-horizontal {
+  width: 896px;
+  height: 414px;
+}
+.artboard.phone-6.horizontal,
+      .artboard.phone-6.artboard-horizontal {
+  width: 1024px;
+  height: 320px;
+}
 .btm-nav-xs > *:where(.active) {
   border-top-width: 1px;
 }
@@ -2937,6 +2967,9 @@ input.tab:checked + .tab-content,
 .m-2 {
   margin: 0.5rem;
 }
+.m-4 {
+  margin: 1rem;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -3320,6 +3353,9 @@ input.tab:checked + .tab-content,
 .mdi--fullscreen-exit {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 14h5v2h-3v3h-2zm-9 0h5v5H8v-3H5zm3-9h2v5H5V8h3zm11 3v2h-5V5h2v3z'/%3E%3C/svg%3E");
 }
+.mdi--reload {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 12a9 9 0 0 0 9 9c2.39 0 4.68-.94 6.4-2.6l-1.5-1.5A6.7 6.7 0 0 1 11 19c-6.24 0-9.36-7.54-4.95-11.95S18 5.77 18 12h-3l4 4h.1l3.9-4h-3a9 9 0 0 0-18 0'/%3E%3C/svg%3E");
+}
 @media (min-width: 640px) {
 
   .sm\:modal-middle {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.8.0",
+    "version": "0.8.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/lapisApi/lapisApi.ts

@@ -35,16 +35,18 @@ export class LapisError extends Error {
 }
 
 export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest, signal?: AbortSignal) {
-    const response = await fetch(aggregatedEndpoint(lapisUrl), {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
+    const response = await callLapis(
+        aggregatedEndpoint(lapisUrl),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
         },
-        body: JSON.stringify(body),
-        signal,
-    });
-
-    await handleErrors(response, 'aggregated data');
+        'aggregated data',
+    );
 
     return aggregatedResponse.parse(await response.json());
 }
@@ -55,16 +57,18 @@ export async function fetchInsertions(
     sequenceType: SequenceType,
     signal?: AbortSignal,
 ) {
-    const response = await fetch(insertionsEndpoint(lapisUrl, sequenceType), {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
+    const response = await callLapis(
+        insertionsEndpoint(lapisUrl, sequenceType),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
         },
-        body: JSON.stringify(body),
-        signal,
-    });
-
-    await handleErrors(response, `${sequenceType} insertions`);
+        `${sequenceType} insertions`,
+    );
 
     return insertionsResponse.parse(await response.json());
 }
@@ -75,33 +79,54 @@ export async function fetchSubstitutionsOrDeletions(
     sequenceType: SequenceType,
     signal?: AbortSignal,
 ) {
-    const response = await fetch(substitutionsOrDeletionsEndpoint(lapisUrl, sequenceType), {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
+    const response = await callLapis(
+        substitutionsOrDeletionsEndpoint(lapisUrl, sequenceType),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
         },
-        body: JSON.stringify(body),
-        signal,
-    });
-
-    await handleErrors(response, `${sequenceType} mutations`);
+        `${sequenceType} mutations`,
+    );
 
     return mutationsResponse.parse(await response.json());
 }
 
 export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSignal) {
-    const response = await fetch(referenceGenomeEndpoint(lapisUrl), {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
+    const response = await callLapis(
+        referenceGenomeEndpoint(lapisUrl),
+        {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            signal,
         },
-        signal,
-    });
+        'the reference genomes',
+    );
 
-    await handleErrors(response, 'the reference genomes');
     return referenceGenomeResponse.parse(await response.json());
 }
 
+async function callLapis(
+    input: Parameters<typeof fetch>[0],
+    init: Parameters<typeof fetch>[1],
+    requestedDataName: string,
+) {
+    try {
+        const response = await fetch(input, init);
+
+        await handleErrors(response, requestedDataName);
+        return response;
+    } catch (error) {
+        const message = error instanceof Error ? error.message : `${error}`;
+        throw new UnknownLapisError(`Failed to connect to LAPIS: ${message}`, 500, requestedDataName);
+    }
+}
+
 const handleErrors = async (response: Response, requestedData: string) => {
     if (!response.ok) {
         if (response.status >= 400 && response.status < 500) {

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
@@ -59,3 +60,37 @@ export const Default: StoryObj<AggregateProps> = {
         pageSize: 10,
     },
 };
+
+export const FailsLoadingData: StoryObj<AggregateProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                    },
+                    response: {
+                        status: 400,
+                        body: {
+                            error: {
+                                title: 'Bad Request',
+                                detail: 'Test error',
+                                status: 400,
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('Error - Failed fetching aggregated data from LAPIS')).toBeInTheDocument();
+            await expect(canvas.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+        });
+    },
+};

package/src/preact/aggregatedData/aggregate.tsx

@@ -7,7 +7,6 @@ import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
-import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -56,7 +55,7 @@ export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

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

@@ -1,16 +1,21 @@
 import type { FunctionComponent } from 'preact';
 import { useErrorBoundary } from 'preact/hooks';
 
-import { ErrorDisplay } from './error-display';
+import { ErrorDisplay, type ErrorDisplayProps } from './error-display';
 import { ResizeContainer, type Size } from './resize-container';
 
-export const ErrorBoundary: FunctionComponent<{ size: Size }> = ({ size, children }) => {
-    const [internalError] = useErrorBoundary();
+type ErrorBoundaryProps = {
+    size: Size;
+    layout?: ErrorDisplayProps['layout'];
+};
+
+export const ErrorBoundary: FunctionComponent<ErrorBoundaryProps> = ({ size, layout, children }) => {
+    const [internalError, resetError] = useErrorBoundary();
 
     if (internalError) {
         return (
             <ResizeContainer size={size}>
-                <ErrorDisplay error={internalError} />
+                <ErrorDisplay error={internalError} resetError={resetError} layout={layout} />
             </ResizeContainer>
         );
     }

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

@@ -15,7 +15,7 @@ export default meta;
 export const GenericErrorStory: StoryObj = {
     render: () => (
         <ResizeContainer size={{ height: '600px', width: '100%' }}>
-            <ErrorDisplay error={new Error('some message')} />
+            <ErrorDisplay error={new Error('some message')} resetError={() => {}} />
         </ResizeContainer>
     ),
 
@@ -30,7 +30,7 @@ export const GenericErrorStory: StoryObj = {
 export const UserFacingErrorStory: StoryObj = {
     render: () => (
         <ResizeContainer size={{ height: '600px', width: '100%' }}>
-            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} />
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} resetError={() => {}} />
         </ResizeContainer>
     ),
 
@@ -52,7 +52,7 @@ export const UserFacingErrorStory: StoryObj = {
 export const FiresEvent: StoryObj = {
     render: () => (
         <ResizeContainer size={{ height: '600px', width: '100%' }}>
-            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} />
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} resetError={() => {}} />
         </ResizeContainer>
     ),
 
@@ -66,3 +66,23 @@ export const FiresEvent: StoryObj = {
         });
     },
 };
+
+const resetErrorMock = fn();
+
+export const TriggersResetErrorOnReloadButton: StoryObj = {
+    render: () => (
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} resetError={resetErrorMock} />
+        </ResizeContainer>
+    ),
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await userEvent.click(canvas.getByText('Try again'));
+
+        await waitFor(() => {
+            expect(resetErrorMock).toHaveBeenCalled();
+        });
+    },
+};

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

@@ -24,7 +24,13 @@ export class UserFacingError extends Error {
     }
 }
 
-export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+export type ErrorDisplayProps = {
+    error: Error;
+    resetError: () => void;
+    layout?: 'horizontal' | 'vertical';
+};
+
+export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, resetError, layout }) => {
     // eslint-disable-next-line no-console -- Currently we use the following statement for our error handling
     console.error(error);
 
@@ -40,34 +46,40 @@ export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) =>
     return (
         <div
             ref={containerRef}
-            className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col'
+            className={`h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center ${layout === 'horizontal' ? 'flex-row' : 'flex-col'}`}
         >
-            <div className='text-red-700 font-bold'>{headline}</div>
             <div>
-                Oops! Something went wrong.
-                {details !== undefined && (
-                    <>
-                        {' '}
-                        <button className='underline hover:text-gray-400' 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>
+                <div className='text-red-700 font-bold'>{headline}</div>
+                <div>
+                    Oops! Something went wrong.
+                    {details !== undefined && (
+                        <>
+                            {' '}
+                            <button className='underline hover:text-gray-400' 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'>{details.headline}</h1>
+                                    <p class='py-4'>{details.message}</p>
+                                </div>
+                                <form method='dialog' class='modal-backdrop'>
+                                    <button>close</button>
                                 </form>
-                                <h1 class='text-lg'>{details.headline}</h1>
-                                <p class='py-4'>{details.message}</p>
-                            </div>
-                            <form method='dialog' class='modal-backdrop'>
-                                <button>close</button>
-                            </form>
-                        </dialog>
-                    </>
-                )}
+                            </dialog>
+                        </>
+                    )}
+                </div>
             </div>
+            <button onClick={resetError} className='btn btn-sm flex items-center m-4'>
+                <span className='iconify mdi--reload text-lg' />
+                Try again
+            </button>
         </div>
     );
 };

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

@@ -29,7 +29,7 @@ export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorPro
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} layout='horizontal'>
             <div style={{ width }}>
                 <DateRangeSelectorInner {...innerProps} />
             </div>