@genspectrum/dashboard-components 1.4.0 → 1.6.0

package/src/preact/textFilter/text-filter.stories.tsx

@@ -46,6 +46,11 @@ const meta: Meta<TextFilterProps> = {
                 type: 'text',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
         value: {
             control: {
                 type: 'text',
@@ -75,6 +80,7 @@ export const Default: StoryObj<TextFilterProps> = {
     args: {
         lapisField: 'host',
         placeholderText: 'Enter a host name',
+        hideCounts: false,
         value: '',
         width: '100%',
         lapisFilter: {
@@ -128,10 +134,6 @@ export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
             </LapisUrlContextProvider>
         </>
     ),
-    args: {
-        ...Default.args,
-        value: '',
-    },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
@@ -176,6 +178,29 @@ export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
     },
 };
 
+export const WithHideCountsTrue: StoryObj<TextFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        hideCounts: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const inputField = () => canvas.getByPlaceholderText('Enter a host name', { exact: false });
+
+        await waitFor(async () => {
+            await expect(inputField()).toHaveValue('');
+        });
+
+        await step('visible without counts', async () => {
+            const input = inputField();
+            await userEvent.clear(input);
+            await userEvent.type(input, 'Homo');
+            await expect(canvas.getByRole('option', { name: 'Homo' })).toBeVisible();
+        });
+    },
+};
+
 export const WithNoLapisField: StoryObj<TextFilterProps> = {
     ...Default,
     args: {

package/src/preact/textFilter/text-filter.tsx

@@ -15,6 +15,7 @@ const textSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
     value: z.string().optional(),
+    hideCounts: z.boolean().optional(),
 });
 const textFilterInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const textFilterPropsSchema = textFilterInnerPropsSchema.extend({
@@ -42,6 +43,7 @@ const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
     value,
     lapisField,
     placeholderText,
+    hideCounts,
     lapisFilter,
 }) => {
     const lapis = useLapisUrl();
@@ -59,7 +61,15 @@ const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
         throw error;
     }
 
-    return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
+    return (
+        <TextSelector
+            lapisField={lapisField}
+            value={value}
+            placeholderText={placeholderText}
+            hideCounts={hideCounts}
+            data={data}
+        />
+    );
 };
 
 type SelectItem = {
@@ -72,6 +82,7 @@ const TextSelector = ({
     value,
     placeholderText,
     data,
+    hideCounts = false,
 }: TextSelectorProps & {
     data: SelectItem[];
 }) => {
@@ -89,7 +100,7 @@ const TextSelector = ({
                 return (
                     <p>
                         <span>{item.value}</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/query/queryMutationsOverTime.ts

@@ -267,12 +267,33 @@ async function queryMutationsOverTimeDataDirectEndpoint(
         signal,
     );
 
+    const responseMutations = apiResult.data.mutations.map(parseMutationCode);
+    const mutationEntries: SubstitutionOrDeletionEntry[] = responseMutations.map((mutation, i) => {
+        const numbers = {
+            count: overallMutationData[i].count,
+            proportion: overallMutationData[i].proportion,
+        };
+        if (mutation.type === 'deletion') {
+            return {
+                type: 'deletion',
+                mutation,
+                ...numbers,
+            };
+        } else {
+            return {
+                type: 'substitution',
+                mutation,
+                ...numbers,
+            };
+        }
+    });
+
     const mutationOverTimeData: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue> = {
-        keysFirstAxis: new Map(overallMutationData.map((value) => [value.mutation.code, value.mutation])),
+        keysFirstAxis: new Map(responseMutations.map((mutation) => [mutation.code, mutation])),
         keysSecondAxis: new Map(allDates.map((date) => [date.dateString, date])),
         data: new Map(
-            overallMutationData.map((mutation, i) => [
-                mutation.mutation.code,
+            responseMutations.map((mutation, i) => [
+                mutation.code,
                 new Map(
                     allDates.map((date, j): [string, MutationOverTimeMutationValue] => [
                         date.dateString,
@@ -292,10 +313,22 @@ async function queryMutationsOverTimeDataDirectEndpoint(
 
     return {
         mutationOverTimeData: new BaseMutationOverTimeDataMap(mutationOverTimeData),
-        overallMutationData,
+        overallMutationData: mutationEntries,
     };
 }
 
+function parseMutationCode(code: string): SubstitutionClass | DeletionClass {
+    const maybeDeletion = DeletionClass.parse(code);
+    if (maybeDeletion) {
+        return maybeDeletion;
+    }
+    const maybeSubstitution = SubstitutionClass.parse(code);
+    if (maybeSubstitution) {
+        return maybeSubstitution;
+    }
+    throw Error(`Given code is not valid: ${code}`);
+}
+
 /**
  * Returns a list of date ranges as TemporalClass.
  * Respects date range filters given in the lapisFilter as <lapisDateField>From and <lapisDateField>To.

package/src/query/queryMutationsOverTimeNewEndpoint.spec.ts

@@ -1031,6 +1031,128 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
         expect(dates[1].dateString).toBe('2023-02');
     });
 
+    it('should return full mutation codes even if partial includeMutations are given', async () => {
+        const lapisFilter = { field1: 'value1', field2: 'value2' };
+        const dateField = 'dateField';
+
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-05' },
+                        { count: 2, [dateField]: '2023-02-15' },
+                    ],
+                },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-31',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-02-01',
+                    dateFieldTo: '2023-02-28',
+                    fields: [],
+                },
+                response: { data: [{ count: 12 }] },
+            },
+        ]);
+
+        lapisRequestMocks.multipleMutations(
+            [
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-02-28',
+                        minProportion: 0.001,
+                    },
+                    response: {
+                        data: [getSomeTestMutation(0.21, 6), getSomeOtherTestMutation(0.22, 4)],
+                    },
+                },
+            ],
+            'nucleotide',
+        );
+
+        const dateRanges = [
+            {
+                dateFrom: '2023-01-01',
+                dateTo: '2023-01-31',
+            },
+            {
+                dateFrom: '2023-02-01',
+                dateTo: '2023-02-28',
+            },
+        ];
+
+        lapisRequestMocks.mutationsOverTime(
+            [
+                {
+                    body: {
+                        filters: lapisFilter,
+                        dateRanges,
+                        includeMutations: ['122', 'otherSequenceName:G234C'],
+                        dateField,
+                    },
+                    response: {
+                        data: {
+                            data: [
+                                [
+                                    { count: 0, coverage: 0 },
+                                    { count: 0, coverage: 0 },
+                                ],
+                                [
+                                    { count: 2, coverage: 10 },
+                                    { count: 3, coverage: 10 },
+                                ],
+                            ],
+                            dateRanges,
+                            mutations: ['A122T', 'otherSequenceName:G234C'],
+                        },
+                    },
+                },
+            ],
+            'nucleotide',
+        );
+
+        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+            lapisFilter,
+            sequenceType: 'nucleotide',
+            lapis: DUMMY_LAPIS_URL,
+            lapisDateField: dateField,
+            granularity: 'month',
+            useNewEndpoint: true,
+            displayMutations: ['otherSequenceName:G234C', '122'],
+        });
+
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [
+                { type: 'value', proportion: NaN, count: 0, totalCount: 11 },
+                { type: 'value', proportion: NaN, count: 0, totalCount: 12 },
+            ],
+            [
+                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
+                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
+            ],
+        ]);
+
+        const sequences = mutationOverTimeData.getFirstAxisKeys();
+        expect(sequences[0].code).toBe('A122T');
+        expect(sequences[1].code).toBe('otherSequenceName:G234C');
+
+        const dates = mutationOverTimeData.getSecondAxisKeys();
+        expect(dates[0].dateString).toBe('2023-01');
+        expect(dates[1].dateString).toBe('2023-02');
+    });
+
     function getSomeTestMutation(proportion: number, count: number) {
         return {
             mutation: 'sequenceName:A123T',

package/src/utils/map2d.spec.ts

@@ -186,6 +186,11 @@ describe('Map2dView', () => {
         view.deleteRow('c');
 
         expect(view.getAsArray()).toEqual([[1, undefined]]);
+
+        const view2 = new Map2dView<string, string, number>(container);
+        view2.deleteColumn('b');
+
+        expect(view2.getAsArray()).toEqual([[undefined], [4]]);
     });
 
     it('should throw an error when trying to set a value', () => {
@@ -201,12 +206,31 @@ describe('Map2dView', () => {
         expect(view.getRow('a')).toEqual([1, undefined]);
     });
 
+    it('should return a column by key', () => {
+        const container = createBaseContainer();
+        const view = new Map2dView<string, string, number>(container);
+
+        expect(view.getColumn('b')).toEqual([1, 3]);
+        expect(view.getColumn('d')).toEqual([undefined, 4]);
+    });
+
     it('should return an empty array when the row does not exist', () => {
         const container = createBaseContainer();
         const view = new Map2dView<string, string, number>(container);
         view.deleteRow('c');
 
         expect(view.getRow('c')).toEqual([]);
+        expect(view.getColumn('b')).toEqual([1]);
+    });
+
+    it('should return an empty array when the column does not exist', () => {
+        const container = createBaseContainer();
+        const view = new Map2dView<string, string, number>(container);
+        view.deleteColumn('b');
+
+        expect(view.getColumn('b')).toEqual([]);
+        expect(view.getRow('a')).toEqual([undefined]);
+        expect(view.getRow('c')).toEqual([4]);
     });
 
     function createBaseContainer() {
@@ -217,6 +241,12 @@ describe('Map2dView', () => {
         container.set('a', 'b', 1);
         container.set('c', 'b', 3);
         container.set('c', 'd', 4);
+
+        // |   | b | d |
+        // |---|---|---|
+        // | a | 1 |   |
+        // | c | 3 | 4 |
+
         return container;
     }
 });

package/src/utils/map2d.ts

@@ -168,6 +168,10 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         this.keysFirstAxis.delete(this.serializeFirstAxis(key));
     }
 
+    deleteColumn(key: Key2) {
+        this.keysSecondAxis.delete(this.serializeSecondAxis(key));
+    }
+
     get(keyFirstAxis: Key1, keySecondAxis: Key2) {
         const firstAxisKey = this.serializeFirstAxis(keyFirstAxis);
         const secondAxisKey = this.serializeSecondAxis(keySecondAxis);
@@ -205,7 +209,16 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
             return [];
         }
 
-        return this.baseMap.getRow(key);
+        return this.getSecondAxisKeys().map((k2) => this.baseMap.get(key, k2));
+    }
+
+    getColumn(key: Key2) {
+        const serializedKeySecondAxis = this.serializeSecondAxis(key);
+        if (!this.keysSecondAxis.has(serializedKeySecondAxis)) {
+            return [];
+        }
+
+        return this.getFirstAxisKeys().map((k1) => this.baseMap.get(k1, key));
     }
 
     getContents() {

package/src/utils/mutations.spec.ts

@@ -8,6 +8,11 @@ describe('SubstitutionClass', () => {
         expect(SubstitutionClass.parse('seg1:A1T')).deep.equal(new SubstitutionClass('seg1', 'A', 'T', 1));
     });
 
+    it('should be parsed with stop codons', () => {
+        expect(SubstitutionClass.parse('S:*1247T')).deep.equal(new SubstitutionClass('S', '*', 'T', 1247));
+        expect(SubstitutionClass.parse('S:T1247*')).deep.equal(new SubstitutionClass('S', 'T', '*', 1247));
+    });
+
     it('should render to string correctly', () => {
         const substitutions = [
             {
@@ -30,6 +35,10 @@ describe('DeletionClass', () => {
         expect(DeletionClass.parse('seg1:A1-')).deep.equal(new DeletionClass('seg1', 'A', 1));
     });
 
+    it('should be parsed with stop codons', () => {
+        expect(DeletionClass.parse('seg1:*1-')).deep.equal(new DeletionClass('seg1', '*', 1));
+    });
+
     it('should render to string correctly', () => {
         const substitutions = [
             {
@@ -61,4 +70,8 @@ describe('InsertionClass', () => {
         expect(InsertionClass.parse('ins_geNe1:1:A')).deep.equal(new InsertionClass('geNe1', 1, 'A'));
         expect(InsertionClass.parse('ins_1:aA')).deep.equal(new InsertionClass(undefined, 1, 'aA'));
     });
+
+    it('should be parsed with stop codon insertion', () => {
+        expect(InsertionClass.parse('ins_134:*')).deep.equal(new InsertionClass(undefined, 134, '*'));
+    });
 });

package/src/utils/mutations.ts

@@ -14,7 +14,7 @@ export interface MutationClass extends Mutation {
 }
 
 export const substitutionRegex =
-    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
+    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z*])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -68,7 +68,7 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 }
 
-export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(-)$/i;
+export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z*])?(?<position>\d+)(-)$/i;
 
 export interface Deletion extends Mutation {
     type: 'deletion';
@@ -119,7 +119,7 @@ export class DeletionClass implements MutationClass, Deletion {
 }
 
 export const insertionRegexp =
-    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?]|(\.\*))+))$/i;
+    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?*]|(\.\*))+))$/i;
 
 export interface Insertion extends Mutation {
     type: 'insertion';

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

@@ -92,6 +92,11 @@ const meta: Meta<Required<LineageFilterProps>> = {
                 type: 'object',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 };
 
@@ -105,6 +110,7 @@ const Template: StoryObj<Required<LineageFilterProps>> = {
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
+                    .hideCounts=${args.hideCounts}
                     .value=${args.value}
                     .width=${args.width}
                 ></gs-lineage-filter>
@@ -119,6 +125,7 @@ const Template: StoryObj<Required<LineageFilterProps>> = {
         placeholderText: 'Enter a lineage',
         value: 'B.1.1.7',
         width: '100%',
+        hideCounts: false,
     },
 };
 

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

@@ -73,6 +73,13 @@ export class LineageFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * Whether to hide counts behind lineage options in the drop down selection.
+     * Defaults to false.
+     */
+    @property({ type: Boolean })
+    hideCounts: boolean | undefined = false;
+
     override render() {
         return (
             <LineageFilter
@@ -81,6 +88,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
                 placeholderText={this.placeholderText}
                 value={this.value}
                 width={this.width}
+                hideCounts={this.hideCounts}
             />
         );
     }

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

@@ -56,6 +56,11 @@ const meta: Meta = {
                 type: 'text',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
         lapisFilter: {
             age: 18,
         },
@@ -75,6 +80,7 @@ const Template: StoryObj<LocationFilterProps> = {
                     .value=${args.value}
                     .width=${args.width}
                     placeholderText=${ifDefined(args.placeholderText)}
+                    .hideCounts=${args.hideCounts}
                 ></gs-location-filter>
             </div>
         </gs-app>`;
@@ -87,6 +93,7 @@ const Template: StoryObj<LocationFilterProps> = {
         value: undefined,
         width: '100%',
         placeholderText: 'Enter a location',
+        hideCounts: false,
     },
 };
 

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

@@ -74,9 +74,16 @@ export class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The placeholder text to display in the input field, if it is empty.
      */
-    @property()
+    @property({ type: String })
     placeholderText: string | undefined = undefined;
 
+    /**
+     * Whether to hide counts behind location options in the drop down selection.
+     * Defaults to false.
+     */
+    @property({ type: Boolean })
+    hideCounts: boolean | undefined = false;
+
     override render() {
         return (
             <LocationFilter
@@ -85,6 +92,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
                 lapisFilter={this.lapisFilter}
                 width={this.width}
                 placeholderText={this.placeholderText}
+                hideCounts={this.hideCounts}
             />
         );
     }

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

@@ -38,6 +38,11 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
         width: { control: 'text' },
+        enabledMutationTypes: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     tags: ['autodocs'],
 };
@@ -48,7 +53,11 @@ const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-(--breakpoint-lg)">
-                <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
+                <gs-mutation-filter
+                    .initialValue=${args.initialValue}
+                    .width=${args.width}
+                    .enabledMutationTypes=${args.enabledMutationTypes}
+                ></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
@@ -104,6 +113,25 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const RestrictEnabledMutationTypes: StoryObj<MutationFilterProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        enabledMutationTypes: ['nucleotideMutations', 'aminoAcidMutations'],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
+
+        await waitFor(async () => {
+            const placeholderText = inputField().getAttribute('placeholder');
+
+            await expect(placeholderText).toEqual('Enter a mutation (e.g. 23T, E:57Q)');
+        });
+    },
+};
+
 export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {

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

@@ -2,7 +2,11 @@ import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
-import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import {
+    MutationFilter,
+    type MutationType,
+    type MutationFilterProps,
+} from '../../preact/mutationFilter/mutation-filter';
 import type { MutationsFilter } from '../../types';
 import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -43,6 +47,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * Examples: `ins_S:614:G`, `ins_614:G`
  *
+ * ### Enabled mutation types
+ *
+ * After parsing, the entered mutation/insertion also has to match the enabled mutation types,
+ * which are configured with the `enabledMutationTypes` attribute.
+ *
  * @fires {CustomEvent<{
  *      nucleotideMutations: string[],
  *      aminoAcidMutations: string[],
@@ -81,10 +90,28 @@ export class MutationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * Which mutation types this input will accept.
+     * Any (or all) of the following can be given in a list:
+     *
+     * - `nucleotideMutations`
+     * - `nucleotideInsertions`
+     * - `aminoAcidMutations`
+     * - `aminoAcidInsertions`
+     *
+     * By default or if none are given, all types are accepted.
+     */
+    @property({ type: Object })
+    enabledMutationTypes: MutationType[] | undefined = undefined;
+
     override render() {
         return (
             <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} width={this.width} />
+                <MutationFilter
+                    initialValue={this.initialValue}
+                    width={this.width}
+                    enabledMutationTypes={this.enabledMutationTypes}
+                />
             </ReferenceGenomesAwaiter>
         );
     }

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

@@ -63,6 +63,11 @@ const meta: Meta<Required<TextFilterProps>> = {
                 type: 'text',
             },
         },
+        hideCounts: {
+            control: {
+                type: 'boolean',
+            },
+        },
         value: {
             control: {
                 type: 'text',
@@ -92,6 +97,7 @@ export const Default: StoryObj<Required<TextFilterProps>> = {
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
+                    .hideCounts=${args.hideCounts}
                     .value=${args.value}
                     .width=${args.width}
                 ></gs-text-filter>
@@ -102,6 +108,7 @@ export const Default: StoryObj<Required<TextFilterProps>> = {
         lapisField: 'host',
         lapisFilter: { country: 'Germany' },
         placeholderText: 'Enter host name',
+        hideCounts: false,
         value: 'Homo sapiens',
         width: '100%',
     },