@genspectrum/dashboard-components 0.11.5 → 0.11.7

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -85,7 +85,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
 };
 
 function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
-    const tooltipX = rowIndex < rows / 2 ? 'bottom' : 'top';
+    const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? 'bottom' : 'top';
     const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
     return `${tooltipX}-${tooltipY}` as const;
 }

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -252,7 +252,7 @@ function getDownloadData(filteredData: MutationOverTimeDataMap) {
     return filteredData.getFirstAxisKeys().map((mutation) => {
         return dates.reduce(
             (accumulated, date) => {
-                const proportion = filteredData.get(mutation, date)?.proportion ?? 0;
+                const proportion = filteredData.get(mutation, date)?.proportion ?? '';
                 return {
                     ...accumulated,
                     [date.dateString]: proportion,

package/src/preact/shared/charts/colors.ts

@@ -18,7 +18,7 @@ export const singleGraphColorRGBAById = (id: number, alpha = 1) => {
     const keys = Object.keys(ColorsRGB) as GraphColor[];
     const key = keys[id % keys.length];
 
-    return `rgba(${ColorsRGB[key].join(',')},${alpha})`;
+    return singleGraphColorRGBByName(key, alpha);
 };
 
 export const singleGraphColorRGBByName = (name: GraphColor, alpha = 1) => {

package/src/query/queryAggregateData.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 
-import { queryAggregateData } from './queryAggregateData';
+import { compareAscending, queryAggregateData } from './queryAggregateData';
 import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../vitest.setup';
 
 describe('queryAggregateData', () => {
@@ -29,118 +29,25 @@ describe('queryAggregateData', () => {
             { proportion: 0.125, count: 4, region: 'region1', host: 'host2' },
         ]);
     });
+});
 
-    test('should sort by initialSort field ascending', async () => {
-        const fields = ['division', 'host'];
-        const filter = { country: 'USA' };
-        const initialSortField = 'host';
-        const initialSortDirection = 'ascending';
-
-        lapisRequestMocks.aggregated(
-            { fields, ...filter },
-            {
-                data: [
-                    { count: 4, region: 'region1', host: 'A_host' },
-                    { count: 4, region: 'region1', host: 'B_host' },
-                    { count: 8, region: 'region2', host: 'A_host1' },
-                    { count: 16, region: 'region2', host: 'C_host' },
-                ],
-            },
-        );
-
-        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
-            field: initialSortField,
-            direction: initialSortDirection,
-        });
-
-        expect(result).to.deep.equal([
-            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
-            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
-            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
-            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
-        ]);
-    });
-
-    test('should sort by initialSort field descending', async () => {
-        const fields = ['division', 'host'];
-        const filter = { country: 'USA' };
-        const initialSortField = 'host';
-        const initialSortDirection = 'descending';
-
-        lapisRequestMocks.aggregated(
-            { fields, ...filter },
-            {
-                data: [
-                    { count: 4, region: 'region1', host: 'A_host' },
-                    { count: 4, region: 'region1', host: 'B_host' },
-                    { count: 8, region: 'region2', host: 'A_host1' },
-                    { count: 16, region: 'region2', host: 'C_host' },
-                ],
-            },
-        );
-
-        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
-            field: initialSortField,
-            direction: initialSortDirection,
-        });
-
-        expect(result).to.deep.equal([
-            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
-            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
-            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
-            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
-        ]);
+describe('compareAscending', () => {
+    test('should compare numbers', () => {
+        expect(compareAscending(1, 2)).to.equal(-1);
+        expect(compareAscending(2, 1)).to.equal(1);
+        expect(compareAscending(2, 2)).to.equal(0);
     });
 
-    test('should sort by initialSort number field', async () => {
-        const fields = ['division', 'host'];
-        const filter = { country: 'USA' };
-        const initialSortField = 'proportion';
-        const initialSortDirection = 'descending';
-
-        lapisRequestMocks.aggregated(
-            { fields, ...filter },
-            {
-                data: [
-                    { count: 4, region: 'region1', host: 'A_host' },
-                    { count: 4, region: 'region1', host: 'B_host' },
-                    { count: 8, region: 'region2', host: 'A_host1' },
-                    { count: 16, region: 'region2', host: 'C_host' },
-                ],
-            },
-        );
-
-        const result = await queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
-            field: initialSortField,
-            direction: initialSortDirection,
-        });
-
-        expect(result).to.deep.equal([
-            { proportion: 0.125, count: 4, region: 'region1', host: 'A_host' },
-            { proportion: 0.125, count: 4, region: 'region1', host: 'B_host' },
-            { proportion: 0.25, count: 8, region: 'region2', host: 'A_host1' },
-            { proportion: 0.5, count: 16, region: 'region2', host: 'C_host' },
-        ]);
+    test('should compare strings', () => {
+        expect(compareAscending('a', 'b')).to.equal(-1);
+        expect(compareAscending('b', 'a')).to.equal(1);
+        expect(compareAscending('a', 'a')).to.equal(0);
     });
 
-    test('should throw if initialSortField is not in fields', async () => {
-        const fields = ['division', 'host'];
-        const filter = { country: 'USA' };
-        const initialSortField = 'not_in_fields';
-        const initialSortDirection = 'descending';
-
-        lapisRequestMocks.aggregated(
-            { fields, ...filter },
-            {
-                data: [{ count: 4, region: 'region1', host: 'A_host' }],
-            },
-        );
-
-        await expect(
-            queryAggregateData(filter, fields, DUMMY_LAPIS_URL, {
-                field: initialSortField,
-                direction: initialSortDirection,
-            }),
-        ).rejects.toThrowError('InitialSort field not in fields. Valid fields are: count, proportion, division, host');
+    test('should compare boolean', () => {
+        expect(compareAscending(true, false)).to.equal(1);
+        expect(compareAscending(false, true)).to.equal(-1);
+        expect(compareAscending(true, true)).to.equal(0);
+        expect(compareAscending(false, false)).to.equal(0);
     });
 });

package/src/query/queryAggregateData.ts

@@ -9,7 +9,7 @@ export type AggregateData = (Record<string, string | null | number | boolean> &
     proportion: number;
 })[];
 
-export const compareAscending = (a: string | null | number, b: string | null | number) => {
+export const compareAscending = (a: string | null | number | boolean, b: string | null | number | boolean) => {
     if (typeof a === 'number' && typeof b === 'number') {
         return a - b;
     }
@@ -24,20 +24,10 @@ export async function queryAggregateData(
     lapisFilter: LapisFilter,
     fields: string[],
     lapis: string,
-    initialSort: InitialSort = { field: 'count', direction: 'descending' },
     signal?: AbortSignal,
 ) {
-    const validSortFields = ['count', 'proportion', ...fields];
-    if (!validSortFields.includes(initialSort.field)) {
-        throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
-    }
-
     const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(lapisFilter, fields);
-    const sortData = new SortOperator(fetchData, (a, b) => {
-        return initialSort.direction === 'ascending'
-            ? compareAscending(a[initialSort.field], b[initialSort.field])
-            : compareAscending(b[initialSort.field], a[initialSort.field]);
-    });
+    const sortData = new SortOperator(fetchData, (a, b) => compareAscending(b.count, a.count));
     const data = (await sortData.evaluate(lapis, signal)).content;
 
     const total = data.reduce((acc, row) => acc + row.count, 0);

package/src/query/queryGeneralStatistics.ts

@@ -7,8 +7,8 @@ export async function queryGeneralStatistics(
     lapis: string,
     signal?: AbortSignal,
 ) {
-    const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, undefined, signal);
-    const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, undefined, signal);
+    const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, signal);
+    const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, signal);
 
     if (numeratorCount.length === 0 || denominatorCount.length === 0) {
         throw new Error('No data found for the given filters');

package/src/query/queryMutationsOverTime.spec.ts

@@ -100,7 +100,11 @@ describe('queryMutationsOverTime', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
+            [
+                { proportion: 0.4, count: 4, totalCount: 11 },
+                { proportion: 0, count: 0, totalCount: 12 },
+                { proportion: 0, count: 0, totalCount: 13 },
+            ],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -177,7 +181,7 @@ describe('queryMutationsOverTime', () => {
                     dateFieldTo: '2023-01-02',
                     fields: [],
                 },
-                response: { data: [{ count: 12 }] },
+                response: { data: [{ count: 0 }] },
             },
             {
                 body: {
@@ -247,7 +251,7 @@ describe('queryMutationsOverTime', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, { proportion: 0, count: 0, totalCount: 13 }],
             [{ proportion: 0.1, count: 1, totalCount: 11 }, null, { proportion: 0.3, count: 3, totalCount: 13 }],
         ]);
 
@@ -688,7 +692,10 @@ describe('queryMutationsOverTime', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [{ proportion: 0.4, count: 4, totalCount: 11 }, null],
+            [
+                { proportion: 0.4, count: 4, totalCount: 11 },
+                { proportion: 0, count: 0, totalCount: 12 },
+            ],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -734,6 +741,139 @@ describe('queryMutationsOverTime', () => {
         expect(dates.length).toBe(0);
     });
 
+    it('should fill with 0 if the mutation does not exist in a date range but count > 0', async () => {
+        const lapisFilter = { field1: 'value1', field2: 'value2' };
+        const dateField = 'dateField';
+
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [
+                        { count: 1, [dateField]: '2023-01-01' },
+                        { count: 1, [dateField]: '2023-01-02' },
+                    ],
+                },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-02',
+                    dateFieldTo: '2023-01-02',
+                    fields: [],
+                },
+                response: { data: [{ count: 11 }] },
+            },
+        ]);
+
+        lapisRequestMocks.multipleMutations(
+            [
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-01-01',
+                        minProportion: 0.001,
+                    },
+                    response: { data: [getSomeTestMutation(0.1, 1)] },
+                },
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-02',
+                        dateFieldTo: '2023-01-02',
+                        minProportion: 0.001,
+                    },
+                    response: { data: [] },
+                },
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-01-02',
+                        minProportion: 0.001,
+                    },
+                    response: {
+                        data: [getSomeTestMutation(0.21, 6)],
+                    },
+                },
+            ],
+            'nucleotide',
+        );
+
+        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+            lapisFilter,
+            sequenceType: 'nucleotide',
+            lapis: DUMMY_LAPIS_URL,
+            lapisDateField: dateField,
+            granularity: 'day',
+        });
+
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [
+                { proportion: 0.1, count: 1, totalCount: 11 },
+                { proportion: 0, count: 0, totalCount: 11 },
+            ],
+        ]);
+    });
+
+    it('should return null if count in a date range is 0', async () => {
+        const lapisFilter = { field1: 'value1', field2: 'value2' };
+        const dateField = 'dateField';
+
+        lapisRequestMocks.multipleAggregated([
+            {
+                body: { ...lapisFilter, fields: [dateField] },
+                response: {
+                    data: [{ count: 0, [dateField]: '2023-01-01' }],
+                },
+            },
+            {
+                body: {
+                    ...lapisFilter,
+                    dateFieldFrom: '2023-01-01',
+                    dateFieldTo: '2023-01-01',
+                    fields: [],
+                },
+                response: { data: [{ count: 0 }] },
+            },
+        ]);
+
+        lapisRequestMocks.multipleMutations(
+            [
+                {
+                    body: {
+                        ...lapisFilter,
+                        dateFieldFrom: '2023-01-01',
+                        dateFieldTo: '2023-01-01',
+                        minProportion: 0.001,
+                    },
+                    response: { data: [getSomeTestMutation(0.1, 1)] },
+                },
+            ],
+            'nucleotide',
+        );
+
+        const { mutationOverTimeData } = await queryMutationsOverTimeData({
+            lapisFilter,
+            sequenceType: 'nucleotide',
+            lapis: DUMMY_LAPIS_URL,
+            lapisDateField: dateField,
+            granularity: 'day',
+        });
+
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([[null]]);
+    });
+
     function getSomeTestMutation(proportion: number, count: number) {
         return {
             mutation: 'sequenceName:A123T',

package/src/query/queryMutationsOverTime.ts

@@ -122,6 +122,7 @@ export async function queryMutationsOverTimeData({
 
         const data = await fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal);
         const totalCountQuery = await getTotalNumberOfSequencesInDateRange(filter).evaluate(lapis, signal);
+
         return {
             date,
             mutations: data.content,
@@ -244,9 +245,14 @@ export function groupByMutation(
     });
 
     data.forEach((mutationData) => {
+        if (mutationData.totalCount == 0) {
+            return;
+        }
+
+        const date = toTemporal(mutationData.date);
+
         mutationData.mutations.forEach((mutationEntry) => {
             const mutation = toSubstitutionOrDeletion(mutationEntry.mutation);
-            const date = toTemporal(mutationData.date);
 
             if (dataArray.get(mutation, date) !== undefined) {
                 dataArray.set(mutation, date, {
@@ -256,6 +262,16 @@ export function groupByMutation(
                 });
             }
         });
+
+        for (const firstAxisKey of dataArray.getFirstAxisKeys()) {
+            if (dataArray.get(firstAxisKey, date) === null) {
+                dataArray.set(firstAxisKey, date, {
+                    count: 0,
+                    proportion: 0,
+                    totalCount: mutationData.totalCount,
+                });
+            }
+        }
     });
 
     return dataArray;

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -4,6 +4,8 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/aggregatedData/__mockData__/aggregated.json';
+import aggregatedDataWith1Field from '../../preact/aggregatedData/__mockData__/aggregatedWith1Field.json';
+import aggregatedDataWith2Fields from '../../preact/aggregatedData/__mockData__/aggregatedWith2Fields.json';
 import type { AggregateProps } from '../../preact/aggregatedData/aggregate';
 
 import './gs-aggregate';
@@ -19,6 +21,7 @@ const codeExample = `
     initialSortField="count"
     initialSortDirection="descending"
     pageSize="10"
+    maxNumberOfBars="50"
 ></gs-aggregate>`;
 
 const meta: Meta<Required<AggregateProps>> = {
@@ -27,7 +30,7 @@ const meta: Meta<Required<AggregateProps>> = {
     argTypes: {
         fields: [{ control: 'object' }],
         views: {
-            options: ['table'],
+            options: ['table', 'bar'],
             control: { type: 'check' },
         },
         width: { control: 'text' },
@@ -40,24 +43,6 @@ const meta: Meta<Required<AggregateProps>> = {
         },
     },
     parameters: withComponentDocs({
-        fetchMock: {
-            mocks: [
-                {
-                    matcher: {
-                        name: 'aggregatedData',
-                        url: AGGREGATED_ENDPOINT,
-                        body: {
-                            fields: ['division', 'host'],
-                            country: 'USA',
-                        },
-                    },
-                    response: {
-                        status: 200,
-                        body: aggregatedData,
-                    },
-                },
-            ],
-        },
         componentDocs: {
             opensShadowDom: true,
             expectsChildren: false,
@@ -81,12 +66,33 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .initialSortField=${args.initialSortField}
                 .initialSortDirection=${args.initialSortDirection}
                 .pageSize=${args.pageSize}
+                .maxNumberOfBars=${args.maxNumberOfBars}
             ></gs-aggregate>
         </gs-app>
     `,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division', 'host'],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
     args: {
         fields: ['division', 'host'],
-        views: ['table'],
+        views: ['table', 'bar'],
         lapisFilter: {
             country: 'USA',
         },
@@ -95,5 +101,69 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,
+        maxNumberOfBars: 10,
+    },
+};
+
+export const BarChartWithOneField: StoryObj<Required<AggregateProps>> = {
+    ...Table,
+    args: {
+        ...Table.args,
+        fields: ['division'],
+        views: ['bar', 'table'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division'],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedDataWith1Field,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const BarChartWithTwoFields: StoryObj<Required<AggregateProps>> = {
+    ...Table,
+    args: {
+        ...Table.args,
+        fields: ['division', 'nextstrainClade'],
+        lapisFilter: {
+            country: 'Germany',
+            dateTo: '2022-02-01',
+        },
+        views: ['bar', 'table'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division', 'nextstrainClade'],
+                            country: 'Germany',
+                            dateTo: '2022-02-01',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedDataWith2Fields,
+                    },
+                },
+            ],
+        },
     },
 };

package/src/web-components/visualization/gs-aggregate.tsx

@@ -20,6 +20,16 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * along with the aggregated value and its proportion.
  * The proportion represents the ratio of the aggregated value to the total count of the data
  * (considering the applied filter).
+ *
+ * ### Bar Chart View
+ *
+ * In the bar chart view, the data is presented in vertical bars.
+ * The bar chart is supported when `fields` contains one or two entries.
+ * The first field will be used as the y-axis.
+ * If a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.
+ *
+ * The chart shows the bars with the highest aggregated `count`.
+ * The number of bars can be adjusted with the `maxNumberOfBars` property.
  */
 @customElement('gs-aggregate')
 export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
@@ -87,6 +97,12 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * The maximum number of bars to display in the bar chart view.
+     */
+    @property({ type: Object })
+    maxNumberOfBars: number = 20;
+
     override render() {
         return (
             <Aggregate
@@ -98,6 +114,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
                 pageSize={this.pageSize}
+                maxNumberOfBars={this.maxNumberOfBars}
             />
         );
     }
@@ -131,4 +148,7 @@ type InitialSortDirectionMatches = Expect<
     Equals<typeof AggregateComponent.prototype.initialSortDirection, AggregateProps['initialSortDirection']>
 >;
 type PageSizeMatches = Expect<Equals<typeof AggregateComponent.prototype.pageSize, AggregateProps['pageSize']>>;
+type MaxNumberOfBarsMatches = Expect<
+    Equals<typeof AggregateComponent.prototype.maxNumberOfBars, AggregateProps['maxNumberOfBars']>
+>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */