@genspectrum/dashboard-components 0.6.4 → 0.6.5

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

@@ -6,7 +6,6 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { compareTemporal, type Temporal, YearMonthDay } from '../../utils/temporal';
-import { UserFacingError } from '../components/error-display';
 import Tooltip from '../components/tooltip';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { formatProportion } from '../shared/table/formatProportion';
@@ -18,49 +17,51 @@ export interface MutationsOverTimeGridProps {
 const MAX_NUMBER_OF_GRID_ROWS = 100;
 
 const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data }) => {
-    const mutations = data.getFirstAxisKeys();
-    if (mutations.length > MAX_NUMBER_OF_GRID_ROWS) {
-        throw new UserFacingError(
-            'Too many mutations',
-            `The dataset contains ${mutations.length} mutations. ` +
-                `Please adapt the filters to reduce the number to below ${MAX_NUMBER_OF_GRID_ROWS}.`,
-        );
-    }
+    const allMutations = data.getFirstAxisKeys();
+    const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
 
     const dates = data.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
 
     return (
-        <div
-            style={{
-                display: 'grid',
-                gridTemplateRows: `repeat(${mutations.length}, 24px)`,
-                gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`,
-            }}
-        >
-            {mutations.map((mutation, i) => {
-                return (
-                    <Fragment key={`fragment-${mutation.toString()}`}>
-                        <div
-                            key={`mutation-${mutation.toString()}`}
-                            style={{ gridRowStart: i + 1, gridColumnStart: 1 }}
-                        >
-                            <MutationCell mutation={mutation} />
-                        </div>
-                        {dates.map((date, j) => {
-                            const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
-                            return (
-                                <div
-                                    style={{ gridRowStart: i + 1, gridColumnStart: j + 2 }}
-                                    key={`${mutation.toString()}-${date.toString()}`}
-                                >
-                                    <ProportionCell value={value} date={date} mutation={mutation} />
-                                </div>
-                            );
-                        })}
-                    </Fragment>
-                );
-            })}
-        </div>
+        <>
+            {allMutations.length > MAX_NUMBER_OF_GRID_ROWS && (
+                <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.
+                </div>
+            )}
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
+                    gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`,
+                }}
+            >
+                {shownMutations.map((mutation, i) => {
+                    return (
+                        <Fragment key={`fragment-${mutation.toString()}`}>
+                            <div
+                                key={`mutation-${mutation.toString()}`}
+                                style={{ gridRowStart: i + 1, gridColumnStart: 1 }}
+                            >
+                                <MutationCell mutation={mutation} />
+                            </div>
+                            {dates.map((date, j) => {
+                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+                                return (
+                                    <div
+                                        style={{ gridRowStart: i + 1, gridColumnStart: j + 2 }}
+                                        key={`${mutation.toString()}-${date.toString()}`}
+                                    >
+                                        <ProportionCell value={value} date={date} mutation={mutation} />
+                                    </div>
+                                );
+                            })}
+                        </Fragment>
+                    );
+                })}
+            </div>
+        </>
     );
 };
 

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -1,6 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor } from '@storybook/test';
 
 import aggregated_date from './__mockData__/aggregated_date.json';
+import aggregated_tooManyMutations from './__mockData__/aggregated_tooManyMutations.json';
 import nucleotideMutation_01 from './__mockData__/nucleotideMutations_2024_01.json';
 import nucleotideMutation_02 from './__mockData__/nucleotideMutations_2024_02.json';
 import nucleotideMutation_03 from './__mockData__/nucleotideMutations_2024_03.json';
@@ -8,6 +10,7 @@ import nucleotideMutation_04 from './__mockData__/nucleotideMutations_2024_04.js
 import nucleotideMutation_05 from './__mockData__/nucleotideMutations_2024_05.json';
 import nucleotideMutation_06 from './__mockData__/nucleotideMutations_2024_06.json';
 import nucleotideMutation_07 from './__mockData__/nucleotideMutations_2024_07.json';
+import nucleotideMutation_tooManyMutations from './__mockData__/nucleotideMutations_tooManyMutations.json';
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
@@ -95,7 +98,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-01-01',
                             dateTo: '2024-01-31',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                     },
                     response: {
@@ -111,7 +114,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-02-01',
                             dateTo: '2024-02-29',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                     },
                     response: {
@@ -127,7 +130,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-03-01',
                             dateTo: '2024-03-31',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                         response: {
                             status: 200,
@@ -143,7 +146,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-04-01',
                             dateTo: '2024-04-30',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                         response: {
                             status: 200,
@@ -159,7 +162,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-05-01',
                             dateTo: '2024-05-31',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                         response: {
                             status: 200,
@@ -175,7 +178,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-06-01',
                             dateTo: '2024-06-30',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                         response: {
                             status: 200,
@@ -183,7 +186,6 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                         },
                     },
                 },
-
                 {
                     matcher: {
                         name: 'nucleotideMutations_07',
@@ -192,7 +194,7 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
                             pangoLineage: 'JN.1*',
                             dateFrom: '2024-07-01',
                             dateTo: '2024-07-31',
-                            minProportion: 0,
+                            minProportion: 0.001,
                         },
                         response: {
                             status: 200,
@@ -204,3 +206,55 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         },
     },
 };
+
+export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps> = {
+    ...Template,
+    args: {
+        lapisFilter: { dateFrom: '2023-01-01', dateTo: '2023-12-31' },
+        sequenceType: 'nucleotide',
+        views: ['grid'],
+        width: '100%',
+        height: '700px',
+        granularity: 'year',
+        lapisDateField: 'date',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2023-01-01',
+                            dateTo: '2023-12-31',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_tooManyMutations,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutations',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            dateFrom: '2023-01-01',
+                            dateTo: '2023-12-31',
+                            minProportion: 0.001,
+                        },
+                        response: {
+                            status: 200,
+                            body: nucleotideMutation_tooManyMutations,
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() => expect(canvas.getByText('Showing 100 of 137 mutations.', { exact: false })).toBeVisible());
+    },
+};

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

@@ -17,11 +17,17 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The grid view shows the proportion for each mutation over date ranges.
  *
- * The grid will show at max 100 rows and 200 columns for browser performance reasons.
- * More data might make the browser unresponsive.
- * If the numbers are exceeded, an error message will be shown.
- * In both cases, the `lapisFilter` should be narrowed down to reduce the number of mutations or date ranges.
- * The number of date ranges can also be reduced by selecting a larger granularity (months instead of weeks).
+ * The grid limits the number of rows columns for browser performance reasons.
+ * Too much data might make the browser unresponsive.
+ *
+ * The number of columns is limited to 200.
+ * If this number are exceeded, an error message will be shown.
+ * It is your responsibility to make sure that this does not happen.
+ * Depending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly
+ * (e.g. use months instead of days).
+ *
+ * The number of rows is limited to 100.
+ * If there are more, the component will only show 100 mutations and notify the user.
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {