@genspectrum/dashboard-components 0.1.3 → 0.1.5

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>Info for mutation filter</Info>
+            </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',

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

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 
 import { getMutationsTableData } from './getMutationsTableData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
+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';
@@ -18,10 +19,11 @@ const MutationsTable: FunctionComponent<MutationsTableProps> = ({ data, proporti
             {
                 name: 'Mutation',
                 sort: {
-                    compare: (a: string, b: string) => {
+                    compare: (a: Substitution | Deletion, b: Substitution | Deletion) => {
                         return sortSubstitutionsAndDeletions(a, b);
                     },
                 },
+                formatter: (cell: Substitution | Deletion) => cell.toString(),
             },
             {
                 name: 'Type',

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

@@ -22,6 +22,8 @@ const meta: Meta<MutationsProps> = {
             options: ['table', 'grid', 'insertions'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
 };
 
@@ -31,7 +33,13 @@ const Template = {
     render: (args: MutationsProps) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <Mutations variant={args.variant} sequenceType={args.sequenceType} views={args.views} />
+                <Mutations
+                    variant={args.variant}
+                    sequenceType={args.sequenceType}
+                    views={args.views}
+                    size={args.size}
+                    headline={args.headline}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -43,6 +51,8 @@ export const Default: StoryObj<MutationsProps> = {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Mutations',
     },
     parameters: {
         fetchMock: {

package/src/preact/mutations/mutations.tsx

@@ -24,6 +24,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';
 
@@ -33,15 +34,22 @@ export interface MutationsProps {
     variant: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
+    size?: Size;
+    headline?: string;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequenceType, views }) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({
+    variant,
+    sequenceType,
+    views,
+    size,
+    headline = 'Mutations',
+}) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(variant, sequenceType, lapis);
     }, [variant, sequenceType, lapis]);
 
-    const headline = 'Mutations';
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -67,9 +75,11 @@ export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequence
     }
 
     return (
-        <Headline heading={headline}>
-            <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -182,11 +192,18 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             {activeTab === 'Insertions' && (
                 <CsvDownloadButton
                     className='mx-1 btn btn-xs'
-                    getData={() => getInsertionsTableData(filteredData.insertions)}
+                    getData={() =>
+                        getInsertionsTableData(filteredData.insertions).map((row) => {
+                            return {
+                                insertion: row.insertion.toString(),
+                                count: row.count,
+                            };
+                        })
+                    }
                     filename='insertions.csv'
                 />
             )}
-            <Info className='mx-1' content='Info for mutations' />
+            <Info>Info for mutations</Info>
         </div>
     );
 };

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

@@ -28,6 +28,7 @@ const PrevalenceOverTimeBarChart = ({
             datasets: data.map((graphData, index) => datasets(graphData, index, confidenceIntervalMethod)),
         },
         options: {
+            maintainAspectRatio: false,
             animation: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),

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

@@ -43,6 +43,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
         },
         options: {
             animation: false,
+            maintainAspectRatio: false,
             scales: {
                 x: {
                     ticks: {

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

@@ -36,6 +36,7 @@ const PrevalenceOverTimeLineChart = ({
         },
         options: {
             animation: false,
+            maintainAspectRatio: false,
             scales: {
                 y: getYAxisScale(yAxisScaleType),
             },

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

@@ -29,6 +29,8 @@ export default {
             options: ['wilson'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
 };
 
@@ -42,6 +44,8 @@ const Template = {
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
+                size={args.size}
+                headline={args.headline}
             />
         </LapisUrlContext.Provider>
     ),
@@ -59,6 +63,8 @@ export const TwoVariants = {
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {
@@ -124,6 +130,8 @@ export const OneVariant = {
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {