@genspectrum/dashboard-components 0.6.19 → 0.7.1

package/src/preact/mutations/mutations.tsx

@@ -18,7 +18,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -31,37 +31,32 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'grid' | 'insertions';
 
-export interface MutationsInnerProps {
+export interface MutationsProps {
+    width: string;
+    height: string;
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
-export interface MutationsProps extends MutationsInnerProps {
-    width: string;
-    height: string;
-}
-
-export const Mutations: FunctionComponent<MutationsProps> = ({ width, height, ...innerProps }) => {
+export const Mutations: FunctionComponent<MutationsProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationsInner {...innerProps} />
+                <MutationsInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
-    pageSize,
-}) => {
+export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { lapisFilter, sequenceType } = componentProps;
+
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(lapisFilter, sequenceType, lapis);
     }, [lapisFilter, sequenceType, lapis]);
@@ -78,20 +73,18 @@ export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({
         return <NoDataDisplay />;
     }
 
-    return <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} pageSize={pageSize} />;
+    return <MutationsTabs mutationsData={data} originalComponentProps={componentProps} />;
 };
 
 type MutationTabsProps = {
     mutationsData: { insertions: InsertionEntry[]; substitutionsOrDeletions: SubstitutionOrDeletionEntry[] };
-    sequenceType: SequenceType;
-    views: View[];
-    pageSize: boolean | number;
+    originalComponentProps: MutationsProps;
 };
 
-const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, sequenceType, views, pageSize }) => {
+const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, originalComponentProps }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
 
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
@@ -108,7 +101,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
                         <MutationsTable
                             data={filteredData.tableData}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
