@genspectrum/dashboard-components 0.8.4 → 0.8.5

package/dist/genspectrum-components.d.ts

@@ -1094,7 +1094,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1102,7 +1102,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1110,7 +1110,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1118,7 +1118,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,10 +1199,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1210,7 +1210,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1218,10 +1218,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1229,7 +1229,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/webWorkers/useWebWorker.ts

@@ -1,31 +1,53 @@
 import { useEffect, useState } from 'preact/hooks';
 
+import { UserFacingError } from '../components/error-display';
+
+export type LoadingWorkerStatus = {
+    status: 'loading';
+};
+export type SuccessWorkerStatus<Response> = {
+    status: 'success';
+    data: Response;
+};
+export type ErrorWorkerStatus =
+    | {
+          status: 'error';
+          userFacing: false;
+          error: Error;
+      }
+    | {
+          status: 'error';
+          userFacing: true;
+          headline: string;
+          error: Error;
+      };
+export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
+
 export function useWebWorker<Request, Response>(messageToWorker: Request, worker: Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        worker.onmessage = (
-            event: MessageEvent<{
-                status: 'loading' | 'success' | 'error';
-                data?: Response;
-                error?: Error;
-            }>,
-        ) => {
-            const { status, data, error } = event.data;
+        worker.onmessage = (event: MessageEvent<WorkerStatus<Response>>) => {
+            const eventData = event.data;
+            const status = eventData.status;
 
             switch (status) {
                 case 'loading':
                     setIsLoading(true);
                     break;
                 case 'success':
-                    setData(data);
+                    setData(eventData.data);
                     setError(undefined);
                     setIsLoading(false);
                     break;
                 case 'error':
-                    setError(error);
+                    setError(
+                        eventData.userFacing
+                            ? new UserFacingError(eventData.headline, eventData.error.message)
+                            : eventData.error,
+                    );
                     setIsLoading(false);
                     break;
                 default:

package/src/preact/webWorkers/workerFunction.ts

@@ -1,14 +1,30 @@
+import { type ErrorWorkerStatus, type LoadingWorkerStatus, type SuccessWorkerStatus } from './useWebWorker';
+import { UserFacingError } from '../components/error-display';
+
 export async function workerFunction<R>(queryFunction: () => R) {
     try {
-        postMessage({ status: 'loading' });
+        postMessage({ status: 'loading' } satisfies LoadingWorkerStatus);
 
         const workerResponse = await queryFunction();
 
         postMessage({
             status: 'success',
             data: workerResponse,
-        });
+        } satisfies SuccessWorkerStatus<R>);
     } catch (error) {
-        postMessage({ status: 'error', error });
+        postMessage(
+            (error instanceof UserFacingError
+                ? {
+                      status: 'error',
+                      userFacing: true,
+                      headline: error.headline,
+                      error,
+                  }
+                : {
+                      status: 'error',
+                      userFacing: false,
+                      error: error instanceof Error ? error : new Error(`${error}`),
+                  }) satisfies ErrorWorkerStatus,
+        );
     }
 }