@genspectrum/dashboard-components 0.16.2 → 0.16.4

package/src/preact/components/annotated-mutation.tsx

@@ -0,0 +1,84 @@
+import DOMPurify from 'dompurify';
+import { useRef } from 'gridjs';
+import { Fragment, type FunctionComponent, type RefObject } from 'preact';
+
+import type { SequenceType } from '../../types';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
+import { ButtonWithModalDialog, useModalRef } from './modal';
+
+export type AnnotatedMutationProps = {
+    mutation: Substitution | Deletion;
+    sequenceType: SequenceType;
+};
+
+export const AnnotatedMutation: FunctionComponent<AnnotatedMutationProps> = (props) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+    const modalRef = useModalRef();
+
+    return <AnnotatedMutationWithoutContext {...props} annotationsProvider={annotationsProvider} modalRef={modalRef} />;
+};
+
+type GridJsAnnotatedMutationProps = AnnotatedMutationProps & {
+    annotationsProvider: ReturnType<typeof useMutationAnnotationsProvider>;
+};
+
+/**
+ * GridJS internally also uses Preact, but it uses its own Preact instance:
+ * - Our Preact contexts are not available in GridJS. We need to inject context content as long as we're in our Preact instance.
+ * - We must use the GridJS re-exports of the Preact hooks. I'm not sure why.
+ */
+export const GridJsAnnotatedMutation: FunctionComponent<GridJsAnnotatedMutationProps> = (props) => {
+    const modalRef = useRef<HTMLDialogElement>(null);
+
+    return <AnnotatedMutationWithoutContext {...props} modalRef={modalRef} />;
+};
+
+type AnnotatedMutationWithoutContextProps = GridJsAnnotatedMutationProps & {
+    modalRef: RefObject<HTMLDialogElement>;
+};
+
+const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithoutContextProps> = ({
+    mutation,
+    sequenceType,
+    annotationsProvider,
+    modalRef,
+}) => {
+    const mutationAnnotations = annotationsProvider(mutation.code, sequenceType);
+
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return mutation.code;
+    }
+
+    const modalContent = (
+        <div className='block'>
+            <InfoHeadline1>Annotations for {mutation.code}</InfoHeadline1>
+            {mutationAnnotations.map((annotation) => (
+                <Fragment key={annotation.name}>
+                    <InfoHeadline2>{annotation.name}</InfoHeadline2>
+                    <InfoParagraph>
+                        {/* eslint-disable-next-line react/no-danger */}
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
+                    </InfoParagraph>
+                </Fragment>
+            ))}
+        </div>
+    );
+
+    return (
+        <ButtonWithModalDialog buttonClassName={'select-text'} modalContent={modalContent} modalRef={modalRef}>
+            {mutation.code}
+            <sup>
+                {mutationAnnotations
+                    .map((annotation) => annotation.symbol)
+                    .map((symbol, index) => (
+                        <Fragment key={symbol}>
+                            <span className='text-red-600'>{symbol}</span>
+                            {index !== mutationAnnotations.length - 1 && ','}
+                        </Fragment>
+                    ))}
+            </sup>
+        </ButtonWithModalDialog>
+    );
+};

package/src/preact/components/error-display.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'preact/hooks';
 import { type ZodError } from 'zod';
 
 import { InfoHeadline1, InfoParagraph } from './info';
-import { Modal, useModalRef } from './modal';
+import { Modal } from './modal';
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
 
 export const GS_ERROR_EVENT_TYPE = 'gs-error';
@@ -48,7 +48,6 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
     console.error(error);
 
     const containerRef = useRef<HTMLInputElement>(null);
