@genspectrum/dashboard-components 0.6.10 → 0.6.12

package/src/preact/components/mutation-type-selector.stories.tsx

@@ -0,0 +1,115 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import {
+    type DisplayedMutationType,
+    MutationTypeSelector,
+    type MutationTypeSelectorProps,
+} from './mutation-type-selector';
+
+const meta: Meta<MutationTypeSelectorProps> = {
+    title: 'Component/Mutation type selector',
+    component: MutationTypeSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    displayedMutationTypes: DisplayedMutationType[];
+}> = ({ displayedMutationTypes: initialMutationTypes }) => {
+    const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>(initialMutationTypes);
+
+    return (
+        <MutationTypeSelector
+            displayedMutationTypes={displayedMutationTypes}
+            setDisplayedMutationTypes={(mutationTypes: DisplayedMutationType[]) => {
+                setDisplayedMutationTypes(mutationTypes);
+            }}
+        />
+    );
+};
+
+const MutationTypeSelectorStory: StoryObj<MutationTypeSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+};
+
+export const AllMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: true,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: true,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show short form of types as label', async () => {
+            await expect(canvas.getByText('Subst., Del.')).toBeInTheDocument();
+        });
+    },
+};
+
+export const NoMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: false,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'No types' as label", async () => {
+            await expect(canvas.getByText('No types')).toBeInTheDocument();
+        });
+    },
+};
+
+export const OneTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: true,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show the selected type as label', async () => {
+            const substitutionElements = await canvas.getAllByText('Substitution');
+            await expect(substitutionElements.length).toBe(2);
+        });
+    },
+};

package/src/preact/components/mutation-type-selector.tsx

@@ -16,14 +16,39 @@ export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps>
     displayedMutationTypes,
     setDisplayedMutationTypes,
 }) => {
-    const checkedLabels = displayedMutationTypes.filter((type) => type.checked).map((type) => type.label);
-    const mutationTypesSelectorLabel = `Types: ${checkedLabels.length > 0 ? checkedLabels.join(', ') : 'None'}`;
-
     return (
-        <CheckboxSelector
-            items={displayedMutationTypes}
-            label={mutationTypesSelectorLabel}
-            setItems={(items) => setDisplayedMutationTypes(items)}
-        />
+        <div className='w-[6rem]'>
+            <CheckboxSelector
+                items={displayedMutationTypes}
+                label={getMutationTypesSelectorLabel(displayedMutationTypes)}
+                setItems={(items) => setDisplayedMutationTypes(items)}
+            />
+        </div>
     );
 };
+
+const getMutationTypesSelectorLabel = (displayedMutationTypes: DisplayedMutationType[]) => {
+    const checkedLabels = displayedMutationTypes.filter((displayedMutationType) => displayedMutationType.checked);
+
+    if (checkedLabels.length === 0) {
+        return `No types`;
+    }
+    if (displayedMutationTypes.length === checkedLabels.length) {
+        return displayedMutationTypes
+            .map((type) => {
+                switch (type.type) {
+                    case 'substitution':
+                        return 'Subst.';
+                    case 'deletion':
+                        return 'Del.';
+                }
+            })
+            .join(', ');
+    }
+
+    return checkedLabels
+        .map((type) => {
+            return type.label;
+        })
+        .join(', ');
+};

package/src/preact/components/percent-input.stories.tsx

