@genspectrum/dashboard-components 1.9.1 → 1.9.2

package/dist/util.d.ts

@@ -939,22 +939,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-genome-data-viewer': GenomeDataViewerComponent;
@@ -1117,10 +1101,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1128,7 +1109,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1154,6 +1135,25 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-text-filter': TextFilterComponent;

package/package.json

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

package/src/preact/components/mutations-over-time-mutations-filter.stories.tsx

@@ -7,6 +7,7 @@ import {
     MutationsOverTimeMutationsFilter,
     type MutationsOverTimeMutationsFilterProps,
 } from './mutations-over-time-mutations-filter';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
 
@@ -18,30 +19,38 @@ const meta: Meta = {
 
 export default meta;
 
+const manyMutationAnnotations = Array.from({ length: 300 }, (_, i) => ({
+    name: `Annotation ${i + 1}`,
+    description: `This is test annotation number ${i + 1} for testing many annotations.`,
+    symbol: String.fromCharCode(33 + (i % 94)), // Cycle through printable ASCII characters
+    nucleotideMutations: ['A23G'],
+    aminoAcidMutations: [],
+})) satisfies MutationAnnotations;
+
 const WrapperWithState = ({
     setFilterValue,
     value,
+    annotations = [
+        {
+            name: 'Test Annotation 1',
+            description: 'Test Annotation 1',
+            symbol: '#',
+        },
+        {
+            name: 'Test Annotation 2',
+            description: 'Test Annotation 2',
+            symbol: '+',
+        },
+    ],
 }: {
     setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
     value: MutationFilter;
+    annotations?: MutationAnnotations;
 }) => {
     const [state, setState] = useState(value);
 
     return (
-        <MutationAnnotationsContextProvider
-            value={[
-                {
-                    name: 'Test Annotation 1',
-                    description: 'Test Annotation 1',
-                    symbol: '#',
-                },
-                {
-                    name: 'Test Annotation 2',
-                    description: 'Test Annotation 2',
-                    symbol: '+',
-                },
-            ]}
-        >
+        <MutationAnnotationsContextProvider value={annotations}>
             <MutationsOverTimeMutationsFilter
                 setFilterValue={(value) => {
                     setFilterValue(value);
@@ -107,3 +116,53 @@ export const FilterByAnnotation: StoryObj<MutationsOverTimeMutationsFilterProps>
         });
     },
 };
+
+export const WithManyMutationAnnotations: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    render: (args) => {
+        return (
+            <WrapperWithState
+                setFilterValue={args.setFilterValue}
+                value={args.value}
+                annotations={manyMutationAnnotations}
+            />
+        );
+    },
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: '', annotationNameFilter: new Set() },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Open filter dropdown', async () => {
+            const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+            await userEvent.click(filterButton);
+        });
+
+        await step('Verify scroll container is scrollable', () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+            void expect(scrollContainer).toBeInTheDocument();
+
+            // Verify the container has scrollable content
+            void expect(scrollContainer.scrollHeight).toBeGreaterThan(scrollContainer.clientHeight);
+        });
+
+        await step('Scroll to bottom and verify we can scroll', async () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+
+            const initialScrollTop = scrollContainer.scrollTop;
+
+            // Scroll to the bottom
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+
+            await waitFor(async () => {
+                // Verify that scrollTop actually changed
+                await expect(scrollContainer.scrollTop).toBeGreaterThan(initialScrollTop);
+            });
+        });
+    },
+};

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -105,34 +105,36 @@ const AnnotationCheckboxes: FunctionComponent<MutationsOverTimeMutationsFilterPr
             <div className='divider mt-0.5 mb-0' />
             <div className='text-sm'>
                 <div className='font-bold mb-1'>Filter by annotations</div>
-                {mutationAnnotations.map((annotation, index) => (
-                    <li className='flex flex-row items-center' key={annotation.name}>
-                        <label>
-                            <input
-                                className={'mr-2'}
-                                type='checkbox'
-                                id={`item-${index}`}
-                                checked={value.annotationNameFilter.has(annotation.name)}
-                                onChange={() => {
-                                    setFilterValue((previousFilter) => {
-                                        const newAnnotationFilter = previousFilter.annotationNameFilter.has(
-                                            annotation.name,
-                                        )
-                                            ? [...previousFilter.annotationNameFilter].filter(
-                                                  (name) => name !== annotation.name,
-                                              )
-                                            : [...previousFilter.annotationNameFilter, annotation.name];
-                                        return {
-                                            ...previousFilter,
-                                            annotationNameFilter: new Set(newAnnotationFilter),
-                                        };
-                                    });
-                                }}
-                            />
-                            {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
-                        </label>
-                    </li>
-                ))}
+                <div className='max-h-72 overflow-scroll'>
+                    {mutationAnnotations.map((annotation, index) => (
+                        <li className='flex flex-row items-center' key={annotation.name}>
+                            <label>
+                                <input
+                                    className={'mr-2'}
+                                    type='checkbox'
+                                    id={`item-${index}`}
+                                    checked={value.annotationNameFilter.has(annotation.name)}
+                                    onChange={() => {
+                                        setFilterValue((previousFilter) => {
+                                            const newAnnotationFilter = previousFilter.annotationNameFilter.has(
+                                                annotation.name,
+                                            )
+                                                ? [...previousFilter.annotationNameFilter].filter(
+                                                      (name) => name !== annotation.name,
+                                                  )
+                                                : [...previousFilter.annotationNameFilter, annotation.name];
+                                            return {
+                                                ...previousFilter,
+                                                annotationNameFilter: new Set(newAnnotationFilter),
+                                            };
+                                        });
+                                    }}
+                                />
+                                {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
+                            </label>
+                        </li>
+                    ))}
+                </div>
             </div>
         </>
     );