-    const modalRef = useModalRef();
 
     useEffect(() => {
         containerRef.current?.dispatchEvent(new ErrorEvent(error));
@@ -68,15 +67,16 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                     {details !== undefined && (
                         <>
                             {' '}
-                            <button
-                                className='underline hover:text-gray-400'
-                                onClick={() => modalRef.current?.showModal()}
+                            <Modal
+                                buttonClassName='underline hover:text-gray-400'
+                                modalContent={
+                                    <>
+                                        <InfoHeadline1>{details.headline}</InfoHeadline1>
+                                        <InfoParagraph>{details.message}</InfoParagraph>
+                                    </>
+                                }
                             >
                                 Show details.
-                            </button>
-                            <Modal modalRef={modalRef}>
-                                <InfoHeadline1>{details.headline}</InfoHeadline1>
-                                <InfoParagraph>{details.message}</InfoParagraph>
                             </Modal>
                         </>
                     )}

package/src/preact/components/info.tsx

@@ -1,34 +1,27 @@
 import { type FunctionComponent } from 'preact';
 
-import { Modal, useModalRef } from './modal';
+import { Modal } from './modal';
 
 const Info: FunctionComponent = ({ children }) => {
-    const modalRef = useModalRef();
-
-    const toggleHelp = () => {
-        modalRef.current?.showModal();
-    };
-
     return (
         <div className='relative'>
-            <button type='button' className='btn btn-xs' onClick={toggleHelp}>
+            <Modal buttonClassName='btn btn-xs' modalContent={children}>
                 ?
-            </button>
-            <Modal modalRef={modalRef}>{children}</Modal>
+            </Modal>
         </div>
     );
 };
 
 export const InfoHeadline1: FunctionComponent = ({ children }) => {
-    return <h1 className='text-lg font-bold'>{children}</h1>;
+    return <h1 className='text-justify text-lg font-bold'>{children}</h1>;
 };
 
 export const InfoHeadline2: FunctionComponent = ({ children }) => {
-    return <h2 className='text-base font-bold mt-4'>{children}</h2>;
+    return <h2 className='text-justify text-base font-bold mt-4'>{children}</h2>;
 };
 
 export const InfoParagraph: FunctionComponent = ({ children }) => {
-    return <p className='text-justify my-1'>{children}</p>;
+    return <p className='text-justify text-base font-normal my-1'>{children}</p>;
 };
 
 export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {

package/src/preact/components/modal.stories.tsx

@@ -1,35 +1,23 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
-import { type FunctionComponent } from 'preact';
 
-import { Modal, type ModalProps, useModalRef } from './modal';
+import { Modal, ModalDialog, type ModalProps } from './modal';
 
 const meta: Meta<ModalProps> = {
     title: 'Component/Modal',
-    component: Modal,
+    component: ModalDialog,
     parameters: { fetchMock: {} },
 };
 
 export default meta;
 
-const WrapperWithButtonThatOpensTheModal: FunctionComponent = () => {
-    const modalRef = useModalRef();
-
-    return (
-        <div>
-            <button className='btn' onClick={() => modalRef.current?.showModal()}>
-                Open modal
-            </button>
-            <Modal modalRef={modalRef}>
-                <h1>Modal content</h1>
-            </Modal>
-        </div>
-    );
-};
-
 export const ModalStory: StoryObj<ModalProps> = {
     render: () => {
-        return <WrapperWithButtonThatOpensTheModal />;
+        return (
+            <Modal buttonClassName='btn' modalContent={<h1>Modal content</h1>}>
+                Open modal
+            </Modal>
+        );
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);

package/src/preact/components/modal.tsx

@@ -1,15 +1,46 @@
-import { type FunctionComponent, type Ref } from 'preact';
+import { type ComponentChildren, type FunctionComponent, type Ref, type RefObject } from 'preact';
 import { useRef } from 'preact/hooks';
 
-export type ModalProps = {
-    modalRef: Ref<HTMLDialogElement>;
+export type ModalButtonProps = {
+    buttonClassName?: string;
+    modalContent: ComponentChildren;
+};
+
+export const Modal: FunctionComponent<ModalButtonProps> = (props) => {
+    const modalRef = useModalRef();
+
+    return <ButtonWithModalDialog {...props} modalRef={modalRef} />;
+};
+
+type ButtonWithModalDialogProps = ModalButtonProps & {
+    modalRef: RefObject<HTMLDialogElement>;
+};
+
+export const ButtonWithModalDialog: FunctionComponent<ButtonWithModalDialogProps> = ({
+    children,
+    buttonClassName,
+    modalContent,
+    modalRef,
+}) => {
+    return (
+        <>
+            <button type='button' className={buttonClassName} onClick={() => modalRef.current?.showModal()}>
+                {children}
+            </button>
+            <ModalDialog modalRef={modalRef}>{modalContent}</ModalDialog>
+        </>
+    );
 };
 
 export function useModalRef() {
     return useRef<HTMLDialogElement>(null);
 }
 
-export const Modal: FunctionComponent<ModalProps> = ({ children, modalRef }) => {
+export type ModalProps = {
+    modalRef: Ref<HTMLDialogElement>;
+};
+
+export const ModalDialog: FunctionComponent<ModalProps> = ({ children, modalRef }) => {
     return (
         <dialog ref={modalRef} className={'modal modal-bottom sm:modal-middle'}>
             <div className='modal-box sm:max-w-5xl'>

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -3,7 +3,10 @@ import { type FunctionComponent } from 'preact';
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import type { SequenceType } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -13,20 +16,30 @@ export interface MutationsTableProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
     pageSize: boolean | number;
+    sequenceType: SequenceType;
 }
 
 export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({
     data,
     proportionInterval,
     pageSize,
+    sequenceType,
 }) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+
     const headers = [
         {
             name: 'Mutation',
             sort: {
                 compare: sortSubstitutionsAndDeletions,
             },
-            formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
+            formatter: (cell: SubstitutionClass | DeletionClass) => (
+                <GridJsAnnotatedMutation
+                    mutation={cell}
+                    sequenceType={sequenceType}
+                    annotationsProvider={annotationsProvider}
+                />
+            ),
         },
         {
             name: 'Prevalence',

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -1,10 +1,13 @@
 import { type ActiveElement, Chart, type ChartConfiguration, type ChartEvent, registerables } from 'chart.js';
 import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
-import { type FunctionComponent } from 'preact';
+import { Fragment, type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type SequenceType } from '../../types';
+import { DeletionClass, SubstitutionClass } from '../../utils/mutations';
+import { AnnotatedMutation } from '../components/annotated-mutation';
 import GsChart from '../components/chart';
 import { type ProportionInterval } from '../components/proportion-selector';
 
@@ -14,12 +17,14 @@ export interface MutationComparisonVennProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
     maintainAspectRatio: boolean;
+    sequenceType: SequenceType;
 }
 
 export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennProps> = ({
     data,
     proportionInterval,
     maintainAspectRatio,
+    sequenceType,
 }) => {
     const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
 
@@ -105,22 +110,48 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <p class='flex flex-wrap break-words m-2'>{getSelectedMutationsDescription(selectedDatasetIndex, sets)}</p>
+            <p class='flex flex-wrap break-words m-2'>
+                <SelectedMutationsDescription
+                    selectedDatasetIndex={selectedDatasetIndex}
+                    sets={sets}
+                    sequenceType={sequenceType}
+                />
+            </p>
         </div>
     );
 };
 
 const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
 
-function getSelectedMutationsDescription(
-    selectedDatasetIndex: number | null,
-    sets: ReturnType<typeof extractSets<string>>,
-) {
+type SelectedMutationsDescriptionProps = {
+    selectedDatasetIndex: number | null;
+    sets: ReturnType<typeof extractSets<string>>;
+    sequenceType: SequenceType;
+};
+
+const SelectedMutationsDescription: FunctionComponent<SelectedMutationsDescriptionProps> = ({
+    selectedDatasetIndex,
+    sets,
+    sequenceType,
+}) => {
     if (selectedDatasetIndex === null) {
         return noElementSelectedMessage;
     }
 
     const values = sets.datasets[0].data[selectedDatasetIndex].values;
     const label = sets.datasets[0].data[selectedDatasetIndex].label;
-    return `${label}: ${values.join(', ')}` || '';
-}
+    return (
+        <span>
+            {`${label}: `}
+            {values
+                .map((value) => SubstitutionClass.parse(value) ?? DeletionClass.parse(value))
+                .filter((value) => value !== null)
+                .map((value, index) => (
+                    <Fragment key={value}>
+                        {index > 0 && ', '}
+                        <AnnotatedMutation mutation={value} sequenceType={sequenceType} />
+                    </Fragment>
+                ))}
+        </span>
+    );
+};

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -7,7 +7,9 @@ import { MutationComparison, type MutationComparisonProps } from './mutation-com
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const dateToSomeDataset = '2022-01-01';
 
@@ -74,20 +76,39 @@ const meta: Meta<MutationComparisonProps> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['G199-', 'C3037T'],
+        aminoAcidMutations: ['N:G204R'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'A23403G'],
+        aminoAcidMutations: ['ORF1a:I2230T'],
+    },
+];
+
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
-        <LapisUrlContextProvider value={LAPIS_URL}>
-            <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationComparison
-                    lapisFilters={args.lapisFilters}
-                    sequenceType={args.sequenceType}
-                    views={args.views}
-                    width={args.width}
-                    height={args.height}
-                    pageSize={args.pageSize}
-                />
-            </ReferenceGenomeContext.Provider>
-        </LapisUrlContextProvider>
+        <MutationAnnotationsContextProvider value={mutationAnnotations}>
+            <LapisUrlContextProvider value={LAPIS_URL}>
+                <ReferenceGenomeContext.Provider value={referenceGenome}>
+                    <MutationComparison
+                        lapisFilters={args.lapisFilters}
+                        sequenceType={args.sequenceType}
+                        views={args.views}
+                        width={args.width}
+                        height={args.height}
+                        pageSize={args.pageSize}
+                    />
+                </ReferenceGenomeContext.Provider>
+            </LapisUrlContextProvider>
+        </MutationAnnotationsContextProvider>
     ),
 };
 
@@ -114,6 +135,9 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         width: '100%',
         pageSize: 10,
     },
+    play: async ({ canvasElement }) => {
+        await expectMutationAnnotation(canvasElement, 'C3037T');
+    },
 };
 
 export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -104,6 +104,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
                             pageSize={originalComponentProps.pageSize}
+                            sequenceType={originalComponentProps.sequenceType}
                         />
                     ),
                 };