@@ -0,0 +1,93 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { PercentInput, type PercentInputProps } from './percent-intput';
+
+const meta: Meta<PercentInputProps> = {
+    title: 'Component/Percent input',
+    component: PercentInput,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    value: number;
+    setValue: (value: number) => void;
+}> = ({ value: initialValue, setValue: setExternalValue }) => {
+    const [value, setValue] = useState(initialValue);
+
+    return (
+        <PercentInput
+            percentage={value}
+            setPercentage={(value: number) => {
+                setValue(value);
+                setExternalValue(value);
+            }}
+        />
+    );
+};
+
+export const PercentInputStory: StoryObj<{
+    value: number;
+    setValue: (value: number) => void;
+}> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+    args: {
+        value: 5,
+        setValue: fn(),
+    },
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+
+        const input = () => canvas.getByLabelText('%');
+
+        await step('Expect initial value to be 5%', async () => {
+            await expect(input()).toHaveValue(5);
+        });
+
+        await step('Add digits', async () => {
+            await userEvent.type(input(), '1');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(51));
+            await expect(input()).toHaveValue(51);
+        });
+
+        await step('Remove digits', async () => {
+            await userEvent.type(input(), '{backspace}');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(5));
+            await expect(input()).toHaveValue(5);
+        });
+
+        await step('Entering a dot should not trigger the external update function', async () => {
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+            await userEvent.type(input(), '.');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+        });
+
+        await step('Deleting all digits should not trigger the external update function', async () => {
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+            await userEvent.clear(input());
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+        });
+
+        await step('Entering a number outside the range should not trigger the external update function', async () => {
+            await userEvent.type(input(), '10');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(4));
+            await userEvent.type(input(), '1');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(4));
+        });
+
+        await step(
+            'Removing digits until a valid number is reached triggers the external update function',
+            async () => {
+                await userEvent.type(input(), '{backspace}');
+                await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(10));
+                await expect(input()).toHaveValue(10);
+            },
+        );
+    },
+};

package/src/preact/components/percent-intput.tsx

@@ -21,6 +21,10 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage,
         const input = event.target as HTMLInputElement;
         const value = Number(input.value);
 
+        if (value === internalPercentage || input.value === '') {
+            return;
+        }
+
         const inRange = percentageInRange(value);
 
         if (inRange) {

package/src/preact/components/proportion-selector-dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fn, userEvent, within } from '@storybook/test';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 
@@ -59,7 +59,7 @@ export const ProportionSelectorStory: StoryObj<ProportionSelectorDropdownProps>
             await userEvent.clear(minInput);
             await userEvent.type(minInput, '10');
 
-            await expect(button).toHaveTextContent('Proportion 10.0% - 100.0%');
+            await waitFor(() => expect(button).toHaveTextContent('Proportion 10.0% - 100.0%'));
             await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
         });
     },

package/src/preact/components/proportion-selector-dropdown.tsx

@@ -13,12 +13,14 @@ export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDro
     const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
 
     return (
-        <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
-            <ProportionSelector
-                proportionInterval={proportionInterval}
-                setMinProportion={setMinProportion}
-                setMaxProportion={setMaxProportion}
-            />
-        </Dropdown>
+        <div className='w-44'>
+            <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
+                <ProportionSelector
+                    proportionInterval={proportionInterval}
+                    setMinProportion={setMinProportion}
+                    setMaxProportion={setMaxProportion}
+                />
+            </Dropdown>
+        </div>
     );
 };

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

@@ -54,27 +54,27 @@ export const ProportionSelectorStory: StoryObj<ProportionSelectorProps> = {
             const minInput = canvas.getAllByLabelText('%')[0];
             await userEvent.clear(minInput);
             await userEvent.type(minInput, '10');
-            await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
+            await waitFor(() => expect(args.setMinProportion).toHaveBeenCalledWith(0.1));
         });
 
         await step('Change max proportion to 50%', async () => {
             const maxInput = canvas.getAllByLabelText('%')[1];
             await userEvent.clear(maxInput);
             await userEvent.type(maxInput, '50');
-            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.5);
+            await waitFor(() => expect(args.setMaxProportion).toHaveBeenCalledWith(0.5));
         });
 
         await step('Move min proportion silder to 20%', async () => {
             const minSlider = canvas.getAllByRole('slider')[0];
             await fireEvent.input(minSlider, { target: { value: '20' } });
-            await expect(args.setMinProportion).toHaveBeenCalledWith(0.2);
+            await waitFor(() => expect(args.setMinProportion).toHaveBeenCalledWith(0.2));
             await waitFor(() => expect(canvas.getAllByLabelText('%')[0]).toHaveValue(20));
         });
 
         await step('Move max proportion silder to 80%', async () => {
             const maxSlider = canvas.getAllByRole('slider')[1];
             await fireEvent.input(maxSlider, { target: { value: '80' } });
-            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.8);
+            await waitFor(() => expect(args.setMaxProportion).toHaveBeenCalledWith(0.8));
             await waitFor(() => expect(canvas.getAllByLabelText('%')[1]).toHaveValue(80));
         });
     },

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

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { MinMaxRangeSlider } from './min-max-range-slider';
 import { PercentInput } from './percent-intput';
@@ -11,31 +12,64 @@ export interface ProportionSelectorProps {
     setMaxProportion: (maxProportion: number) => void;
 }
 
+function useUpdateExternalValueInIntervals(
+    setExternalValue: (minProportion: number) => void,
+    updateIntervalInMs: number,
+    internalValue: number,
+) {
+    const hasMounted = useRef(false);
+
+    useEffect(() => {
+        if (!hasMounted.current) {
+            hasMounted.current = true;
+            return;
+        }
+
+        const minTimeout = setTimeout(() => {
+            setExternalValue(internalValue);
+        }, updateIntervalInMs);
+
+        return () => clearTimeout(minTimeout);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this effect when the internal value changes
+    }, [internalValue]);
+}
+
 export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
     proportionInterval,
     setMinProportion,
     setMaxProportion,
 }) => {
+    const updateIntervalInMs = 300;
     const { min: minProportion, max: maxProportion } = proportionInterval;
+
+    const [internalMinProportion, setInternalMinProportion] = useState(minProportion);
+    const [internalMaxProportion, setInternalMaxProportion] = useState(maxProportion);
+
+    useUpdateExternalValueInIntervals(setMinProportion, updateIntervalInMs, internalMinProportion);
+    const updateMinPercentage = (minPercentage: number) => {
+        const newMinProportion = minPercentage / 100;
+        setInternalMinProportion(newMinProportion);
+    };
+
+    useUpdateExternalValueInIntervals(setMaxProportion, updateIntervalInMs, internalMaxProportion);
+    const updateMaxPercentage = (maxPercentage: number) => {
+        const newMaxProportion = maxPercentage / 100;
+        setInternalMaxProportion(newMaxProportion);
+    };
+
     return (
         <div class='flex flex-col w-64 mb-2'>
             <div class='flex items-center '>
-                <PercentInput
-                    percentage={minProportion * 100}
-                    setPercentage={(percentage) => setMinProportion(percentage / 100)}
-                />
+                <PercentInput percentage={internalMinProportion * 100} setPercentage={updateMinPercentage} />
                 <div class='m-2'>-</div>
-                <PercentInput
-                    percentage={maxProportion * 100}
-                    setPercentage={(percentage) => setMaxProportion(percentage / 100)}
-                />
+                <PercentInput percentage={internalMaxProportion * 100} setPercentage={updateMaxPercentage} />
             </div>
             <div class='my-1'>
                 <MinMaxRangeSlider
-                    min={minProportion * 100}
-                    max={maxProportion * 100}
-                    setMin={(percentage) => setMinProportion(percentage / 100)}
-                    setMax={(percentage) => setMaxProportion(percentage / 100)}
+                    min={internalMinProportion * 100}
+                    max={internalMaxProportion * 100}
+                    setMin={updateMinPercentage}
+                    setMax={updateMaxPercentage}
                 />
             </div>
         </div>

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

@@ -0,0 +1,151 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { type DisplayedSegment, SegmentSelector, type SegmentSelectorProps } from './segment-selector';
+
+const meta: Meta<SegmentSelectorProps> = {
+    title: 'Component/Segment selector',
+    component: SegmentSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    displayedSegments: DisplayedSegment[];
+}> = ({ displayedSegments: initialDisplayedSegments }) => {
+    const [displayedSegments, setDisplayedSegments] = useState<DisplayedSegment[]>(initialDisplayedSegments);
+
+    return (
+        <SegmentSelector
+            displayedSegments={displayedSegments}
+            setDisplayedSegments={(items: DisplayedSegment[]) => {
+                setDisplayedSegments(items);
+            }}
+        />
+    );
+};
+
+export const AllSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: true,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: true,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'All segments' as label", async () => {
+            await expect(canvas.getByText('All segments')).toBeInTheDocument();
+        });
+    },
+};
+
+export const NoSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: false,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: false,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'No segments' as label", async () => {
+            await expect(canvas.getByText('No segments')).toBeInTheDocument();
+        });
+    },
+};
+
+export const LongSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: false,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: true,
+            },
+        ],
+    },
+    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();
+        });
+    },
+};
+
+export const ShortSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: true,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show active segments as label', async () => {
+            await expect(canvas.getByText('ORF1a, S')).toBeInTheDocument();
+        });
+    },
+};

package/src/preact/components/{SegmentSelector.tsx → segment-selector.tsx}

@@ -13,39 +13,48 @@ export type DisplayedSegment = CheckboxItem & {
 export type SegmentSelectorProps = {
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (items: DisplayedSegment[]) => void;
-    prefix?: string;
 };
 
-const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[], prefix: string) => {
+export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
+    displayedSegments,
+    setDisplayedSegments,
+}) => {
+    if (displayedSegments.length <= 1) {
+        return null;
+    }
+
+    return (
+        <div className='w-24'>
+            <CheckboxSelector
+                items={displayedSegments}
+                label={getSegmentSelectorLabel(displayedSegments)}
+                setItems={(items) => setDisplayedSegments(items)}
+            />
+        </div>
+    );
+};
+
+const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
     const allSelectedSelected = displayedSegments
         .filter((segment) => segment.checked)
         .map((segment) => segment.segment);
 
     if (allSelectedSelected.length === 0) {
-        return `${prefix}none`;
+        return `No segments`;
     }
     if (displayedSegments.length === allSelectedSelected.length) {
-        return `${prefix}all`;
+        return `All segments`;
     }
-    return prefix + allSelectedSelected.join(', ');
-};
 
-export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
-    displayedSegments,
-    setDisplayedSegments,
-    prefix,
-}) => {
-    if (displayedSegments.length <= 1) {
-        return null;
+    const longestDisplayString = `All segments`;
+
+    const allSelectedSelectedString = allSelectedSelected.join(', ');
+
+    if (longestDisplayString.length >= allSelectedSelectedString.length) {
+        return allSelectedSelectedString;
     }
 
-    return (
-        <CheckboxSelector
-            items={displayedSegments}
-            label={getSegmentSelectorLabel(displayedSegments, prefix || 'Segments: ')}
-            setItems={(items) => setDisplayedSegments(items)}
-        />
-    );
+    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? 'segment' : 'segments'}`;
 };
 
 export function useDisplayedSegments(sequenceType: SequenceType) {

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

@@ -128,7 +128,7 @@ export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {
         await waitFor(() => expect(someSubstitution()).toBeVisible());
         await waitFor(() => expect(someDeletion()).toBeVisible());
 
-        canvas.getByRole('button', { name: /Types:/ }).click();
+        canvas.getByRole('button', { name: 'Subst., Del.' }).click();
         canvas.getByLabelText('Substitutions').click();
 
         await waitFor(() => expect(someSubstitution()).not.toBeInTheDocument());

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

@@ -7,7 +7,6 @@ import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
 import { type NamedLapisFilter, type SequenceType } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
@@ -19,6 +18,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 

package/src/preact/mutationComparison/queryMutationData.ts

@@ -1,7 +1,7 @@
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
 import { type NamedLapisFilter, type SubstitutionOrDeletionEntry } from '../../types';
-import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
+import { type DisplayedSegment } from '../components/segment-selector';
 
 export type MutationData = {
     displayName: string;