@genspectrum/dashboard-components 0.8.3 → 0.8.5

package/dist/genspectrum-components.d.ts

@@ -411,8 +411,9 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
  * ## Context
  * This component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.
  *
- * Input values have to be provided one at a time and submitted by pressing the Enter key or by clicking the '+' button.
- * After submission, the component validates the input and fires an event with the selected mutations.
+ * Input values have to be provided one at a time and submitted by pressing the Enter key or by selecting an option from the dropdown.
+ * Alternatively, they can be provided as a string of comma-separated values, which will be directly parsed and validated.
+ * After submission (after pressing Enter or pasting a comma-separated string) an event is fired with the selected mutations.
  * All previously selected mutations are displayed at the input field and added to the event.
  * Users can remove a mutation by clicking the 'x' button next to the mutation.
  *
@@ -1045,7 +1046,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1053,7 +1054,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1061,7 +1062,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1069,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -3029,15 +3029,15 @@ input.tab:checked + .tab-content,
 .mt-4 {
   margin-top: 1rem;
 }
-.inline-block {
-  display: inline-block;
-}
 .inline {
   display: inline;
 }
 .flex {
   display: flex;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .table {
   display: table;
 }
@@ -3107,6 +3107,9 @@ input.tab:checked + .tab-content,
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 .resize {
   resize: both;
 }
@@ -3155,9 +3158,6 @@ input.tab:checked + .tab-content,
 .break-words {
   overflow-wrap: break-word;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -3186,12 +3186,6 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-solid {
-  border-style: solid;
-}
-.border-none {
-  border-style: none;
-}
 .border-error {
   --tw-border-opacity: 1;
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)));
@@ -3212,14 +3206,18 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
-.border-red-500 {
+.border-slate-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
 }
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -3233,10 +3231,6 @@ input.tab:checked + .tab-content,
 .p-4 {
   padding: 1rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -3303,6 +3297,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(96 96 96 / var(--tw-text-opacity, 1));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -3378,10 +3376,6 @@ input.tab:checked + .tab-content,
     border-bottom-left-radius: var(--rounded-box, 1rem);
   }
 }
-.focus-within\:border-gray-400:focus-within {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
-}
 .hover\:scale-110:hover {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -3396,6 +3390,10 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
 .hover\:font-bold:hover {
   font-weight: 700;
 }
@@ -3415,15 +3413,6 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
 }

package/package.json

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

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
+import { type PreactRenderer, type Meta, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type StepFunction } from '@storybook/types';
 
@@ -43,13 +43,75 @@ export const Default: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const FiresFilterMultipleCommaSeparatedQueries: StoryObj<MutationFilterProps> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
+
+        await step('Enter a valid mutation', async () => {
+            await submitMutation(canvas, 'A123T');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+
+        await step('Enter a comma separated list of valid and invalid mutations', async () => {
+            await pasteMutations(canvas, 'A123T, error_insX, A234T, ins_123:AA');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T', 'A234T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: ['ins_123:AA'],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+            await expect(canvas.queryByText('A123T')).toBeVisible();
+            await expect(canvas.queryByText('A234T')).toBeVisible();
+            await expect(inputField(canvas)).toHaveValue('error_insX');
+        });
+
+        await step('Remove the first mutation', async () => {
+            const mutationItem = within(canvas.getByText('A234T'));
+            await fireEvent.click(mutationItem.getByRole('button', { name: '×' }));
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: ['ins_123:AA'],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+    },
+};
+
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
         const { canvas, changedListenerMock } = await prepare(canvasElement, step);
 
         await step('Enters an invalid mutation', async () => {
-            await submitMutation(canvas, 'notAMutation');
+            await testNoOptionsExist(canvas, 'notAMutation');
             await expect(changedListenerMock).not.toHaveBeenCalled();
 
             await userEvent.type(inputField(canvas), '{backspace>12/}');
@@ -88,7 +150,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Enter another valid mutation', async () => {
-            await submitMutation(canvas, 'ins_123:AA');
+            await submitMutation(canvas, 'ins_123:AA', 'enter');
 
             await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
@@ -103,13 +165,13 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Remove the first mutation', async () => {
-            const firstMutationDeleteButton = canvas.getAllByRole('button', { name: '✕' })[1];
-            await waitFor(() => fireEvent.click(firstMutationDeleteButton));
+            const mutationItem = within(canvas.getByText('A234-'));
+            await fireEvent.click(mutationItem.getByRole('button', { name: '×' }));
 
             await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
-                        nucleotideMutations: ['A234-'],
+                        nucleotideMutations: ['A123T'],
                         aminoAcidMutations: [],
                         nucleotideInsertions: ['ins_123:AA'],
                         aminoAcidInsertions: [],
@@ -140,7 +202,7 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, changedListenerMock } = await prepare(canvasElement, step);
 
-        await step('Enter additional input', async () => {
+        await step('Add input to initial value', async () => {
             await submitMutation(canvas, 'G500T');
 
             await expect(changedListenerMock).toHaveBeenCalledWith(
@@ -174,12 +236,34 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     return { canvas, changedListenerMock };
 }
 
-const submitMutation = async (canvas: ReturnType<typeof within>, mutation: string) => {
+export type SubmissionMethod = 'click' | 'enter';
+
+const submitMutation = async (
+    canvas: ReturnType<typeof within>,
+    mutation: string,
+    submissionMethod: SubmissionMethod = 'click',
+) => {
     await userEvent.type(inputField(canvas), mutation);
-    await waitFor(() => submitButton(canvas).click());
+    const firstOption = await canvas.findByRole('option', { name: mutation });
+    if (submissionMethod === 'click') {
+        await userEvent.click(firstOption);
+    }
+    if (submissionMethod === 'enter') {
+        await userEvent.keyboard('{enter}');
+    }
+};
+
+const pasteMutations = async (canvas: ReturnType<typeof within>, mutation: string) => {
+    await userEvent.click(inputField(canvas));
+    await userEvent.paste(mutation);
+};
+
+const testNoOptionsExist = async (canvas: ReturnType<typeof within>, mutation: string) => {
+    await userEvent.type(inputField(canvas), mutation);
+    const options = canvas.queryAllByRole('option');
+
+    await expect(options).toHaveLength(0);
 };
 
 const inputField = (canvas: ReturnType<typeof within>) =>
     canvas.getByPlaceholderText('Enter a mutation', { exact: false });
-
-const submitButton = (canvas: ReturnType<typeof within>) => canvas.getByRole('button', { name: '+' });