@genspectrum/dashboard-components 0.17.0 → 0.17.1

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

@@ -0,0 +1,39 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { type MutationsOverTimeComponent } from './gs-mutations-over-time';
+import { type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
+
+describe('gs-mutations-over-time', () => {
+    it('types of preact and lit component should match', () => {
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.lapisFilter>().toEqualTypeOf<
+            MutationsOverTimeProps['lapisFilter']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.sequenceType>().toEqualTypeOf<
+            MutationsOverTimeProps['sequenceType']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.views>().toEqualTypeOf<
+            MutationsOverTimeProps['views']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.width>().toEqualTypeOf<
+            MutationsOverTimeProps['width']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.height>().toEqualTypeOf<
+            MutationsOverTimeProps['height']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.granularity>().toEqualTypeOf<
+            MutationsOverTimeProps['granularity']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.lapisDateField>().toEqualTypeOf<
+            MutationsOverTimeProps['lapisDateField']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.displayMutations>().toEqualTypeOf<
+            MutationsOverTimeProps['displayMutations']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.initialMeanProportionInterval>().toEqualTypeOf<
+            MutationsOverTimeProps['initialMeanProportionInterval']
+        >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.pageSizes>().toEqualTypeOf<
+            MutationsOverTimeProps['pageSizes']
+        >();
+    });
+});

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

@@ -17,6 +17,7 @@ const codeExample = String.raw`
     granularity="month"
     lapisDateField="date"
     displayMutations='["A23403G","C241T"]'
+    pageSizes='[5,10]'
 ></gs-mutations-over-time>`;
 
 const meta: Meta<Required<MutationsOverTimeProps>> = {
@@ -41,6 +42,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         lapisDateField: { control: 'text' },
         displayMutations: { control: 'object' },
         initialMeanProportionInterval: { control: 'object' },
+        pageSizes: { control: 'object' },
     },
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
@@ -50,6 +52,7 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         granularity: 'month',
         lapisDateField: 'date',
         initialMeanProportionInterval: { min: 0.05, max: 0.9 },
+        pageSizes: [10, 20, 30, 40, 50],
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -95,6 +98,7 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .lapisDateField=${args.lapisDateField}
                 .displayMutations=${args.displayMutations}
                 .initialMeanProportionInterval=${args.initialMeanProportionInterval}
+                .pageSizes=${args.pageSizes}
             ></gs-mutations-over-time>
         </gs-app>
     `,

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

@@ -3,8 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
-import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
-import type { Equals, Expect } from '../../utils/typeAssertions';
+import { MutationsOverTime } from '../../preact/mutationsOverTime/mutations-over-time';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
@@ -111,6 +110,12 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: Object })
     initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
 
+    /**
+     * The number of rows per page, which can be selected by the user.
+     */
+    @property({ type: Array })
+    pageSizes: number[] | number = [10, 20, 30, 40, 50];
+
     /**
      * @internal
      */
@@ -130,6 +135,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                     lapisDateField={this.lapisDateField}
                     displayMutations={this.displayMutations}
                     initialMeanProportionInterval={this.initialMeanProportionInterval}
+                    pageSizes={this.pageSizes}
                 />
             </MutationAnnotationsContextProvider>
         );
@@ -150,32 +156,3 @@ declare global {
         }
     }
 }
-
-/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type LapisFilterMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.lapisFilter, MutationsOverTimeProps['lapisFilter']>
->;
-type SequenceTypeMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.sequenceType, MutationsOverTimeProps['sequenceType']>
->;
-type ViewsMatches = Expect<Equals<typeof MutationsOverTimeComponent.prototype.views, MutationsOverTimeProps['views']>>;
-type WidthMatches = Expect<Equals<typeof MutationsOverTimeComponent.prototype.width, MutationsOverTimeProps['width']>>;
-type HeightMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.height, MutationsOverTimeProps['height']>
->;
-type GranularityMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.granularity, MutationsOverTimeProps['granularity']>
->;
-type LapisDateFieldMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.lapisDateField, MutationsOverTimeProps['lapisDateField']>
->;
-type DisplayMutationsMatches = Expect<
-    Equals<typeof MutationsOverTimeComponent.prototype.displayMutations, MutationsOverTimeProps['displayMutations']>
->;
-type InitialMeanProportionIntervalMatches = Expect<
-    Equals<
-        typeof MutationsOverTimeComponent.prototype.initialMeanProportionInterval,
-        MutationsOverTimeProps['initialMeanProportionInterval']
-    >
->;
-/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

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

@@ -0,0 +1,24 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { type WastewaterMutationsOverTimeComponent } from './gs-wastewater-mutations-over-time';
+import { type WastewaterMutationsOverTimeProps } from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
+
+describe('gs-wastewater-mutations-over-time', () => {
+    it('types of preact and lit component should match', () => {
+        expectTypeOf<typeof WastewaterMutationsOverTimeComponent.prototype.lapisFilter>().toEqualTypeOf<
+            WastewaterMutationsOverTimeProps['lapisFilter']
+        >();
+        expectTypeOf<typeof WastewaterMutationsOverTimeComponent.prototype.sequenceType>().toEqualTypeOf<
+            WastewaterMutationsOverTimeProps['sequenceType']
+        >();
+        expectTypeOf<typeof WastewaterMutationsOverTimeComponent.prototype.width>().toEqualTypeOf<
+            WastewaterMutationsOverTimeProps['width']
+        >();
+        expectTypeOf<typeof WastewaterMutationsOverTimeComponent.prototype.height>().toEqualTypeOf<
+            WastewaterMutationsOverTimeProps['height']
+        >();
+        expectTypeOf<typeof WastewaterMutationsOverTimeComponent.prototype.pageSizes>().toEqualTypeOf<
+            WastewaterMutationsOverTimeProps['pageSizes']
+        >();
+    });
+});

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

@@ -14,7 +14,7 @@ const codeExample = String.raw`
     sequenceType='nucleotide'
     width='100%'
     height='700px'
-    maxNumberOfGridRows='100'
+    pageSizes='[5,10]'
 >
     <span slot="infoText">Some info text</span>
 </gs-wastewater-mutations-over-time>`;
@@ -37,7 +37,7 @@ const meta: Meta<WastewaterMutationsOverTimeProps & { infoText: string }> = {
         width: '100%',
         height: undefined,
         infoText: 'Some info text',
-        maxNumberOfGridRows: 100,
+        pageSizes: [10, 20, 30, 40, 50],
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -70,7 +70,7 @@ export const WastewaterMutationsOverTime: StoryObj<WastewaterMutationsOverTimePr
                 .sequenceType=${args.sequenceType}
                 .width=${args.width}
                 .height=${args.height}
-                .maxNumberOfGridRows=${args.maxNumberOfGridRows}
+                .pageSizes=${args.pageSizes}
             >
                 <span slot="infoText">${args.infoText}</span>
             </gs-wastewater-mutations-over-time>

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

@@ -3,11 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
-import {
-    WastewaterMutationsOverTime,
-    type WastewaterMutationsOverTimeProps,
-} from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
-import { type Equals, type Expect } from '../../utils/typeAssertions';
+import { WastewaterMutationsOverTime } from '../../preact/wastewater/mutationsOverTime/wastewater-mutations-over-time';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 import { type MutationAnnotations, mutationAnnotationsContext } from '../mutation-annotations-context';
 
@@ -69,10 +65,10 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     height: string | undefined = undefined;
 
     /**
-     * The maximum number of grid rows to display.
+     * The number of rows per page, which can be selected by the user.
      */
-    @property({ type: Number })
-    maxNumberOfGridRows: number = 100;
+    @property({ type: Array })
+    pageSizes: number[] | number = [10, 20, 30, 40, 50];
 
     /**
      * @internal
@@ -88,7 +84,7 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
                     sequenceType={this.sequenceType}
                     width={this.width}
                     height={this.height}
-                    maxNumberOfGridRows={this.maxNumberOfGridRows}
+                    pageSizes={this.pageSizes}
                 />
             </MutationAnnotationsContextProvider>
         );
@@ -109,30 +105,3 @@ declare global {
         }
     }
 }
-
-/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type LapisFilterMatches = Expect<
-    Equals<
-        typeof WastewaterMutationsOverTimeComponent.prototype.lapisFilter,
-        WastewaterMutationsOverTimeProps['lapisFilter']
-    >
->;
-type SequenceTypeMatches = Expect<
-    Equals<
-        typeof WastewaterMutationsOverTimeComponent.prototype.sequenceType,
-        WastewaterMutationsOverTimeProps['sequenceType']
-    >
->;
-type WidthMatches = Expect<
-    Equals<typeof WastewaterMutationsOverTimeComponent.prototype.width, WastewaterMutationsOverTimeProps['width']>
->;
-type HeightMatches = Expect<
-    Equals<typeof WastewaterMutationsOverTimeComponent.prototype.height, WastewaterMutationsOverTimeProps['height']>
->;
-type MaxNumberOfGridRowsMatches = Expect<
-    Equals<
-        typeof WastewaterMutationsOverTimeComponent.prototype.maxNumberOfGridRows,
-        WastewaterMutationsOverTimeProps['maxNumberOfGridRows']
-    >
->;
-/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */