@genspectrum/dashboard-components 0.7.1 → 0.8.0

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

@@ -1,3 +1,5 @@
+import { type StoryObj } from '@storybook/preact';
+
 import denominator from './__mockData__/denominatorFilter.json';
 import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
@@ -11,8 +13,8 @@ export default {
         fetchMock: {},
     },
     argTypes: {
-        numerator: { control: 'object' },
-        denominator: { control: 'object' },
+        numeratorFilter: { control: 'object' },
+        denominatorFilter: { control: 'object' },
         generationTime: { control: 'number' },
         views: {
             options: ['line'],
@@ -24,7 +26,7 @@ export default {
     },
 };
 
-export const Primary = {
+export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args: RelativeGrowthAdvantageProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <RelativeGrowthAdvantage
@@ -40,8 +42,13 @@ export const Primary = {
         </LapisUrlContext.Provider>
     ),
     args: {
-        numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
-        denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
+        numeratorFilter: {
+            country: 'Switzerland',
+            pangoLineage: 'B.1.1.7',
+            dateFrom: '2020-12-01',
+            dateTo: '2021-03-01',
+        },
+        denominatorFilter: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
         width: '100%',

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