@@ -115,6 +116,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
                             maintainAspectRatio={maintainAspectRatio}
+                            sequenceType={originalComponentProps.sequenceType}
                         />
                     ),
                 };

package/src/preact/mutations/mutations-table.tsx

@@ -2,8 +2,10 @@ import { type FunctionComponent } from 'preact';
 import { useMemo } from 'preact/hooks';
 
 import { getMutationsTableData } from './getMutationsTableData';
-import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -15,6 +17,7 @@ export interface MutationsTableProps {
     overallVariantCount: number;
     proportionInterval: ProportionInterval;
     pageSize: boolean | number;
+    sequenceType: SequenceType;
 }
 
 const MutationsTable: FunctionComponent<MutationsTableProps> = ({
@@ -23,7 +26,10 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({
     overallVariantCount,
     proportionInterval,
     pageSize,
+    sequenceType,
 }) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+
     const headers = [
         {
             name: 'Mutation',
@@ -32,7 +38,13 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({
                     return sortSubstitutionsAndDeletions(a, b);
                 },
             },
-            formatter: (cell: SubstitutionClass | DeletionClass) => cell.toString(),
+            formatter: (cell: SubstitutionClass | DeletionClass) => (
+                <GridJsAnnotatedMutation
+                    mutation={cell}
+                    sequenceType={sequenceType}
+                    annotationsProvider={annotationsProvider}
+                />
+            ),
         },
         {
             name: 'Type',

package/src/preact/mutations/mutations.stories.tsx

@@ -14,7 +14,9 @@ import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import baselineNucleotideMutations from '../../preact/mutations/__mockData__/baselineNucleotideMutations.json';
 import overallVariantCount from '../../preact/mutations/__mockData__/overallVariantCount.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsProps> = {
     title: 'Visualization/Mutations',
@@ -37,11 +39,30 @@ const meta: Meta<MutationsProps> = {
 
 export default meta;
 
+const mutationAnnotations = [
+    {
+        name: 'I am a mutation annotation!',
+        description: 'This describes what is special about these mutations.',
+        symbol: '#',
+        nucleotideMutations: ['C241T', 'C3037T'],
+        aminoAcidMutations: ['N:G204R', 'N:S235F'],
+    },
+    {
+        name: 'I am another mutation annotation!',
+        description: 'This describes what is special about these other mutations.',
+        symbol: '+',
+        nucleotideMutations: ['C3037T', 'C11750T'],
+        aminoAcidMutations: ['ORF1a:S2255F'],
+    },
+];
+
 const Template = {
     render: (args: MutationsProps) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <Mutations {...args} />
+                <MutationAnnotationsContextProvider value={mutationAnnotations}>
+                    <Mutations {...args} />
+                </MutationAnnotationsContextProvider>
             </ReferenceGenomeContext.Provider>
         </LapisUrlContextProvider>
     ),
@@ -137,3 +158,14 @@ export const GridTab: StoryObj<MutationsProps> = {
         });
     },
 };
+
+export const TableTab: StoryObj<MutationsProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        views: ['table'],
+    },
+    play: async ({ canvasElement }) => {
+        await expectMutationAnnotation(canvasElement, 'C241T');
+    },
+};

