@genspectrum/dashboard-components 0.4.3 → 0.4.5

package/dist/genspectrum-components.d.ts

@@ -57,6 +57,20 @@ export declare class AggregateComponent extends PreactLitAdapterWithGridJsStyles
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * The field by which the table is initially sorted.
+     * Must be one of the fields specified in the fields property, 'count', or 'proportion'.
+     */
+    initialSortField: string;
+    /**
+     * The initial sort direction of the table.
+     */
+    initialSortDirection: 'ascending' | 'descending';
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -219,6 +233,10 @@ export declare class LocationFilterComponent extends PreactLitAdapter {
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     width: string;
+    /**
+     * The placeholder text to display in the input field, if it is empty.
+     */
+    placeholderText: string;
     render(): JSX_2.Element;
 }
 
@@ -287,6 +305,11 @@ export declare class MutationComparisonComponent extends PreactLitAdapterWithGri
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -424,6 +447,11 @@ export declare class MutationsComponent extends PreactLitAdapterWithGridJsStyles
      * The headline of the component. Set to an empty string to hide the headline.
      */
     headline: string;
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 
@@ -546,6 +574,11 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Must be a field of type `date` in LAPIS.
      */
     lapisDateField: string;
+    /**
+     * The maximum number of rows to display in the table view.
+     * Set to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).
+     */
+    pageSize: boolean | number;
     render(): JSX_2.Element;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.4.3",
+    "version": "0.4.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/aggregatedData/aggregate-table.tsx

@@ -7,9 +7,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 type AggregateTableProps = {
     fields: string[];
     data: AggregateData;
+    pageSize: boolean | number;
 };
 
