@genspectrum/dashboard-components 0.18.5 → 0.19.0

package/src/preact/shared/tanstackTable/pagination-context.tsx

@@ -0,0 +1,30 @@
+import { createContext, type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+
+import type { PageSizes } from './pagination';
+
+type PageSizeContext = {
+    pageSize: number;
+    setPageSize: Dispatch<StateUpdater<number>>;
+};
+
+const pageSizeContext = createContext<PageSizeContext>({
+    pageSize: -1,
+    setPageSize: () => {
+        throw new Error('pageSizeContext not initialized');
+    },
+});
+
+export function usePageSizeContext() {
+    return useContext(pageSizeContext);
+}
+
+export type PageSizeContextProviderProps = {
+    pageSizes: PageSizes;
+};
+
+export const PageSizeContextProvider: FunctionComponent<PageSizeContextProviderProps> = ({ children, pageSizes }) => {
+    const [pageSize, setPageSize] = useState(typeof pageSizes === 'number' ? pageSizes : (pageSizes.at(0) ?? 10));
+
+    return <pageSizeContext.Provider value={{ pageSize, setPageSize }}>{children}</pageSizeContext.Provider>;
+};

package/src/preact/shared/tanstackTable/pagination.tsx

@@ -1,8 +1,12 @@
 import type { Table } from '@tanstack/table-core';
-import z from 'zod'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import z from 'zod';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type PaginationProps = { table: Table<any> };
+import { usePageSizeContext } from './pagination-context';
+
+type PaginationProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    table: Table<any>;
+};
 export const pageSizesSchema = z.union([z.array(z.number()), z.number()]);
 export type PageSizes = z.infer<typeof pageSizesSchema>;
 
@@ -50,6 +54,8 @@ function PageSizeSelector({
 }: PaginationProps & {
     pageSizes: PageSizes;
 }) {
+    const { pageSize, setPageSize } = usePageSizeContext();
+
     if (typeof pageSizes === 'number' || pageSizes.length <= 1) {
         return null;
     }
@@ -59,9 +65,16 @@ function PageSizeSelector({
             <div className={'text-nowrap text-sm'}>Rows per page:</div>
             <select
                 className={`select select-ghost select-sm ${heightForSmallerLines}`}
-                value={table.getState().pagination.pageSize}
+                value={pageSize}
                 onChange={(e) => {
-                    table.setPageSize(Number(e.currentTarget?.value));
+                    const pageSize = Number(e.currentTarget?.value);
+                    if (Number.isNaN(pageSize)) {
+                        throw new Error(
+                            `Invalid page size selected: The value ${e.currentTarget?.value} could not be parsed as a number.`,
+                        );
+                    }
+                    setPageSize(pageSize);
+                    table.setPageSize(pageSize);
                 }}
                 aria-label='Select number of rows per page'
             >
@@ -90,7 +103,7 @@ function GotoPageSelector({ table }: PaginationProps) {
                 defaultValue={table.getState().pagination.pageIndex + 1}
                 onChange={(e) => {
                     const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 : 0;
-                    table.setPageIndex(page);
+                    table.setPageIndex(Math.min(page, table.getPageCount() - 1));
                 }}
                 className={`input input-ghost input-sm ${heightForSmallerLines}`}
                 aria-label='Enter page number to go to'

package/src/preact/shared/tanstackTable/tanstackTable.tsx

@@ -1,17 +1,23 @@
 import { createTable, type RowData, type TableOptions, type TableOptionsResolved } from '@tanstack/table-core';
 import { type ComponentType, h, type VNode } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 
-export * from '@tanstack/table-core';
+import { usePageSizeContext } from './pagination-context';
 
-// Adapted from https://github.com/TanStack/table/blob/55ea94863b6b6e6d17bd51ecda61c6a6a1262c88/packages/preact-table/src/FlexRender.tsx
+export * from '@tanstack/table-core';
 
 export type Renderable<TProps> = VNode<TProps> | ComponentType<TProps> | undefined | null | string | number | boolean;
 
+/*
+ * Adapted from https://github.com/TanStack/table/blob/55ea94863b6b6e6d17bd51ecda61c6a6a1262c88/packages/preact-table/src/FlexRender.tsx
+ */
 export function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps) {
     return !Comp ? null : typeof Comp === 'function' ? <Comp {...props} /> : Comp;
 }
 
+/*
+ * Taken from https://github.com/TanStack/table/blob/f7bf6f1adfa4f8b28b9968b29745f2452d4be9d8/packages/react-table/src/index.tsx
+ */
 export function usePreactTable<TData extends RowData>(options: TableOptions<TData>) {
     const resolvedOptions: TableOptionsResolved<TData> = {
         state: {},
@@ -39,5 +45,13 @@ export function usePreactTable<TData extends RowData>(options: TableOptions<TDat
         },
     }));
 
+    const { pageSize } = usePageSizeContext();
+    useEffect(
+        () => {
+            tableRef.current.setPageSize(pageSize);
+        },
+        [pageSize], // eslint-disable-line react-hooks/exhaustive-deps -- only run this when the pageSize changes
+    );
+
     return tableRef.current;
 }

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

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect } from '@storybook/test';
+import { expect, userEvent } from '@storybook/test';
 
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
@@ -67,6 +67,24 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
     },
 };
 
+export const ChangingRowsPerPageChangesItForEveryTag: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    play: async ({ canvas, step }) => {
+        await step('Wait for component to render', async () => {
+            await canvas.findByText('Lugano');
+        });
+
+        const getRowsPerPageSelectors = async () => await canvas.findAllByLabelText('Rows per page', { exact: false });
+
+        await step('change rows per page', async () => {
+            await expect((await getRowsPerPageSelectors())[0]).toHaveValue('10');
+            await expect((await getRowsPerPageSelectors())[1]).toHaveValue('10');
+            await userEvent.selectOptions((await getRowsPerPageSelectors())[0], '20');
+            await expect((await getRowsPerPageSelectors())[1]).toHaveValue('20');
+        });
+    },
+};
+
 export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
     ...Default,
     args: {

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

@@ -19,6 +19,7 @@ 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 { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';
 import { useQuery } from '../../useQuery';
 
 const wastewaterMutationOverTimeSchema = z.object({
@@ -161,7 +162,11 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return (
+        <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+            <Tabs tabs={tabs} toolbar={toolbar} />
+        </PageSizeContextProvider>
+    );
 };
 
 type ToolbarProps = {

package/src/styles/replaceCssProperties.stories.tsx

@@ -0,0 +1,49 @@
+import { css } from '@lit/reactive-element';
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+
+import { replaceCssProperties } from './replaceCssProperties';
+
+const DummyComponent: FunctionComponent = () => 'This just runs a function in the browser';
+
+const meta: Meta = {
+    title: 'Test/replaceCssProperties',
+    component: DummyComponent,
+};
+
+export default meta;
+
+/**
+ * This test somehow doesn't work with vitest on node, because the @properties are not parsed by `css()`.
+ */
+export const InvalidProps: StoryObj = {
+    play: async () => {
+        const styleSheet = css`
+            .some-other-rule {
+                color: red;
+            }
+
+            @property --test-with-initial-value {
+                syntax: '*';
+                inherits: false;
+                initial-value: solid;
+            }
+
+            @property --test-without-initial-value {
+                syntax: '*';
+                inherits: false;
+            }
+        `.styleSheet!;
+
+        replaceCssProperties(styleSheet);
+
+        const resultingCss = [...styleSheet.cssRules]
+            .map((rule) => rule.cssText)
+            .join('\n')
+            .replaceAll(' ', '');
+
+        await expect(resultingCss).toContain(':host{--test-with-initial-value:solid;}');
+        await expect(resultingCss).toContain('.some-other-rule{color:red;}');
+    },
+};

package/src/styles/replaceCssProperties.ts

@@ -0,0 +1,25 @@
+/**
+ * Replaces `@property` rules in a CSSStyleSheet with a `:host` rule.
+ *
+ * Tailwind uses `@property` rules, but they don't work in the shadow DOM.
+ * https://github.com/tailwindlabs/tailwindcss/issues/15005
+ *
+ * Inspired by https://github.com/tailwindlabs/tailwindcss/issues/15005#issuecomment-2737489813
+ */
+export function replaceCssProperties(styleSheet: CSSStyleSheet) {
+    const properties: string[] = [];
+
+    [...styleSheet.cssRules]
+        .map((rule, index) => [rule, index] as const)
+        .reverse()
+        .forEach(([rule, index]) => {
+            if (rule instanceof CSSPropertyRule && rule.initialValue !== null) {
+                styleSheet.deleteRule(index);
+                properties.push(`${rule.name}: ${rule.initialValue}`);
+            }
+        });
+
+    if (properties.length > 0) {
+        styleSheet.insertRule(`:host { ${properties.join('; ')} }`);
+    }
+}

package/src/styles/tailwind.css

@@ -2,6 +2,7 @@
 
 @plugin "daisyui" {
   themes: light --default;
+  root: ':host';
 }
 @plugin "@iconify/tailwind4" {
   prefixes: mdi, mdi-light;

package/src/web-components/PreactLitAdapter.tsx

@@ -10,14 +10,17 @@ import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { LapisUrlContextProvider } from '../preact/LapisUrlContext';
 import { INITIAL_REFERENCE_GENOMES, ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
 import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
+import { replaceCssProperties } from '../styles/replaceCssProperties';
 import tailwindStyle from '../styles/tailwind.css?inline';
 
-import '../styles/tailwind.css';
-import '../preact/components/min-max-percent-slider.css';
-
 const tailwindElementCss = unsafeCSS(tailwindStyle);
 const minMaxPercentSliderElementCss = unsafeCSS(minMaxPercentSliderCss);
 
+const styleSheet = tailwindElementCss.styleSheet;
+if (styleSheet !== undefined) {
+    replaceCssProperties(styleSheet);
+}
+
 export abstract class PreactLitAdapter extends ReactiveElement {
     static override styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 

package/src/web-components/PreactLitAdapterWithGridJsStyles.tsx

@@ -3,8 +3,6 @@ import { unsafeCSS } from 'lit';
 
 import { PreactLitAdapter } from './PreactLitAdapter';
 
-import 'gridjs/dist/theme/mermaid.css';
-
 const gridJsElementCss = unsafeCSS(gridJsStyle);
 
 export abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter {

package/src/web-components/gs-app.stories.ts

@@ -82,7 +82,9 @@ export const WithNoLapisUrl: StoryObj<StoryProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+            await expect(
+                canvas.getByText("Error in gs-app: Invalid LAPIS URL: 'notAValidUrl'", { exact: false }),
+            ).toBeVisible();
         });
     },
 };
@@ -119,7 +121,9 @@ export const FailsToFetchReferenceGenome: StoryObj<StoryProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
+            await expect(
+                canvas.getByText('Error in gs-app: Cannot fetch reference genome.', { exact: false }),
+            ).toBeVisible();
         });
     },
 };

package/src/web-components/gs-app.ts

@@ -98,7 +98,10 @@ export class AppComponent extends LitElement {
 }
 
 function GsAppError(error: string) {
-    return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
+    // We're in the light dom, we must not use Tailwind so that we don't pollute the user's styles.
+    return html`<div style="padding: 0.5rem; border: solid red; background-color: lightcoral; border-radius: 0.5rem;">
+        Error in gs-app: ${error}
+    </div>`;
 }
 
 declare global {

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

@@ -1,3 +1,5 @@
+import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
+import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
@@ -6,6 +8,8 @@ import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/d
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
+const flatpickrCss = unsafeCSS(flatpickrStyle);
+
 /**
  * ## Context
  * This component is a group of input fields designed to specify date range filters
@@ -52,6 +56,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  */
 @customElement('gs-date-range-filter')
 export class DateRangeFilterComponent extends PreactLitAdapter {
+    static override styles = [...PreactLitAdapter.styles, flatpickrCss];
+
     /**
      * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `value`.

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

@@ -107,7 +107,7 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
         ...Template.args,
-        initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'],
+        initialValue: ['seg1:3T', 'gene2:4', 'ins_seg2:4:AAA'],
     },
     parameters: {
         fetchMock: {
@@ -163,9 +163,9 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
         });
 
         await waitFor(async () => {
-            await expect(canvas.getByText('seg1:123T')).toBeVisible();
-            await expect(canvas.getByText('gene2:56')).toBeVisible();
-            await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
+            await expect(canvas.getByText('seg1:3T')).toBeVisible();
+            await expect(canvas.getByText('gene2:4')).toBeVisible();
+            await expect(canvas.getByText('ins_seg2:4:AAA')).toBeVisible();
         });
     },
 };

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

@@ -16,7 +16,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-prevalence-over-time
-    numeratorFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    numeratorFilters='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
     denominatorFilter='{ "country": "USA"}'
     granularity="month"
     smoothingWindow="0"