@genspectrum/dashboard-components 0.6.6 → 0.6.8

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,29 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { compareTemporal, type Temporal, YearMonthDay } from '../../utils/temporal';
+import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
-import { singleGraphColorRGBByName } from '../shared/charts/colors';
+import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 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 allMutations = data.getFirstAxisKeys();
+const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({ data, colorScale }) => {
+    const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
     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,10 +39,11 @@ 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, rowIndex) => {
@@ -64,6 +73,8 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                             date={date}
                                             mutation={mutation}
                                             tooltipPosition={tooltipPosition}
+                                            showProportionText={showProportionText}
+                                            colorScale={colorScale}
                                         />
                                     </div>
                                 );
@@ -76,6 +87,33 @@ 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';
@@ -87,12 +125,15 @@ const ProportionCell: FunctionComponent<{
     date: Temporal;
     mutation: Substitution | Deletion;
     tooltipPosition: TooltipPosition;
-}> = ({ value, mutation, date, 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>
@@ -100,21 +141,19 @@ const ProportionCell: FunctionComponent<{
     );
 
     return (
-        <>
-            <div className={'py-1'}>
-                <Tooltip content={tooltipContent} position={tooltipPosition}>
-                    <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>
     );
 };
 
@@ -126,19 +165,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

@@ -11,6 +11,8 @@ import { type LapisFilter, type SequenceType, type TemporalGranularity } from '.
 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';
@@ -22,6 +24,7 @@ import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
+import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { useQuery } from '../useQuery';
 
 export type View = 'grid';
@@ -90,6 +93,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[]>([
@@ -113,15 +117,16 @@ 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}
@@ -129,6 +134,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
             filteredData={filteredData}
+            colorScale={colorScale}
+            setColorScale={setColorScale}
         />
     );
 
@@ -136,6 +143,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 };
 
 type ToolbarProps = {
+    activeTab: string;
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (segments: DisplayedSegment[]) => void;
     displayedMutationTypes: DisplayedMutationType[];
@@ -143,9 +151,12 @@ type ToolbarProps = {
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
     filteredData: MutationOverTimeDataGroupedByMutation;
+    colorScale: ColorScale;
+    setColorScale: Dispatch<StateUpdater<ColorScale>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
+    activeTab,
     displayedSegments,
     setDisplayedSegments,
     displayedMutationTypes,
@@ -153,9 +164,14 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     proportionInterval,
     setProportionInterval,
     filteredData,
+    colorScale,
+    setColorScale,
 }) => {
     return (
         <>
+            {activeTab === 'Grid' && (
+                <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            )}
             <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             <MutationTypeSelector
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
@@ -171,7 +187,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />
-            <Info height={'100px'}>Info for mutations over time</Info>
+            <Info>Info for mutations over time</Info>
         </>
     );
 };
@@ -179,16 +195,19 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 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() },
-        );
-    });
+    return filteredData
+        .getFirstAxisKeys()
+        .sort(sortSubstitutionsAndDeletions)
+        .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/preact/shared/sort/sortSubstitutionsAndDeletions.spec.ts

@@ -32,7 +32,7 @@ describe('sortSubstitutionsAndDeletions with no segments', () => {
 describe('sortSubstitutionsAndDeletions with segments', () => {
     test('should sort for segment first', () => {
         const a = new Substitution('AA1', 'A', 'B', 123);
-        const b = new Substitution('BB1', 'A', 'B', 234);
+        const b = new Substitution('BB1', 'A', 'B', 123);
 
         expect(sortSubstitutionsAndDeletions(a, b)).toBeLessThan(0);
         expect(sortSubstitutionsAndDeletions(b, a)).toBeGreaterThan(0);

package/src/preact/shared/sort/sortSubstitutionsAndDeletions.ts

@@ -2,7 +2,7 @@ import { Deletion, type Substitution } from '../../../utils/mutations';
 
 export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
     if (a.segment !== b.segment) {
-        compareSegments(a.segment, b.segment);
+        return compareSegments(a.segment, b.segment);
     }
 
     if (a.position !== b.position) {

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

@@ -475,3 +475,11 @@ export const AminoAcidMutationsByDay: StoryObj<Required<MutationsOverTimeProps>>
         },
     },
 };
+
+export const HideProportionOnSmallScreen: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...ByMonth,
+    args: {
+        ...ByMonth.args,
+        width: '300px',
+    },
+};

package/src/preact/shared/icons/DeleteIcon.tsx

@@ -1,17 +0,0 @@
-import type { FunctionComponent } from 'preact';
-
-export const DeleteIcon: FunctionComponent = () => {
-    return (
-        <svg
-            fill='currentColor'
-            stroke-width='0'
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 16 16'
-            style='overflow: visible; color: currentcolor;'
-            height='1em'
-            width='1em'
-        >
-            <path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z' />
-        </svg>
-    );
-};