-export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, fields }) => {
+export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, fields, pageSize }) => {
     const headers = [
         ...fields.map((field) => {
             return {
@@ -28,5 +29,5 @@ export const AggregateTable: FunctionComponent<AggregateTableProps> = ({ data, f
         },
     ];
 
-    return <Table data={data} columns={headers} pagination={true} />;
+    return <Table data={data} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -13,6 +13,9 @@ const meta: Meta<AggregateProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        initialSortField: { control: 'text' },
+        initialSortDirection: { control: 'radio', options: ['ascending', 'descending'] },
+        pageSize: { control: 'object' },
     },
     parameters: {
         fetchMock: {
@@ -53,5 +56,8 @@ export const Default: StoryObj<AggregateProps> = {
         width: '100%',
         height: '700px',
         headline: 'Aggregate',
+        initialSortField: 'count',
+        initialSortDirection: 'descending',
+        pageSize: 10,
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -17,6 +17,7 @@ import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table';
+export type InitialSort = { field: string; direction: 'ascending' | 'descending' };
 
 export type AggregateProps = {
     width: string;
@@ -28,6 +29,9 @@ export interface AggregateInnerProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
+    initialSortField: string;
+    initialSortDirection: 'ascending' | 'descending';
+    pageSize: boolean | number;
 }
 
 export const Aggregate: FunctionComponent<AggregateProps> = ({
@@ -37,6 +41,9 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
     headline = 'Mutations',
     filter,
     fields,
+    pageSize,
+    initialSortField,
+    initialSortDirection,
 }) => {
     const size = { height, width };
 
@@ -44,18 +51,32 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <AggregateInner fields={fields} filter={filter} views={views} />
+                    <AggregateInner
+                        fields={fields}
+                        filter={filter}
+                        views={views}
+                        initialSortField={initialSortField}
+                        initialSortDirection={initialSortDirection}
+                        pageSize={pageSize}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({ fields, views, filter }) => {
+export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
+    fields,
+    views,
+    filter,
+    initialSortField,
+    initialSortDirection,
+    pageSize,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryAggregateData(filter, fields, lapis);
+        return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
     }, [filter, fields, lapis]);
 
     if (isLoading) {
@@ -70,22 +91,23 @@ export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({ fields,
         return <NoDataDisplay />;
     }
 
-    return <AggregatedDataTabs data={data} views={views} fields={fields} />;
+    return <AggregatedDataTabs data={data} views={views} fields={fields} pageSize={pageSize} />;
 };
 
 type AggregatedDataTabsProps = {
     data: AggregateData;
     fields: string[];
     views: View[];
+    pageSize: boolean | number;
 };
 
-const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields }) => {
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields, pageSize }) => {
     const getTab = (view: View) => {
         switch (view) {
             case 'table':
                 return {
                     title: 'Table',
-                    content: <AggregateTable data={data} fields={fields} />,
+                    content: <AggregateTable data={data} fields={fields} pageSize={pageSize} />,
                 };
         }
     };

package/src/preact/components/table.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import { Table } from './table';
 
@@ -6,13 +7,51 @@ const meta: Meta = {
     title: 'Component/Table',
     component: Table,
     parameters: { fetchMock: {} },
+    argTypes: {
+        data: { control: 'object' },
+        columns: { control: 'object' },
+        pageSize: { control: 'object' },
+    },
 };
 
 export default meta;
 
 export const TableStory: StoryObj = {
     render: (args) => {
-        return <Table data={args.data} columns={args.columns} pagination={false} />;
+        return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
+    },
+    args: {
+        data: [
+            ['John Do', 'john@example.com', '123-456-7890'],
+            ['Jane Doe', 'jane@example.com', '098-765-4321'],
+        ],
+        columns: [{ name: 'Name' }, { name: 'Email', sort: true }, { name: 'Phone Number' }],
+        pageSize: 1,
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const firstRow = () => canvas.queryByText('John Do', { exact: true });
+        const secondRow = () => canvas.queryByText('Jane Doe', { exact: true });
+
+        await step('Expect first row to be visible and not second row', async () => {
+            await waitFor(() => expect(firstRow()).toBeVisible());
+            await expect(secondRow()).toBeNull();
+        });
+
+        await step('Expect second row to be visible and not first row after clicking next', async () => {
+            const nextButton = canvas.getByRole('button', { name: 'Next' });
+            await userEvent.click(nextButton);
+
+            await waitFor(() => expect(secondRow()).toBeVisible());
+            await expect(firstRow()).toBeNull();
+        });
+    },
+};
+
+export const TableStoryNoPagination: StoryObj = {
+    render: (args) => {
+        return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },
     args: {
         data: [
@@ -20,5 +59,16 @@ export const TableStory: StoryObj = {
             ['Jane Doe', 'jane@example.com', '098-765-4321'],
         ],
         columns: [{ name: 'Name' }, { name: 'Email', sort: true }, { name: 'Phone Number' }],
+        pageSize: false,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const firstRow = () => canvas.queryByText('John Do', { exact: true });
+        const secondRow = () => canvas.queryByText('Jane Doe', { exact: true });
+
+        await waitFor(() => expect(firstRow()).toBeVisible());
+        await expect(secondRow()).toBeVisible();
+        await waitFor(() => expect(canvas.queryByText('Next')).toBeNull());
     },
 };

package/src/preact/components/table.tsx

@@ -1,6 +1,5 @@
 import { Grid } from 'gridjs';
 import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types';
-import { type PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
@@ -26,10 +25,12 @@ export const tableStyle = {
 interface TableProps {
     data: TData;
     columns: OneDArray<TColumn | string | ComponentChild>;
-    pagination: PaginationConfig | boolean;
+    pageSize: number | boolean;
 }
 
-export const Table = ({ data, columns, pagination }: TableProps) => {
+export const Table = ({ data, columns, pageSize }: TableProps) => {
+    const pagination = typeof pageSize === 'number' ? { limit: pageSize } : pageSize;
+
     const wrapper = useRef(null);
 
     useEffect(() => {

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -35,6 +35,7 @@ const meta: Meta<LocationFilterProps> = {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
         initialValue: 'Europe',
+        placeholderText: 'Enter a location',
     },
     argTypes: {
         fields: {
@@ -52,6 +53,11 @@ const meta: Meta<LocationFilterProps> = {
                 type: 'text',
             },
         },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
 };
@@ -61,7 +67,12 @@ export default meta;
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <LocationFilter fields={args.fields} initialValue={args.initialValue} width={args.width} />
+            <LocationFilter
+                fields={args.fields}
+                initialValue={args.initialValue}
+                width={args.width}
+                placeholderText={args.placeholderText}
+            />
         </LapisUrlContext.Provider>
     ),
 };

package/src/preact/locationFilter/location-filter.tsx

@@ -12,6 +12,7 @@ import { useQuery } from '../useQuery';
 
 export interface LocationFilterInnerProps {
     initialValue?: string;
+    placeholderText?: string;
     fields: string[];
 }
 
@@ -19,19 +20,24 @@ export interface LocationFilterProps extends LocationFilterInnerProps {
     width: string;
 }
 
-export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, initialValue, fields }) => {
+export const LocationFilter: FunctionComponent<LocationFilterProps> = ({
+    width,
+    initialValue,
+    fields,
+    placeholderText,
+}) => {
     const size = { width, height: '3rem' };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <LocationFilterInner initialValue={initialValue} fields={fields} />
+                <LocationFilterInner initialValue={initialValue} fields={fields} placeholderText={placeholderText} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInnerProps) => {
+export const LocationFilterInner = ({ initialValue, fields, placeholderText }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');
@@ -77,6 +83,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
                 value={value}
                 onInput={onInput}
                 list='countries'
+                placeholder={placeholderText}
             />
             <datalist id='countries'>
                 {data?.map((v) => {

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -12,9 +12,14 @@ import { formatProportion } from '../shared/table/formatProportion';
 export interface MutationsTableProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
-export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({
+    data,
+    proportionInterval,
+    pageSize,
+}) => {
     const headers = [
         {
             name: 'Mutation',
@@ -37,5 +42,5 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
 
     const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={headers} pagination={true} />;
+    return <Table data={tableData} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -30,6 +30,7 @@ const meta: Meta<MutationComparisonProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: {
         fetchMock: {
@@ -85,6 +86,7 @@ const Template: StoryObj<MutationComparisonProps> = {
                     width={args.width}
                     height={args.height}
                     headline={args.headline}
+                    pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -114,6 +116,7 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         width: '100%',
         height: '700px',
         headline: 'Mutation comparison',
+        pageSize: 10,
     },
 };
 

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -34,6 +34,7 @@ export interface MutationComparisonInnerProps {
     variants: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
+    pageSize: boolean | number;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
@@ -43,6 +44,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     width,
     height,
     headline = 'Mutation comparison',
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -50,7 +52,12 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
         <ErrorBoundary size={size} headline={headline}>
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
-                    <MutationComparisonInner variants={variants} sequenceType={sequenceType} views={views} />
+                    <MutationComparisonInner
+                        variants={variants}
+                        sequenceType={sequenceType}
+                        views={views}
+                        pageSize={pageSize}
+                    />
                 </Headline>
             </ResizeContainer>
         </ErrorBoundary>
@@ -61,6 +68,7 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
     variants,
     sequenceType,
     views,
+    pageSize,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -80,16 +88,29 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
         return <NoDataDisplay />;
     }
 
-    return <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />;
+    return (
+        <MutationComparisonTabs
+            data={data.mutationData}
+            sequenceType={sequenceType}
+            views={views}
+            pageSize={pageSize}
+        />
+    );
 };
 
 type MutationComparisonTabsProps = {
     data: MutationData[];
     views: View[];
     sequenceType: SequenceType;
+    pageSize: boolean | number;
 };
 
-const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, views, sequenceType }) => {
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({
+    data,
+    views,
+    sequenceType,
+    pageSize,
+}) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
@@ -111,6 +132,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonTable
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
+                            pageSize={pageSize}
                         />
                     ),
                 };

package/src/preact/mutations/mutations-grid.tsx

@@ -13,6 +13,7 @@ interface MutationsGridProps {
     data: SubstitutionOrDeletionEntry[];
     sequenceType: SequenceType;
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
 export type BaseCell = {
@@ -20,7 +21,12 @@ export type BaseCell = {
     isReference: boolean;
 };
 
-export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({ data, sequenceType, proportionInterval }) => {
+export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({
+    data,
+    sequenceType,
+    proportionInterval,
+    pageSize,
+}) => {
     const getHeaders = () => {
         return [
             {
@@ -80,5 +86,5 @@ export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({ data, seq
 
     const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations-insertions-table.tsx

@@ -8,9 +8,10 @@ import { sortInsertions } from '../shared/sort/sortInsertions';
 
 export interface InsertionsTableProps {
     data: InsertionEntry[];
+    pageSize: boolean | number;
 }
 
-export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data }) => {
+export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data, pageSize }) => {
     const getHeaders = () => {
         return [
             {
@@ -31,5 +32,5 @@ export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data
 
     const tableData = getInsertionsTableData(data).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations-table.tsx

@@ -11,9 +11,10 @@ import { formatProportion } from '../shared/table/formatProportion';
 export interface MutationsTableProps {
     data: SubstitutionOrDeletionEntry[];
     proportionInterval: ProportionInterval;
+    pageSize: boolean | number;
 }
 
-const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
+const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval, pageSize }) => {
     const getHeaders = () => {
         return [
             {
@@ -43,7 +44,7 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proporti
 
     const tableData = getMutationsTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };
 
 export default MutationsTable;

package/src/preact/mutations/mutations.stories.tsx

@@ -25,6 +25,7 @@ const meta: Meta<MutationsProps> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
 };
 
@@ -41,6 +42,7 @@ const Template = {
                     width={args.width}
                     height={args.height}
                     headline={args.headline}
+                    pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -56,6 +58,7 @@ export const Default: StoryObj<MutationsProps> = {
         width: '100%',
         height: '700px',
         headline: 'Mutations',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {