@genspectrum/dashboard-components 0.6.4 → 0.6.6

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

@@ -6,8 +6,7 @@ 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 Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { formatProportion } from '../shared/table/formatProportion';
 
@@ -18,57 +17,77 @@ 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, rowIndex) => {
+                    return (
+                        <Fragment key={`fragment-${mutation.toString()}`}>
+                            <div
+                                key={`mutation-${mutation.toString()}`}
+                                style={{ gridRowStart: rowIndex + 1, gridColumnStart: 1 }}
+                            >
+                                <MutationCell mutation={mutation} />
+                            </div>
+                            {dates.map((date, columnIndex) => {
+                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+                                const tooltipPosition = getTooltipPosition(
+                                    rowIndex,
+                                    shownMutations.length,
+                                    columnIndex,
+                                    dates.length,
+                                );
+                                return (
+                                    <div
+                                        style={{ gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 }}
+                                        key={`${mutation.toString()}-${date.toString()}`}
+                                    >
+                                        <ProportionCell
+                                            value={value}
+                                            date={date}
+                                            mutation={mutation}
+                                            tooltipPosition={tooltipPosition}
+                                        />
+                                    </div>
+                                );
+                            })}
+                        </Fragment>
+                    );
+                })}
+            </div>
+        </>
     );
 };
 
+function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
+    const tooltipX = rowIndex < rows / 2 ? 'bottom' : 'top';
+    const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
+    return `${tooltipX}-${tooltipY}` as const;
+}
+
 const ProportionCell: FunctionComponent<{
     value: MutationOverTimeMutationValue;
     date: Temporal;
     mutation: Substitution | Deletion;
-}> = ({ value, mutation, date }) => {
+    tooltipPosition: TooltipPosition;
+}> = ({ value, mutation, date, tooltipPosition }) => {
     const tooltipContent = (
         <div>
             <p>
@@ -83,7 +102,7 @@ const ProportionCell: FunctionComponent<{
     return (
         <>
             <div className={'py-1'}>
-                <Tooltip content={tooltipContent}>
+                <Tooltip content={tooltipContent} position={tooltipPosition}>
                     <div
                         style={{
                             backgroundColor: backgroundColor(value.proportion),

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/preact/mutationsOverTime/mutations-over-time.tsx

@@ -8,8 +8,10 @@ import {
     queryMutationsOverTimeData,
 } from '../../query/queryMutationsOverTime';
 import { type LapisFilter, type SequenceType, type TemporalGranularity } from '../../types';
+import { compareTemporal } from '../../utils/temporal';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
+import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Info from '../components/info';
@@ -126,6 +128,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             setDisplayedMutationTypes={setDisplayedMutationTypes}
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
+            filteredData={filteredData}
         />
     );
 
@@ -139,6 +142,7 @@ type ToolbarProps = {
     setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    filteredData: MutationOverTimeDataGroupedByMutation;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -148,6 +152,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setDisplayedMutationTypes,
     proportionInterval,
     setProportionInterval,
+    filteredData,
 }) => {
     return (
         <>
@@ -156,15 +161,34 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
                 displayedMutationTypes={displayedMutationTypes}
             />
-            <>
-                <ProportionSelectorDropdown
-                    proportionInterval={proportionInterval}
-                    setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
-                    setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
-                />
-                {/*    TODO(#362): Add download button */}
-            </>
+            <ProportionSelectorDropdown
+                proportionInterval={proportionInterval}
+                setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
+                setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+            />
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => getDownloadData(filteredData)}
+                filename='mutations_over_time.csv'
+            />
             <Info height={'100px'}>Info for mutations over time</Info>
         </>
     );
 };
+
+function getDownloadData(filteredData: MutationOverTimeDataGroupedByMutation) {
+    const dates = filteredData.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
+
+    return filteredData.getFirstAxisKeys().map((mutation) => {
+        return dates.reduce(
+            (accumulated, date) => {
+                const proportion = filteredData.get(mutation, date)?.proportion ?? 0;
+                return {
+                    ...accumulated,
+                    [date.toString()]: proportion,
+                };
+            },
+            { mutation: mutation.toString() },
+        );
+    });
+}

package/src/utils/temporal.spec.ts

@@ -57,8 +57,7 @@ describe('YearMonthDay', () => {
         expect(underTest.yearNumber).equal(2020);
         expect(underTest.monthNumber).equal(1);
         expect(underTest.dayNumber).equal(1);
-        // seems to be a bug in dayjs: https://github.com/iamkun/dayjs/issues/2620
-        expect(underTest.week.text).equal('2019-01');
+        expect(underTest.week.text).equal('2020-W01');
         expect(underTest.text).equal('2020-01-01');
         expect(underTest.firstDay.text).equal('2020-01-01');
         expect(underTest.lastDay.text).equal('2020-01-01');
@@ -67,12 +66,12 @@ describe('YearMonthDay', () => {
 
 describe('YearWeek', () => {
     it('should parse from string', () => {
-        const underTest = YearWeek.parse('2020-02', cache);
+        const underTest = YearWeek.parse('2020-W02', cache);
 
         expect(underTest.isoYearNumber).equal(2020);
         expect(underTest.isoWeekNumber).equal(2);
         expect(underTest.firstDay.text).equal('2020-01-06');
-        expect(underTest.text).equal('2020-02');
+        expect(underTest.text).equal('2020-W02');
         expect(underTest.lastDay.text).equal('2020-01-12');
     });
 });

package/src/utils/temporal.ts

@@ -7,6 +7,11 @@ import type { TemporalGranularity } from '../types';
 dayjs.extend(isoWeek);
 dayjs.extend(advancedFormat);
 
+/**
+ * https://day.js.org/docs/en/plugin/advanced-format
+ */
+const FORMAT_ISO_WEEK_YEAR_WEEK = 'GGGG-[W]WW';
+
 export class TemporalCache {
     private yearMonthDayCache = new Map<string, YearMonthDay>();
     private yearWeekCache = new Map<string, YearWeek>();
@@ -93,7 +98,7 @@ export class YearMonthDay {
     }
 
     get week(): YearWeek {
-        return this.cache.getYearWeek(this.dayjs.format('GGGG-WW'));
+        return this.cache.getYearWeek(this.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK));
     }
 
     addDays(days: number): YearMonthDay {
@@ -120,7 +125,7 @@ export class YearWeek {
     ) {}
 
     get text(): string {
-        return this.firstDay.dayjs.format('YYYY-WW');
+        return this.firstDay.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK);
     }
 
     toString(): string {
@@ -160,7 +165,7 @@ export class YearWeek {
 
     addWeeks(weeks: number): YearWeek {
         const date = this.firstDay.dayjs.add(weeks, 'week');
-        const s = date.format('YYYY-WW');
+        const s = date.format(FORMAT_ISO_WEEK_YEAR_WEEK);
         return this.cache.getYearWeek(s);
     }
 
@@ -169,7 +174,7 @@ export class YearWeek {
     }
 
     static parse(s: string, cache: TemporalCache): YearWeek {
-        const [year, week] = s.split('-').map((s) => parseInt(s, 10));
+        const [year, week] = s.split('-W').map((s) => parseInt(s, 10));
         return new YearWeek(year, week, cache);
     }
 }