@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,268 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useRef, useState } from 'preact/hooks';
+
+import { parseAndValidateMutation } from './parseAndValidateMutation';
+import { type Deletion, type Insertion, type Mutation, type Substitution } from '../../utils/mutations';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { singleGraphColorRGBByName } from '../shared/charts/colors';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export type MutationFilterProps = {};
+
+export type SelectedFilters = {
+    nucleotideMutations: (Substitution | Deletion)[];
+    aminoAcidMutations: (Substitution | Deletion)[];
+    nucleotideInsertions: Insertion[];
+    aminoAcidInsertions: Insertion[];
+};
+
+export type SelectedMutationFilterStrings = {
+    [Key in keyof SelectedFilters]: string[];
+};
+
+export const MutationFilter: FunctionComponent<MutationFilterProps> = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+    const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>({
+        nucleotideMutations: [],
+        aminoAcidMutations: [],
+        nucleotideInsertions: [],
+        aminoAcidInsertions: [],
+    });
+    const [inputValue, setInputValue] = useState('');
+    const [isError, setIsError] = useState(false);
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const handleSubmit = (event: Event) => {
+        event.preventDefault();
+
+        const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
+
+        if (parsedMutation === null) {
+            setIsError(true);
+            return;
+        }
+
+        const newSelectedValues = {
+            ...selectedFilters,
+            [parsedMutation.type]: [...selectedFilters[parsedMutation.type], parsedMutation.value],
+        };
+
+        setSelectedFilters(newSelectedValues);
+        fireChangeEvent(newSelectedValues);
+        setInputValue('');
+    };
+
+    const fireChangeEvent = (selectedFilters: SelectedFilters) => {
+        const detail = mapToMutationFilterStrings(selectedFilters);
+
+        formRef.current?.dispatchEvent(
+            new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-changed', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
+    const handleOnBlur = () => {
+        const detail = mapToMutationFilterStrings(selectedFilters);
+
+        formRef.current?.dispatchEvent(
+            new CustomEvent<SelectedMutationFilterStrings>('gs-mutation-filter-on-blur', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
+    const handleInputChange = (event: Event) => {
+        setInputValue((event.target as HTMLInputElement).value);
+        setIsError(false);
+    };
+
+    return (
+        <div class={`rounded-lg border border-gray-300 bg-white p-2`}>
+            <SelectedMutationDisplay
+                selectedFilters={selectedFilters}
+                setSelectedFilters={setSelectedFilters}
+                fireChangeEvent={fireChangeEvent}
+            />
+
+            <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>
+                <label className={`input flex items-center gap-2 ${isError ? 'input-error' : 'input-bordered'}`}>
+                    <input
+                        className='grow min-w-0'
+                        type='text'
+                        value={inputValue}
+                        onInput={handleInputChange}
+                        placeholder={'Enter a mutation'}
+                        onBlur={handleOnBlur}
+                    />
+                    <button className='btn btn-sm'>+</button>
+                </label>
+            </form>
+        </div>
+    );
+};
+
+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);
+
+        fireChangeEvent(newSelectedValues);
+    };
+
+    return (
+        <ul class='flex flex-wrap'>
+            {selectedFilters.nucleotideMutations.map((mutation) => (
+                <li key={mutation.toString()}>
+                    <SelectedNucleotideMutation
+                        mutation={mutation}
+                        onDelete={(mutation: Substitution | Deletion) =>
+                            onSelectedRemoved(mutation, 'nucleotideMutations')
+                        }
+                    />
+                </li>
+            ))}
+            {selectedFilters.aminoAcidMutations.map((mutation) => (
+                <li key={mutation.toString()}>
+                    <SelectedAminoAcidMutation
+                        mutation={mutation}
+                        onDelete={(mutation: Substitution | Deletion) =>
+                            onSelectedRemoved(mutation, 'aminoAcidMutations')
+                        }
+                    />
+                </li>
+            ))}
+            {selectedFilters.nucleotideInsertions.map((insertion) => (
+                <li key={insertion.toString()}>
+                    <SelectedNucleotideInsertion
+                        insertion={insertion}
+                        onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
+                    />
+                </li>
+            ))}
+            {selectedFilters.aminoAcidInsertions.map((insertion) => (
+                <li key={insertion.toString()}>
+                    <SelectedAminoAcidInsertion
+                        insertion={insertion}
+                        onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
+                    />
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+const SelectedAminoAcidInsertion: FunctionComponent<{
+    insertion: Insertion;
+    onDelete: (insertion: Insertion) => 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: Substitution | Deletion;
+    onDelete: (mutation: Substitution | Deletion) => 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: Substitution | Deletion;
+    onDelete: (insertion: Substitution | Deletion) => 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: Insertion;
+    onDelete: (insertion: Insertion) => void;
+}> = ({ insertion, onDelete }) => {
+    const backgroundColor = singleGraphColorRGBByName('green', 0.3);
+    const textColor = singleGraphColorRGBByName('green', 1);
+
+    return (
+        <SelectedFilter
+            mutation={insertion}
+            onDelete={onDelete}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+        />
+    );
+};
+
+type SelectedFilterProps<MutationType extends Mutation> = {
+    mutation: MutationType;
+    onDelete: (mutation: MutationType) => void;
+    backgroundColor: string;
+    textColor: string;
+};
+
+const SelectedFilter = <MutationType extends Mutation>({
+    mutation,
+    onDelete,
+    backgroundColor,
+    textColor,
+}: SelectedFilterProps<MutationType>) => {
+    return (
+        <div
+            class='flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1'
+            style={{ backgroundColor, color: textColor }}
+        >
+            <div>{mutation.toString()}</div>
+            <button onClick={() => onDelete(mutation)}>
+                <DeleteIcon />
+            </button>
+        </div>
+    );
+};
+
+function mapToMutationFilterStrings(selectedFilters: SelectedFilters) {
+    return {
+        aminoAcidMutations: selectedFilters.aminoAcidMutations.map((mutation) => mutation.toString()),
+        nucleotideMutations: selectedFilters.nucleotideMutations.map((mutation) => mutation.toString()),
+        aminoAcidInsertions: selectedFilters.aminoAcidInsertions.map((insertion) => insertion.toString()),
+        nucleotideInsertions: selectedFilters.nucleotideInsertions.map((insertion) => insertion.toString()),
+    };
+}

package/src/preact/mutationFilter/parseAndValidateMutation.ts

@@ -0,0 +1,54 @@
+import { type SelectedFilters } from './mutation-filter';
+import { sequenceTypeFromSegment } from './sequenceTypeFromSegment';
+import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import { Deletion, Insertion, Substitution } from '../../utils/mutations';
+
+type ParsedMutationFilter = {
+    [MutationType in keyof SelectedFilters]: { type: MutationType; value: SelectedFilters[MutationType][number] };
+}[keyof SelectedFilters];
+
+export const parseAndValidateMutation = (
+    value: string,
+    referenceGenome: ReferenceGenome,
+): ParsedMutationFilter | null => {
+    const possibleInsertion = Insertion.parse(value);
+    if (possibleInsertion !== null) {
+        const sequenceType = sequenceTypeFromSegment(possibleInsertion.segment, referenceGenome);
+        switch (sequenceType) {
+            case 'nucleotide':
+                return { type: 'nucleotideInsertions', value: possibleInsertion };
+            case 'amino acid':
+                return { type: 'aminoAcidInsertions', value: possibleInsertion };
+            case undefined:
+                return null;
+        }
+    }
+
+    const possibleDeletion = Deletion.parse(value);
+    if (possibleDeletion !== null) {
+        const sequenceType = sequenceTypeFromSegment(possibleDeletion.segment, referenceGenome);
+        switch (sequenceType) {
+            case 'nucleotide':
+                return { type: 'nucleotideMutations', value: possibleDeletion };
+            case 'amino acid':
+                return { type: 'aminoAcidMutations', value: possibleDeletion };
+            case undefined:
+                return null;
+        }
+    }
+
+    const possibleSubstitution = Substitution.parse(value);
+    if (possibleSubstitution !== null) {
+        const sequenceType = sequenceTypeFromSegment(possibleSubstitution.segment, referenceGenome);
+        switch (sequenceType) {
+            case 'nucleotide':
+                return { type: 'nucleotideMutations', value: possibleSubstitution };
+            case 'amino acid':
+                return { type: 'aminoAcidMutations', value: possibleSubstitution };
+            case undefined:
+                return null;
+        }
+    }
+
+    return null;
+};

package/src/preact/mutationFilter/parseMutation.spec.ts

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest';
+
+import { parseAndValidateMutation } from './parseAndValidateMutation';
+import { Deletion, Insertion, Substitution } from '../../utils/mutations';
+
+describe('parseMutation', () => {
+    const singleSegmentedReferenceGenome = {
+        nucleotideSequences: [
+            {
+                name: 'nuc1',
+                sequence: 'ACGT',
+            },
+        ],
+        genes: [
+            {
+                name: 'gene1',
+                sequence: 'ACGT',
+            },
+            {
+                name: 'gene2',
+                sequence: 'ACGT',
+            },
+        ],
+    };
+
+    const testCases = {
+        insertions: [
+            {
+                name: 'should parse nucleotide insertions',
+                input: 'ins_10:ACGT',
+                expected: { type: 'nucleotideInsertions', value: new Insertion(undefined, 10, 'ACGT') },
+            },
+            {
+                name: 'should parse amino acid insertions',
+                input: 'ins_gene1:10:ACGT',
+                expected: { type: 'aminoAcidInsertions', value: new Insertion('gene1', 10, 'ACGT') },
+            },
+            {
+                name: 'should parse amino acid insertion with LAPIS-style wildcard',
+                input: 'ins_gene1:10:?AC?GT',
+                expected: { type: 'aminoAcidInsertions', value: new Insertion('gene1', 10, '?AC?GT') },
+            },
+            {
+                name: 'should parse amino acid insertion with SILO-style wildcard',
+                input: 'ins_gene1:10:.*AC.*GT',
+                expected: { type: 'aminoAcidInsertions', value: new Insertion('gene1', 10, '.*AC.*GT') },
+            },
+            {
+                name: 'should return null for insertion with segment not in reference genome',
+                input: 'INS_notInReferenceGenome:10:ACGT',
+                expected: null,
+            },
+            { name: 'should return null for insertion with missing position', input: 'ins_gene1:ACGT', expected: null },
+        ],
+        deletions: [
+            {
+                name: 'should parse nucleotide deletion in single segmented reference genome, when no segment is given',
+                input: 'A123-',
+                expected: { type: 'nucleotideMutations', value: new Deletion(undefined, 'A', 123) },
+            },
+            {
+                name: 'should parse nucleotide deletion without valueAtReference when no segment is given',
+                input: '123-',
+                expected: { type: 'nucleotideMutations', value: new Deletion(undefined, undefined, 123) },
+            },
+            {
+                name: 'should parse nucleotide deletion',
+                input: 'nuc1:A123-',
+                expected: { type: 'nucleotideMutations', value: new Deletion('nuc1', 'A', 123) },
+            },
+            {
+                name: 'should parse nucleotide deletion without valueAtReference',
+                input: 'nuc1:123-',
+                expected: { type: 'nucleotideMutations', value: new Deletion('nuc1', undefined, 123) },
+            },
+            {
+                name: 'should parse amino acid deletion',
+                input: 'gene1:A123-',
+                expected: { type: 'aminoAcidMutations', value: new Deletion('gene1', 'A', 123) },
+            },
+            {
+                name: 'should parse amino acid deletion without valueAtReference',
+                input: 'gene1:123-',
+                expected: { type: 'aminoAcidMutations', value: new Deletion('gene1', undefined, 123) },
+            },
+            {
+                name: 'should return null for deletion with segment not in reference genome',
+                input: 'notInReferenceGenome:A123-',
+                expected: null,
+            },
+        ],
+        substitutions: [
+            {
+                name: 'should parse nucleotide substitution in single segmented reference genome, when no segment is given',
+                input: 'A123T',
+                expected: { type: 'nucleotideMutations', value: new Substitution(undefined, 'A', 'T', 123) },
+            },
+            {
+                name: 'should parse substitution without valueAtReference',
+                input: '123T',
+                expected: { type: 'nucleotideMutations', value: new Substitution(undefined, undefined, 'T', 123) },
+            },
+            {
+                name: 'should parse substitution with neither valueAtReference not substitutionValue',
+                input: '123',
+                expected: {
+                    type: 'nucleotideMutations',
+                    value: new Substitution(undefined, undefined, undefined, 123),
+                },
+            },
+            {
+                name: 'should parse a "no mutation" substitution',
+                input: '123.',
+                expected: { type: 'nucleotideMutations', value: new Substitution(undefined, undefined, '.', 123) },
+            },
+            {
+                name: 'should parse nucleotide substitution',
+                input: 'nuc1:A123T',
+                expected: { type: 'nucleotideMutations', value: new Substitution('nuc1', 'A', 'T', 123) },
+            },
+            {
+                name: 'should parse amino acid substitution',
+                input: 'gene1:A123T',
+                expected: { type: 'aminoAcidMutations', value: new Substitution('gene1', 'A', 'T', 123) },
+            },
+            {
+                name: 'should return null for substitution with segment not in reference genome',
+                input: 'notInReferenceGenome:A123T',
+                expected: null,
+            },
+        ],
+    };
+
+    Object.entries(testCases).forEach(([type, cases]) => {
+        describe(type, () => {
+            cases.forEach(({ name, input, expected }) => {
+                it(name, () => {
+                    const result = parseAndValidateMutation(input, singleSegmentedReferenceGenome);
+
+                    expect(result).deep.equals(expected);
+                });
+            });
+        });
+    });
+
+    it('should return null for invalid mutation', () => {
+        const result = parseAndValidateMutation('invalidMutation', singleSegmentedReferenceGenome);
+        expect(result).toBe(null);
+    });
+});

package/src/preact/mutationFilter/sequenceTypeFromSegment.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+
+import { sequenceTypeFromSegment } from './sequenceTypeFromSegment';
+
+describe('getSequenceType', () => {
+    const singleSegmentedReferenceGenome = {
+        nucleotideSequences: [
+            {
+                name: 'nuc1',
+                sequence: 'ACGT',
+            },
+        ],
+        genes: [
+            {
+                name: 'gene1',
+                sequence: 'ACGT',
+            },
+            {
+                name: 'gene2',
+                sequence: 'ACGT',
+            },
+        ],
+    };
+
+    const multiSegmentedReferenceGenome = {
+        nucleotideSequences: [
+            {
+                name: 'nuc1',
+                sequence: 'ACGT',
+            },
+            {
+                name: 'nuc2',
+                sequence: 'ACGT',
+            },
+        ],
+        genes: [
+            {
+                name: 'gene1',
+                sequence: 'ACGT',
+            },
+            {
+                name: 'gene2',
+                sequence: 'ACGT',
+            },
+        ],
+    };
+
+    it('should return nucleotide when the segment is undefined for singe segmented genome', () => {
+        expect(sequenceTypeFromSegment('nuc1', singleSegmentedReferenceGenome)).toBe('nucleotide');
+        expect(sequenceTypeFromSegment(undefined, singleSegmentedReferenceGenome)).toBe('nucleotide');
+    });
+
+    it('should return undefined when the segment is undefined for multi segmented genome', () => {
+        expect(sequenceTypeFromSegment('nuc1', multiSegmentedReferenceGenome)).toBe('nucleotide');
+        expect(sequenceTypeFromSegment(undefined, multiSegmentedReferenceGenome)).toBe(undefined);
+    });
+
+    it('should return amino acid when the segment is a gene', () => {
+        expect(sequenceTypeFromSegment('gene1', singleSegmentedReferenceGenome)).toBe('amino acid');
+        expect(sequenceTypeFromSegment('gene2', singleSegmentedReferenceGenome)).toBe('amino acid');
+    });
+
+    it('should return undefined when the segment is not found in the reference genome', () => {
+        expect(sequenceTypeFromSegment('not-existing', singleSegmentedReferenceGenome)).toBe(undefined);
+    });
+});

package/src/preact/mutationFilter/sequenceTypeFromSegment.ts

@@ -0,0 +1,20 @@
+import type { ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import type { SequenceType } from '../../types';
+
+export const sequenceTypeFromSegment = (
+    possibleSegment: string | undefined,
+    referenceGenome: ReferenceGenome,
+): SequenceType | undefined => {
+    if (possibleSegment === undefined) {
+        return referenceGenome.nucleotideSequences.length === 1 ? 'nucleotide' : undefined;
+    }
+
+    if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {
+        return 'nucleotide';
+    }
+
+    if (referenceGenome.genes.some((gene) => gene.name === possibleSegment)) {
+        return 'amino acid';
+    }
+    return undefined;
+};