@@ -118,21 +111,23 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
                     content: (
                         <MutationsGrid
                             data={filteredData.gridData}
-                            sequenceType={sequenceType}
+                            sequenceType={originalComponentProps.sequenceType}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
             case 'insertions':
                 return {
                     title: 'Insertions',
-                    content: <InsertionsTable data={filteredData.insertions} pageSize={pageSize} />,
+                    content: (
+                        <InsertionsTable data={filteredData.insertions} pageSize={originalComponentProps.pageSize} />
+                    ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     const toolbar = (activeTab: string) => (
         <Toolbar
@@ -144,6 +139,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, se
             filteredData={filteredData}
             proportionInterval={proportionInterval}
             setProportionInterval={setProportionInterval}
+            originalComponentProps={originalComponentProps}
         />
     );
 
@@ -159,6 +155,7 @@ type ToolbarProps = {
     filteredData: { tableData: SubstitutionOrDeletionEntry[]; insertions: InsertionEntry[] };
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    originalComponentProps: MutationsProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -170,6 +167,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     proportionInterval,
     setProportionInterval,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -208,38 +206,47 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <MutationsInfo />
+            <MutationsInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const MutationsInfo = () => (
-    <Info>
-        <InfoHeadline1>Mutations</InfoHeadline1>
-        <InfoParagraph>
-            This shows mutations of a variant. There are three types of mutations:{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
-            <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
-        </InfoParagraph>
-        <InfoHeadline2>Proportion calculation</InfoHeadline2>
-        <InfoParagraph>
-            The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
-            total number of sequences with a non-ambiguous symbol at the position.
-        </InfoParagraph>
-        <InfoParagraph>
-            <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and assume
-            there are 10 sequences in total:
-            <ul className='list-disc list-inside ml-2'>
-                <li>3 sequences have a C,</li>
-                <li>2 sequences have a T,</li>
-                <li>1 sequence has a G,</li>
-                <li>3 sequences have an N,</li>
-                <li>1 sequence has a Y (which means T or C),</li>
-            </ul>
-            then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the
-            calculation.
-        </InfoParagraph>
-    </Info>
-);
+type MutationsInfoProps = {
+    originalComponentProps: MutationsProps;
+};
+
+const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+
+    return (
+        <Info>
+            <InfoHeadline1>Mutations</InfoHeadline1>
+            <InfoParagraph>
+                This shows mutations of a variant. There are three types of mutations:{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>,{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink> and{' '}
+                <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>.
+            </InfoParagraph>
+            <InfoHeadline2>Proportion calculation</InfoHeadline2>
+            <InfoParagraph>
+                The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the
+                total number of sequences with a non-ambiguous symbol at the position.
+            </InfoParagraph>
+            <InfoParagraph>
+                <b>Example:</b> Assume we look at nucleotide mutations at position 5 where the reference has a T and
+                assume there are 10 sequences in total:
+                <ul className='list-disc list-inside ml-2'>
+                    <li>3 sequences have a C,</li>
+                    <li>2 sequences have a T,</li>
+                    <li>1 sequence has a G,</li>
+                    <li>3 sequences have an N,</li>
+                    <li>1 sequence has a Y (which means T or C),</li>
+                </ul>
+                then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from
+                the calculation.
+            </InfoParagraph>
+            <InfoComponentCode componentName='mutations' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

package/src/preact/mutationsOverTime/MutationOverTimeData.ts

@@ -0,0 +1,20 @@
+import {
+    type MutationOverTimeMutationValue,
+    serializeSubstitutionOrDeletion,
+    serializeTemporal,
+} from '../../query/queryMutationsOverTime';
+import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import type { Temporal } from '../../utils/temporalClass';
+
+export type MutationOverTimeDataMap = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+
+export class BaseMutationOverTimeDataMap extends Map2dBase<
+    Substitution | Deletion,
+    Temporal,
+    MutationOverTimeMutationValue
+> {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>) {
+        super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
+    }
+}

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -1,9 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
+import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
-import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
-import { Map2dBase } from '../../utils/map2d';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type TemporalClass } from '../../utils/temporalClass';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
@@ -194,7 +193,7 @@ describe('getFilteredMutationOverTimeData', () => {
         mutationEntries: (SubstitutionEntry<Substitution> | DeletionEntry<Deletion>)[],
         temporals: TemporalClass[] = [someTemporal, anotherTemporal],
     ) {
-        const data = new Map2dBase<Substitution | Deletion, TemporalClass, MutationOverTimeMutationValue>();
+        const data = new BaseMutationOverTimeDataMap();
 
         temporals.forEach((temporal) => {
             mutationEntries.forEach((entry) => {

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,4 +1,4 @@
-import { type MutationOverTimeData } from './mutations-over-time';
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
 import { Map2dView } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
@@ -6,7 +6,7 @@ import type { DisplayedMutationType } from '../components/mutation-type-selector
 import type { DisplayedSegment } from '../components/segment-selector';
 
 export function getFilteredMutationOverTimeData(
-    data: MutationOverTimeData,
+    data: MutationOverTimeDataMap,
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[],
     displayedSegments: DisplayedSegment[],
     displayedMutationTypes: DisplayedMutationType[],

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

@@ -1,16 +1,16 @@
 import { Fragment, type FunctionComponent, type RefObject } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { type MutationOverTimeData } from './mutations-over-time';
+import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { toTemporalClass, type Temporal, type TemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
 import { type ColorScale, getColorWithingScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
 import { formatProportion } from '../shared/table/formatProportion';
 
 export interface MutationsOverTimeGridProps {
-    data: MutationOverTimeData;
+    data: MutationOverTimeDataMap;
     colorScale: ColorScale;
 }
 

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

@@ -3,24 +3,19 @@ import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from
 
 // @ts-expect-error -- uses subpath imports and vite worker import
 import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
+import { BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
-import {
-    type MutationOverTimeMutationValue,
-    type MutationOverTimeQuery,
-    serializeSubstitutionOrDeletion,
-    serializeTemporal,
-} from '../../query/queryMutationsOverTime';
+import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     type LapisFilter,
     type SequenceType,
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../../types';
-import { type Map2d, Map2dBase } from '../../utils/map2d';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { type Temporal, toTemporalClass } from '../../utils/temporalClass';
+import { toTemporalClass } from '../../utils/temporalClass';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
@@ -28,7 +23,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -41,7 +36,9 @@ import { useWebWorker } from '../webWorkers/useWebWorker';
 
 export type View = 'grid';
 
-export interface MutationsOverTimeInnerProps {
+export interface MutationsOverTimeProps {
+    width: string;
+    height: string;
     lapisFilter: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
@@ -49,31 +46,22 @@ export interface MutationsOverTimeInnerProps {
     lapisDateField: string;
 }
 
-export interface MutationsOverTimeProps extends MutationsOverTimeInnerProps {
-    width: string;
-    height: string;
-}
-
-export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = ({ width, height, ...innerProps }) => {
+export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationsOverTimeInner {...innerProps} />
+                <MutationsOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerProps> = ({
-    lapisFilter,
-    sequenceType,
-    views,
-    granularity,
-    lapisDateField,
-}) => {
+export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         {
@@ -99,40 +87,31 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeInnerPro
     }
 
     const { overallMutationData, mutationOverTimeSerialized } = data;
-    const mutationOverTimeData = new Map2dBase(
-        serializeSubstitutionOrDeletion,
-        serializeTemporal,
-        mutationOverTimeSerialized,
-    );
+    const mutationOverTimeData = new BaseMutationOverTimeDataMap(mutationOverTimeSerialized);
     return (
         <MutationsOverTimeTabs
             overallMutationData={overallMutationData}
             mutationOverTimeData={mutationOverTimeData}
-            sequenceType={sequenceType}
-            views={views}
+            originalComponentProps={componentProps}
         />
     );
 };
 
-export type MutationOverTimeData = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
-
 type MutationOverTimeTabsProps = {
-    mutationOverTimeData: MutationOverTimeData;
-    sequenceType: SequenceType;
-    views: View[];
+    mutationOverTimeData: BaseMutationOverTimeDataMap;
+    originalComponentProps: MutationsOverTimeProps;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
 };
 
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeData,
-    sequenceType,
-    views,
+    originalComponentProps,
     overallMutationData,
 }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
@@ -164,7 +143,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     const toolbar = (activeTab: string) => (
         <Toolbar
@@ -178,6 +157,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             filteredData={filteredData}
             colorScale={colorScale}
             setColorScale={setColorScale}
+            originalComponentProps={originalComponentProps}
         />
     );
 
@@ -192,9 +172,10 @@ type ToolbarProps = {
     setDisplayedMutationTypes: (types: DisplayedMutationType[]) => void;
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
-    filteredData: MutationOverTimeData;
+    filteredData: MutationOverTimeDataMap;
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
+    originalComponentProps: MutationsOverTimeProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -208,6 +189,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     colorScale,
     setColorScale,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -230,13 +212,28 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />
-            <Info>Info for mutations over time</Info>
+            <MutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-function getDownloadData(filteredData: MutationOverTimeData) {
+type MutationsOverTimeInfoProps = {
+    originalComponentProps: MutationsOverTimeProps;
+};
+
+const MutationsOverTimeInfo: FunctionComponent<MutationsOverTimeInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutations over time</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/441</InfoParagraph>
+            <InfoComponentCode componentName='mutations-over-time' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};
+
+function getDownloadData(filteredData: MutationOverTimeDataMap) {
     const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
 
     return filteredData.getFirstAxisKeys().map((mutation) => {