@genspectrum/dashboard-components 0.1.2 → 0.1.4

package/src/preact/mutationComparison/getMutationComparisonTableData.ts

@@ -1,35 +1,53 @@
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 
 type Proportions = {
     [displayName: string]: number;
 };
 
+type MutationComparisonRow = {
+    mutation: Substitution | Deletion;
+    proportions: Proportions;
+};
+
 export function getMutationComparisonTableData(data: Dataset<MutationData>, proportionInterval: ProportionInterval) {
-    const mutationsToProportions = new Map<string, Proportions>();
+    const mutationsToProportions = new Map<string, MutationComparisonRow>();
 
     for (const mutationData of data.content) {
         for (const mutationEntry of mutationData.data) {
-            const mutation = mutationEntry.mutation.toString();
-            const proportions = mutationsToProportions.get(mutation) || {};
-            proportions[mutationData.displayName] = mutationEntry.proportion;
-            mutationsToProportions.set(mutation, proportions);
+            const mutationKey = mutationEntry.mutation.toString();
+            const existingRow = mutationsToProportions.get(mutationKey);
+
+            if (!existingRow) {
+                mutationsToProportions.set(
+                    mutationKey,
+                    initializeMutationRow(mutationEntry.mutation, mutationData.displayName, mutationEntry.proportion),
+                );
+            } else {
+                existingRow.proportions = updateProportions(
+                    existingRow.proportions,
+                    mutationData.displayName,
+                    mutationEntry.proportion,
+                );
+                mutationsToProportions.set(mutationKey, existingRow);
+            }
         }
     }
 
-    return [...mutationsToProportions.entries()]
-        .map(([mutation, proportions]) => {
+    return [...mutationsToProportions.values()]
+        .map((row) => {
             return {
-                mutation,
+                mutation: row.mutation,
                 ...data.content
                     .map((mutationData) => {
                         return {
-                            [`${mutationData.displayName} prevalence`]: proportions[mutationData.displayName] || 0,
+                            [`${mutationData.displayName} prevalence`]: row.proportions[mutationData.displayName] || 0,
                         };
                     })
                     .reduce((acc, val) => ({ ...acc, ...val }), {}),
-            } as { mutation: string } & Proportions;
+            } as { mutation: Substitution | Deletion } & Proportions;
         })
         .filter((row) =>
             Object.values(row).some(
@@ -38,3 +56,20 @@ export function getMutationComparisonTableData(data: Dataset<MutationData>, prop
             ),
         );
 }
+
+function initializeMutationRow(
+    mutation: Substitution | Deletion,
+    displayName: string,
+    proportion: number,
+): MutationComparisonRow {
+    return {
+        mutation,
+        proportions: {
+            [displayName]: proportion,
+        },
+    };
+}
+
+function updateProportions(proportions: Proportions, displayName: string, proportion: number): Proportions {
+    return { ...proportions, [displayName]: proportion };
+}

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

@@ -3,6 +3,7 @@ import { type FunctionComponent } from 'preact';
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -14,30 +15,27 @@ export interface MutationsTableProps {
 }
 
 export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
-    const getHeaders = () => {
-        return [
-            {
-                name: 'Mutation',
-                sort: {
-                    compare: (a: string, b: string) => {
-                        return sortSubstitutionsAndDeletions(a, b);
-                    },
-                },
+    const headers = [
+        {
+            name: 'Mutation',
+            sort: {
+                compare: sortSubstitutionsAndDeletions,
             },
-            {
-                name: 'Prevalence',
-                columns: data.content.map((mutationData) => {
-                    return {
-                        name: mutationData.displayName,
-                        sort: true,
-                        formatter: (cell: number) => formatProportion(cell),
-                    };
-                }),
-            },
-        ];
-    };
+            formatter: (cell: Substitution | Deletion) => cell.toString(),
+        },
+        {
+            name: 'Prevalence',
+            columns: data.content.map((mutationData) => {
+                return {
+                    name: mutationData.displayName,
+                    sort: true,
+                    formatter: (cell: number) => formatProportion(cell),
+                };
+            }),
+        },
+    ];
 
     const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={headers} pagination={true} />;
 };

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

@@ -64,6 +64,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             type: 'venn',
             data: sets,
             options: {
+                maintainAspectRatio: false,
                 scales: {
                     x: {
                         ticks: {
@@ -114,9 +115,11 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     }
 
     return (
-        <>
-            <GsChart configuration={config} />
+        <div className='h-full flex flex-col'>
+            <div className='flex-1'>
+                <GsChart configuration={config} />
+            </div>
             <div class='flex flex-wrap break-words m-2' ref={divRef} />
-        </>
+        </div>
     );
 };

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

@@ -27,6 +27,7 @@ const meta: Meta<MutationComparisonProps> = {
             options: ['table', 'venn'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
     parameters: {
         fetchMock: {
@@ -75,7 +76,12 @@ const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationComparison variants={args.variants} sequenceType={args.sequenceType} views={args.views} />
+                <MutationComparison
+                    variants={args.variants}
+                    sequenceType={args.sequenceType}
+                    views={args.views}
+                    size={args.size}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -101,6 +107,7 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         ],
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
+        size: { width: '100%', height: '700px' },
     },
 };
 

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

@@ -17,6 +17,7 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
@@ -31,9 +32,15 @@ export interface MutationComparisonProps {
     variants: MutationComparisonVariant[];
     sequenceType: SequenceType;
     views: View[];
+    size?: Size;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ variants, sequenceType, views }) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
+    variants,
+    sequenceType,
+    views,
+    size,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -67,9 +74,11 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     }
 
     return (
-        <Headline heading={headline}>
-            <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />
+            </Headline>
+        </ResizeContainer>
     );
 };
 

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -1,6 +1,7 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { type Meta, type StoryObj } from '@storybook/preact';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type StepFunction } from '@storybook/types';
 
 import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { LAPIS_URL } from '../../constants';
@@ -35,21 +36,11 @@ export const Default: StoryObj<MutationFilterProps> = {
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-        const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
-            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
-        });
-
-        await step('wait until data is loaded', async () => {
-            await waitFor(() => {
-                return expect(inputField(canvas)).toBeEnabled();
-            });
-        });
+        const { canvas, changedListenerMock } = await prepare(canvasElement, step);
 
         await step('Enters an invalid mutation', async () => {
             await submitMutation(canvas, 'notAMutation');
-            await expect(listenerMock).not.toHaveBeenCalled();
+            await expect(changedListenerMock).not.toHaveBeenCalled();
 
             await userEvent.type(inputField(canvas), '{backspace>12/}');
         });
@@ -58,7 +49,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
             await submitMutation(canvas, 'A123T');
 
             await waitFor(() =>
-                expect(listenerMock).toHaveBeenCalledWith(
+                expect(changedListenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {
                             nucleotideMutations: ['A123T'],
@@ -74,7 +65,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         await step('Enter a second valid nucleotide mutation', async () => {
             await submitMutation(canvas, 'A234-');
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A123T', 'A234-'],
@@ -89,7 +80,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         await step('Enter another valid mutation', async () => {
             await submitMutation(canvas, 'ins_123:AA');
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A123T', 'A234-'],
@@ -105,7 +96,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
             const firstMutationDeleteButton = canvas.getAllByRole('button')[0];
             await waitFor(() => fireEvent.click(firstMutationDeleteButton));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A234-'],
@@ -122,18 +113,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
 export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-
-        const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
-            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);
-        });
-
-        await step('wait until data is loaded', async () => {
-            await waitFor(() => {
-                return expect(inputField(canvas)).toBeEnabled();
-            });
-        });
+        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
 
         await step('Move outside of input', async () => {
             await submitMutation(canvas, 'A234T');
@@ -142,7 +122,7 @@ export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
             await submitMutation(canvas, 'ins_S:123:AAA');
             await userEvent.tab();
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(onBlurListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
                         nucleotideMutations: ['A234T'],
@@ -156,9 +136,68 @@ export const FiresFilterOnBlurEvent: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const WithInitialValue: StoryObj<MutationFilterProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={referenceGenome}>
+                <MutationFilter initialValue={args.initialValue} />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        initialValue: {
+            nucleotideMutations: ['A234T'],
+            aminoAcidMutations: ['S:A123G'],
+            nucleotideInsertions: ['ins_123:AAA'],
+            aminoAcidInsertions: ['ins_S:123:AAA'],
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);
+
+        await step('Move outside of input', async () => {
+            await submitMutation(canvas, 'G500T');
+            await userEvent.tab();
+
+            await expect(onBlurListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        nucleotideMutations: ['A234T', 'G500T'],
+                        aminoAcidMutations: ['S:A123G'],
+                        nucleotideInsertions: ['ins_123:AAA'],
+                        aminoAcidInsertions: ['ins_S:123:AAA'],
+                    },
+                }),
+            );
+        });
+    },
+};
+
+async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
+    const canvas = within(canvasElement);
+
+    const onBlurListenerMock = fn();
+    const changedListenerMock = fn();
+    await step('Setup event listener mock', async () => {
+        canvasElement.addEventListener('gs-mutation-filter-on-blur', onBlurListenerMock);
+        canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
+    });
+
+    await step('wait until data is loaded', async () => {
+        await waitFor(() => {
+            return expect(inputField(canvas)).toBeEnabled();
+        });
+    });
+
+    return { canvas, onBlurListenerMock, changedListenerMock };
+}
+
 const submitMutation = async (canvas: ReturnType<typeof within>, mutation: string) => {
     await userEvent.type(inputField(canvas), mutation);
     await waitFor(() => submitButton(canvas).click());
 };
-const inputField = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Enter a mutation');
+
+const inputField = (canvas: ReturnType<typeof within>) =>
+    canvas.getByPlaceholderText('Enter a mutation', { exact: false });
+
 const submitButton = (canvas: ReturnType<typeof within>) => canvas.getByRole('button', { name: '+' });

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -2,12 +2,16 @@ import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 
 import { parseAndValidateMutation } from './parseAndValidateMutation';
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type Deletion, type Insertion, type Mutation, type Substitution } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import Info from '../components/info';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
-export type MutationFilterProps = {};
+export type MutationFilterProps = {
+    initialValue?: SelectedMutationFilterStrings | string[] | undefined;
+};
 
 export type SelectedFilters = {
     nucleotideMutations: (Substitution | Deletion)[];
@@ -20,14 +24,11 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = () => {
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue }) => {
     const referenceGenome = useContext(ReferenceGenomeContext);
-    const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>({
-        nucleotideMutations: [],
-        aminoAcidMutations: [],
-        nucleotideInsertions: [],
-        aminoAcidInsertions: [],
-    });
+    const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>(
+        getInitialState(initialValue, referenceGenome),
+    );
     const [inputValue, setInputValue] = useState('');
     const [isError, setIsError] = useState(false);
     const formRef = useRef<HTMLFormElement>(null);
@@ -83,11 +84,14 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = () => {
 
     return (
         <div class={`rounded-lg border border-gray-300 bg-white p-2`}>
-            <SelectedMutationDisplay
-                selectedFilters={selectedFilters}
-                setSelectedFilters={setSelectedFilters}
-                fireChangeEvent={fireChangeEvent}
-            />
+            <div class='flex justify-between'>
+                <SelectedMutationDisplay
+                    selectedFilters={selectedFilters}
+                    setSelectedFilters={setSelectedFilters}
+                    fireChangeEvent={fireChangeEvent}
+                />
+                <Info className='mx-1' content='Info for mutation filter' />
+            </div>
 
             <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>
                 <label className={`input flex items-center gap-2 ${isError ? 'input-error' : 'input-bordered'}`}>
@@ -96,7 +100,7 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = () => {
                         type='text'
                         value={inputValue}
                         onInput={handleInputChange}
-                        placeholder={'Enter a mutation'}
+                        placeholder={getPlaceholder(referenceGenome)}
                         onBlur={handleOnBlur}
                     />
                     <button className='btn btn-sm'>+</button>
@@ -106,6 +110,50 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = () => {
     );
 };
 
+function getInitialState(
+    initialValue: SelectedMutationFilterStrings | string[] | undefined,
+    referenceGenome: ReferenceGenome,
+) {
+    if (initialValue === undefined) {
+        return {
+            nucleotideMutations: [],
+            aminoAcidMutations: [],
+            nucleotideInsertions: [],
+            aminoAcidInsertions: [],
+        };
+    }
+
+    const values = Array.isArray(initialValue) ? initialValue : Object.values(initialValue).flatMap((it) => it);
+
+    return values.reduce(
+        (selectedFilters, value) => {
+            const parsedMutation = parseAndValidateMutation(value, referenceGenome);
+            if (parsedMutation === null) {
+                return selectedFilters;
+            }
+
+            return {
+                ...selectedFilters,
+                [parsedMutation.type]: [...selectedFilters[parsedMutation.type], parsedMutation.value],
+            };
+        },
+        {
+            nucleotideMutations: [],
+            aminoAcidMutations: [],
+            nucleotideInsertions: [],
+            aminoAcidInsertions: [],
+        } as SelectedFilters,
+    );
+}
+
+function getPlaceholder(referenceGenome: ReferenceGenome) {
+    const segmentPrefix =
+        referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : '';
+    const firstGene = referenceGenome.genes[0].name;
+
+    return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
+}
+
 const SelectedMutationDisplay: FunctionComponent<{
     selectedFilters: SelectedFilters;
     setSelectedFilters: (selectedFilters: SelectedFilters) => void;

package/src/preact/mutations/getInsertionsTableData.spec.ts

@@ -5,16 +5,18 @@ import { Insertion } from '../../utils/mutations';
 
 describe('getInsertionsTableData', () => {
     test('should return the correct data', () => {
+        const insertion1 = new Insertion('segment1', 123, 'T');
+        const insertion2 = new Insertion('segment2', 234, 'AAA');
         const data = [
             {
                 type: 'insertion' as const,
-                mutation: new Insertion('segment1', 123, 'T'),
+                mutation: insertion1,
                 count: 1,
                 proportion: 0.1,
             },
             {
                 type: 'insertion' as const,
-                mutation: new Insertion('segment2', 234, 'AAA'),
+                mutation: insertion2,
                 count: 2,
                 proportion: 0.2,
             },
@@ -24,11 +26,11 @@ describe('getInsertionsTableData', () => {
 
         expect(result).toEqual([
             {
-                insertion: 'ins_segment1:123:T',
+                insertion: insertion1,
                 count: 1,
             },
             {
-                insertion: 'ins_segment2:234:AAA',
+                insertion: insertion2,
                 count: 2,
             },
         ]);

package/src/preact/mutations/getInsertionsTableData.ts

@@ -3,7 +3,7 @@ import { type InsertionEntry } from '../../types';
 export function getInsertionsTableData(data: InsertionEntry[]) {
     return data.map((mutationEntry) => {
         return {
-            insertion: mutationEntry.mutation.toString(),
+            insertion: mutationEntry.mutation,
             count: mutationEntry.count,
         };
     });

package/src/preact/mutations/getMutationsTableData.spec.ts

@@ -4,7 +4,7 @@ import { getMutationsTableData } from './getMutationsTableData';
 import { Deletion, Substitution } from '../../utils/mutations';
 
 describe('getMutationsTableData', () => {
-    test('should return the correct data', () => {
+    test('should not filter anything, when proportions are in interval', () => {
         const data = [
             {
                 type: 'substitution' as const,
@@ -24,20 +24,7 @@ describe('getMutationsTableData', () => {
 
         const result = getMutationsTableData(data, proportionInterval);
 
-        expect(result).toEqual([
-            {
-                mutation: 'segment1:A123T',
-                type: 'substitution',
-                count: 1,
-                proportion: 0.1,
-            },
-            {
-                mutation: 'segment2:C123-',
-                type: 'deletion',
-                count: 2,
-                proportion: 0.2,
-            },
-        ]);
+        expect(result).toEqual(data);
     });
 
     test('should filter out data below/above proportionInterval', () => {
@@ -45,10 +32,13 @@ describe('getMutationsTableData', () => {
         const aboveInterval = 0.95;
         const inInterval = 0.5;
 
+        const substitutionInInterval = new Substitution('segment1', 'A', 'T', 123);
+        const deletionInInterval = new Deletion('segment2', 'C', 123);
+
         const data = [
             {
                 type: 'substitution' as const,
-                mutation: new Substitution('segment1', 'A', 'T', 123),
+                mutation: substitutionInInterval,
                 count: 1,
                 proportion: inInterval,
             },
@@ -60,7 +50,7 @@ describe('getMutationsTableData', () => {
             },
             {
                 type: 'deletion' as const,
-                mutation: new Deletion('segment2', 'C', 123),
+                mutation: deletionInInterval,
                 count: 2,
                 proportion: inInterval,
             },
@@ -78,13 +68,13 @@ describe('getMutationsTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'segment1:A123T',
+                mutation: substitutionInInterval,
                 type: 'substitution',
                 count: 1,
                 proportion: inInterval,
             },
             {
-                mutation: 'segment2:C123-',
+                mutation: deletionInInterval,
                 type: 'deletion',
                 count: 2,
                 proportion: inInterval,

package/src/preact/mutations/getMutationsTableData.ts

@@ -8,7 +8,7 @@ export function getMutationsTableData(data: SubstitutionOrDeletionEntry[], propo
 
     return data.filter(byProportion).map((mutationEntry) => {
         return {
-            mutation: mutationEntry.mutation.toString(),
+            mutation: mutationEntry.mutation,
             type: mutationEntry.type,
             count: mutationEntry.count,
             proportion: mutationEntry.proportion,

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

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 
 import { getInsertionsTableData } from './getInsertionsTableData';
 import { type InsertionEntry } from '../../types';
+import { type Insertion } from '../../utils/mutations';
 import { Table } from '../components/table';
 import { sortInsertions } from '../shared/sort/sortInsertions';
 
@@ -15,10 +16,11 @@ export const InsertionsTable: FunctionComponent<InsertionsTableProps> = ({ data
             {
                 name: 'Insertion',
                 sort: {
-                    compare: (a: string, b: string) => {
+                    compare: (a: Insertion, b: Insertion) => {
                         return sortInsertions(a, b);
                     },
                 },
+                formatter: (cell: Insertion) => cell.toString(),
             },
             {
                 name: 'Count',