@genspectrum/dashboard-components 0.7.2 → 0.8.0

package/dist/genspectrum-components.d.ts

@@ -450,16 +450,6 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
  * 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
  */
 export declare class MutationFilterComponent extends PreactLitAdapter {
     /**
@@ -1212,7 +1202,6 @@ declare global {
     }
     interface HTMLElementEventMap {
         'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 

package/package.json

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

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

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

@@ -63,15 +63,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) {

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>;
     }
 }