@genspectrum/dashboard-components 0.17.0 → 0.18.0

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

@@ -16,6 +16,7 @@ import { ResizeContainer } from '../../components/resize-container';
 import Tabs from '../../components/tabs';
 import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
+import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { useQuery } from '../../useQuery';
 
 const wastewaterMutationOverTimeSchema = z.object({
@@ -23,7 +24,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     sequenceType: sequenceTypeSchema,
     width: z.string(),
     height: z.string().optional(),
-    maxNumberOfGridRows: z.number(),
+    pageSizes: pageSizesSchema,
 });
 
 export type WastewaterMutationsOverTimeProps = z.infer<typeof wastewaterMutationOverTimeSchema>;
@@ -76,7 +77,6 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
         <MutationsOverTimeTabs
             mutationOverTimeDataPerLocation={mutationOverTimeDataPerLocation}
             originalComponentProps={componentProps}
-            maxNumberOfGridRows={componentProps.maxNumberOfGridRows}
         />
     );
 };
@@ -89,13 +89,11 @@ type MutationOverTimeDataPerLocation = {
 type MutationOverTimeTabsProps = {
     mutationOverTimeDataPerLocation: MutationOverTimeDataPerLocation;
     originalComponentProps: WastewaterMutationsOverTimeProps;
-    maxNumberOfGridRows?: number;
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
-    maxNumberOfGridRows,
 }) => {
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
@@ -105,7 +103,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             <MutationsOverTimeGrid
                 data={data}
                 colorScale={colorScale}
-                maxNumberOfGridRows={maxNumberOfGridRows}
+                pageSizes={originalComponentProps.pageSizes}
                 sequenceType={originalComponentProps.sequenceType}
             />
         ),

package/src/styles/tailwind.css

@@ -1,3 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin "daisyui" {
+  themes: light --default;
+}
+@plugin "@iconify/tailwind4" {
+  prefixes: mdi, mdi-light;
+}
+
+@theme {
+  --container-2xs: 18rem;
+  --container-3xs: 16rem;
+  --container-4xs: 14rem;
+}

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

@@ -78,7 +78,7 @@ export default meta;
 export const Default: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
@@ -94,7 +94,7 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
 export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     earliestDate="${args.earliestDate}"

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

@@ -87,7 +87,7 @@ export default meta;
 const Template: StoryObj<Required<LineageFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-lineage-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}

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

@@ -67,7 +67,7 @@ export default meta;
 const Template: StoryObj<LocationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-location-filter
                     .fields=${args.fields}
                     .lapisFilter=${args.lapisFilter}

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

@@ -46,7 +46,7 @@ export default meta;
 const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
             </div>
         </gs-app>`;

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

@@ -86,7 +86,7 @@ export default meta;
 export const Default: StoryObj<Required<TextFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-text-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}

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 */