@genspectrum/dashboard-components 1.10.3 → 1.11.1

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

@@ -38,6 +38,7 @@ const meta: Meta<MutationsOverTimeProps> = {
         hideGaps: { control: 'boolean' },
         pageSizes: { control: 'object' },
         useNewEndpoint: { control: 'boolean' },
+        customColumns: { control: 'object' },
     },
     parameters: {
         fetchMock: {},
@@ -196,6 +197,32 @@ export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
     },
 };
 
+export const WithCustomColumns: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        customColumns: [
+            {
+                header: 'Jaccard Index',
+                values: {
+                    A19722G: 0.75,
+                    G21641T: 'Foobar',
+                },
+            },
+        ],
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('Jaccard Index')).toBeVisible(), {
+            timeout: 5000,
+        });
+
+        await waitFor(() => expect(canvas.getByText('0.75')).toBeVisible());
+
+        await waitFor(() => expect(canvas.getByText('Foobar')).toBeVisible());
+    },
+};
+
 async function expectMutationOnPage(canvas: Canvas, mutation: string) {
     await waitFor(async () => {
         const mutationOnFirstPage = canvas.getAllByText(mutation)[0];

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

@@ -11,8 +11,8 @@ import {
     type MutationFilter,
 } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
-import MutationsOverTimeGrid from './mutations-over-time-grid';
-import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
+import MutationsOverTimeGrid, { customColumnSchema } from './mutations-over-time-grid';
+import { getProportion, type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
     sequenceTypeSchema,
@@ -66,6 +66,7 @@ const mutationOverTimeSchema = z.object({
     width: z.string(),
     height: z.string().optional(),
     pageSizes: pageSizesSchema,
+    customColumns: z.array(customColumnSchema).optional(),
 });
 export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 
@@ -204,6 +205,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                             colorScale={colorScale}
                             sequenceType={originalComponentProps.sequenceType}
                             pageSizes={originalComponentProps.pageSizes}
+                            customColumns={originalComponentProps.customColumns}
                             tooltipPortalTarget={tooltipPortalTarget}
                         />
                     ),
@@ -354,7 +356,7 @@ function getDownloadData(filteredData: MutationOverTimeDataMap) {
         return dates.reduce(
             (accumulated, date) => {
                 const value = filteredData.get(mutation, date);
-                const proportion = value?.type === 'value' || value?.type === 'wastewaterValue' ? value.proportion : '';
+                const proportion = getProportion(value ?? null) ?? '';
                 return {
                     ...accumulated,
                     [date.dateString]: proportion,

package/src/query/queryMutationsOverTime.ts

@@ -49,6 +49,12 @@ export type MutationOverTimeMutationValue =
           count: number;
           totalCount: number;
       }
+    | {
+          type: 'valueWithCoverage';
+          count: number;
+          coverage: number;
+          totalCount: number;
+      }
     | {
           type: 'wastewaterValue';
           proportion: number;
@@ -59,6 +65,19 @@ export type MutationOverTimeMutationValue =
       }
     | null;
 
+export function getProportion(value: MutationOverTimeMutationValue) {
+    switch (value?.type) {
+        case 'value':
+        case 'wastewaterValue':
+            return value.proportion;
+        case 'valueWithCoverage':
+            return value.count / value.coverage;
+        case 'belowThreshold':
+            return undefined;
+    }
+    return undefined;
+}
+
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 export const MUTATIONS_OVER_TIME_MIN_PROPORTION = 0.001;
 
@@ -316,9 +335,9 @@ async function queryMutationsOverTimeDataDirectEndpoint(
                         return [
                             date.dateString,
                             {
-                                type: 'value',
-                                proportion: count / coverage,
+                                type: 'valueWithCoverage',
                                 count,
+                                coverage,
                                 totalCount,
                             },
                         ];

package/src/query/queryMutationsOverTimeNewEndpoint.spec.ts

@@ -120,14 +120,14 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         const expectedData = [
             [
-                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 12 },
-                { type: 'value', proportion: 0, count: 0, totalCount: 13 },
+                { type: 'valueWithCoverage', count: 4, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 0, coverage: 10, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 0, coverage: 10, totalCount: 13 },
             ],
             [
-                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 12 },
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
+                { type: 'valueWithCoverage', count: 1, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 13 },
             ],
         ];
         expect(mutationOverTimeData.getAsArray()).to.deep.equal(expectedData);
@@ -289,14 +289,14 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 4, coverage: 10, totalCount: 11 },
                 null,
-                { type: 'value', proportion: 0, count: 0, totalCount: 13 },
+                { type: 'valueWithCoverage', count: 0, coverage: 10, totalCount: 13 },
             ],
             [
-                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 1, coverage: 10, totalCount: 11 },
                 null,
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 13 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 13 },
             ],
         ]);
 
@@ -523,8 +523,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 12 },
             ],
         ]);
 
@@ -635,8 +635,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: 0.1, count: 1, totalCount: 11 },
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 1, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 12 },
             ],
         ]);
 
@@ -726,7 +726,7 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
         });
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
-            [{ type: 'value', proportion: 0.2, count: 2, totalCount: 11 }],
+            [{ type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 11 }],
         ]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
