@genspectrum/dashboard-components 0.6.5 → 0.6.7

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

@@ -1,4 +1,5 @@
-import { Fragment, type FunctionComponent } from 'preact';
+import { Fragment, type FunctionComponent, type RefObject } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import {
     type MutationOverTimeDataGroupedByMutation,
@@ -6,22 +7,28 @@ 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 { singleGraphColorRGBByName } from '../shared/charts/colors';
+import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
+import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataGroupedByMutation;
+    colorScale: ColorScale;
 }
 
 const MAX_NUMBER_OF_GRID_ROWS = 100;
+const MUTATION_CELL_WIDTH_REM = 8;
 
-const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data }) => {
+const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data, colorScale }) => {
     const allMutations = data.getFirstAxisKeys();
     const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
 
     const dates = data.getSecondAxisKeys().sort((a, b) => compareTemporal(a, b));
 
+    const [showProportionText, setShowProportionText] = useState(false);
+    const gridRef = useRef<HTMLDivElement>(null);
+    useShowProportion(gridRef, dates.length, setShowProportionText);
+
     return (
         <>
             {allMutations.length > MAX_NUMBER_OF_GRID_ROWS && (
@@ -31,29 +38,43 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                 </div>
             )}
             <div
+                ref={gridRef}
                 style={{
                     display: 'grid',
                     gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-                    gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`,
+                    gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 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}
+                                            showProportionText={showProportionText}
+                                            colorScale={colorScale}
+                                        />
                                     </div>
                                 );
                             })}
@@ -65,16 +86,53 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     );
 };
 
+function useShowProportion(
+    gridRef: RefObject<HTMLDivElement>,
+    girdColumns: number,
+    setShowProportionText: (value: ((prevState: boolean) => boolean) | boolean) => void,
+) {
+    useEffect(() => {
+        const checkWidth = () => {
+            if (gridRef.current) {
+                const width = gridRef.current.getBoundingClientRect().width;
+                const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
+                const maxWidthProportionText = 28;
+
+                setShowProportionText(widthPerDate > maxWidthProportionText);
+            }
+        };
+
+        checkWidth();
+        window.addEventListener('resize', checkWidth);
+
+        return () => {
+            window.removeEventListener('resize', checkWidth);
+        };
+    }, [girdColumns, gridRef, setShowProportionText]);
+}
+
+const remToPx = (rem: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+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;
+    showProportionText: boolean;
+    colorScale: ColorScale;
+}> = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
     const tooltipContent = (
         <div>
             <p>
-                <span className='font-bold'>{date.englishName()}</span> ({timeIntervalDisplay(date)})
+                <span className='font-bold'>{date.englishName()}</span>
             </p>
+            <p>({timeIntervalDisplay(date)})</p>
             <p>{mutation.code}</p>
             <p>Proportion: {formatProportion(value.proportion)}</p>
             <p>Count: {value.count}</p>
@@ -82,21 +140,19 @@ const ProportionCell: FunctionComponent<{
     );
 
     return (
-        <>
-            <div className={'py-1'}>
-                <Tooltip content={tooltipContent}>
-                    <div
-                        style={{
-                            backgroundColor: backgroundColor(value.proportion),
-                            color: textColor(value.proportion),
-                        }}
-                        className='text-center hover:font-bold text-xs'
-                    >
-                        {formatProportion(value.proportion, 0)}
-                    </div>
-                </Tooltip>
-            </div>
-        </>
+        <div className={'py-1 w-full h-full'}>
+            <Tooltip content={tooltipContent} position={tooltipPosition}>
+                <div
+                    style={{
+                        backgroundColor: getColorWithingScale(value.proportion, colorScale),
+                        color: getTextColorForScale(value.proportion, colorScale),
+                    }}
+                    className={`w-full h-full text-center hover:font-bold text-xs group`}
+                >
+                    {showProportionText ? formatProportion(value.proportion, 0) : undefined}
+                </div>
+            </Tooltip>
+        </div>
     );
 };
 
@@ -108,19 +164,6 @@ const timeIntervalDisplay = (date: Temporal) => {
     return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
 };
 
-const backgroundColor = (proportion: number) => {
-    // TODO(#353): Make minAlpha and maxAlpha configurable
-    const minAlpha = 0.0;
-    const maxAlpha = 1;
-
-    const alpha = minAlpha + (maxAlpha - minAlpha) * proportion;
-    return singleGraphColorRGBByName('indigo', alpha);
-};
-
-const textColor = (proportion: number) => {
-    return proportion > 0.5 ? 'white' : 'black';
-};
-
 const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
     return <div className='text-center'>{mutation.toString()}</div>;
 };

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

@@ -8,8 +8,12 @@ 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 { type ColorScale } from '../components/color-scale-selector';
+import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
+import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Info from '../components/info';
@@ -88,6 +92,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     views,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
+    const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
     const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
@@ -111,21 +116,25 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             case 'grid':
                 return {
                     title: 'Grid',
-                    content: <MutationsOverTimeGrid data={filteredData} />,
+                    content: <MutationsOverTimeGrid data={filteredData} colorScale={colorScale} />,
                 };
         }
     };
 
     const tabs = views.map((view) => getTab(view));
 
-    const toolbar = () => (
+    const toolbar = (activeTab: string) => (
         <Toolbar
+            activeTab={activeTab}
             displayedSegments={displayedSegments}
             setDisplayedSegments={setDisplayedSegments}
             displayedMutationTypes={displayedMutationTypes}
             setDisplayedMutationTypes={setDisplayedMutationTypes}
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
+            filteredData={filteredData}
+            colorScale={colorScale}
+            setColorScale={setColorScale}
         />
     );
 
@@ -133,38 +142,68 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 };
 
 type ToolbarProps = {
+    activeTab: string;
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (segments: DisplayedSegment[]) => void;
     displayedMutationTypes: DisplayedMutationType[];
     setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    filteredData: MutationOverTimeDataGroupedByMutation;
+    colorScale: ColorScale;
+    setColorScale: Dispatch<StateUpdater<ColorScale>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
+    activeTab,
     displayedSegments,
     setDisplayedSegments,
     displayedMutationTypes,
     setDisplayedMutationTypes,
     proportionInterval,
     setProportionInterval,
+    filteredData,
+    colorScale,
+    setColorScale,
 }) => {
     return (
         <>
+            {activeTab === 'Grid' && (
+                <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            )}
             <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             <MutationTypeSelector
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
                 displayedMutationTypes={displayedMutationTypes}
             />
-            <>
-                <ProportionSelectorDropdown
-                    proportionInterval={proportionInterval}
-                    setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
-                    setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
-                />
-                {/*    TODO(#362): Add download button */}
-            </>
-            <Info height={'100px'}>Info for mutations over time</Info>
+            <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>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/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -156,7 +156,7 @@ const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleTy
 };
 
 const NumberSequencesOverTimeInfo = () => (
-    <Info height='100px'>
+    <Info>
         <InfoHeadline1>Number of sequences over time</InfoHeadline1>
         <InfoParagraph>
             <a href='https://github.com/GenSpectrum/dashboard-components/issues/315'>TODO</a>

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -236,7 +236,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 
 const PrevalenceOverTimeInfo: FunctionComponent = () => {
     return (
-        <Info height={'100px'}>
+        <Info>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
             <InfoParagraph>Prevalence over time info.</InfoParagraph>
         </Info>

package/src/preact/shared/charts/colors.ts

@@ -12,7 +12,7 @@ const ColorsRGB = {
     purple: [170, 68, 153],
 };
 
-type GraphColor = keyof typeof ColorsRGB;
+export type GraphColor = keyof typeof ColorsRGB;
 
 export const singleGraphColorRGBAById = (id: number, alpha = 1) => {
     const keys = Object.keys(ColorsRGB) as GraphColor[];

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);
     }
 }