@genspectrum/dashboard-components 1.4.0 → 1.6.0

package/dist/util.d.ts

@@ -933,7 +933,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -941,7 +941,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -949,7 +949,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -957,7 +957,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1093,10 +1093,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1104,7 +1105,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1112,11 +1113,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1124,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -74,6 +74,11 @@ const meta: Meta = {
                 type: 'object',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 
     args: {
@@ -84,6 +89,7 @@ const meta: Meta = {
         placeholderText: 'Enter a lineage',
         value: 'A.1',
         width: '100%',
+        hideCounts: false,
     },
 };
 
@@ -163,6 +169,24 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const WithHideCountsTrue: StoryObj<LineageFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        hideCounts: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas } = await prepare(canvasElement, step);
+
+        await step('visible without counts', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'B.1');
+            await expect(canvas.getByRole('option', { name: 'B.1' })).toBeVisible();
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -16,6 +16,7 @@ const lineageSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
     value: z.string(),
+    hideCounts: z.boolean().optional(),
 });
 const lineageFilterInnerPropsSchema = lineageSelectorPropsSchema.extend({
     lapisFilter: lapisFilterSchema,
@@ -46,6 +47,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     placeholderText,
     value,
     lapisFilter,
+    hideCounts,
 }) => {
     const lapisUrl = useLapisUrl();
 
@@ -62,7 +64,15 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
         throw error;
     }
 
