From 2dd03dcf2ef6e9dc494b183b72f409f8197e36e1 Mon Sep 17 00:00:00 2001
From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com>
Date: Fri, 24 Jan 2025 13:44:41 +0100
Subject: [PATCH 1/2] feat(components): wastewater-mutations-over-time - always
 show all mutations in grid

---
 .../mutations-over-time-grid.tsx                 | 16 +++++++++++-----
 .../wastewater-mutations-over-time.tsx           |  8 +++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx b/components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx
index 3c17e199..2ec87f9b 100644
--- a/components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx
+++ b/components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx
@@ -12,14 +12,20 @@ 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();
 
@@ -27,10 +33,10 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
 
     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 && (
diff --git a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
index e38a77d0..2582e90c 100644
--- a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
+++ b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
@@ -97,7 +97,13 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 
     const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
         title: location,
-        content: <MutationsOverTimeGrid data={data} colorScale={colorScale} />,
+        content: (
+            <MutationsOverTimeGrid
+                data={data}
+                colorScale={colorScale}
+                maxNumberOfGridRows={data.getFirstAxisKeys().length}
+            />
+        ),
     }));
 
     const toolbar = (

From 199cea350d4ba1a15cad995a2d1fabe85e070c36 Mon Sep 17 00:00:00 2001
From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:10:13 +0100
Subject: [PATCH 2/2] feat(components): let maxNumberOfGridRows be configurable
 for wastewater-mutations-over-time

---
 .../wastewater-mutations-over-time.tsx                 | 10 +++++-----
 .../gs-wastewater-mutations-over-time.tsx              |  9 +++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx b/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
index 2582e90c..debf16d2 100644
--- a/components/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx
+++ b/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,22 +89,20 @@ 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}
-                maxNumberOfGridRows={data.getFirstAxisKeys().length}
-            />
+            <MutationsOverTimeGrid data={data} colorScale={colorScale} maxNumberOfGridRows={maxNumberOfGridRows} />
         ),
     }));
 
diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
index ee579c8f..09734f20 100644
--- a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
+++ b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
@@ -65,6 +65,14 @@ 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
@@ -72,6 +80,7 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
                 sequenceType={this.sequenceType}
                 width={this.width}
                 height={this.height}
+                maxNumberOfGridRows={this.maxNumberOfGridRows}
             />
         );
     }