@genspectrum/dashboard-components 1.10.3 → 1.11.0

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>