@genspectrum/dashboard-components 0.10.2 → 0.10.4

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

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
+import z from 'zod';
 
 import { ErrorBoundary } from './error-boundary';
 import { UserFacingError } from './error-display';
@@ -21,9 +22,15 @@ const meta: Meta = {
 
 export default meta;
 
+const someSchema = z.object({
+    test: z.string().min(1),
+});
+const someValidProps = { test: 'someValue' };
+const someInvalidProps = { test: '' };
+
 export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <div>Some content</div>
         </ErrorBoundary>
     ),
@@ -36,7 +43,7 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
 
 export const ErrorBoundaryWithErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new Error('Some error')} />
         </ErrorBoundary>
     ),
@@ -48,9 +55,23 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
     },
 };
 
+export const ErrorBoundaryWithParsingErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someInvalidProps}>
+            <ContentThatThrowsError error={() => new Error('Some error')} />
+        </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('Error - Invalid component attributes')).toBeInTheDocument());
+    },
+};
+
 export const ErrorBoundaryWithUserFacingErrorStory: StoryObj = {
     render: (args) => (
-        <ErrorBoundary size={args.size}>
+        <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new UserFacingError('Error Headline', 'Some error')} />
         </ErrorBoundary>
     ),

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

@@ -7,9 +7,9 @@ import { ResizeContainer, type Size } from './resize-container';
 
 type ErrorBoundaryProps<T> = {
     size: Size;
+    componentProps: T;
+    schema: ZodSchema<T>;
     layout?: ErrorDisplayProps['layout'];
-    componentProps?: T;
-    schema?: ZodSchema<T>;
 };
 
 export const ErrorBoundary = <T extends Record<string, unknown>>({
@@ -41,8 +41,7 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
     return <>{children}</>;
 };
 
-// TODO #554 - make both arguments required once all components validate their props
-function useCheckComponentProps<T extends Record<string, unknown>>(schema?: ZodSchema<T>, componentProps?: T) {
+function useCheckComponentProps<T extends Record<string, unknown>>(schema: ZodSchema<T>, componentProps: T) {
     return useMemo(() => {
         if (schema === undefined || componentProps === undefined) {
             return undefined;

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

@@ -77,7 +77,7 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                                         </button>
                                     </form>
                                     <h1 class='text-lg'>{details.headline}</h1>
-                                    <p class='py-4'>{details.message}</p>
+                                    <div class='py-4'>{details.message}</div>
                                 </div>
                                 <form method='dialog' class='modal-backdrop'>
                                     <button>close</button>
@@ -129,26 +129,47 @@ function getDisplayedErrorMessage(error: Error) {
     }
 
     if (error instanceof InvalidPropsError) {
-        const firstError = error.zodError.errors[0];
-        let message = error.zodError.issues
-            .map((issue) => {
-                const actual =
-                    issue.path[0] in error.componentProps
-                        ? ` '${JSON.stringify(error.componentProps[issue.path[0]])}'`
-                        : '';
-                return `Unexpected value${actual} for "${issue.path.join('.')}": ${issue.message}`;
-            })
-            .join(' - ');
-
-        if (firstError.code === 'invalid_type' && firstError.received === 'null') {
-            message = `Is the "${firstError.path[0]}" attribute in the HTML of the correct type? ${message}`;
-        }
-
         return {
             headline: 'Error - Invalid component attributes',
-            details: { headline: 'Invalid component attributes', message },
+            details: { headline: 'Invalid component attributes', message: <ZodErrorDetails error={error} /> },
         };
     }
 
     return { headline: 'Error', details: undefined };
 }
+
+function ZodErrorDetails({ error }: { error: InvalidPropsError }) {
+    const firstError = error.zodError.errors[0];
+    return (
+        <>
+            <p>
+                <span className='font-bold'>You are a regular user?</span> Unfortunately, there is nothing you can do at
+                the moment. This component is misconfigured. Please contact the administrator of this page.
+            </p>
+            <p>
+                <span className='font-bold'>You are the administrator of this page?</span> You supplied invalid
+                attributes to this component. Please check the browser console for more detailed error messages.
+            </p>
+            {firstError.code === 'invalid_type' && firstError.received === 'null' && (
+                <p>
+                    Is the "{firstError.path[0]}" attribute in the HTML of the correct type? The attribute is expected
+                    to be of type "{firstError.expected}".
+                </p>
+            )}
+            <p>This is a summary of the unexpected attribute values:</p>
+            <ul class='m-4 list-outside list-disc '>
+                {error.zodError.issues.map((issue, index) => {
+                    const actual =
+                        issue.path[0] in error.componentProps
+                            ? `'${JSON.stringify(error.componentProps[issue.path[0]])}'`
+                            : '';
+                    return (
+                        <li key={index}>
+                            Unexpected value {actual} for "{issue.path.join('.')}": {issue.message}
+                        </li>
+                    );
+                })}
+            </ul>
+        </>
+    );
+}

package/src/preact/components/tabs.tsx

@@ -13,7 +13,7 @@ interface ComponentTabsProps {
 }
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
-    const [activeTab, setActiveTab] = useState(tabs[0].title);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.title);
     const [heightOfTabs, setHeightOfTabs] = useState('3rem');
     const tabRef = useRef<HTMLDivElement>(null);
 
@@ -65,7 +65,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
-                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}
+                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
                 style={{ height: `calc(100% - ${heightOfTabs})` }}
             >
                 {tabs.map((tab) => (

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

@@ -8,7 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const earliestDate = '1970-01-01';
 

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

@@ -5,7 +5,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta = {
     title: 'Input/LineageFilter',

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

@@ -5,7 +5,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',

package/src/preact/map/__mockData__/aggregatedGermany.json

@@ -0,0 +1,83 @@
+{
+    "data": [
+        {
+            "count": 1748,
+            "division": "Mecklenburg-Vorpommern"
+        },
+        {
+            "count": 10343,
+            "division": "Rheinland-Pfalz"
+        },
+        {
+            "count": 25459,
+            "division": "Saxony"
+        },
+        {
+            "count": 6198,
+            "division": "Niedersachsen"
+        },
+        {
+            "count": 3846,
+            "division": "Berlin"
+        },
+        {
+            "count": 7,
+            "division": "Germany"
+        },
+        {
+            "count": 3778,
+            "division": "Brandenburg"
+        },
+        {
+            "count": 1672,
+            "division": "Bremen"
+        },
+        {
+            "count": 4969,
+            "division": "Hesse"
+        },
+        {
+            "count": 3238,
+            "division": "Thuringia"
+        },
+        {
+            "count": 4747,
+            "division": "Saxony-Anhalt"
+        },
+        {
+            "count": 109800,
+            "division": null
+        },
+        {
+            "count": 4911,
+            "division": "Saarland"
+        },
+        {
+            "count": 50650,
+            "division": "Baden-Wuerttemberg"
+        },
+        {
+            "count": 50102,
+            "division": "North Rhine Westphalia"
+        },
+        {
+            "count": 9832,
+            "division": "Schleswig-Holstein"
+        },
+        {
+            "count": 28546,
+            "division": "Bavaria"
+        },
+        {
+            "count": 9633,
+            "division": "Hamburg"
+        }
+    ],
+    "info": {
+        "dataVersion": "1733676577",
+        "requestId": "7517dbd2-10ed-4a5a-8b2b-a6e08de55982",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-12-09T16:14:08.190102574",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}

package/src/preact/map/__mockData__/aggregatedWorld.json

@@ -0,0 +1,259 @@
+{
+    "data": [
+        {
+            "count": 3,
+            "country": "Turkey"
+        },
+        {
+            "count": 966167,
+            "country": "United Kingdom"
+        },
+        {
+            "count": 1,
+            "country": "Netherlands"
+        },
+        {
+            "count": 138004,
+            "country": "Denmark"
+        },
+        {
+            "count": 2611,
+            "country": "Brazil"
+        },
+        {
+            "count": 4,
+            "country": "Côte d'Ivoire"
+        },
+        {
+            "count": 4,
+            "country": "Finland"
+        },
+        {
+            "count": 204,
+            "country": "Djibouti"
+        },
+        {
+            "count": 138,
+            "country": "China"
+        },
+        {
+            "count": 5904,
+            "country": "Iceland"
+        },
+        {
+            "count": 8,
+            "country": "Ireland"
+        },
+        {
+            "count": 180,
+            "country": "Malaysia"
+        },
+        {
+            "count": 855,
+            "country": "Kenya"
+        },
+        {
+            "count": 868,
+            "country": "South Africa"
+        },
+        {
+            "count": 329479,
+            "country": "Germany"
+        },
+        {
+            "count": 5,
+            "country": "Spain"
+        },
+        {
+            "count": 664,
+            "country": "Liechtenstein"
+        },
+        {
+            "count": 2,
+            "country": "Chile"
+        },
+        {
+            "count": 2,
+            "country": "Mali"
+        },
+        {
+            "count": 31,
+            "country": "South Korea"
+        },
+        {
+            "count": 13540,
+            "country": "Slovakia"
+        },
+        {
+            "count": 1,
+            "country": "Norway"
+        },
+        {
+            "count": 4949,
+            "country": "New Zealand"
+        },
+        {
+            "count": 354,
+            "country": "Laos"
+        },
+        {
+            "count": 5,
+            "country": "Saudi Arabia"
+        },
+        {
+            "count": 566,
+            "country": "Vietnam"
+        },
+        {
+            "count": 37,
+            "country": "Australia"
+        },
+        {
+            "count": 25,
+            "country": "Cameroon"
+        },
+        {
+            "count": 54,
+            "country": "Gambia"
+        },
+        {
+            "count": 1310,
+            "country": "Argentina"
+        },
+        {
+            "count": 548918,
+            "country": "USA"
+        },
+        {
+            "count": 4562,
+            "country": "Mexico"
+        },
+        {
+            "count": 28636,
+            "country": "Switzerland"
+        },
+        {
+            "count": 9,
+            "country": "Palau"
+        },
+        {
+            "count": 6,
+            "country": "Taiwan"
+        },
+        {
+            "count": 181,
+            "country": "Iraq"
+        },
+        {
+            "count": 7547,
+            "country": "France"
+        },
+        {
+            "count": 4536,
+            "country": "Japan"
+        },
+        {
+            "count": 1640,
+            "country": "Thailand"
+        },
+        {
+            "count": 59,
+            "country": "Colombia"
+        },
+        {
+            "count": 243,
+            "country": "India"
+        },
+        {
+            "count": 132,
+            "country": "Italy"
+        },
+        {
+            "count": 92,
+            "country": "Mongolia"
+        },
+        {
+            "count": 2,
+            "country": "Libya"
+        },
+        {
+            "count": 216,
+            "country": "Peru"
+        },
+        {
+            "count": 4,
+            "country": "Singapore"
+        },
+        {
+            "count": 25,
+            "country": "Myanmar"
+        },
+        {
+            "count": 395,
+            "country": "Bangladesh"
+        },
+        {
+            "count": 37,
+            "country": "Malawi"
+        },
+        {
+            "count": 3669,
+            "country": "Bahrain"
+        },
+        {
+            "count": 171,
+            "country": "Haiti"
+        },
+        {
+            "count": 40,
+            "country": "Palestine"
+        },
+        {
+            "count": 499,
+            "country": "Hong Kong"
+        },
+        {
+            "count": 19,
+            "country": "Austria"
+        },
+        {
+            "count": 9,
+            "country": "Jamaica"
+        },
+        {
+            "count": 83,
+            "country": "Russia"
+        },
+        {
+            "count": 197,
+            "country": "Seychelles"
+        },
+        {
+            "count": 20,
+            "country": "Nigeria"
+        },
+        {
+            "count": 6,
+            "country": "Canada"
+        },
+        {
+            "count": 208,
+            "country": "Kazakhstan"
+        },
+        {
+            "count": 34,
+            "country": "Benin"
+        },
+        {
+            "count": 113,
+            "country": "Pakistan"
+        }
+    ],
+    "info": {
+        "dataVersion": "1733676577",
+        "requestId": "91268a09-b192-42da-b7c6-bcfc72bba982",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-12-09T15:45:35.460317204",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}