Alternative_grid_size

components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -12,25 +12,31 @@ import { formatProportion } from '../shared/table/formatProportion';
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
+    maxNumberOfGridRows?: number;
 }
 
 const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MUTATION_CELL_WIDTH_REM = 8;
 
-const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data, colorScale }) => {
+const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
+    data,
+    colorScale,
+    maxNumberOfGridRows,
+}) => {
+    const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
     const allMutations = data.getFirstAxisKeys();
-    const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
+    const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
 
     const dates = data.getSecondAxisKeys();
 
     const gridRef = useRef<HTMLDivElement>(null);
 
     return (
         <>
-            {allMutations.length > MAX_NUMBER_OF_GRID_ROWS && (
+            {allMutations.length > currentMaxNumberOfGridRows && (
                 <div className='pl-2'>
-                    Showing {MAX_NUMBER_OF_GRID_ROWS} of {allMutations.length} mutations. You can narrow the filter to
-                    reduce the number of mutations.
+                    Showing {currentMaxNumberOfGridRows} of {allMutations.length} mutations. You can narrow the filter
+                    to reduce the number of mutations.
                 </div>
             )}
             {allMutations.length === 0 && (

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

@@ -23,6 +23,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     sequenceType: sequenceTypeSchema,
     width: z.string(),
     height: z.string(),
+    maxNumberOfGridRows: z.number().optional(),
 });
 
 export type WastewaterMutationsOverTimeProps = z.infer<typeof wastewaterMutationOverTimeSchema>;
@@ -75,6 +76,7 @@ export const WastewaterMutationsOverTimeInner: FunctionComponent<WastewaterMutat
         <MutationsOverTimeTabs
             mutationOverTimeDataPerLocation={mutationOverTimeDataPerLocation}
             originalComponentProps={componentProps}
+            maxNumberOfGridRows={componentProps.maxNumberOfGridRows}
         />
     );
 };
@@ -87,17 +89,21 @@ 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' });
 
     const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
         title: location,
-        content: <MutationsOverTimeGrid data={data} colorScale={colorScale} />,
+        content: (
+            <MutationsOverTimeGrid data={data} colorScale={colorScale} maxNumberOfGridRows={maxNumberOfGridRows} />
+        ),
     }));
 
     const toolbar = (

components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx

@@ -65,13 +65,22 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
     @property({ type: String })
     height: string = '700px';
 
+    /**
+     * The maximum number of grid rows to display.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: Number })
+    maxNumberOfGridRows: number = 100;
+
     override render() {
         return (
             <WastewaterMutationsOverTime
                 lapisFilter={this.lapisFilter}
                 sequenceType={this.sequenceType}
                 width={this.width}
                 height={this.height}
+                maxNumberOfGridRows={this.maxNumberOfGridRows}
             />
         );
     }