@genspectrum/dashboard-components 0.1.3 → 0.1.5

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,5 +1,4 @@
 import flatpickr from 'flatpickr';
-import { type FunctionComponent } from 'preact';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -7,24 +6,53 @@ import { toYYYYMMDD } from './dateConversion';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export type CustomSelectOption = { label: string; dateFrom: string; dateTo: string };
+export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
-export interface DateRangeSelectorProps {
-    customSelectOptions: CustomSelectOption[];
+export interface DateRangeSelectorProps<CustomLabel extends string> {
+    customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
+    initialValue?: PresetOptionValues | CustomLabel;
 }
 
-export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
+export const PRESET_VALUE_CUSTOM = 'custom';
+export const PRESET_VALUE_ALL_TIMES = 'allTimes';
+export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
+export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
+export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
+export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
+export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
+
+export const presets = {
+    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
+    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
+    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
+    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
+    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
+    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
+    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
+};
+
+export type PresetOptionValues = keyof typeof presets;
+
+export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
-}) => {
-    const datePickerRef = useRef<HTMLInputElement>(null);
-    const endDatePickerRef = useRef<HTMLInputElement>(null);
+    initialValue,
+}: DateRangeSelectorProps<CustomLabel>) => {
+    const fromDatePickerRef = useRef<HTMLInputElement>(null);
+    const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState('last6Months');
+    const selectableOptions = getSelectableOptions(customSelectOptions);
+
+    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+        initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
+            ? initialValue
+            : PRESET_VALUE_LAST_6_MONTHS,
+    );
+
     const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
         dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
         dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
@@ -36,18 +64,18 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
             dateFormat: 'Y-m-d',
         };
 
