@genspectrum/dashboard-components 0.8.2 → 0.8.4

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.
  *
@@ -1093,7 +1094,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1101,7 +1102,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>;
         }
     }
 }
@@ -1109,7 +1110,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1117,7 +1118,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>;
         }
     }
 }
@@ -1198,10 +1199,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>>;
     }
 }
 
@@ -1209,7 +1210,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1217,10 +1218,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>;
     }
 }
 
@@ -1228,7 +1229,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/style.css

@@ -482,7 +482,7 @@ input[type="range"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -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,43 +3186,41 @@ 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)));
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)));
 }
 .border-gray-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
 }
 .border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 .border-gray-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 .border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  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));
+  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));
+  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));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 .p-1 {
   padding: 0.25rem;
@@ -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;
@@ -3301,23 +3295,27 @@ input.tab:checked + .tab-content,
 }
 .text-\[\#606060\] {
   --tw-text-opacity: 1;
-  color: rgb(96 96 96 / var(--tw-text-opacity));
+  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));
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 .text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-neutral-500 {
   --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
 .underline {
   text-decoration-line: underline;
@@ -3347,6 +3345,9 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.\@container {
+  container-type: inline-size;
+}
 .mdi--fullscreen {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
 }
@@ -3375,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));
-}
 .hover\:scale-110:hover {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -3391,39 +3388,40 @@ input.tab:checked + .tab-content,
 }
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  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;
 }
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
 }
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-.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);
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 .peer:hover ~ .peer-hover\:visible {
   visibility: visible;
 }
+@container (min-width: 30rem) {
+
+  .\@\[30rem\]\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-5xl {

package/package.json

@@ -1,12 +1,17 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.8.2",
+    "version": "0.8.4",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
     "main": "dist/genspectrum-components.js",
     "module": "dist/genspectrum-components.js",
     "types": "dist/genspectrum-components.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/GenSpectrum/dashboard-components.git",
+        "directory": "components"
+    },
     "publishConfig": {
         "access": "public"
     },
@@ -101,6 +106,7 @@
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@types/node": "^22.0.0",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",

package/src/preact/components/chart.tsx

@@ -1,5 +1,5 @@
 import { Chart, type ChartConfiguration } from 'chart.js';
-import { type MutableRef, useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
 export interface GsChartProps {
     configuration: ChartConfiguration;
@@ -21,9 +21,14 @@ const GsChart = ({ configuration }: GsChartProps) => {
 
         chartRef.current = new Chart(ctx, configuration);
 
-        resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
+        const resizeChartAfterFullscreenChange = () => {
+            chartRef.current?.destroy();
+            chartRef.current = new Chart(ctx, configuration);
+        };
+        document.addEventListener('fullscreenchange', resizeChartAfterFullscreenChange);
 
         return () => {
+            document.removeEventListener('fullscreenchange', resizeChartAfterFullscreenChange);
             chartRef.current?.destroy();
         };
     }, [canvasRef, configuration]);
@@ -32,14 +37,3 @@ const GsChart = ({ configuration }: GsChartProps) => {
 };
 
 export default GsChart;
-
-const resizeChartAfterFullscreenChange = (
-    chartRef: MutableRef<Chart | null>,
-    ctx: CanvasRenderingContext2D,
-    configuration: ChartConfiguration,
-) => {
-    document.addEventListener('fullscreenchange', () => {
-        chartRef.current?.destroy();
-        chartRef.current = new Chart(ctx, configuration);
-    });
-};

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: '+' });