@genspectrum/dashboard-components 0.13.5 → 0.13.7

package/dist/style.css

@@ -3319,6 +3319,9 @@ input.tab:checked + .tab-content,
 .gap-y-1 {
   row-gap: 0.25rem;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -3328,6 +3331,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-nowrap {
+  text-wrap: nowrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -3347,9 +3353,6 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
-.rounded-tl-md {
-  border-top-left-radius: 0.375rem;
-}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
@@ -3359,6 +3362,9 @@ input.tab:checked + .tab-content,
 .border-2 {
   border-width: 2px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -3374,9 +3380,9 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.border-gray-400 {
+.border-gray-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
 }
 .border-slate-500 {
   --tw-border-opacity: 1;
@@ -3477,6 +3483,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -3623,6 +3632,12 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 6rem) {
+
+  .\@\[6rem\]\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-5xl {

package/dist/util.d.ts

@@ -822,7 +822,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-app': App;
+        'gs-app': AppComponent;
     }
 }
 
@@ -950,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -958,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -974,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,10 +1018,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1029,7 +1029,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1037,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1048,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1056,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1067,7 +1067,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/components/downshift-combobox.tsx

@@ -127,7 +127,7 @@ export function DownshiftCombobox<Item>({
                 {items.length > 0 ? (
                     items.map((item, index) => (
                         <li
-                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
+                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm`}
                             key={itemToString(item)}
                             {...getItemProps({ item, index })}
                         >
@@ -135,7 +135,7 @@ export function DownshiftCombobox<Item>({
                         </li>
                     ))
                 ) : (
-                    <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                    <li className='py-2 px-3 shadow-sm'>No elements to select.</li>
                 )}
             </ul>
         </div>

package/src/preact/components/mutation-info.tsx

@@ -0,0 +1,36 @@
+import { InfoHeadline2, InfoLink, InfoParagraph } from './info';
+
+export const SubstitutionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Substitution'>substitutions</InfoLink>
+);
+
+export const InsertionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Insertion'>insertions</InfoLink>
+);
+
+export const DeletionsLink = () => (
+    <InfoLink href='https://www.genome.gov/genetics-glossary/Deletion'>deletions</InfoLink>
+);
+
+export const ProportionExplanation = () => (
+    <>
+        <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>
+    </>
+);

package/src/preact/components/tabs.tsx

@@ -23,8 +23,8 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                         key={tab.title}
                         className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
                             activeTab === tab.title
-                                ? 'border-b-2 border-gray-400'
-                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                                ? 'border-b-2 border-gray-500'
+                                : 'border-b border-gray-300 text-gray-600 hover:bg-gray-100 hover:text-gray-700'
                         }`}
                         onClick={() => {
                             setActiveTab(tab.title);
@@ -45,9 +45,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
-            <div
-                className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
-            >
+            <div className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`}>
                 {tabs.map((tab) => (
                     <div className='h-full' key={tab.title} hidden={activeTab !== tab.title}>
                         {tab.content}

package/src/preact/locationFilter/fetchAutocompletionList.spec.ts

@@ -11,11 +11,11 @@ describe('fetchAutocompletionList', () => {
             { fields, country: 'Germany' },
             {
                 data: [
-                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
-                    { count: 0, region: 'region1', country: 'country1_1', division: 'division1_1_2' },
-                    { count: 0, region: 'region1', country: 'country1_1', division: null },
-                    { count: 0, region: 'region1', country: 'country1_2', division: 'division1_2_1' },
-                    { count: 0, region: 'region2', country: 'country2_1', division: null },
+                    { count: 1, region: 'region1', country: 'country1_1', division: 'division1_1_1' },
+                    { count: 2, region: 'region1', country: 'country1_1', division: 'division1_1_2' },
+                    { count: 3, region: 'region1', country: 'country1_1', division: null },
+                    { count: 4, region: 'region1', country: 'country1_2', division: 'division1_2_1' },
+                    { count: 5, region: 'region2', country: 'country2_1', division: null },
                 ],
             },
         );
@@ -27,14 +27,14 @@ describe('fetchAutocompletionList', () => {
         });
 
         expect(result).to.deep.equal([
-            { region: 'region1', country: undefined, division: undefined },
-            { region: 'region1', country: 'country1_1', division: undefined },
-            { region: 'region1', country: 'country1_1', division: 'division1_1_1' },
-            { region: 'region1', country: 'country1_1', division: 'division1_1_2' },
-            { region: 'region1', country: 'country1_2', division: undefined },
-            { region: 'region1', country: 'country1_2', division: 'division1_2_1' },
-            { region: 'region2', country: undefined, division: undefined },
-            { region: 'region2', country: 'country2_1', division: undefined },
+            { value: { region: 'region1', country: undefined, division: undefined }, count: 10 },
+            { value: { region: 'region1', country: 'country1_1', division: undefined }, count: 6 },
+            { value: { region: 'region1', country: 'country1_1', division: 'division1_1_1' }, count: 1 },
+            { value: { region: 'region1', country: 'country1_1', division: 'division1_1_2' }, count: 2 },
+            { value: { region: 'region1', country: 'country1_2', division: undefined }, count: 4 },
+            { value: { region: 'region1', country: 'country1_2', division: 'division1_2_1' }, count: 4 },
+            { value: { region: 'region2', country: undefined, division: undefined }, count: 5 },
+            { value: { region: 'region2', country: 'country2_1', division: undefined }, count: 5 },
         ]);
     });
 });

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -1,5 +1,10 @@
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
-import type { LapisFilter } from '../../types';
+import type { LapisFilter, LapisLocationFilter } from '../../types';
+
+export type LocationEntry = {
+    value: LapisLocationFilter;
+    count: number;
+};
 
 export async function fetchAutocompletionList({
     fields,
@@ -11,11 +16,10 @@ export async function fetchAutocompletionList({
     lapis: string;
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
-}): Promise<Record<string, string | undefined>[]> {
-    const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
-        .fill(0)
-        .map((_, i) => i + 1)
-        .map((i) => fields.slice(i).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+}): Promise<LocationEntry[]> {
+    const helpersThatOverwriteAValueToItsAncestor = fields.map((_, i) =>
+        fields.slice(i + 1).reduce((acc, field) => ({ ...acc, [field]: null }), {}),
+    );
 
     const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>(
         lapisFilter ?? {},
@@ -25,26 +29,58 @@ export async function fetchAutocompletionList({
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 
     const locationValues = data
-        .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
-        .reduce<Set<string>>((setOfAllHierarchies, entry) => {
-            setOfAllHierarchies.add(JSON.stringify(entry));
-            toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
-                setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
-            });
-            return setOfAllHierarchies;
-        }, new Set());
+        .map((entry) => ({
+            value: fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}),
+            count: entry.count,
+        }))
+        .reduce((mapOfAllHierarchiesAndCounts, entry) => {
+            return addValueAndAllAncestorsToMap(
+                entry,
+                helpersThatOverwriteAValueToItsAncestor,
+                mapOfAllHierarchiesAndCounts,
+            );
+        }, new Map<string, number>());
 
     return [...locationValues]
-        .map((json) => JSON.parse(json))
+        .map<EntryWithNullValues>(([json, count]) => ({
+            value: JSON.parse(json),
+            count,
+        }))
         .sort(compareLocationEntries(fields))
-        .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? undefined }), {}));
+        .map(({ value, count }) => ({
+            value: fields.reduce((acc, field) => ({ ...acc, [field]: value[field] ?? undefined }), {}),
+            count,
+        }));
+}
+
+function addValueAndAllAncestorsToMap(
+    { value, count }: LocationEntry,
+    helpersThatOverwriteAValueToItsAncestor: Record<string, null>[],
+    mapOfAllHierarchiesAndCounts: Map<string, number>,
+) {
+    const keysOfAllHierarchyLevels = new Set(
+        helpersThatOverwriteAValueToItsAncestor
+            .map((overwriteValues) => ({ ...value, ...overwriteValues }))
+            .map((value) => JSON.stringify(value)),
+    );
+
+    for (const key of keysOfAllHierarchyLevels) {
+        mapOfAllHierarchiesAndCounts.set(key, (mapOfAllHierarchiesAndCounts.get(key) ?? 0) + count);
+    }
+
+    return mapOfAllHierarchiesAndCounts;
 }
 
+type EntryWithNullValues = {
+    value: Record<string, string | null>;
+    count: number;
+};
+
 function compareLocationEntries(fields: string[]) {
-    return (a: Record<string, string | null>, b: Record<string, string | null>) => {
+    return (a: EntryWithNullValues, b: EntryWithNullValues) => {
         for (const field of fields) {
-            const valueA = a[field];
-            const valueB = b[field];
+            const valueA = a.value[field];
+            const valueB = b.value[field];
             if (valueA === valueB) {
                 continue;
             }

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

@@ -88,7 +88,7 @@ export const Primary: StoryObj<LocationFilterProps> = {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'Germany');
-            await userEvent.click(canvas.getByRole('option', { name: 'Germany Europe / Germany' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'Germany(42) Europe / Germany' }));
 
             await waitFor(() => {
                 return expect(locationChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({

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

@@ -2,7 +2,7 @@ import { type FunctionComponent } from 'preact';
 import { useContext, useMemo } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompletionList } from './fetchAutocompletionList';
+import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { LocationChangedEvent } from './LocationChangedEvent';
 import { lapisFilterSchema, type LapisLocationFilter, lapisLocationFilterSchema } from '../../types';
@@ -61,6 +61,7 @@ type SelectItem = {
     lapisFilter: LapisLocationFilter;
     label: string | null | undefined;
     description: string;
+    count: number;
 };
 
 const LocationSelector = ({
@@ -69,7 +70,7 @@ const LocationSelector = ({
     placeholderText,
     locationData,
 }: LocationSelectorProps & {
-    locationData: LapisLocationFilter[];
+    locationData: LocationEntry[];
 }) => {
     const allItems = useMemo(() => {
         return locationData
@@ -78,8 +79,10 @@ const LocationSelector = ({
     }, [fields, locationData]);
 
     const selectedItem = useMemo(() => {
-        return value !== undefined ? toSelectItem(value, fields) : undefined;
-    }, [fields, value]);
+        return value !== undefined
+            ? allItems.find((item) => item.description == concatenateLocation(value, fields))
+            : undefined;
+    }, [fields, value, allItems]);
 
     return (
         <DownshiftCombobox
@@ -91,14 +94,15 @@ const LocationSelector = ({
             }
             itemToString={(item: SelectItem | undefined | null) => item?.label ?? ''}
             placeholderText={placeholderText}
-            formatItemInList={(item: SelectItem) => {
-                return (
-                    <>
+            formatItemInList={(item: SelectItem) => (
+                <>
+                    <p>
                         <span>{item.label}</span>
-                        <span className='text-sm text-gray-500'>{item.description}</span>
-                    </>
-                );
-            }}
+                        <span className='ml-2 text-gray-500'>({item.count})</span>
+                    </p>
+                    <span className='text-sm text-gray-500'>{item.description}</span>
+                </>
+            )}
         />
     );
 };
@@ -113,7 +117,8 @@ function filterByInputValue(item: SelectItem, inputValue: string | undefined | n
     );
 }
 
-function toSelectItem(locationFilter: LapisLocationFilter, fields: string[]): SelectItem | undefined {
+function toSelectItem(locationEntry: LocationEntry, fields: string[]): SelectItem | undefined {
+    const locationFilter = locationEntry.value;
     const concatenatedLocation = concatenateLocation(locationFilter, fields);
 
     const lastNonUndefinedField = [...fields]
@@ -128,6 +133,7 @@ function toSelectItem(locationFilter: LapisLocationFilter, fields: string[]): Se
         lapisFilter: locationFilter,
         label: locationFilter[lastNonUndefinedField],
         description: concatenatedLocation,
+        count: locationEntry.count,
     };
 }
 

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

@@ -11,8 +11,9 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
+import { DeletionsLink, ProportionExplanation, SubstitutionsLink } from '../components/mutation-info';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
@@ -190,7 +191,30 @@ const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = (
     return (
         <Info>
             <InfoHeadline1>Info for mutation comparison</InfoHeadline1>
-            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/465</InfoParagraph>
+            <InfoParagraph>
+                This displays <SubstitutionsLink /> and <DeletionsLink /> of several variants. It shows mutations where
+                the proportion for any given variant falls within the range you can select in the component's toolbar.
+            </InfoParagraph>
+            <ProportionExplanation />
+            {originalComponentProps.views.includes(views.table) && (
+                <>
+                    <InfoHeadline2>Table View</InfoHeadline2>
+                    <InfoParagraph>
+                        The table view displays the proportion of mutations that appear in any of the variants.
+                    </InfoParagraph>
+                </>
+            )}
+            {originalComponentProps.views.includes(views.venn) && (
+                <>
+                    <InfoHeadline2>Venn Diagram View</InfoHeadline2>
+                    <InfoParagraph>
+                        The Venn diagram view illustrates which mutations overlap between the variants and which are
+                        exclusive to specific variants. Mutations overlap if their proportion falls within the selected
+                        range for two variants. If the proportion of a mutation is within the selected range for one
+                        variant but not for the other, the mutation is considered exclusive to that variant.
+                    </InfoParagraph>
+                </>
+            )}
             <InfoComponentCode componentName='mutation-comparison' params={originalComponentProps} lapisUrl={lapis} />
         </Info>
     );

package/src/preact/mutationFilter/ExampleMutation.tsx

@@ -0,0 +1,68 @@
+import { useContext } from 'preact/hooks';
+import type { FC } from 'react';
+
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import type { SequenceType } from '../../types';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+type ExampleMutationProps = {
+    sequenceType: SequenceType;
+    mutationType: 'substitution' | 'insertion';
+};
+
+export const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    return <b>{getExampleMutation(referenceGenome, sequenceType, mutationType)}</b>;
+};
+
+export function getExampleMutation(
+    referenceGenome: ReferenceGenome,
+    sequenceType: SequenceType,
+    mutationType: 'substitution' | 'insertion',
+) {
+    switch (sequenceType) {
+        case 'amino acid': {
+            if (referenceGenome.genes.length === 0) {
+                return '';
+            }
+
+            const firstGene = referenceGenome.genes[0].name;
+
+            switch (mutationType) {
+                case 'substitution':
+                    return `${firstGene}:57Q`;
+                case 'insertion':
+                    return `ins_${firstGene}:31:N`;
+            }
+        }
+        // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+        // eslint-disable-next-line no-fallthrough
+        case 'nucleotide': {
+            switch (referenceGenome.nucleotideSequences.length) {
+                case 0: {
+                    return '';
+                }
+                case 1: {
+                    switch (mutationType) {
+                        case 'substitution':
+                            return '23T';
+                        case 'insertion':
+                            return 'ins_1046:A';
+                    }
+                }
+                // Issue of linter https://github.com/typescript-eslint/typescript-eslint/issues/3455
+                // eslint-disable-next-line no-fallthrough
+                default: {
+                    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+                    switch (mutationType) {
+                        case 'substitution':
+                            return `${firstSegment}:23T`;
+                        case 'insertion':
+                            return `ins_${firstSegment}:10462:A`;
+                    }
+                }
+            }
+        }
+    }
+}