@genspectrum/dashboard-components 0.4.4 → 0.5.0

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

@@ -21,6 +21,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
+import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -33,18 +34,20 @@ export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
 }
 
 export interface PrevalenceOverTimeInnerProps {
-    numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: LapisFilter;
+    numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
+    denominatorFilter: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
+    pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
@@ -53,6 +56,8 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     height,
     headline = 'Prevalence over time',
     lapisDateField,
+    pageSize,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -61,13 +66,15 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
             <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <PrevalenceOverTimeInner
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         granularity={granularity}
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
+                        pageSize={pageSize}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -76,19 +83,29 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
 };
 
 export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     granularity,
     smoothingWindow,
     views,
     confidenceIntervalMethods,
     lapisDateField,
+    pageSize,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
-        [lapis, numerator, denominator, granularity, smoothingWindow],
+        () =>
+            queryPrevalenceOverTime(
+                numeratorFilter,
+                denominatorFilter,
+                granularity,
+                smoothingWindow,
+                lapis,
+                lapisDateField,
+            ),
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
     );
 
     if (isLoading) {
@@ -109,6 +126,8 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             data={data}
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
+            pageSize={pageSize}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -118,6 +137,8 @@ type PrevalenceOverTimeTabsProps = {
     data: PrevalenceOverTimeData;
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    pageSize: boolean | number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -125,6 +146,8 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     data,
     granularity,
     confidenceIntervalMethods,
+    pageSize,
+    yAxisMaxConfig,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -141,6 +164,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
@@ -152,18 +176,25 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
             case 'bubble':
                 return {
                     title: 'Bubble',
-                    content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <PrevalenceOverTimeBubbleChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
+                        />
+                    ),
                 };
             case 'table':
                 return {
                     title: 'Table',
-                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} />,
+                    content: <PrevalenceOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
                 };
         }
     };
@@ -238,3 +269,6 @@ const PrevalenceOverTimeInfo: FunctionComponent = () => {
         </Info>
     );
 };
+
+export const maxInData = (data: PrevalenceOverTimeData) =>
+    Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx

@@ -5,7 +5,9 @@ import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { confidenceIntervalDataLabel } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+import { formatProportion } from '../shared/table/formatProportion';
 
 interface RelativeGrowthAdvantageChartData {
     t: YearMonthDay[];
@@ -25,11 +27,17 @@ interface RelativeGrowthAdvantageChartData {
 interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
@@ -39,8 +47,9 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
         options: {
             maintainAspectRatio: false,
             animation: false,
+
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {
@@ -52,14 +61,37 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
     };
 
     return (
-        <div className='flex flex-col h-full'>
+        <div className='flex h-full flex-col'>
+            <RelativeGrowthAdvantageDisplay
+                relativeAdvantage={data.params.fd.value}
+                relativeAdvantageLowerBound={data.params.fd.ciLower}
+                relativeAdvantageUpperBound={data.params.fd.ciUpper}
+            />
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <p>
-                Advantage: {(data.params.fd.value * 100).toFixed(2)}% ({(data.params.fd.ciLower * 100).toFixed(2)}% -{' '}
-                {(data.params.fd.ciUpper * 100).toFixed(2)}%)
-            </p>
+        </div>
+    );
+};
+
+const RelativeGrowthAdvantageDisplay = ({
+    relativeAdvantage,
+    relativeAdvantageLowerBound,
+    relativeAdvantageUpperBound,
+}: {
+    relativeAdvantage: number;
+    relativeAdvantageLowerBound: number;
+    relativeAdvantageUpperBound: number;
+}) => {
+    return (
+        <div class='mx-auto flex items-end flex-wrap'>
+            <span class='text-[#606060]'>Relative advantage:</span>
+            <div>
+                <span class='text-2xl ml-3'> {formatProportion(relativeAdvantage)} </span>
+                <span class='ml-2.5'>
+                    ({formatProportion(relativeAdvantageLowerBound)} - {formatProportion(relativeAdvantageUpperBound)})
+                </span>
+            </div>
         </div>
     );
 };

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -1,5 +1,5 @@
-import denominator from './__mockData__/denominator.json';
-import numerator from './__mockData__/numerator.json';
+import denominator from './__mockData__/denominatorFilter.json';
+import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -21,6 +21,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -28,14 +29,15 @@ export const Primary = {
     render: (args: RelativeGrowthAdvantageProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <RelativeGrowthAdvantage
-                numerator={args.numerator}
-                denominator={args.denominator}
+                numeratorFilter={args.numeratorFilter}
+                denominatorFilter={args.denominatorFilter}
                 generationTime={args.generationTime}
                 views={args.views}
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +50,10 @@ export const Primary = {
         height: '700px',
         headline: 'Relative growth advantage',
         lapisDateField: 'date',
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -17,6 +17,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -29,22 +30,24 @@ export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePro
 }
 
 export interface RelativeGrowthAdvantagePropsInner {
-    numerator: LapisFilter;
-    denominator: LapisFilter;
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
     generationTime: number;
     views: View[];
     lapisDateField: string;
+    yAxisMaxConfig: YAxisMaxConfig;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     views,
     width,
     height,
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     headline = 'Relative growth advantage',
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -54,10 +57,11 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                 <Headline heading={headline}>
                     <RelativeGrowthAdvantageInner
                         views={views}
-                        numerator={numerator}
-                        denominator={denominator}
+                        numeratorFilter={numeratorFilter}
+                        denominatorFilter={denominatorFilter}
                         generationTime={generationTime}
                         lapisDateField={lapisDateField}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -66,18 +70,19 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
 };
 
 export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numerator,
-    denominator,
+    numeratorFilter,
+    denominatorFilter,
     generationTime,
     views,
     lapisDateField,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
-        [lapis, numerator, denominator, generationTime, views],
+        () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
     );
 
     if (isLoading) {
@@ -99,6 +104,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             setYAxisScaleType={setYAxisScaleType}
             views={views}
             generationTime={generationTime}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -109,6 +115,7 @@ type RelativeGrowthAdvantageTabsProps = {
     setYAxisScaleType: (scaleType: ScaleType) => void;
     views: View[];
     generationTime: number;
+    yAxisMaxConfig: YAxisMaxConfig;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
@@ -117,6 +124,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     views,
     generationTime,
+    yAxisMaxConfig,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -131,6 +139,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };

package/src/preact/shared/charts/confideceInterval.ts

@@ -20,10 +20,15 @@ export function wilson95PercentConfidenceInterval(observed: number, sample: numb
     };
 }
 
-export const confidenceIntervalDataLabel = (value: number, lowerLimit: number, upperLimit: number, prefix?: string) => {
+export const confidenceIntervalDataLabel = (
+    value: number,
+    lowerLimit?: number,
+    upperLimit?: number,
+    prefix?: string,
+) => {
     const label = prefix ? `${prefix}: ` : '';
 
-    return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+    return `${label}${value.toFixed(3)} (${lowerLimit?.toFixed(3)} - ${upperLimit?.toFixed(3)})`;
 };
 
 export type ConfidenceIntervalMethod = 'wilson' | 'none';

package/src/preact/shared/charts/getYAxisMax.ts

@@ -0,0 +1,24 @@
+export interface YAxisMaxConfig {
+    linear?: AxisMax;
+    logarithmic?: AxisMax;
+}
+
+export type AxisMax = 'maxInData' | 'limitTo1' | number;
+
+export const getYAxisMax = (maxInData: number, axisMax?: AxisMax) => {
+    if (!axisMax) {
+        return 1;
+    }
+
+    switch (axisMax) {
+        case 'limitTo1': {
+            return maxInData > 1 ? 1 : maxInData;
+        }
+        case 'maxInData': {
+            return maxInData;
+        }
+        default: {
+            return axisMax;
+        }
+    }
+};

package/src/preact/shared/charts/getYAxisScale.ts

@@ -6,11 +6,9 @@ export function getYAxisScale(scaleType: ScaleType) {
             return { beginAtZero: true, type: 'linear' as const, min: 0, max: 1 };
         }
         case 'logarithmic': {
-            return { type: 'logarithmic' as const };
+            return { type: 'logarithmic' as const, max: 1 };
         }
         case 'logit':
             return { type: 'logit' as const };
-        default:
-            return { beginAtZero: true, type: 'linear' as const };
     }
 }

package/src/query/queryAggregateData.ts

@@ -20,7 +20,7 @@ const compareAscending = (a: string | null | number, b: string | null | number)
 };
 
 export async function queryAggregateData(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     fields: string[],
     lapis: string,
     initialSort: InitialSort = { field: 'count', direction: 'descending' },
@@ -31,7 +31,7 @@ export async function queryAggregateData(
         throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(', ')}`);
     }
 
-    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(variant, fields);
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null | number>>(lapisFilter, fields);
     const sortData = new SortOperator(fetchData, (a, b) => {
         return initialSort.direction === 'ascending'
             ? compareAscending(a[initialSort.field], b[initialSort.field])

package/src/query/queryInsertions.ts

@@ -2,8 +2,13 @@ import { FetchInsertionsOperator } from '../operator/FetchInsertionsOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
-export function queryInsertions(variant: LapisFilter, sequenceType: SequenceType, lapis: string, signal?: AbortSignal) {
-    const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+export function queryInsertions(
+    lapisFilter: LapisFilter,
+    sequenceType: SequenceType,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    const fetchData = new FetchInsertionsOperator(lapisFilter, sequenceType);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

package/src/query/querySubstitutionsOrDeletions.ts

@@ -3,12 +3,12 @@ import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type SequenceType } from '../types';
 
 export function querySubstitutionsOrDeletions(
-    variant: LapisFilter,
+    lapisFilter: LapisFilter,
     sequenceType: SequenceType,
     lapis: string,
     signal?: AbortSignal,
 ) {
-    const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
+    const fetchData = new FetchSubstitutionsOrDeletionsOperator(lapisFilter, sequenceType, 0);
     const sortData = new SortOperator(fetchData, (a, b) => {
         if (a.mutation.segment !== b.mutation.segment) {
             return (a.mutation.segment ?? '').localeCompare(b.mutation.segment ?? '');

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

@@ -91,7 +91,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

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

@@ -54,13 +54,26 @@ export class LocationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @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/input/gs-mutation-filter.tsx

@@ -86,7 +86,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

package/src/web-components/input/gs-text-input.tsx

@@ -45,7 +45,7 @@ export class TextInputComponent extends PreactLitAdapter {
     /**
      * The width of the component.
      *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
     width: string = '100%';

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,
     },
 };