@genspectrum/dashboard-components 0.4.4 → 0.4.5

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -32,6 +32,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
 };
 
@@ -49,6 +50,7 @@ const Template = {
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                pageSize={args.pageSize}
             />
         </LapisUrlContext.Provider>
     ),
@@ -70,6 +72,7 @@ export const TwoVariants = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {
@@ -142,6 +145,7 @@ export const OneVariant = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -40,6 +40,7 @@ export interface PrevalenceOverTimeInnerProps {
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
+    pageSize: boolean | number;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -53,6 +54,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     height,
     headline = 'Prevalence over time',
     lapisDateField,
+    pageSize,
 }) => {
     const size = { height, width };
 
@@ -68,6 +70,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
+                        pageSize={pageSize}
                     />
                 </Headline>
             </ResizeContainer>
@@ -83,6 +86,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     views,
     confidenceIntervalMethods,
     lapisDateField,
+    pageSize,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -109,6 +113,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             data={data}
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
+            pageSize={pageSize}
         />
     );
 };
@@ -118,6 +123,7 @@ type PrevalenceOverTimeTabsProps = {
     data: PrevalenceOverTimeData;
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    pageSize: boolean | number;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -125,6 +131,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     data,
     granularity,
     confidenceIntervalMethods,
+    pageSize,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -163,7 +170,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
             case 'table':
                 return {
                     title: 'Table',
-                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} />,
+                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
                 };
         }
     };

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

@@ -17,6 +17,7 @@ const codeExample = String.raw`
     fields='["region", "country"]'
     initialValue='Europe / Switzerland'
     width="100%"
+    placeholderText="Enter a location"
 ></gs-location-filter>`;
 
 const meta: Meta = {
@@ -48,6 +49,11 @@ const meta: Meta = {
                 type: 'text',
             },
         },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -63,6 +69,7 @@ const Template: StoryObj<LocationFilterProps> = {
                     .fields=${args.fields}
                     initialValue=${ifDefined(args.initialValue)}
                     .width=${args.width}
+                    placeholderText=${ifDefined(args.placeholderText)}
                 ></gs-location-filter>
             </div>
         </gs-app>`;
@@ -71,6 +78,7 @@ const Template: StoryObj<LocationFilterProps> = {
         fields: ['region', 'country', 'division', 'location'],
         initialValue: '',
         width: '100%',
+        placeholderText: 'Enter a location',
     },
 };
 
@@ -102,6 +110,9 @@ export const LocationFilter: StoryObj<LocationFilterProps> = {
         await waitFor(() => {
             return expect(canvas.getByRole('combobox')).toBeEnabled();
         });
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a location')).toBeInTheDocument();
+        });
     },
 };
 

package/src/web-components/input/gs-location-filter.tsx

@@ -59,8 +59,21 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
+    /**
+     * The placeholder text to display in the input field, if it is empty.
+     */
+    @property()
+    placeholderText: string = '';
+
     override render() {
-        return <LocationFilter initialValue={this.initialValue} fields={this.fields} width={this.width} />;
+        return (
+            <LocationFilter
+                initialValue={this.initialValue}
+                fields={this.fields}
+                width={this.width}
+                placeholderText={this.placeholderText}
+            />
+        );
     }
 }
 

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -19,6 +19,7 @@ const codeExample = `
     height='700px'
     initialSortField="count"
     initialSortDirection="descending"
+    pageSize="10"
 ></gs-aggregate>`;
 
 const meta: Meta<Required<AggregateProps>> = {
@@ -33,6 +34,7 @@ const meta: Meta<Required<AggregateProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
         initialSortField: { control: 'text' },
         initialSortDirection: {
             options: ['ascending', 'descending'],
@@ -81,6 +83,7 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .headline=${args.headline}
                 .initialSortField=${args.initialSortField}
                 .initialSortDirection=${args.initialSortDirection}
+                .pageSize=${args.pageSize}
             ></gs-aggregate>
         </gs-app>
     `,
@@ -95,5 +98,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         headline: 'Aggregate',
         initialSortField: 'count',
         initialSortDirection: 'descending',
+        pageSize: 10,
     },
 };

package/src/web-components/visualization/gs-aggregate.tsx

@@ -80,6 +80,13 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     initialSortDirection: 'ascending' | 'descending' = '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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Aggregate
@@ -91,6 +98,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 headline={this.headline}
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
+                pageSize={this.pageSize}
             />
         );
     }

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -19,6 +19,7 @@ const codeExample = String.raw`
     headline="Mutation comparison"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutation-comparison>`;
 
 const meta: Meta<Required<MutationComparisonProps>> = {
@@ -37,6 +38,7 @@ const meta: Meta<Required<MutationComparisonProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -60,6 +62,7 @@ const Template: StoryObj<Required<MutationComparisonProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutation-comparison>
         </gs-app>
     `,
@@ -91,6 +94,7 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Mutation comparison',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -82,6 +82,13 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     headline: string = 'Mutation comparison';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <MutationComparison
@@ -91,6 +98,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }

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

@@ -19,6 +19,7 @@ const codeExample = String.raw`
     headline="Mutations"
     width='100%'
     height='700px'
+    pageSize="10"
 ></gs-mutations>`;
 
 const meta: Meta<Required<MutationsProps>> = {
@@ -37,6 +38,7 @@ const meta: Meta<Required<MutationsProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     args: {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
@@ -45,6 +47,7 @@ const meta: Meta<Required<MutationsProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Mutations',
+        pageSize: 10,
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -68,6 +71,7 @@ const Template: StoryObj<Required<MutationsProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .pageSize=${args.pageSize}
             ></gs-mutations>
         </gs-app>
     `,

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

@@ -77,6 +77,13 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: String })
     headline: string = 'Mutations';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <Mutations
@@ -86,6 +93,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                pageSize={this.pageSize}
             />
         );
     }

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

@@ -26,6 +26,7 @@ const codeExample = String.raw`
     width="100%"
     height="700px"
     lapisDateField="date"
+    pageSize="10"
 ></gs-prevalence-over-time>`;
 
 const meta: Meta<Required<PrevalenceOverTimeProps>> = {
@@ -50,6 +51,7 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        pageSize: { control: 'object' },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -77,6 +79,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .height=${args.height}
                 .headline=${args.headline}
                 .lapisDateField=${args.lapisDateField}
+                .pageSize=${args.pageSize}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -98,6 +101,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {
@@ -170,6 +174,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         height: '700px',
         headline: 'Prevalence over time',
         lapisDateField: 'date',
+        pageSize: 10,
     },
     parameters: {
         fetchMock: {

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

@@ -53,16 +53,16 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * which will be used as the label for the variant in the views,
      * or an array of such objects.
      */
-    @property({type: Object})
+    @property({ type: Object })
     numerator:
         {
             lapisFilter: Record<string, string | number | null | boolean>;
             displayName: string;
         }
         | {
-            lapisFilter: Record<string, string | number | null | boolean>;
-            displayName: string;
-        }[] = { displayName: '', lapisFilter: {} };
+        lapisFilter: Record<string, string | number | null | boolean>;
+        displayName: string;
+    }[] = { displayName: '', lapisFilter: {} };
 
     /**
      * Required.
@@ -136,6 +136,13 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     lapisDateField: string = 'date';
 
+    /**
+     * 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).
+     */
+    @property({ type: Object })
+    pageSize: boolean | number = false;
+
     override render() {
         return (
             <PrevalenceOverTime
@@ -149,6 +156,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 height={this.height}
                 headline={this.headline}
                 lapisDateField={this.lapisDateField}
+                pageSize={this.pageSize}
             />
         );
     }