@genspectrum/dashboard-components 0.8.3 → 0.8.4

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

@@ -1,15 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef, useState } from 'preact/hooks';
+import { useContext, useState, useRef } from 'preact/hooks';
 
 import { MutationFilterInfo } from './mutation-filter-info';
-import { parseAndValidateMutation } from './parseAndValidateMutation';
+import { parseAndValidateMutation, type ParsedMutationFilter } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import {
-    type DeletionClass,
-    type InsertionClass,
-    type MutationClass,
-    type SubstitutionClass,
-} from '../../utils/mutations';
+import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
@@ -48,37 +43,23 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
     const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>(
         getInitialState(initialValue, referenceGenome),
     );
-    const [inputValue, setInputValue] = useState('');
-    const [isError, setIsError] = useState(false);
-    const formRef = useRef<HTMLFormElement>(null);
-
-    const handleSubmit = (event: Event) => {
-        event.preventDefault();
-        if (inputValue === '') {
-            return;
-        }
 
-        const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
+    const filterRef = useRef<HTMLDivElement>(null);
 
-        if (parsedMutation === null) {
-            setIsError(true);
-            return;
-        }
-
-        const newSelectedValues = {
+    const handleRemoveValue = (option: ParsedMutationFilter) => {
+        const newSelectedFilters = {
             ...selectedFilters,
-            [parsedMutation.type]: [...selectedFilters[parsedMutation.type], parsedMutation.value],
+            [option.type]: selectedFilters[option.type].filter((i) => option.value.toString() != i.toString()),
         };
 
-        setSelectedFilters(newSelectedValues);
-        fireChangeEvent(newSelectedValues);
-        setInputValue('');
+        setSelectedFilters(newSelectedFilters);
+        fireChangeEvent(newSelectedFilters);
     };
 
     const fireChangeEvent = (selectedFilters: SelectedFilters) => {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
-        formRef.current?.dispatchEvent(
+        filterRef.current?.dispatchEvent(
             new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-changed', {
                 detail,
                 bubbles: true,
@@ -87,38 +68,27 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
         );
     };
 
-    const handleInputChange = (event: Event) => {
-        setInputValue((event.target as HTMLInputElement).value);
-        setIsError(false);
-    };
-
     return (
-        <form className='w-full border boder-gray-300 rounded-md relative' onSubmit={handleSubmit} ref={formRef}>
-            <div className='absolute -top-3 -right-3'>
+        <div className='w-full border border-gray-300 rounded-md relative' ref={filterRef}>
+            <div className='absolute -top-3 -right-3 z-10'>
                 <MutationFilterInfo />
             </div>
-            <div className='w-full flex p-2 flex-wrap items-center'>
-                <SelectedMutationDisplay
+
+            <div className='relative w-full p-1'>
+                <MutationFilterSelector
+                    referenceGenome={referenceGenome}
+                    setSelectedFilters={(newSelectedFilters) => {
+                        setSelectedFilters(newSelectedFilters);
+                        fireChangeEvent(newSelectedFilters);
+                    }}
                     selectedFilters={selectedFilters}
-                    setSelectedFilters={setSelectedFilters}
-                    fireChangeEvent={fireChangeEvent}
                 />
-                <div
-                    className={`w-full flex border ${isError ? 'border-red-500' : 'border-gray-300'} border-solid m-2 text-sm focus-within:border-gray-400 `}
-                >
-                    <input
-                        className='grow flex-1 p-1 border-none focus:outline-none focus:ring-0'
-                        type='text'
-                        value={inputValue}
-                        onInput={handleInputChange}
-                        placeholder={getPlaceholder(referenceGenome)}
-                    />
-                    <button type='submit' className='btn btn-xs m-1'>
-                        +
-                    </button>
-                </div>
+                <SelectedMutationFilterDisplay
+                    selectedFilters={selectedFilters}
+                    handleRemoveValue={handleRemoveValue}
+                />
             </div>
-        </form>
+        </div>
     );
 };
 
@@ -158,6 +128,115 @@ function getInitialState(
     );
 }
 
+const MutationFilterSelector: FunctionComponent<{
+    referenceGenome: ReferenceGenome;
+    setSelectedFilters: (option: SelectedFilters) => void;
+    selectedFilters: SelectedFilters;
+}> = ({ referenceGenome, setSelectedFilters, selectedFilters }) => {
+    const [option, setOption] = useState<ParsedMutationFilter | null>(null);
+    const [inputValue, setInputValue] = useState('');
+
+    const selectorRef = useRef<HTMLDivElement>(null);
+
+    const handleInputChange = (newValue: string) => {
+        if (newValue.includes(',') || newValue.includes(';')) {
+            handleCommaSeparatedInput(newValue);
+        } else {
+            setInputValue(newValue);
+            const result = parseAndValidateMutation(newValue, referenceGenome);
+            setOption(result);
+        }
+    };
+
+    const handleCommaSeparatedInput = (inputValue: string) => {
+        const inputValues = inputValue.split(/[,;]/);
+        let newSelectedOptions = selectedFilters;
+        let updated: boolean = false;
+        const invalidQueries: string[] = [];
+        for (const value of inputValues) {
+            const trimmedValue = value.trim();
+            const parsedMutation = parseAndValidateMutation(trimmedValue, referenceGenome);
+            if (parsedMutation) {
+                const type = parsedMutation.type;
+                if (!selectedFilters[type].some((i) => parsedMutation.value.toString() === i.toString())) {
+                    newSelectedOptions = {
+                        ...newSelectedOptions,
+                        [parsedMutation.type]: [...newSelectedOptions[parsedMutation.type], parsedMutation.value],
+                    };
+                    updated = true;
+                }
+            } else {
+                invalidQueries.push(trimmedValue);
+            }
+        }
+
+        setInputValue(invalidQueries.join(','));
+
+        if (updated) {
+            setSelectedFilters(newSelectedOptions);
+            setOption(null);
+        }
+    };
+
+    const handleOptionClick = () => {
+        if (option === null) {
+            return;
+        }
+
+        const type = option.type;
+
+        if (!selectedFilters[type].some((i) => option.value.toString() === i.toString())) {
+            const newSelectedValues = {
+                ...selectedFilters,
+                [option?.type]: [...selectedFilters[option?.type], option?.value],
+            };
+            setSelectedFilters(newSelectedValues);
+        }
+
+        setInputValue('');
+        setOption(null);
+    };
+
+    const handleEnterPress = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' && option !== null) {
+            handleOptionClick();
+        }
+    };
+
+    const handleBlur = (event: FocusEvent) => {
+        // Check if click was inside the selector
+        if (!selectorRef.current?.contains(event.relatedTarget as Node)) {
+            setOption(null);
+        }
+    };
+
+    return (
+        <div ref={selectorRef} tabIndex={-1}>
+            <input
+                type='text'
+                className='w-full p-2 border-gray-300 border rounded-md'
+                placeholder={getPlaceholder(referenceGenome)}
+                value={inputValue}
+                onInput={(e: Event) => {
+                    handleInputChange((e.target as HTMLInputElement).value);
+                }}
+                onKeyDown={(e) => handleEnterPress(e)}
+                onFocus={() => handleInputChange(inputValue)}
+                onBlur={handleBlur}
+            />
+            {option != null && (
+                <div
+                    role='option'
+                    className='hover:bg-gray-300 absolute cursor-pointer p-2 border-1 border-slate-500 bg-slate-200'
+                    onClick={() => handleOptionClick()}
+                >
+                    {option.value.toString()}
+                </div>
+            )}
+        </div>
+    );
+};
+
 function getPlaceholder(referenceGenome: ReferenceGenome) {
     const segmentPrefix =
         referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : '';
@@ -166,149 +245,73 @@ function getPlaceholder(referenceGenome: ReferenceGenome) {
     return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
 }
 
-const SelectedMutationDisplay: FunctionComponent<{
-    selectedFilters: SelectedFilters;
-    setSelectedFilters: (selectedFilters: SelectedFilters) => void;
-    fireChangeEvent: (selectedFilters: SelectedFilters) => void;
-}> = ({ selectedFilters, setSelectedFilters, fireChangeEvent }) => {
-    const onSelectedRemoved = <MutationType extends keyof SelectedFilters>(
-        mutation: SelectedFilters[MutationType][number],
-        key: MutationType,
-    ) => {
-        const newSelectedValues = {
-            ...selectedFilters,
-            [key]: selectedFilters[key].filter((i) => !mutation.equals(i)),
-        };
-
-        setSelectedFilters(newSelectedValues);
+const backgroundColor: { [key in keyof SelectedFilters]: string } = {
+    aminoAcidMutations: singleGraphColorRGBByName('teal', 0.4),
+    nucleotideMutations: singleGraphColorRGBByName('green', 0.4),
+    aminoAcidInsertions: singleGraphColorRGBByName('purple', 0.4),
+    nucleotideInsertions: singleGraphColorRGBByName('indigo', 0.4),
+};
 
-        fireChangeEvent(newSelectedValues);
-    };
+const backgroundColorMap = (data: ParsedMutationFilter) => {
+    return backgroundColor[data.type] || 'lightgray';
+};
 
+const SelectedMutationFilterDisplay: FunctionComponent<{
+    selectedFilters: SelectedFilters;
+    handleRemoveValue: (option: ParsedMutationFilter) => void;
+}> = ({ selectedFilters, handleRemoveValue }) => {
     return (
-        <>
+        <div className='flex flex-wrap'>
             {selectedFilters.nucleotideMutations.map((mutation) => (
-                <SelectedNucleotideMutation
+                <SelectedFilter
                     key={mutation.toString()}
-                    mutation={mutation}
-                    onDelete={(mutation: SubstitutionClass | DeletionClass) =>
-                        onSelectedRemoved(mutation, 'nucleotideMutations')
-                    }
+                    handleRemoveValue={handleRemoveValue}
+                    mutationFilter={{ type: 'nucleotideMutations', value: mutation }}
                 />
             ))}
             {selectedFilters.aminoAcidMutations.map((mutation) => (
-                <SelectedAminoAcidMutation
+                <SelectedFilter
                     key={mutation.toString()}
-                    mutation={mutation}
-                    onDelete={(mutation: SubstitutionClass | DeletionClass) =>
-                        onSelectedRemoved(mutation, 'aminoAcidMutations')
-                    }
+                    handleRemoveValue={handleRemoveValue}
+                    mutationFilter={{ type: 'aminoAcidMutations', value: mutation }}
                 />
             ))}
-            {selectedFilters.nucleotideInsertions.map((insertion) => (
-                <SelectedNucleotideInsertion
-                    key={insertion.toString()}
-                    insertion={insertion}
-                    onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
+            {selectedFilters.nucleotideInsertions.map((mutation) => (
+                <SelectedFilter
+                    key={mutation.toString()}
+                    handleRemoveValue={handleRemoveValue}
+                    mutationFilter={{ type: 'nucleotideInsertions', value: mutation }}
                 />
             ))}
-            {selectedFilters.aminoAcidInsertions.map((insertion) => (
-                <SelectedAminoAcidInsertion
-                    key={insertion.toString()}
-                    insertion={insertion}
-                    onDelete={(insertion: InsertionClass) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
+            {selectedFilters.aminoAcidInsertions.map((mutation) => (
+                <SelectedFilter
+                    key={mutation.toString()}
+                    handleRemoveValue={handleRemoveValue}
+                    mutationFilter={{ type: 'aminoAcidInsertions', value: mutation }}
                 />
             ))}
-        </>
-    );
-};
-
-const SelectedAminoAcidInsertion: FunctionComponent<{
-    insertion: InsertionClass;
-    onDelete: (insertion: InsertionClass) => void;
-}> = ({ insertion, onDelete }) => {
-    const backgroundColor = singleGraphColorRGBByName('teal', 0.3);
-    const textColor = singleGraphColorRGBByName('teal', 1);
-    return (
-        <SelectedFilter
-            mutation={insertion}
-            onDelete={onDelete}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-        />
-    );
-};
-
-const SelectedAminoAcidMutation: FunctionComponent<{
-    mutation: SubstitutionClass | DeletionClass;
-    onDelete: (mutation: SubstitutionClass | DeletionClass) => void;
-}> = ({ mutation, onDelete }) => {
-    const backgroundColor = singleGraphColorRGBByName('rose', 0.3);
-    const textColor = singleGraphColorRGBByName('rose', 1);
-    return (
-        <SelectedFilter
-            mutation={mutation}
-            onDelete={onDelete}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-        />
-    );
-};
-
-const SelectedNucleotideMutation: FunctionComponent<{
-    mutation: SubstitutionClass | DeletionClass;
-    onDelete: (insertion: SubstitutionClass | DeletionClass) => void;
-}> = ({ mutation, onDelete }) => {
-    const backgroundColor = singleGraphColorRGBByName('indigo', 0.3);
-    const textColor = singleGraphColorRGBByName('indigo', 1);
-    return (
-        <SelectedFilter
-            mutation={mutation}
-            onDelete={onDelete}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-        />
-    );
-};
-
-const SelectedNucleotideInsertion: FunctionComponent<{
-    insertion: InsertionClass;
-    onDelete: (insertion: InsertionClass) => void;
-}> = ({ insertion, onDelete }) => {
-    const backgroundColor = singleGraphColorRGBByName('green', 0.3);
-    const textColor = singleGraphColorRGBByName('green', 1);
-
-    return (
-        <SelectedFilter
-            mutation={insertion}
-            onDelete={onDelete}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-        />
+        </div>
     );
 };
 
-type SelectedFilterProps<MutationType extends MutationClass> = {
-    mutation: MutationType;
-    onDelete: (mutation: MutationType) => void;
-    backgroundColor: string;
-    textColor: string;
+type SelectedFilterProps = {
+    handleRemoveValue: (mutation: ParsedMutationFilter) => void;
+    mutationFilter: ParsedMutationFilter;
 };
 
-const SelectedFilter = <MutationType extends MutationClass>({
-    mutation,
-    onDelete,
-    backgroundColor,
-    textColor,
-}: SelectedFilterProps<MutationType>) => {
+const SelectedFilter = ({ handleRemoveValue, mutationFilter }: SelectedFilterProps) => {
     return (
         <span
-            class='inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full'
-            style={{ backgroundColor, color: textColor }}
+            key={mutationFilter.value.toString()}
+            name={mutationFilter.value.toString()}
+            className='center p-2 m-1 inline-flex text-black rounded-md'
+            style={{
+                backgroundColor: backgroundColorMap(mutationFilter),
+            }}
         >
-            {mutation.toString()}
-            <button className='ml-1' type='button' onClick={() => onDelete(mutation)}>
-                ✕
+            {mutationFilter.value.toString()}
+            <button className='ml-1' onClick={() => handleRemoveValue(mutationFilter)}>
+                ×
             </button>
         </span>
     );

package/src/preact/mutationFilter/parseAndValidateMutation.ts

@@ -3,7 +3,7 @@ import { sequenceTypeFromSegment } from './sequenceTypeFromSegment';
 import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { DeletionClass, InsertionClass, SubstitutionClass } from '../../utils/mutations';
 
-type ParsedMutationFilter = {
+export type ParsedMutationFilter = {
     [MutationType in keyof SelectedFilters]: { type: MutationType; value: SelectedFilters[MutationType][number] };
 }[keyof SelectedFilters];
 

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -70,7 +70,6 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
         const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
-        const submitButton = () => canvas.getByRole('button', { name: '+' });
         const listenerMock = fn();
         await step('Setup event listener mock', async () => {
             canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
@@ -84,7 +83,8 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 
         await step('Enter a valid mutation', async () => {
             await userEvent.type(inputField(), 'A123T');
-            await waitFor(() => submitButton().click());
+            const option = await canvas.findByRole('option');
+            await userEvent.click(option);
 
             await waitFor(() =>
                 expect(listenerMock).toHaveBeenCalledWith(
@@ -150,6 +150,16 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
 
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
+
+        await waitFor(() => {
+            const placeholderText = inputField().getAttribute('placeholder');
+
+            expect(placeholderText).toEqual(
+                'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)',
+            );
+        });
+
         await waitFor(() => {
             expect(canvas.getByText('seg1:123T')).toBeVisible();
             expect(canvas.getByText('gene2:56')).toBeVisible();

package/src/web-components/input/gs-mutation-filter.tsx

@@ -14,8 +14,9 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * ## 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.
  *