package/src/preact/mutations/mutations.tsx

@@ -109,6 +109,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, or
                             overallVariantCount={mutationsData.overallVariantCount}
                             proportionInterval={proportionInterval}
                             pageSize={originalComponentProps.pageSize}
+                            sequenceType={originalComponentProps.sequenceType}
                         />
                     ),
                 };

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

@@ -3,8 +3,10 @@ import { useRef } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
+import { type SequenceType } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { AnnotatedMutation } from '../components/annotated-mutation';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
@@ -13,6 +15,7 @@ export interface MutationsOverTimeGridProps {
     data: MutationOverTimeDataMap;
     colorScale: ColorScale;
     maxNumberOfGridRows?: number;
+    sequenceType: SequenceType;
 }
 
 const MAX_NUMBER_OF_GRID_ROWS = 100;
@@ -22,6 +25,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     data,
     colorScale,
     maxNumberOfGridRows,
+    sequenceType,
 }) => {
     const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
     const allMutations = data.getFirstAxisKeys();
@@ -66,8 +70,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 <div
                                     key={`mutation-${mutation.code}`}
                                     style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
+                                    className='flex items-center justify-center'
                                 >
-                                    <MutationCell mutation={mutation} />
+                                    <AnnotatedMutation mutation={mutation} sequenceType={sequenceType} />
                                 </div>
                                 {dates.map((date, columnIndex) => {
                                     const value = data.get(mutation, date) ?? null;
@@ -141,9 +146,12 @@ const ProportionCell: FunctionComponent<{
                 <>
                     <p>Proportion: {formatProportion(value.proportion)}</p>
                     {value.count !== null && value.totalCount !== null && (
-                        <p>
-                            Count: {value.count} / {value.totalCount} total
-                        </p>
+                        <>
+                            <p>
+                                {value.count} / {totalCountWithCoverage(value.count, value.proportion)} with coverage
+                            </p>
+                            <p>{value.totalCount} in timeframe</p>
+                        </>
                     )}
                 </>
             )}
@@ -169,6 +177,13 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
+function totalCountWithCoverage(count: number, proportion: number) {
+    if (count === 0) {
+        return 0;
+    }
+    return Math.round(count / proportion);
+}
+
 const timeIntervalDisplay = (date: TemporalClass) => {
     if (date instanceof YearMonthDayClass) {
         return date.toString();
@@ -177,8 +192,4 @@ const timeIntervalDisplay = (date: TemporalClass) => {
     return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
 };
 
-const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
-    return <div>{mutation.code}</div>;
-};
-
 export default MutationsOverTimeGrid;