@@ -839,12 +839,12 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
 
         expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 12 },
             ],
             [
-                { type: 'value', proportion: 0.4, count: 4, totalCount: 11 },
-                { type: 'value', proportion: 0.5, count: 5, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 4, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 5, coverage: 10, totalCount: 12 },
             ],
         ]);
 
@@ -1017,8 +1017,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
                 { type: 'belowThreshold', totalCount: 12 },
             ],
             [
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 12 },
             ],
         ]);
 
@@ -1139,8 +1139,8 @@ describe('queryMutationsOverTimeNewEndpoint', () => {
                 { type: 'belowThreshold', totalCount: 12 },
             ],
             [
-                { type: 'value', proportion: 0.2, count: 2, totalCount: 11 },
-                { type: 'value', proportion: 0.3, count: 3, totalCount: 12 },
+                { type: 'valueWithCoverage', count: 2, coverage: 10, totalCount: 11 },
+                { type: 'valueWithCoverage', count: 3, coverage: 10, totalCount: 12 },
             ],
         ]);
 

package/src/utilEntrypoint.ts

@@ -51,3 +51,4 @@ export {
 } from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';
 
 export { type MeanProportionInterval } from './preact/mutationsOverTime/mutations-over-time';
+export { type CustomColumn } from './preact/mutationsOverTime/mutations-over-time-grid';

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

@@ -17,7 +17,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-lineage-filter 
     lapisField="pangoLineage"
-    lapisFilter='{"counrty": "Germany"}'
+    lapisFilter='{"country": "Germany"}'
     placeholderText="Enter lineage"
     value="B.1.1.7"
     width="50%">
@@ -163,6 +163,7 @@ export const LineageFilterStringValue: StoryObj<Required<LineageFilterProps>> =
                     lapisField="pangoLineage"
                     placeholderText="Enter a lineage"
                     value="B.1.1.7"
+                    .lapisFilter=${args.lapisFilter}
                     .multiSelect=${args.multiSelect}
                 ></gs-lineage-filter>
             </div>
@@ -170,6 +171,9 @@ export const LineageFilterStringValue: StoryObj<Required<LineageFilterProps>> =
     },
     args: {
         multiSelect: false,
+        lapisFilter: {
+            country: 'Germany',
+        },
     },
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
@@ -187,6 +191,7 @@ export const LineageFilterArrayValue: StoryObj<Required<LineageFilterProps>> = {
                     lapisField="pangoLineage"
                     placeholderText="Enter a lineage"
                     value='["B.1.1.7", "B.1.1.10"]'
+                    .lapisFilter=${args.lapisFilter}
                     .multiSelect=${args.multiSelect}
                 ></gs-lineage-filter>
             </div>
@@ -194,6 +199,9 @@ export const LineageFilterArrayValue: StoryObj<Required<LineageFilterProps>> = {
     },
     args: {
         multiSelect: true,
+        lapisFilter: {
+            country: 'Germany',
+        },
     },
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');

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

@@ -38,5 +38,8 @@ describe('gs-mutations-over-time', () => {
         expectTypeOf<typeof MutationsOverTimeComponent.prototype.pageSizes>().toEqualTypeOf<
             MutationsOverTimeProps['pageSizes']
         >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.customColumns>().toEqualTypeOf<
+            MutationsOverTimeProps['customColumns']
+        >();
     });
 });

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

@@ -45,6 +45,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         hideGaps: { control: 'boolean' },
         useNewEndpoint: { control: 'boolean' },
         pageSizes: { control: 'object' },
+        customColumns: { control: 'object' },
     },
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
@@ -116,6 +117,7 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .hideGaps=${args.hideGaps}
                 .pageSizes=${args.pageSizes}
                 .useNewEndpoint=${args.useNewEndpoint}
+                .customColumns=${args.customColumns}
             ></gs-mutations-over-time>
         </gs-app>
     `,
@@ -183,3 +185,22 @@ export const WithFixedHeight: StoryObj<Required<MutationsOverTimeProps>> = {
         height: '700px',
     },
 };
+
+// This test uses mock data: withDisplayMutations.ts (through mutationOverTimeWorker.mock.ts)
+export const WithCustomColumns: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+        customColumns: [
+            {
+                header: 'Jaccard Index',
+                values: {
+                    A19722G: 0.75,
+                    G21641T: 0.92,
+                    'T21653-': 0.58,
+                },
+            },
+        ],
+    },
+};

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

@@ -136,6 +136,13 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: Array })
     pageSizes: number[] | number = [10, 20, 30, 40, 50];
 
+    /**
+     * Custom columns to add to the grid.
+     * Each column has a header and a map of mutation codes to values.
+     */
+    @property({ type: Array })
+    customColumns?: { header: string; values: Record<string, string | number> }[] = undefined;
+
     /**
      * @internal
      */
@@ -165,6 +172,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                         hideGaps={this.hideGaps}
                         useNewEndpoint={this.useNewEndpoint}
                         pageSizes={this.pageSizes}
+                        customColumns={this.customColumns}
                     />
                 </MutationLinkTemplateContextProvider>
             </MutationAnnotationsContextProvider>