@genspectrum/dashboard-components 0.8.0 → 0.8.2

package/dist/genspectrum-components.d.ts

@@ -547,8 +547,8 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
- * The grid limits the number of rows columns for browser performance reasons.
- * Too much data might make the browser unresponsive.
+ * The grid limits the number of rows and columns for browser performance reasons as
+ * too much data might make the browser unresponsive.
  *
  * The number of columns is limited to 200.
  * If this number are exceeded, an error message will be shown.

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.2",
     "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>

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

@@ -4,7 +4,6 @@ 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';
@@ -24,7 +23,7 @@ export const LineageFilter: FunctionComponent<LineageFilterProps> = ({ width, ..
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} layout='horizontal'>
             <ResizeContainer size={size}>
                 <LineageFilterInner {...innerProps} />
             </ResizeContainer>
@@ -51,7 +50,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

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

@@ -5,7 +5,6 @@ import { type JSXInternal } from 'preact/src/jsx';
 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';
@@ -24,7 +23,7 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width,
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} layout='horizontal'>
             <ResizeContainer size={size}>
                 <LocationFilterInner {...innerProps} />
             </ResizeContainer>
@@ -46,7 +45,7 @@ export const LocationFilterInner = ({ initialValue, fields, placeholderText }: L
         return <LoadingDisplay />;
     }
     if (error) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {

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

@@ -9,7 +9,6 @@ import { type NamedLapisFilter, type SequenceType } 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';
@@ -59,7 +58,7 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonProps>
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -35,7 +35,7 @@ export type SelectedMutationFilterStrings = {
 
 export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width }) => {
     return (
-        <ErrorBoundary size={{ height: '3.375rem', width }}>
+        <ErrorBoundary size={{ height: '3.375rem', width }} layout='horizontal'>
             <div style={width}>
                 <MutationFilterInner initialValue={initialValue} />
             </div>

package/src/preact/mutations/mutations.tsx

@@ -16,7 +16,6 @@ import {
 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, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -66,7 +65,7 @@ export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/mutationsOverTime/__mockData__/noDataWhenNoMutationsAreInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '1800-01-01',
+            dateTo: '1800-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/__mockData__/noDataWhenThereAreNoDatesInFilter.ts

@@ -0,0 +1,22 @@
+import type { MutationOverTimeMockData } from './mockConversion';
+
+export const noDataWhenNoMutationsAreInFilter: MutationOverTimeMockData = {
+    query: {
+        lapisFilter: {
+            dateFrom: '2345-01-01',
+            dateTo: '2020-01-02',
+        },
+        sequenceType: 'nucleotide',
+        granularity: 'year',
+        lapisDateField: 'date',
+        lapis: 'https://lapis.cov-spectrum.org/open/v2',
+    },
+    response: {
+        overallMutationData: [],
+        mutationOverTimeSerializedAsArray: {
+            keysFirstAxis: [],
+            keysSecondAxis: [],
+            data: [],
+        },
+    },
+};

package/src/preact/mutationsOverTime/mutationOverTimeWorker.mock.ts

@@ -5,6 +5,7 @@ import { workerFunction } from '../webWorkers/workerFunction';
 import { byWeek } from './__mockData__/byWeek';
 import { defaultMockData } from './__mockData__/defaultMockData';
 import { getMutationOverTimeMock } from './__mockData__/mockConversion';
+import { noDataWhenNoMutationsAreInFilter } from './__mockData__/noDataWhenNoMutationsAreInFilter';
 import { showsMessageWhenTooManyMutations } from './__mockData__/showsMessageWhenTooManyMutations';
 
 const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWorkerResponse }[] = [
@@ -12,6 +13,7 @@ const mockQueries: { query: MutationOverTimeQuery; response: MutationOverTimeWor
     getMutationOverTimeMock(showsMessageWhenTooManyMutations),
     getMutationOverTimeMock(byWeek),
     getMutationOverTimeMock(aminoAcidMutationsByDay),
+    getMutationOverTimeMock(noDataWhenNoMutationsAreInFilter),
 ];
 
 self.onmessage = async function (event: MessageEvent<MutationOverTimeQuery>) {

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -35,6 +35,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     reduce the number of mutations.
                 </div>
             )}
+            {allMutations.length === 0 && (
+                <div className={'flex justify-center'}>No data available for your filters.</div>
+            )}
             <div
                 ref={gridRef}
                 style={{