@genspectrum/dashboard-components 0.6.5 → 0.6.6

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

@@ -6,7 +6,7 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { compareTemporal, type Temporal, YearMonthDay } from '../../utils/temporal';
-import Tooltip from '../components/tooltip';
+import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { formatProportion } from '../shared/table/formatProportion';
 
@@ -37,23 +37,34 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`,
                 }}
             >
-                {shownMutations.map((mutation, i) => {
+                {shownMutations.map((mutation, rowIndex) => {
                     return (
                         <Fragment key={`fragment-${mutation.toString()}`}>
                             <div
                                 key={`mutation-${mutation.toString()}`}
-                                style={{ gridRowStart: i + 1, gridColumnStart: 1 }}
+                                style={{ gridRowStart: rowIndex + 1, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
                             </div>
-                            {dates.map((date, j) => {
+                            {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: i + 1, gridColumnStart: j + 2 }}
+                                        style={{ gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 }}
                                         key={`${mutation.toString()}-${date.toString()}`}
                                     >
-                                        <ProportionCell value={value} date={date} mutation={mutation} />
+                                        <ProportionCell
+                                            value={value}
+                                            date={date}
+                                            mutation={mutation}
+                                            tooltipPosition={tooltipPosition}
+                                        />
                                     </div>
                                 );
                             })}
@@ -65,11 +76,18 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     );
 };
 
+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>
@@ -84,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.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);
     }
 }

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

@@ -4,8 +4,22 @@ import { html } from 'lit';
 import './gs-mutations-over-time';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
-import { AGGREGATED_ENDPOINT, LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
+import {
+    AGGREGATED_ENDPOINT,
+    AMINO_ACID_MUTATIONS_ENDPOINT,
+    LAPIS_URL,
+    NUCLEOTIDE_MUTATIONS_ENDPOINT,
+} from '../../constants';
+import aggregated_byDay from '../../preact/mutationsOverTime/__mockData__/aggregated_byDay.json';
+import aggregated_byWeek from '../../preact/mutationsOverTime/__mockData__/aggregated_byWeek.json';
 import aggregated_date from '../../preact/mutationsOverTime/__mockData__/aggregated_date.json';
+import aminoAcidMutations_20_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_20_01_2024.json';
+import aminoAcidMutations_21_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_21_01_2024.json';
+import aminoAcidMutations_22_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_22_01_2024.json';
+import aminoAcidMutations_23_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_23_01_2024.json';
+import aminoAcidMutations_24_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_24_01_2024.json';
+import aminoAcidMutations_25_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_25_01_2024.json';
+import aminoAcidMutations_26_01_2024 from '../../preact/mutationsOverTime/__mockData__/aminoAcidMutations_26_01_2024.json';
 import nucleotideMutation_01 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_01.json';
 import nucleotideMutation_02 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_02.json';
 import nucleotideMutation_03 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_03.json';
@@ -13,6 +27,10 @@ import nucleotideMutation_04 from '../../preact/mutationsOverTime/__mockData__/n
 import nucleotideMutation_05 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_05.json';
 import nucleotideMutation_06 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_06.json';
 import nucleotideMutation_07 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_2024_07.json';
+import nucleotideMutation_week3 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week3_2024.json';
+import nucleotideMutation_week4 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week4_2024.json';
+import nucleotideMutation_week5 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week5_2024.json';
+import nucleotideMutation_week6 from '../../preact/mutationsOverTime/__mockData__/nucleotideMutations_week6_2024.json';
 import { type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
 
 const codeExample = String.raw`
@@ -85,7 +103,7 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
     `,
 };
 
-export const Default: StoryObj<Required<MutationsOverTimeProps>> = {
+export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
     parameters: {
         fetchMock: {
@@ -223,3 +241,237 @@ export const Default: StoryObj<Required<MutationsOverTimeProps>> = {
         },
     },
 };
+
+export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' },
+        granularity: 'week',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated_dates',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-02-11',
+                            fields: ['date'],
+                            pangoLineage: 'JN.1*',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_byWeek,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutation_week3',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-15',
+                            dateTo: '2024-01-21',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_week3,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutation_week4',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-22',
+                            dateTo: '2024-01-28',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_week4,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutation_week5',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-29',
+                            dateTo: '2024-02-04',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_week5,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'nucleotideMutation_week6',
+                        url: NUCLEOTIDE_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-02-05',
+                            dateTo: '2024-02-11',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: nucleotideMutation_week6,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26' },
+        granularity: 'day',
+        sequenceType: 'amino acid',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated_byDay',
+                        url: AGGREGATED_ENDPOINT,
+                        body: { pangoLineage: 'JN.1*', dateFrom: '2024-01-20', dateTo: '2024-01-26', fields: ['date'] },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregated_byDay,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_20_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-20',
+                            dateTo: '2024-01-20',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_20_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_21_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-21',
+                            dateTo: '2024-01-21',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_21_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_22_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-22',
+                            dateTo: '2024-01-22',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_22_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_23_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-23',
+                            dateTo: '2024-01-23',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_23_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_24_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-24',
+                            dateTo: '2024-01-24',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_24_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_25_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-25',
+                            dateTo: '2024-01-25',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_25_01_2024,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aminoAcidMutations_26_01_2024',
+                        url: AMINO_ACID_MUTATIONS_ENDPOINT,
+                        body: {
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2024-01-26',
+                            dateTo: '2024-01-26',
+                            minProportion: 0.001,
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aminoAcidMutations_26_01_2024,
+                    },
+                },
+            ],
+        },
+    },
+};