@genspectrum/dashboard-components 1.3.1 → 1.5.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');
+}
+
 /**
  * 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/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-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%',
     },

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

@@ -59,6 +59,13 @@ export class TextFilterComponent extends PreactLitAdapter {
     @property()
     placeholderText: string | undefined = undefined;
 
+    /**
+     * Whether to hide counts behind options in the drop down selection.
+     * Defaults to false.
+     */
+    @property({ type: Boolean })
+    hideCounts: boolean | undefined = false;
+
     /**
      * The width of the component.
      *
@@ -73,6 +80,7 @@ export class TextFilterComponent extends PreactLitAdapter {
                 lapisField={this.lapisField}
                 lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
+                hideCounts={this.hideCounts}
                 value={this.value}
                 width={this.width}
             />

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -42,6 +42,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         lapisDateField: { control: 'text' },
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
+        hideGaps: { control: 'boolean' },
         useNewEndpoint: { control: 'boolean' },
         pageSizes: { control: 'object' },
     },
@@ -53,6 +54,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        hideGaps: false,
         useNewEndpoint: false,
         pageSizes: [10, 20, 30, 40, 50],
     },
@@ -100,6 +102,7 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .lapisDateField=${args.lapisDateField}
                 .displayMutations=${args.displayMutations}
                 .initialMeanProportionInterval=${args.initialMeanProportionInterval}
+                .hideGaps=${args.hideGaps}
                 .pageSizes=${args.pageSizes}
                 .useNewEndpoint=${args.useNewEndpoint}
             ></gs-mutations-over-time>
@@ -112,7 +115,7 @@ export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
 };
 
-// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
+// This test uses mock data: withDisplayMutations.ts (through mutationOverTimeWorker.mock.ts)
 export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
     args: {
@@ -121,6 +124,16 @@ export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsO
     },
 };
 
+// This test uses mock data: withGaps.ts (through mutationOverTimeWorker.mock.ts)
+export const ByMonthWithFilterOnDisplayedMutationsAndGaps: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21652-'],
+        hideGaps: true,
+    },
+};
+
 // This test uses mock data: byWeek.ts (through mutationOverTimeWorker.mock.ts)
 export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -113,6 +113,13 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: Object })
     initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
 
+    /**
+     * If true, date ranges with no data will be hidden initially; if false, not.
+     * Can be switched with a button in the toolbar.
+     */
+    @property({ type: Boolean })
+    hideGaps: boolean = false;
+
     /**
      * Whether to use the mutationsOverTime endpoint from LAPIS.
      * If true, use the endpoint, if false, compute component data as before.
@@ -146,6 +153,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                     lapisDateField={this.lapisDateField}
                     displayMutations={this.displayMutations}
                     initialMeanProportionInterval={this.initialMeanProportionInterval}
+                    hideGaps={this.hideGaps}
                     useNewEndpoint={this.useNewEndpoint}
                     pageSizes={this.pageSizes}
                 />