-        if (datePickerRef.current) {
+        if (fromDatePickerRef.current) {
             setDateFromPicker(
-                flatpickr(datePickerRef.current, {
+                flatpickr(fromDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateFrom,
                 }),
             );
         }
 
-        if (endDatePickerRef.current) {
+        if (toDatePickerRef.current) {
             setDateToPicker(
-                flatpickr(endDatePickerRef.current, {
+                flatpickr(toDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateTo,
                 }),
@@ -59,29 +87,9 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
             dateToPicker?.destroy();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [datePickerRef, endDatePickerRef]);
-
-    const selectableOptions = () => {
-        const presetOptions = [
-            { label: 'Custom', value: 'custom' },
-            { label: 'All times', value: 'allTimes' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 months', value: 'last2Months' },
-            { label: 'Last 3 months', value: 'last3Months' },
-            { label: 'Last 6 months', value: 'last6Months' },
-        ];
-
-        const customOptions = customSelectOptions.map((customSelectOption) => {
-            return { label: customSelectOption.label, value: customLabelToOptionValue(customSelectOption.label) };
-        });
+    }, [fromDatePickerRef, toDatePickerRef]);
 
-        return [...presetOptions, ...customOptions];
-    };
-
-    const onSelectChange = (value: string) => {
+    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
         setSelectedDateRange(value);
 
         const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -145,21 +153,21 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
     return (
         <div class='join' ref={divRef}>
             <Select
-                items={selectableOptions()}
+                items={selectableOptions}
                 selected={selectedDateRange}
                 selectStyle='select-bordered rounded-none join-item'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value);
+                    onSelectChange(value as CustomLabel | PresetOptionValues);
                 }}
             />
             <input
                 class='input input-bordered rounded-none join-item'
                 type='text'
                 placeholder='Date from'
-                ref={datePickerRef}
+                ref={fromDatePickerRef}
                 onChange={onChangeDateFrom}
                 onBlur={onChangeDateFrom}
             />
@@ -167,59 +175,65 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
                 class='input input-bordered rounded-none join-item'
                 type='text'
                 placeholder='Date to'
-                ref={endDatePickerRef}
+                ref={toDatePickerRef}
                 onChange={onChangeDateTo}
-                onBlur={onChangeDateFrom}
+                onBlur={onChangeDateTo}
             />
         </div>
     );
 };
 
-const customLabelToOptionValue = (customLabel: string) => {
-    return `${customLabel}customLabel`;
+const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
+    const presetOptions = Object.entries(presets).map(([key, value]) => {
+        return { label: value.label, value: key };
+    });
+
+    const customOptions = customSelectOptions.map((customSelectOption) => {
+        return { label: customSelectOption.label, value: customSelectOption.label };
+    });
+
+    return [...presetOptions, ...customOptions];
 };
 
-const getDatesForSelectorValue = (
+const getDatesForSelectorValue = <Label extends string>(
     selectorValue: string,
-    customSelectOptions: CustomSelectOption[],
+    customSelectOptions: CustomSelectOption<Label>[],
     earliestDate: string,
 ) => {
     const today = new Date();
 
-    const customSelectOption = customSelectOptions.find(
-        (option) => customLabelToOptionValue(option.label) === selectorValue,
-    );
+    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
     if (customSelectOption) {
         return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
     }
 
     switch (selectorValue) {
-        case 'last2Weeks': {
+        case PRESET_VALUE_LAST_2_WEEKS: {
             const twoWeeksAgo = new Date(today);
             twoWeeksAgo.setDate(today.getDate() - 14);
             return { dateFrom: twoWeeksAgo, dateTo: today };
         }
-        case 'lastMonth': {
+        case PRESET_VALUE_LAST_MONTH: {
             const lastMonth = new Date(today);
             lastMonth.setMonth(today.getMonth() - 1);
             return { dateFrom: lastMonth, dateTo: today };
         }
-        case 'last2Months': {
+        case PRESET_VALUE_LAST_2_MONTHS: {
             const twoMonthsAgo = new Date(today);
             twoMonthsAgo.setMonth(today.getMonth() - 2);
             return { dateFrom: twoMonthsAgo, dateTo: today };
         }
-        case 'last3Months': {
+        case PRESET_VALUE_LAST_3_MONTHS: {
             const threeMonthsAgo = new Date(today);
             threeMonthsAgo.setMonth(today.getMonth() - 3);
             return { dateFrom: threeMonthsAgo, dateTo: today };
         }
-        case 'last6Months': {
+        case PRESET_VALUE_LAST_6_MONTHS: {
             const sixMonthsAgo = new Date(today);
             sixMonthsAgo.setMonth(today.getMonth() - 6);
             return { dateFrom: sixMonthsAgo, dateTo: today };
         }
-        case 'allTimes': {
+        case PRESET_VALUE_ALL_TIMES: {
             return { dateFrom: new Date(earliestDate), dateTo: today };
         }
         default:

package/src/preact/locationFilter/location-filter.tsx

@@ -5,11 +5,11 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { useQuery } from '../useQuery';
 
 export type LocationFilterProps = {
-    value?: string;
+    initialValue?: string;
     fields: string[];
 };
 
-export const LocationFilter = ({ value: initialValue, fields }: LocationFilterProps) => {
+export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');

package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts

@@ -51,12 +51,12 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A123T',
+                mutation: new Substitution(undefined, 'A', 'T', 123),
                 'Test 1 prevalence': 0.123,
                 'Test 2 prevalence': 0.345,
             },
             {
-                mutation: 'G234A',
+                mutation: new Substitution(undefined, 'G', 'A', 234),
                 'Test 1 prevalence': 0.567,
                 'Test 2 prevalence': 0.789,
             },
@@ -106,17 +106,17 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A200T',
+                mutation: new Substitution(undefined, 'A', 'T', 200),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': belowRange,
             },
             {
-                mutation: 'A300T',
+                mutation: new Substitution(undefined, 'A', 'T', 300),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': inRange,
             },
             {
-                mutation: 'A400T',
+                mutation: new Substitution(undefined, 'A', 'T', 400),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': aboveRange,
             },

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,8 @@ const meta: Meta<MutationComparisonProps> = {
             options: ['table', 'venn'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
     parameters: {
         fetchMock: {
@@ -75,7 +77,13 @@ 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}
+                    headline={args.headline}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -101,6 +109,8 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         ],
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Mutation comparison',
     },
 };
 

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,17 +32,23 @@ export interface MutationComparisonProps {
     variants: MutationComparisonVariant[];
     sequenceType: SequenceType;
     views: View[];
+    size?: Size;
+    headline?: string;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ variants, sequenceType, views }) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
+    variants,
+    sequenceType,
+    views,
+    size,
+    headline = 'Mutation comparison',
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationData(variants, sequenceType, lapis);
     }, [variants, sequenceType, lapis]);
 
-    const headline = 'Mutation comparison';
-
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -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>
     );
 };
 
@@ -173,7 +182,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info className='mx-1' content='Info for mutation comparison' />
+            <Info>Info for mutation comparison</Info>
         </div>
     );
 };