-    return <LineageSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
+    return (
+        <LineageSelector
+            lapisField={lapisField}
+            value={value}
+            placeholderText={placeholderText}
+            data={data}
+            hideCounts={hideCounts}
+        />
+    );
 };
 
 const LineageSelector = ({
@@ -70,6 +80,7 @@ const LineageSelector = ({
     value,
     placeholderText,
     data,
+    hideCounts = false,
 }: LineageSelectorProps & {
     data: LineageItem[];
 }) => {
@@ -88,7 +99,7 @@ const LineageSelector = ({
             formatItemInList={(item: LineageItem) => (
                 <p>
                     <span>{item.lineage}</span>
-                    <span className='ml-2 text-gray-500'>({item.count})</span>
+                    {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
                 </p>
             )}
         />

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -44,6 +44,7 @@ const meta: Meta<LocationFilterProps> = {
         lapisFilter: {
             age: 18,
         },
+        hideCounts: false,
     },
     argTypes: {
         fields: {
@@ -66,6 +67,11 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'text',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
         lapisFilter: {
             control: {
                 type: 'object',
@@ -146,6 +152,24 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
     },
 };
 
+export const WithHideCountsTrue: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        hideCounts: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas } = await prepare(canvasElement, step);
+
+        await step('visible without counts', async () => {
+            const input = await inputField(canvas);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'Adajan');
+            await expect(canvas.getByRole('option', { name: 'Adajan Asia / India / Gujarat / Adajan' })).toBeVisible();
+        });
+    },
+};
+
 const inputField = (canvas: ReturnType<typeof within>) => canvas.findByPlaceholderText('Enter a location');
 
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {

package/src/preact/locationFilter/location-filter.tsx

@@ -16,6 +16,7 @@ const locationSelectorPropsSchema = z.object({
     value: lapisLocationFilterSchema.optional(),
     placeholderText: z.string().optional(),
     fields: z.array(z.string()).min(1),
+    hideCounts: z.boolean().optional(),
 });
 const locationFilterInnerPropsSchema = locationSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const locationFilterPropsSchema = locationFilterInnerPropsSchema.extend({
@@ -39,7 +40,13 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
     );
 };
 
-export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({
+    value,
+    fields,
+    placeholderText,
+    lapisFilter,
+    hideCounts,
+}: LocationFilterInnerProps) => {
     const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
@@ -54,7 +61,15 @@ export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilte
         throw error;
     }
 
-    return <LocationSelector fields={fields} value={value} placeholderText={placeholderText} locationData={data} />;
+    return (
+        <LocationSelector
+            fields={fields}
+            value={value}
+            placeholderText={placeholderText}
+            locationData={data}
+            hideCounts={hideCounts}
+        />
+    );
 };
 
 type SelectItem = {
@@ -69,6 +84,7 @@ const LocationSelector = ({
     value,
     placeholderText,
     locationData,
+    hideCounts = false,
 }: LocationSelectorProps & {
     locationData: LocationEntry[];
 }) => {
@@ -96,7 +112,7 @@ const LocationSelector = ({
                 <>
                     <p>
                         <span>{item.label}</span>
-                        <span className='ml-2 text-gray-500'>({item.count})</span>
+                        {!hideCounts && <span className='ml-2 text-gray-500'>({item.count})</span>}
                     </p>
                     <span className='text-sm text-gray-500'>{item.description}</span>
                 </>

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

@@ -139,8 +139,8 @@ const AminoAcidMutationsInfo = () => {
             <InfoParagraph>
                 An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
                 <b>&lt;gene&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. A <b>&lt;base&gt;</b> can be one of
-                the 20 amino acid codes. It can also be <b>-</b> for deletion and <b>X</b> for unknown. Example:{' '}
-                <ExampleMutation mutationType='substitution' sequenceType='amino acid' />.
+                the 20 amino acid codes. It can also be <b>*</b> for a stop codon, <b>-</b> for deletion and <b>X</b>{' '}
+                for unknown. Example: <ExampleMutation mutationType='substitution' sequenceType='amino acid' />.
             </InfoParagraph>
             <InfoParagraph>
                 Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the

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

@@ -27,6 +27,11 @@ const meta: Meta<MutationFilterProps> = {
                 type: 'object',
             },
         },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -36,7 +41,11 @@ export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter width={args.width} initialValue={args.initialValue} />
+                <MutationFilter
+                    width={args.width}
+                    initialValue={args.initialValue}
+                    enabledMutationTypes={args.enabledMutationTypes}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContextProvider>
     ),
@@ -217,6 +226,67 @@ export const IgnoresDuplicatesOnPasteCommaSeparatedList: StoryObj<MutationFilter
     },
 };
 
+export const FiltersOutDisabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        enabledMutationTypes: ['nucleotideMutations'],
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
+
+        await step('Enters an invalid insertion mutation', async () => {
+            await testNoOptionsExist(canvas, 'ins_23:T');
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+
+            await userEvent.type(inputField(canvas), '{backspace>12/}', INPUT_DELAY);
+        });
+
+        await step('Enters an invalid amino acid mutation', async () => {
+            await testNoOptionsExist(canvas, 'S:A1234T');
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+
+            await userEvent.type(inputField(canvas), '{backspace>12/}', INPUT_DELAY);
+        });
+
+        await step('Enter a comma separated list of invalid mutations', async () => {
+            await pasteMutations(canvas, 'insX, ins_123:AA');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: [],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+
+            await userEvent.type(inputField(canvas), '{backspace>24/}', INPUT_DELAY);
+        });
+
+        await step('Enter a valid mutation', async () => {
+            await submitMutation(canvas, 'A123T');
+
+            await waitFor(() =>
+                expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+    },
+};
+
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {

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

@@ -1,6 +1,6 @@
 import { useCombobox, useMultipleSelection } from 'downshift/preact';
 import { type FunctionComponent } from 'preact';
-import { useContext, useMemo, useRef, useState } from 'preact/hooks';
+import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getExampleMutation } from './ExampleMutation';
@@ -15,8 +15,18 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { UserFacingError } from '../components/error-display';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
+const mutationTypeSchema = z.enum([
+    'nucleotideMutations',
+    'aminoAcidMutations',
+    'nucleotideInsertions',
+    'aminoAcidInsertions',
+]);
+
+export type MutationType = z.infer<typeof mutationTypeSchema>;
+
 const mutationFilterInnerPropsSchema = z.object({
     initialValue: z.union([mutationsFilterSchema.optional(), z.array(z.string()), z.undefined()]),
+    enabledMutationTypes: z.array(mutationTypeSchema).optional(),
 });
 
 const mutationFilterPropsSchema = mutationFilterInnerPropsSchema.extend({
@@ -53,7 +63,7 @@ export type MutationFilterItem =
     | SelectedAminoAcidInsertion;
 
 export const MutationFilter: FunctionComponent<MutationFilterProps> = (props) => {
-    const { width, initialValue } = props;
+    const { width, initialValue, enabledMutationTypes } = props;
     return (
         <ErrorBoundary
             size={{ height: '40px', width }}
@@ -62,20 +72,23 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = (props) =>
             componentProps={props}
         >
             <div style={{ width }}>
-                <MutationFilterInner initialValue={initialValue} />
+                <MutationFilterInner initialValue={initialValue} enabledMutationTypes={enabledMutationTypes} />
             </div>
         </ErrorBoundary>
     );
 };
 
-function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
+function MutationFilterInner({
+    initialValue,
+    enabledMutationTypes = ['nucleotideMutations', 'nucleotideInsertions', 'aminoAcidMutations', 'aminoAcidInsertions'],
+}: MutationFilterInnerProps) {
     const referenceGenome = useContext(ReferenceGenomeContext);
     const filterRef = useRef<HTMLDivElement>(null);
     const [inputValue, setInputValue] = useState('');
 
     const initialState = useMemo(() => {
-        return getInitialState(initialValue, referenceGenome);
-    }, [initialValue, referenceGenome]);
+        return getInitialState(initialValue, referenceGenome, enabledMutationTypes);
+    }, [initialValue, referenceGenome, enabledMutationTypes]);
 
     const [selectedItems, setSelectedItems] = useState<MutationFilterItem[]>(initialState);
     const [itemCandidate, setItemCandidate] = useState<MutationFilterItem | null>(null);
@@ -83,6 +96,12 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
 
     const items = itemCandidate ? [itemCandidate] : [];
 
+    useEffect(() => {
+        setSelectedItems((prevSelectedItems) =>
+            prevSelectedItems.filter((mutFilterItem) => enabledMutationTypes.includes(mutFilterItem.type)),
+        );
+    }, [enabledMutationTypes, selectedItems]);
+
     const fireChangeEvent = (selectedFilters: MutationFilterItem[]) => {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
@@ -115,16 +134,24 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
             const values = newInputValue.split(',').map((value) => {
                 return { value, parsedValue: parseAndValidateMutation(value.trim(), referenceGenome) };
             });
-            const validEntries = values.map((value) => value.parsedValue).filter((value) => value !== null);
-            const invalidInput = values
-                .filter((value) => value.parsedValue === null)
-                .map((value) => value.value.trim())
-                .join(',');
+
+            const validEntries: MutationFilterItem[] = [];
+            const rejected: string[] = [];
+
+            for (const v of values) {
+                if (v.parsedValue === null) {
+                    rejected.push(v.value.trim());
+                } else if (enabledMutationTypes.includes(v.parsedValue.type)) {
+                    validEntries.push(v.parsedValue);
+                } else {
+                    rejected.push(v.parsedValue.value.code);
+                }
+            }
 
             const selectedItemCandidates = [...selectedItems, ...validEntries];
 
             handleSelectedItemsChanged(extractUniqueValues(selectedItemCandidates));
-            setInputValue(invalidInput);
+            setInputValue(rejected.join(','));
             setItemCandidate(null);
         } else {
             setInputValue(newInputValue ?? '');
@@ -133,7 +160,8 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
                 const alreadyExists = selectedItems.find(
                     (selectedItem) => selectedItem.value.code === candidate?.value.code,
                 );
-                if (!alreadyExists) {
+                const allowedType = candidate !== null && enabledMutationTypes.includes(candidate.type);
+                if (!alreadyExists && allowedType) {
                     setItemCandidate(candidate);
                 }
             }
@@ -216,7 +244,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
                 })}
                 <div className='flex gap-0.5 grow p-1'>
                     <input
-                        placeholder={getPlaceholder(referenceGenome)}
+                        placeholder={getPlaceholder(referenceGenome, enabledMutationTypes)}
                         className='w-full focus:outline-none min-w-8'
                         {...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
                         onBlur={() => {
@@ -261,7 +289,11 @@ function extractUniqueValues(newSelectedItems: MutationFilterItem[]) {
     return Array.from(uniqueMutationsMap.values());
 }
 
-function getInitialState(initialValue: MutationsFilter | string[] | undefined, referenceGenome: ReferenceGenome) {
+function getInitialState(
+    initialValue: MutationsFilter | string[] | undefined,
+    referenceGenome: ReferenceGenome,
+    enabledMutationTypes: MutationType[],
+) {
     if (initialValue === undefined) {
         return [];
     }
@@ -270,18 +302,27 @@ function getInitialState(initialValue: MutationsFilter | string[] | undefined, r
 
     return values
         .map((value) => parseAndValidateMutation(value, referenceGenome))
-        .filter((parsedMutation) => parsedMutation !== null);
+        .filter((parsedMutation): parsedMutation is MutationFilterItem => parsedMutation !== null)
+        .filter((mutation) => enabledMutationTypes.includes(mutation.type));
 }
 
-function getPlaceholder(referenceGenome: ReferenceGenome) {
-    const nucleotideSubstitution = getExampleMutation(referenceGenome, 'nucleotide', 'substitution');
-    const nucleotideInsertion = getExampleMutation(referenceGenome, 'nucleotide', 'insertion');
-    const aminoAcidSubstitution = getExampleMutation(referenceGenome, 'amino acid', 'substitution');
-    const aminoAcidInsertion = getExampleMutation(referenceGenome, 'amino acid', 'insertion');
+function getPlaceholder(referenceGenome: ReferenceGenome, enabledMutationTypes: MutationType[]) {
+    const exampleMutationList = [];
+
+    if (enabledMutationTypes.includes('nucleotideMutations')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'substitution'));
+    }
+    if (enabledMutationTypes.includes('nucleotideInsertions')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'nucleotide', 'insertion'));
+    }
+    if (enabledMutationTypes.includes('aminoAcidMutations')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'amino acid', 'substitution'));
+    }
+    if (enabledMutationTypes.includes('aminoAcidInsertions')) {
+        exampleMutationList.push(getExampleMutation(referenceGenome, 'amino acid', 'insertion'));
+    }
 
-    const exampleMutations = [nucleotideSubstitution, nucleotideInsertion, aminoAcidSubstitution, aminoAcidInsertion]
-        .filter((example) => example !== '')
-        .join(', ');
+    const exampleMutations = exampleMutationList.filter((example) => example !== '').join(', ');
 
     return `Enter a mutation (e.g. ${exampleMutations})`;
 }