@genspectrum/dashboard-components 0.7.0 → 0.7.1

package/dist/genspectrum-components.d.ts

@@ -1058,10 +1058,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,10 +1077,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1088,7 +1088,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1183,7 +1183,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1191,7 +1191,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1199,7 +1199,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1207,7 +1207,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1215,7 +1215,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1223,7 +1223,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1231,7 +1231,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1239,7 +1239,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/aggregatedData/aggregate.tsx

@@ -9,7 +9,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, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -22,37 +22,29 @@ export type InitialSort = { field: string; direction: 'ascending' | 'descending'
 export type AggregateProps = {
     width: string;
     height: string;
-} & AggregateInnerProps;
-
-export interface AggregateInnerProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
     initialSortField: string;
     initialSortDirection: 'ascending' | 'descending';
     pageSize: boolean | number;
-}
+};
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({ width, height, ...innerProps }) => {
+export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <AggregateInner {...innerProps} />
+                <AggregateInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
-    fields,
-    views,
-    filter,
-    initialSortField,
-    initialSortDirection,
-    pageSize,
-}) => {
+export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
+    const { fields, filter, initialSortField, initialSortDirection } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -71,50 +63,66 @@ export const AggregateInner: FunctionComponent<AggregateInnerProps> = ({
         return <NoDataDisplay />;
     }
 
-    return <AggregatedDataTabs data={data} views={views} fields={fields} pageSize={pageSize} />;
+    return <AggregatedDataTabs data={data} originalComponentProps={componentProps} />;
 };
 
 type AggregatedDataTabsProps = {
     data: AggregateData;
-    fields: string[];
-    views: View[];
-    pageSize: boolean | number;
+    originalComponentProps: AggregateProps;
 };
 
-const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, views, fields, pageSize }) => {
+const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
     const getTab = (view: View) => {
         switch (view) {
             case 'table':
                 return {
                     title: 'Table',
-                    content: <AggregateTable data={data} fields={fields} pageSize={pageSize} />,
+                    content: (
+                        <AggregateTable
+                            data={data}
+                            fields={originalComponentProps.fields}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} fields={fields} />} />;
+    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} originalComponentProps={originalComponentProps} />} />;
 };
 
 type ToolbarProps = {
     data: AggregateData;
-    fields: string[];
+    originalComponentProps: AggregateProps;
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ data, fields }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ data, originalComponentProps }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info>
-                <InfoHeadline1>Aggregated data</InfoHeadline1>
-                <InfoParagraph>
-                    This table shows the number and proportion of sequences stratified by the following fields:{' '}
-                    {fields.join(', ')}. The proportion is calculated with respect to the total count within the
-                    filtered dataset.
-                </InfoParagraph>
-            </Info>
+            <AggregateInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </div>
     );
 };
+
+type AggregateInfoProps = {
+    originalComponentProps: AggregateProps;
+};
+
+const AggregateInfo: FunctionComponent<AggregateInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Aggregated data</InfoHeadline1>
+            <InfoParagraph>
+                This table shows the number and proportion of sequences stratified by the following fields:{' '}
+                {originalComponentProps.fields.join(', ')}. The proportion is calculated with respect to the total count
+                within the filtered dataset.
+            </InfoParagraph>
+            <InfoComponentCode componentName='aggregate' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

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

@@ -11,7 +11,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';
@@ -24,36 +24,30 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonProps extends MutationComparisonInnerProps {
+export interface MutationComparisonProps {
     width: string;
     height: string;
-}
-
-export interface MutationComparisonInnerProps {
     lapisFilters: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationComparisonInner {...innerProps} />
+                <MutationComparisonInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
-    lapisFilters,
-    sequenceType,
-    views,
-    pageSize,
-}) => {
+export const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { lapisFilters, sequenceType } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -72,35 +66,21 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
         return <NoDataDisplay />;
     }
 
-    return (
-        <MutationComparisonTabs
-            data={data.mutationData}
-            sequenceType={sequenceType}
-            views={views}
-            pageSize={pageSize}
-        />
-    );
+    return <MutationComparisonTabs data={data.mutationData} originalComponentProps={componentProps} />;
 };
 
 type MutationComparisonTabsProps = {
     data: MutationData[];
-    views: View[];
-    sequenceType: SequenceType;
-    pageSize: boolean | number;
+    originalComponentProps: MutationComparisonProps;
 };
 
-const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({
-    data,
-    views,
-    sequenceType,
-    pageSize,
-}) => {
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, originalComponentProps }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
 
     const filteredData = useMemo(
         () => filterMutationData(data, displayedSegments, displayedMutationTypes),
@@ -116,7 +96,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonTable
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
@@ -133,7 +113,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     return (
         <Tabs
@@ -147,6 +127,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                     filteredData={filteredData}
                     proportionInterval={proportionInterval}
                     setProportionInterval={setProportionInterval}
+                    originalComponentProps={originalComponentProps}
                 />
             }
         />
@@ -161,6 +142,7 @@ type ToolbarProps = {
     filteredData: MutationData[];
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    originalComponentProps: MutationComparisonProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -171,6 +153,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     proportionInterval,
     setProportionInterval,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -189,8 +172,23 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info>Info for mutation comparison</Info>
+            <MutationComparisonInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
+
+type MutationComparisonInfoProps = {
+    originalComponentProps: MutationComparisonProps;
+};
+
+const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutation comparison</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/465</InfoParagraph>
+            <InfoComponentCode componentName='mutation-comparison' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};

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>
+    );
+};