@genspectrum/dashboard-components 0.7.2 → 0.8.1

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.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
+            handles: ['gs-mutation-filter-changed', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -120,32 +120,6 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     },
 };
 
-export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
-    ...Default,
-    play: async ({ canvasElement, step }) => {
-        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
-
-        await step('Move outside of input', async () => {
-            await submitMutation(canvas, 'A234T');
-            await submitMutation(canvas, 'S:A123G');
-            await submitMutation(canvas, 'ins_123:AAA');
-            await submitMutation(canvas, 'ins_S:123:AAA');
-            await userEvent.tab();
-
-            await expect(onBlurListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        nucleotideMutations: ['A234T'],
-                        aminoAcidMutations: ['S:A123G'],
-                        nucleotideInsertions: ['ins_123:AAA'],
-                        aminoAcidInsertions: ['ins_S:123:AAA'],
-                    },
-                }),
-            );
-        });
-    },
-};
-
 export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
@@ -164,13 +138,12 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
         width: '100%',
     },
     play: async ({ canvasElement, step }) => {
-        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
 
-        await step('Move outside of input', async () => {
+        await step('Enter additional input', async () => {
             await submitMutation(canvas, 'G500T');
-            await userEvent.tab();
 
-            await expect(onBlurListenerMock).toHaveBeenCalledWith(
+            await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A234T', 'G500T'],
@@ -187,10 +160,8 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 
-    const onBlurListenerMock = fn();
     const changedListenerMock = fn();
     await step('Setup event listener mock', async () => {
-        canvasElement.addEventListener('gs-mutation-filter-on-blur', onBlurListenerMock);
         canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
     });
 
@@ -200,7 +171,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
         });
     });
 
-    return { canvas, onBlurListenerMock, changedListenerMock };
+    return { canvas, changedListenerMock };
 }
 
 const submitMutation = async (canvas: ReturnType<typeof within>, mutation: string) => {

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>
@@ -87,18 +87,6 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
         );
     };
 
-    const handleOnBlur = () => {
-        const detail = mapToMutationFilterStrings(selectedFilters);
-
-        formRef.current?.dispatchEvent(
-            new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-on-blur', {
-                detail,
-                bubbles: true,
-                composed: true,
-            }),
-        );
-    };
-
     const handleInputChange = (event: Event) => {
         setInputValue((event.target as HTMLInputElement).value);
         setIsError(false);
@@ -124,7 +112,6 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
                         value={inputValue}
                         onInput={handleInputChange}
                         placeholder={getPlaceholder(referenceGenome)}
-                        onBlur={handleOnBlur}
                     />
                     <button type='submit' className='btn btn-xs m-1'>
                         +

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/mutations-over-time.tsx

@@ -21,7 +21,6 @@ import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 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';
@@ -63,15 +62,21 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
     const lapis = useContext(LapisUrlContext);
     const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
-    const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
-        {
+    const messageToWorker = useMemo(() => {
+        return {
             lapisFilter,
             sequenceType,
             granularity,
             lapisDateField,
             lapis,
-        },
-        new MutationOverTimeWorker() as Worker,
+        };
+    }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
+
+    const worker = useMemo(() => new MutationOverTimeWorker(), []);
+
+    const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
+        messageToWorker,
+        worker,
     );
 
     if (isLoading) {
@@ -79,7 +84,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
     }
 
     if (error !== undefined) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null || data === undefined) {

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -13,7 +13,6 @@ import type { NamedLapisFilter, TemporalGranularity } 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';
@@ -64,7 +63,7 @@ const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimePro
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -12,7 +12,6 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 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, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
@@ -77,7 +76,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null || data.every((variant) => variant.content.length === 0)) {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -9,7 +9,6 @@ import {
 import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 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';
@@ -63,7 +62,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/textInput/text-input.tsx

@@ -4,7 +4,6 @@ import { useContext, useRef } from 'preact/hooks';
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 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 TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerPr
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} layout='horizontal'>
             <ResizeContainer size={size}>
                 <TextInputInner {...innerProps} />
             </ResizeContainer>
@@ -44,7 +43,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
     }
 
     if (error !== null) {
-        return <ErrorDisplay error={error} />;
+        throw error;
     }
 
     if (data === null) {

package/src/preact/webWorkers/useWebWorker.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 
 export function useWebWorker<Request, Response>(messageToWorker: Request, worker: Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
@@ -37,15 +37,11 @@ export function useWebWorker<Request, Response>(messageToWorker: Request, worker
             setError(new Error(`Worker received a message that it cannot deserialize: ${event.data}`));
             setIsLoading(false);
         };
+    }, [worker]);
 
-        return () => {
-            worker.terminate();
-        };
-    }, []);
-
-    useMemo(() => {
+    useEffect(() => {
         worker.postMessage(messageToWorker);
-    }, [messageToWorker]);
+    }, [messageToWorker, worker]);
 
     return { data, error, isLoading };
 }

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -21,7 +21,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
+            handles: ['gs-mutation-filter-changed', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -102,32 +102,6 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
     },
 };
 
-export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
-    ...Template,
-    play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
-
-        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
-        const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
-            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);
-        });
-
-        await step('wait until data is loaded', async () => {
-            await waitFor(() => {
-                return expect(inputField()).toBeEnabled();
-            });
-        });
-
-        await step('Move outside of input', async () => {
-            await userEvent.type(inputField(), 'A123T');
-            await userEvent.tab();
-
-            await expect(listenerMock).toHaveBeenCalled();
-        });
-    },
-};
-
 export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {

package/src/web-components/input/gs-mutation-filter.tsx

@@ -53,16 +53,6 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Fired when:
  * - The user has submitted a valid mutation or insertion
  * - The user has removed a mutation or insertion
- *
- * @fires {CustomEvent<{
- *      nucleotideMutations: string[],
- *      aminoAcidMutations: string[],
- *      nucleotideInsertions: string[],
- *      aminoAcidInsertions: string[]
- *  }>} gs-mutation-filter-on-blur
- * Fired when:
- * - the mutation filter has lost focus
- * Contains the selected mutations in the format
  */
 @customElement('gs-mutation-filter')
 export class MutationFilterComponent extends PreactLitAdapter {
@@ -108,7 +98,6 @@ declare global {
 
     interface HTMLElementEventMap {
         'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }