@genspectrum/dashboard-components 0.18.4 → 0.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.4",
+    "version": "0.18.6",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -132,7 +132,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.11.0",
+        "eslint-plugin-storybook": "^0.12.0",
         "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",

package/src/preact/MutationAnnotationsContext.tsx

@@ -37,33 +37,7 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
             return parseResult;
         }
 
-        const nucleotideMap = new Map<string, MutationAnnotations>();
-        const nucleotidePositions = new Map<string, MutationAnnotations>();
-        const aminoAcidMap = new Map<string, MutationAnnotations>();
-        const aminoAcidPositions = new Map<string, MutationAnnotations>();
-
-        value.forEach((annotation) => {
-            new Set(annotation.nucleotideMutations).forEach((code) => {
-                addAnnotationToMap(nucleotideMap, code, annotation);
-            });
-            new Set(annotation.aminoAcidMutations).forEach((code) => {
-                addAnnotationToMap(aminoAcidMap, code, annotation);
-            });
-            new Set(annotation.nucleotidePositions).forEach((position) => {
-                addAnnotationToMap(nucleotidePositions, position, annotation);
-            });
-            new Set(annotation.aminoAcidPositions).forEach((position) => {
-                addAnnotationToMap(aminoAcidPositions, position, annotation);
-            });
-        });
-
-        return {
-            success: true as const,
-            value: {
-                nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
-                'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
-            },
-        };
+        return { success: true as const, value: getMutationAnnotationsContext(value) };
     }, [value]);
 
     if (!parseResult.success) {
@@ -79,6 +53,33 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
     );
 };
 
+export function getMutationAnnotationsContext(value: MutationAnnotations) {
+    const nucleotideMap = new Map<string, MutationAnnotations>();
+    const nucleotidePositions = new Map<string, MutationAnnotations>();
+    const aminoAcidMap = new Map<string, MutationAnnotations>();
+    const aminoAcidPositions = new Map<string, MutationAnnotations>();
+
+    value.forEach((annotation) => {
+        new Set(annotation.nucleotideMutations).forEach((code) => {
+            addAnnotationToMap(nucleotideMap, code, annotation);
+        });
+        new Set(annotation.aminoAcidMutations).forEach((code) => {
+            addAnnotationToMap(aminoAcidMap, code, annotation);
+        });
+        new Set(annotation.nucleotidePositions).forEach((position) => {
+            addAnnotationToMap(nucleotidePositions, position, annotation);
+        });
+        new Set(annotation.aminoAcidPositions).forEach((position) => {
+            addAnnotationToMap(aminoAcidPositions, position, annotation);
+        });
+    });
+
+    return {
+        nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
+        'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
+    };
+}
+
 function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
     const oldAnnotations = map.get(code.toUpperCase()) ?? [];
     map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
@@ -87,6 +88,12 @@ function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string,
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
+    return getMutationAnnotationsProvider(mutationAnnotations);
+}
+
+export function getMutationAnnotationsProvider(
+    mutationAnnotations: Record<SequenceType, MutationAnnotationPerSequenceType>,
+) {
     return (mutation: Mutation, sequenceType: SequenceType) => {
         const position =
             mutation.segment === undefined

package/src/preact/components/dropdown.tsx

@@ -30,7 +30,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ children, buttonTit
     return (
         <>
             <button type='button' className='btn btn-xs whitespace-nowrap w-full' onClick={toggle} ref={referenceRef}>
-                {buttonTitle}
+                <span className={'w-full truncate'}>{buttonTitle}</span>
             </button>
             <div ref={floatingRef} className={`${dropdownClass} ${showContent ? '' : 'hidden'}`}>
                 {children}

package/src/preact/components/info.tsx

@@ -21,7 +21,7 @@ export const InfoHeadline2: FunctionComponent = ({ children }) => {
 };
 
 export const InfoParagraph: FunctionComponent = ({ children }) => {
-    return <p className='text-justify text-base font-normal my-1'>{children}</p>;
+    return <p className='text-justify text-base font-normal my-1 text-wrap'>{children}</p>;
 };
 
 export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {

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

@@ -0,0 +1,57 @@
+import { type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type Meta } from '@storybook/web-components';
+import { useState } from 'preact/hooks';
+
+import { MutationsOverTimeTextFilter, type TextFilterProps } from './mutations-over-time-text-filter';
+
+const meta: Meta = {
+    title: 'Component/Mutations over time text filter',
+    component: 'MutationsOverTimeTextFilter',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState = ({ setFilterValue, value }: { setFilterValue: (value: string) => void; value: string }) => {
+    const [state, setState] = useState(value);
+
+    return (
+        <MutationsOverTimeTextFilter
+            setFilterValue={(value) => {
+                setFilterValue(value);
+                setState(value);
+            }}
+            value={state}
+        />
+    );
+};
+
+export const MutationsOverTimeTextFilterStory: StoryObj<TextFilterProps> = {
+    render: (args) => {
+        return <WrapperWithState setFilterValue={args.setFilterValue} value={args.value} />;
+    },
+    args: {
+        setFilterValue: fn(),
+        value: 'Test',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial value to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Test');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('textbox');
+            await userEvent.clear(inputField);
+            await userEvent.type(inputField, 'OtherText');
+
+            await waitFor(() => expect(button).toHaveTextContent('OtherText'));
+        });
+    },
+};

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

@@ -0,0 +1,63 @@
+import type { h } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+import { Dropdown } from './dropdown';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export type TextFilterProps = { setFilterValue: (newValue: string) => void; value: string };
+
+export function MutationsOverTimeTextFilter({ setFilterValue, value }: TextFilterProps) {
+    const onInput = (newValue: string) => {
+        setFilterValue(newValue);
+    };
+
+    const onDeleteClick = () => setFilterValue('');
+
+    return (
+        <div className={'w-28 inline-flex'}>
+            <Dropdown buttonTitle={value === '' ? `Filter mutations` : value} placement={'bottom-start'}>
+                <div>
+                    <label className='flex gap-1 input input-xs'>
+                        <DebouncedInput placeholder={'Filter'} onInput={onInput} value={value} type='text' />
+                        {value !== undefined && value !== '' && (
+                            <button className={'cursor-pointer'} onClick={onDeleteClick}>
+                                <DeleteIcon />
+                            </button>
+                        )}
+                    </label>
+                </div>
+            </Dropdown>
+        </div>
+    );
+}
+
+function DebouncedInput({
+    value: initialValue,
+    onInput,
+    debounce = 500,
+    ...props
+}: {
+    onInput: (value: string) => void;
+    debounce?: number;
+    value?: string;
+} & Omit<h.JSX.IntrinsicElements['input'], 'onInput'>) {
+    const [value, setValue] = useState<string | undefined>(initialValue);
+
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            onInput(value ?? '');
+        }, debounce);
+
+        return () => clearTimeout(timeout);
+    }, [value, debounce, onInput]);
+
+    const onChangeInput = useCallback((event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setValue(event.currentTarget.value);
+    }, []);
+
+    return <input {...props} value={value} onInput={onChangeInput} />;
+}

package/src/preact/components/segment-selector.stories.tsx

@@ -4,6 +4,7 @@ import { type FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 
 import { type DisplayedSegment, SegmentSelector, type SegmentSelectorProps } from './segment-selector';
+import type { SequenceType } from '../../types';
 
 const meta: Meta<SegmentSelectorProps> = {
     title: 'Component/Segment selector',
@@ -15,7 +16,8 @@ export default meta;
 
 const WrapperWithState: FunctionComponent<{
     displayedSegments: DisplayedSegment[];
-}> = ({ displayedSegments: initialDisplayedSegments }) => {
+    sequenceType: SequenceType;
+}> = ({ displayedSegments: initialDisplayedSegments, sequenceType }) => {
     const [displayedSegments, setDisplayedSegments] = useState<DisplayedSegment[]>(initialDisplayedSegments);
 
     return (
@@ -24,6 +26,7 @@ const WrapperWithState: FunctionComponent<{
             setDisplayedSegments={(items: DisplayedSegment[]) => {
                 setDisplayedSegments(items);
             }}
+            sequenceType={sequenceType}
         />
     );
 };
@@ -50,12 +53,13 @@ export const AllSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: true,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
-        await step("Show 'All segments' as label", async () => {
-            await expect(canvas.getByText('All segments')).toBeInTheDocument();
+        await step("Show 'All genes' as label", async () => {
+            await expect(canvas.getByText('All genes')).toBeInTheDocument();
         });
     },
 };
@@ -80,6 +84,7 @@ export const NoSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: false,
             },
         ],
+        sequenceType: 'nucleotide',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
@@ -110,12 +115,13 @@ export const LongSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: true,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
-        await step('Show number of active segments as label', async () => {
-            await expect(canvas.getByText('2 segments')).toBeInTheDocument();
+        await step('Show number of active genes as label', async () => {
+            await expect(canvas.getByText('2 genes')).toBeInTheDocument();
         });
     },
 };
@@ -140,6 +146,7 @@ export const ShortSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: false,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);

package/src/preact/components/segment-selector.tsx

@@ -13,40 +13,44 @@ export type DisplayedSegment = CheckboxItem & {
 export type SegmentSelectorProps = {
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (items: DisplayedSegment[]) => void;
+    sequenceType: SequenceType;
 };
 
 export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
     displayedSegments,
     setDisplayedSegments,
+    sequenceType,
 }) => {
     if (displayedSegments.length <= 1) {
         return null;
     }
 
     return (
-        <div className='w-24'>
+        <div className='w-24 inline-flex'>
             <CheckboxSelector
                 items={displayedSegments}
-                label={getSegmentSelectorLabel(displayedSegments)}
+                label={getSegmentSelectorLabel(displayedSegments, sequenceType)}
                 setItems={(items) => setDisplayedSegments(items)}
             />
         </div>
     );
 };
 
-const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
+const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[], sequenceType: SequenceType) => {
     const allSelectedSelected = displayedSegments
         .filter((segment) => segment.checked)
         .map((segment) => segment.segment);
 
+    const label = sequenceType === 'amino acid' ? 'gene' : 'segment';
+
     if (allSelectedSelected.length === 0) {
-        return `No segments`;
+        return `No ${label}s`;
     }
     if (displayedSegments.length === allSelectedSelected.length) {
-        return `All segments`;
+        return `All ${label}s`;
     }
 
-    const longestDisplayString = `All segments`;
+    const longestDisplayString = `All ${label}s`;
 
     const allSelectedSelectedString = allSelectedSelected.join(', ');
 
@@ -54,7 +58,7 @@ const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
         return allSelectedSelectedString;
     }
 
-    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? 'segment' : 'segments'}`;
+    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? label : `${label}s`}`;
 };
 
 export function useDisplayedSegments(sequenceType: SequenceType) {

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -172,7 +172,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                 setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
             />
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             <MutationTypeSelector
                 displayedMutationTypes={displayedMutationTypes}
                 setDisplayedMutationTypes={setDisplayedMutationTypes}