@genspectrum/dashboard-components 0.13.4 → 0.13.6

package/dist/util.d.ts

@@ -870,7 +870,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -878,7 +878,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -886,7 +886,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -894,7 +894,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -902,7 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -910,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -942,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -958,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,10 +1018,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1029,7 +1029,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1037,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1048,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1075,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1086,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/components/downshift-combobox.tsx

@@ -127,7 +127,7 @@ export function DownshiftCombobox<Item>({
                 {items.length > 0 ? (
                     items.map((item, index) => (
                         <li
-                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
+                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm`}
                             key={itemToString(item)}
                             {...getItemProps({ item, index })}
                         >
@@ -135,7 +135,7 @@ export function DownshiftCombobox<Item>({
                         </li>
                     ))
                 ) : (
-                    <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                    <li className='py-2 px-3 shadow-sm'>No elements to select.</li>
                 )}
             </ul>
         </div>

package/src/preact/components/mutation-info.tsx

@@ -0,0 +1,36 @@
+import { InfoHeadline2, InfoLink, InfoParagraph } from './info';
+
+export const SubstitutionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>
+);
+
+export const InsertionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>
+);
+
+export const DeletionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink>
+);
+
+export const ProportionExplanation = () => (
+    <>
+        <InfoHeadline2>Proportion calculation</InfoHeadline2>
+        <InfoParagraph>
+            The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
+            total number of sequences with a non-ambiguous symbol at the position.
+        </InfoParagraph>
+        <InfoParagraph>
+            <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and assume
+            there are 10 sequences in total:
+            <ul className='list-disc list-inside ml-2'>
+                <li>3 sequences have a C,</li>
+                <li>2 sequences have a T,</li>
+                <li>1 sequence has a G,</li>
+                <li>3 sequences have an N,</li>
+                <li>1 sequence has a Y (which means T or C),</li>
+            </ul>
+            then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the
+            calculation.
+        </InfoParagraph>
+    </>
+);

package/src/preact/locationFilter/fetchAutocompletionList.spec.ts

@@ -11,11 +11,11 @@ describe('fetchAutocompletionList', () => {
             { fields, country: 'Germany' },
             {
                 data: [
-                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
-                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_2' },
-                    { count: 0, region: 'region1', country: 'country1_1', division: null },
-                    { count: 0, region: 'region1', country: 'country1_2', division: 'division1_2_1' },
-                    { count: 0, region: 'region2', country: 'country2_1', division: null },
+                    { count: 1, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
+                    { count: 2, region: 'region1', country: 'country1_1', division: 'division1_1_2' },
+                    { count: 3, region: 'region1', country: 'country1_1', division: null },
+                    { count: 4, region: 'region1', country: 'country1_2', division: 'division1_2_1' },
+                    { count: 5, region: 'region2', country: 'country2_1', division: null },
                 ],
             },
         );
@@ -27,14 +27,14 @@ describe('fetchAutocompletionList', () => {
         });
 
         expect(result).to.deep.equal([
-            { region: 'region1', country: undefined, division: undefined },
-            { region: 'region1', country: 'country1_1', division: undefined },
-            { region: 'region1', country: 'country1_1', division: 'division1_1_1' },
-            { region: 'region1', country: 'country1_1', division: 'division1_1_2' },
-            { region: 'region1', country: 'country1_2', division: undefined },
-            { region: 'region1', country: 'country1_2', division: 'division1_2_1' },
-            { region: 'region2', country: undefined, division: undefined },
-            { region: 'region2', country: 'country2_1', division: undefined },
+            { value: { region: 'region1', country: undefined, division: undefined }, count: 10 },
+            { value: { region: 'region1', country: 'country1_1', division: undefined }, count: 6 },
+            { value: { region: 'region1', country: 'country1_1', division: 'division1_1_1' }, count: 1 },
+            { value: { region: 'region1', country: 'country1_1', division: 'division1_1_2' }, count: 2 },
+            { value: { region: 'region1', country: 'country1_2', division: undefined }, count: 4 },
+            { value: { region: 'region1', country: 'country1_2', division: 'division1_2_1' }, count: 4 },
+            { value: { region: 'region2', country: undefined, division: undefined }, count: 5 },
+            { value: { region: 'region2', country: 'country2_1', division: undefined }, count: 5 },
         ]);
     });
 });

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -1,5 +1,10 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
-import type { LapisFilter } from '../../types';
+import type { LapisFilter, LapisLocationFilter } from '../../types';
+
+export type LocationEntry = {
+    value: LapisLocationFilter;
+    count: number;
+};
 
 export async function fetchAutocompletionList({
     fields,
@@ -11,11 +16,10 @@ export async function fetchAutocompletionList({
     lapis: string;
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
-}): Promise<Record<string, string | undefined>[]> {
-    const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
-        .fill(0)
-        .map((_, i) => i + 1)
-        .map((i) => fields.slice(i).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+}): Promise<LocationEntry[]> {
+    const helpersThatOverwriteAValueToItsAncestor = fields.map((_, i) =>
+        fields.slice(i + 1).reduce((acc, field) => ({ ...acc, [field]: null }), {}),
+    );
 
     const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>(
         lapisFilter ?? {},
@@ -25,26 +29,58 @@ export async function fetchAutocompletionList({
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 
     const locationValues = data
-        .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
-        .reduce<Set<string>>((setOfAllHierarchies, entry) => {
-            setOfAllHierarchies.add(JSON.stringify(entry));
-            toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
-                setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
-            });
-            return setOfAllHierarchies;
-        }, new Set());
+        .map((entry) => ({
+            value: fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}),
+            count: entry.count,
+        }))
+        .reduce((mapOfAllHierarchiesAndCounts, entry) => {
+            return addValueAndAllAncestorsToMap(
+                entry,
+                helpersThatOverwriteAValueToItsAncestor,
+                mapOfAllHierarchiesAndCounts,
+            );
+        }, new Map<string, number>());
 
     return [...locationValues]
-        .map((json) => JSON.parse(json))
+        .map<EntryWithNullValues>(([json, count]) => ({
+            value: JSON.parse(json),
+            count,
+        }))
         .sort(compareLocationEntries(fields))
-        .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? undefined }), {}));
+        .map(({ value, count }) => ({
+            value: fields.reduce((acc, field) => ({ ...acc, [field]: value[field] ?? undefined }), {}),
+            count,
+        }));
+}
+
+function addValueAndAllAncestorsToMap(
+    { value, count }: LocationEntry,
+    helpersThatOverwriteAValueToItsAncestor: Record<string, null>[],
+    mapOfAllHierarchiesAndCounts: Map<string, number>,
+) {
+    const keysOfAllHierarchyLevels = new Set(
+        helpersThatOverwriteAValueToItsAncestor
+            .map((overwriteValues) => ({ ...value, ...overwriteValues }))
+            .map((value) => JSON.stringify(value)),
+    );
+
+    for (const key of keysOfAllHierarchyLevels) {
+        mapOfAllHierarchiesAndCounts.set(key, (mapOfAllHierarchiesAndCounts.get(key) ?? 0) + count);
+    }
+
+    return mapOfAllHierarchiesAndCounts;
 }
 
+type EntryWithNullValues = {
+    value: Record<string, string | null>;
+    count: number;
+};
+
 function compareLocationEntries(fields: string[]) {
-    return (a: Record<string, string | null>, b: Record<string, string | null>) => {
+    return (a: EntryWithNullValues, b: EntryWithNullValues) => {
         for (const field of fields) {
-            const valueA = a[field];
-            const valueB = b[field];
+            const valueA = a.value[field];
+            const valueB = b.value[field];
             if (valueA === valueB) {
                 continue;
             }

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

@@ -88,7 +88,7 @@ export const Primary: StoryObj<LocationFilterProps> = {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'Germany');
-            await userEvent.click(canvas.getByRole('option', { name: 'Germany Europe / Germany' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'Germany(42) Europe / Germany' }));
 
             await waitFor(() => {
                 return expect(locationChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({

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

@@ -2,7 +2,7 @@ import { type FunctionComponent } from 'preact';
 import { useContext, useMemo } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompletionList } from './fetchAutocompletionList';
+import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { LocationChangedEvent } from './LocationChangedEvent';
 import { lapisFilterSchema, type LapisLocationFilter, lapisLocationFilterSchema } from '../../types';
@@ -61,6 +61,7 @@ type SelectItem = {
     lapisFilter: LapisLocationFilter;
     label: string | null | undefined;
     description: string;
+    count: number;
 };
 
 const LocationSelector = ({
@@ -69,7 +70,7 @@ const LocationSelector = ({
     placeholderText,
     locationData,
 }: LocationSelectorProps & {
-    locationData: LapisLocationFilter[];
+    locationData: LocationEntry[];
 }) => {
     const allItems = useMemo(() => {
         return locationData
@@ -78,8 +79,10 @@ const LocationSelector = ({
     }, [fields, locationData]);
 
     const selectedItem = useMemo(() => {
-        return value !== undefined ? toSelectItem(value, fields) : undefined;
-    }, [fields, value]);
+        return value !== undefined
+            ? allItems.find((item) => item.description == concatenateLocation(value, fields))
+            : undefined;
+    }, [fields, value, allItems]);
 
     return (
         <DownshiftCombobox
@@ -91,14 +94,15 @@ const LocationSelector = ({
             }
             itemToString={(item: SelectItem | undefined | null) => item?.label ?? ''}
             placeholderText={placeholderText}
-            formatItemInList={(item: SelectItem) => {
-                return (
-                    <>
+            formatItemInList={(item: SelectItem) => (
+                <>
+                    <p>
                         <span>{item.label}</span>
-                        <span className='text-sm text-gray-500'>{item.description}</span>
-                    </>
-                );
-            }}
+                        <span className='ml-2 text-gray-500'>({item.count})</span>
+                    </p>
+                    <span className='text-sm text-gray-500'>{item.description}</span>
+                </>
+            )}
         />
     );
 };
@@ -113,7 +117,8 @@ function filterByInputValue(item: SelectItem, inputValue: string | undefined | n
     );
 }
 
-function toSelectItem(locationFilter: LapisLocationFilter, fields: string[]): SelectItem | undefined {
+function toSelectItem(locationEntry: LocationEntry, fields: string[]): SelectItem | undefined {
+    const locationFilter = locationEntry.value;
     const concatenatedLocation = concatenateLocation(locationFilter, fields);
 
     const lastNonUndefinedField = [...fields]
@@ -128,6 +133,7 @@ function toSelectItem(locationFilter: LapisLocationFilter, fields: string[]): Se
         lapisFilter: locationFilter,
         label: locationFilter[lastNonUndefinedField],
         description: concatenatedLocation,
+        count: locationEntry.count,
     };
 }
 

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

@@ -11,8 +11,9 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
+import { DeletionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
@@ -190,7 +191,30 @@ const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = (
     return (
         <Info>
             <InfoHeadline1>Info for mutation comparison</InfoHeadline1>
-            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/465</InfoParagraph>
+            <InfoParagraph>
+                This displays <SubstitutionsLink /> and <DeletionsLink /> of several variants. It shows mutations where
+                the proportion for any given variant falls within the range you can select in the component's toolbar.
+            </InfoParagraph>
+            <ProportionExplanation />
+            {originalComponentProps.views.includes(views.table) && (
+                <>
+                    <InfoHeadline2>Table View</InfoHeadline2>
+                    <InfoParagraph>
+                        The table view displays the proportion of mutations that appear in any of the variants.
+                    </InfoParagraph>
+                </>
+            )}
+            {originalComponentProps.views.includes(views.venn) && (
+                <>
+                    <InfoHeadline2>Venn Diagram View</InfoHeadline2>
+                    <InfoParagraph>
+                        The Venn diagram view illustrates which mutations overlap between the variants and which are
+                        exclusive to specific variants. Mutations overlap if their proportion falls within the selected
+                        range for two variants. If the proportion of a mutation is within the selected range for one
+                        variant but not for the other, the mutation is considered exclusive to that variant.
+                    </InfoParagraph>
+                </>
+            )}
             <InfoComponentCode componentName='mutation-comparison' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

package/src/preact/mutations/mutations.tsx

@@ -19,8 +19,9 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
+import { DeletionsLink, InsertionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
@@ -242,29 +243,10 @@ const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponen
         <Info>
             <InfoHeadline1>Mutations</InfoHeadline1>
             <InfoParagraph>
-                This shows mutations of a variant. There are three types of mutations:{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
-                <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
-            </InfoParagraph>
-            <InfoHeadline2>Proportion calculation</InfoHeadline2>
-            <InfoParagraph>
-                The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
-                total number of sequences with a non-ambiguous symbol at the position.
-            </InfoParagraph>
-            <InfoParagraph>
-                <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and
-                assume there are 10 sequences in total:
-                <ul className='list-disc list-inside ml-2'>
-                    <li>3 sequences have a C,</li>
-                    <li>2 sequences have a T,</li>
-                    <li>1 sequence has a G,</li>
-                    <li>3 sequences have an N,</li>
-                    <li>1 sequence has a Y (which means T or C),</li>
-                </ul>
-                then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from
-                the calculation.
+                This shows mutations of a variant. There are three types of mutations: <SubstitutionsLink />,{' '}
+                <DeletionsLink /> and <InsertionsLink />.
             </InfoParagraph>
+            <ProportionExplanation />
             <InfoComponentCode componentName='mutations' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

package/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 && (

package/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 = (