@genspectrum/dashboard-components 0.13.6 → 0.13.7

package/src/preact/mutationFilter/mutation-filter-info.tsx

@@ -1,58 +1,140 @@
 import { useContext } from 'preact/hooks';
-import { type FC } from 'react';
 
-import { isSingleSegmented } from '../../lapisApi/ReferenceGenome';
-import { type SequenceType } from '../../types';
+import { isSingleSegmented, type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { ExampleMutation } from './ExampleMutation';
 import Info, { InfoHeadline1, InfoHeadline2, InfoParagraph } from '../components/info';
 
 export const MutationFilterInfo = () => {
-    const referenceGenome = useContext(ReferenceGenomeContext);
-
-    const firstGene = referenceGenome.genes[0].name;
     return (
         <Info>
             <InfoHeadline1> Mutation Filter</InfoHeadline1>
             <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
 
+            <QuickStart />
+            <NucleotideMutationsInfo />
+            <AminoAcidMutationsInfo />
+            <InsertionWildcards />
+            <MultipleMutations />
+            <AnyMutation />
+            <NoMutation />
+        </Info>
+    );
+};
+
+const QuickStart = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+    return (
+        <>
             <InfoHeadline2>Quickstart</InfoHeadline2>
             <InfoParagraph>
                 <ul className='list-disc list-inside'>
-                    <li>
-                        Filter for nucleotide mutations:{' '}
-                        <ExampleMutation mutationType='substitution' sequenceType='nucleotide' />
-                    </li>
-                    <li>
-                        Filter for amino acid mutations:{' '}
-                        <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />
-                    </li>
-                    <li>
-                        Filter for nucleotide insertions:{' '}
-                        <ExampleMutation mutationType='substitution' sequenceType='amino acid' />
-                    </li>
-                    <li>
-                        Filter for amino acid insertions:{' '}
-                        <ExampleMutation mutationType='insertion' sequenceType='amino acid' />
-                    </li>
+                    {referenceGenome.nucleotideSequences.length > 0 && (
+                        <li>
+                            Filter for nucleotide mutations:{' '}
+                            <ExampleMutation mutationType='substitution' sequenceType='nucleotide' />
+                        </li>
+                    )}
+                    {referenceGenome.genes.length > 0 && (
+                        <li>
+                            Filter for amino acid mutations:{' '}
+                            <ExampleMutation mutationType='substitution' sequenceType='amino acid' />
+                        </li>
+                    )}
+                    {referenceGenome.nucleotideSequences.length > 0 && (
+                        <li>
+                            Filter for nucleotide insertions:{' '}
+                            <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />
+                        </li>
+                    )}
+                    {referenceGenome.genes.length > 0 && (
+                        <li>
+                            Filter for amino acid insertions:{' '}
+                            <ExampleMutation mutationType='insertion' sequenceType='amino acid' />
+                        </li>
+                    )}
                 </ul>
             </InfoParagraph>
-            {!isSingleSegmented(referenceGenome) && (
+
+            {referenceGenome.nucleotideSequences.length > 1 ? (
                 <InfoParagraph>
                     This organism has the following segments:{' '}
                     {referenceGenome.nucleotideSequences.map((gene) => gene.name).join(', ')}.
                 </InfoParagraph>
+            ) : (
+                <InfoParagraph>This organism doesn't support nucleotide sequences.</InfoParagraph>
+            )}
+            {referenceGenome.genes.length !== 0 ? (
+                <InfoParagraph>
+                    This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+                </InfoParagraph>
+            ) : (
+                <InfoParagraph>This organism doesn't support amino acid sequences.</InfoParagraph>
             )}
+        </>
+    );
+};
+
+const NucleotideMutationsInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    if (referenceGenome.nucleotideSequences.length === 0) {
+        return null;
+    }
+
+    if (isSingleSegmented(referenceGenome)) {
+        return (
+            <>
+                <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
+                <InfoParagraph>
+                    This organism is single-segmented. Thus, nucleotide mutations have the format{' '}
+                    <b>&lt;position&gt;&lt;base&gt;</b> or <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. The{' '}
+                    <b>&lt;base_ref&gt;</b> is the reference base at the position. It is optional. A <b>&lt;base&gt;</b>{' '}
+                    can be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be{' '}
+                    <b>-</b> for deletion and <b>N</b> for unknown. For example if the reference sequence is <b>A</b> at
+                    position <b>23</b> both: <b>23T</b> and <b>A23T</b> will yield the same results.
+                </InfoParagraph>
+                <InfoParagraph>
+                    Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to
+                    the start of the mutation. Example: <b>ins_1046:A</b> would filter for sequences with an insertion
+                    of A between the positions 1046 and 1047 in the nucleotide sequence.
+                </InfoParagraph>
+            </>
+        );
+    }
+
+    const firstSegment = referenceGenome.nucleotideSequences[0].name;
+    return (
+        <>
+            <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
             <InfoParagraph>
-                This organism has the following genes: {referenceGenome.genes.map((gene) => gene.name).join(', ')}.
+                This organism is multi-segmented. Thus, nucleotide mutations have the format{' '}
+                <b>&lt;segment&gt;:&lt;position&gt;&lt;base&gt;</b> or{' '}
+                <b>&lt;segment&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. <b>&lt;base_ref&gt;</b> is the
+                reference base at the position. It is optional. A <b>&lt;base&gt;</b> can be one of the four nucleotides{' '}
+                <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for
+                unknown. For example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '}
+                <b>{firstSegment}:23T</b> and <b>{firstSegment}:A23T</b> will yield the same results.
             </InfoParagraph>
+            <InfoParagraph>
+                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
+                start of the mutation. Example: <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />.
+            </InfoParagraph>
+        </>
+    );
+};
 
-            <InfoHeadline2>Nucleotide Mutations and Insertions</InfoHeadline2>
-            {isSingleSegmented(referenceGenome) ? (
-                <SingleSegmentedNucleotideMutationsInfo />
-            ) : (
-                <MultiSegmentedNucleotideMutationsInfo />
-            )}
+const AminoAcidMutationsInfo = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
 
+    if (referenceGenome.genes.length === 0) {
+        return null;
+    }
+
+    const firstGene = referenceGenome.genes[0].name;
+
+    return (
+        <>
             <InfoHeadline2>Amino Acid Mutations and Insertions</InfoHeadline2>
             <InfoParagraph>
                 An amino acid mutation has the format <b>&lt;gene&gt;:&lt;position&gt;&lt;base&gt;</b> or
@@ -65,116 +147,101 @@ export const MutationFilterInfo = () => {
                 start of the mutation. Example: <b>ins_{firstGene}:31:N</b> would filter for sequences with an insertion
                 of N between positions 31 and 32 in the gene {firstGene}.
             </InfoParagraph>
+        </>
+    );
+};
+
+const InsertionWildcards = () => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
 
+    if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
             <InfoHeadline2>Insertion Wildcards</InfoHeadline2>
             <InfoParagraph>
-                This component supports insertion queries that contain wildcards <b>?</b>. For example{' '}
-                <b>ins_{firstGene}:214:?EP?</b> will match all cases where segment <b>{firstGene}</b> has an insertion
-                of <b>EP</b> between the positions <b>214</b> and <b>215</b> but also an insertion of other amino acids
-                which include the <b>EP</b>, e.g. the insertion <b>EPE</b> will be matched.
+                This component supports nucleotide and amino acid insertion queries that contain wildcards <b>?</b>. For
+                example{' '}
+                <b>
+                    ins_{exampleSegmentString(referenceGenome)}214:?{exampleWildcardInsertion(referenceGenome)}?
+                </b>{' '}
+                will match all cases where segment <b>{exampleSegment(referenceGenome)}</b> has an insertion of{' '}
+                <b>{exampleWildcardInsertion(referenceGenome)}</b> between the positions <b>214</b> and <b>215</b> but
+                also an insertion of other amino acids which include the <b>EP</b>, e.g. the insertion{' '}
+                <b>{exampleWildcardInsertion(referenceGenome)}T</b> will be matched.
             </InfoParagraph>
             <InfoParagraph>
                 You can also use wildcards to match any insertion at a given position. For example{' '}
-                <b>ins_{firstGene}:214:?</b> match any (but at least one) insertion between the positions 214 and 215.
+                <b>ins_{exampleSegmentString(referenceGenome)}214:?</b> match any (but at least one) insertion between
+                the positions 214 and 215.
             </InfoParagraph>
+        </>
+    );
+};
 
-            <InfoHeadline2>Multiple Mutations</InfoHeadline2>
-            <InfoParagraph>
-                Multiple mutation filters can be provided by adding one mutation after the other.
-            </InfoParagraph>
+const exampleSegmentString = (referenceGenome: ReferenceGenome) => {
+    const segment = exampleSegment(referenceGenome);
+    if (segment === '') {
+        return '';
+    }
+    return `${segment}:`;
+};
 
-            <InfoHeadline2>Any Mutation</InfoHeadline2>
-            <InfoParagraph>
-                To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>. Example:{' '}
-                <b>{firstGene}:20</b>.
-            </InfoParagraph>
+const exampleSegment = (referenceGenome: ReferenceGenome) => {
+    if (referenceGenome.genes.length > 0) {
+        return `${referenceGenome.genes[0].name}`;
+    }
+    if (referenceGenome.nucleotideSequences.length > 1) {
+        return `${referenceGenome.nucleotideSequences[0].name}`;
+    }
+    return '';
+};
 
-            <InfoHeadline2>No Mutation</InfoHeadline2>
-            <InfoParagraph>
-                You can write a <b>.</b> for the <b>&lt;base&gt;</b> to filter for sequences for which it is confirmed
-                that no mutation occurred, i.e. has the same base as the reference genome at the specified position.
-            </InfoParagraph>
-        </Info>
-    );
+const exampleWildcardInsertion = (referenceGenome: ReferenceGenome) => {
+    if (referenceGenome.genes.length > 0) {
+        return 'EP';
+    }
+    if (referenceGenome.nucleotideSequences.length > 0) {
+        return 'CG';
+    }
+    return '';
 };
 
-const SingleSegmentedNucleotideMutationsInfo = () => {
+const MultipleMutations = () => {
     return (
         <>
+            <InfoHeadline2>Multiple Mutations</InfoHeadline2>
             <InfoParagraph>
-                This organism is single-segmented. Thus, nucleotide mutations have the format{' '}
-                <b>&lt;position&gt;&lt;base&gt;</b> or <b>&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. The{' '}
-                <b>&lt;base_ref&gt;</b> is the reference base at the position. It is optional. A <b>&lt;base&gt;</b> can
-                be one of the four nucleotides <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for
-                deletion and <b>N</b> for unknown. For example if the reference sequence is <b>A</b> at position{' '}
-                <b>23</b> both: <b>23T</b> and <b>A23T</b> will yield the same results.
-            </InfoParagraph>
-            <InfoParagraph>
-                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
-                start of the mutation. Example: <b>ins_1046:A</b> would filter for sequences with an insertion of A
-                between the positions 1046 and 1047 in the nucleotide sequence.
+                Multiple mutation filters can be provided by adding one mutation after the other.
             </InfoParagraph>
         </>
     );
 };
 
-const MultiSegmentedNucleotideMutationsInfo = () => {
+const AnyMutation = () => {
     const referenceGenome = useContext(ReferenceGenomeContext);
 
-    const firstSegment = referenceGenome.nucleotideSequences[0].name;
-
     return (
         <>
+            <InfoHeadline2>Any Mutation</InfoHeadline2>
             <InfoParagraph>
-                This organism is multi-segmented. Thus, nucleotide mutations have the format{' '}
-                <b>&lt;segment&gt;:&lt;position&gt;&lt;base&gt;</b> or{' '}
-                <b>&lt;segment&gt;:&lt;base_ref&gt;&lt;position&gt;&lt;base&gt;</b>. <b>&lt;base_ref&gt;</b> is the
-                reference base at the position. It is optional. A <b>&lt;base&gt;</b> can be one of the four nucleotides{' '}
-                <b>A</b>, <b>T</b>, <b>C</b>, and <b>G</b>. It can also be <b>-</b> for deletion and <b>N</b> for
-                unknown. For example if the reference sequence is <b>A</b> at position <b>23</b> both:{' '}
-                <b>{firstSegment}:23T</b> and <b>{firstSegment}:A23T</b> will yield the same results.
-            </InfoParagraph>
-            <InfoParagraph>
-                Insertions can be searched for in the same manner, they just need to have <b>ins_</b> appended to the
-                start of the mutation. Example: <ExampleMutation mutationType='insertion' sequenceType='nucleotide' />.
+                To filter for any mutation at a given position you can omit the <b>&lt;base&gt;</b>. Example:{' '}
+                <b>{exampleSegmentString(referenceGenome)}20</b>.
             </InfoParagraph>
         </>
     );
 };
 
-type ExampleMutationProps = {
-    sequenceType: SequenceType;
-    mutationType: 'substitution' | 'insertion';
-};
-
-const ExampleMutation: FC<ExampleMutationProps> = ({ sequenceType, mutationType }) => {
-    const referenceGenome = useContext(ReferenceGenomeContext);
-
-    const firstSegment = referenceGenome.nucleotideSequences[0].name;
-    const firstGene = referenceGenome.genes[0].name;
-
-    if (sequenceType === 'amino acid') {
-        switch (mutationType) {
-            case 'substitution':
-                return <b>{firstGene}:57Q</b>;
-            case 'insertion':
-                return <b>ins_{firstGene}:31:N</b>;
-        }
-    }
-
-    if (isSingleSegmented(referenceGenome)) {
-        switch (mutationType) {
-            case 'substitution':
-                return <b>23T</b>;
-            case 'insertion':
-                return <b>ins_1046:A</b>;
-        }
-    }
-
-    switch (mutationType) {
-        case 'substitution':
-            return <b>{firstSegment}:23T</b>;
-        case 'insertion':
-            return <b>ins_{firstSegment}:10462:A</b>;
-    }
+const NoMutation = () => {
+    return (
+        <>
+            <InfoHeadline2>No Mutation</InfoHeadline2>
+            <InfoParagraph>
+                You can write a <b>.</b> for the <b>&lt;base&gt;</b> to filter for sequences for which it is confirmed
+                that no mutation occurred, i.e. has the same base as the reference genome at the specified position.
+            </InfoParagraph>
+        </>
+    );
 };

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 import z from 'zod';
 
+import { getExampleMutation } from './ExampleMutation';
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation, type ParsedMutationFilter } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
@@ -208,7 +209,6 @@ const MutationFilterSelector: FunctionComponent<{
     };
 
     const handleBlur = (event: FocusEvent) => {
-        // Check if click was inside the selector
         if (!selectorRef.current?.contains(event.relatedTarget as Node)) {
             setOption(null);
         }
@@ -242,11 +242,16 @@ const MutationFilterSelector: FunctionComponent<{
 };
 
 function getPlaceholder(referenceGenome: ReferenceGenome) {
-    const segmentPrefix =
-        referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : '';
-    const firstGene = referenceGenome.genes[0].name;
+    const nucleotideSubstitution = getExampleMutation(referenceGenome, 'nucleotide', 'substitution');
+    const nucleotideInsertion = getExampleMutation(referenceGenome, 'nucleotide', 'insertion');
+    const aminoAcidSubstitution = getExampleMutation(referenceGenome, 'amino acid', 'substitution');
+    const aminoAcidInsertion = getExampleMutation(referenceGenome, 'amino acid', 'insertion');
 
-    return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
+    const exampleMutations = [nucleotideSubstitution, nucleotideInsertion, aminoAcidSubstitution, aminoAcidInsertion]
+        .filter((example) => example !== '')
+        .join(', ');
+
+    return `Enter a mutation (e.g. ${exampleMutations})`;
 }
 
 const backgroundColor: { [key in keyof SelectedFilters]: string } = {

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

@@ -49,13 +49,23 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
                     gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
                 }}
+                className='text-center'
             >
+                {dates.map((date, columnIndex) => (
+                    <div
+                        className='@container font-semibold'
+                        style={{ gridRowStart: 1, gridColumnStart: columnIndex + 2 }}
+                        key={date.dateString}
+                    >
+                        <p {...styleGridHeader(columnIndex, dates)}>{date.dateString}</p>
+                    </div>
+                ))}
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
                         <Fragment key={`fragment-${mutation.toString()}`}>
                             <div
                                 key={`mutation-${mutation.toString()}`}
-                                style={{ gridRowStart: rowIndex + 1, gridColumnStart: 1 }}
+                                style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
                             </div>
@@ -69,7 +79,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 );
                                 return (
                                     <div
-                                        style={{ gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 }}
+                                        style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
                                         key={`${mutation.toString()}-${date.toString()}`}
                                     >
                                         <ProportionCell
@@ -90,6 +100,18 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
     );
 };
 
+function styleGridHeader(columnIndex: number, dates: Temporal[]) {
+    if (columnIndex === 0) {
+        return { className: 'overflow-visible text-nowrap' };
+    }
+
+    if (columnIndex === dates.length - 1) {
+        return { className: 'overflow-visible text-nowrap', style: { direction: 'rtl' } };
+    }
+
+    return { className: 'invisible @[6rem]:visible' };
+}
+
 function getTooltipPosition(rowIndex: number, rows: number, columnIndex: number, columns: number) {
     const tooltipX = rowIndex < rows / 2 || rowIndex < 6 ? 'bottom' : 'top';
     const tooltipY = columnIndex < columns / 2 ? 'start' : 'end';
@@ -135,7 +157,7 @@ const ProportionCell: FunctionComponent<{
                         backgroundColor: getColorWithingScale(value?.proportion, colorScale),
                         color: getTextColorForScale(value?.proportion, colorScale),
                     }}
-                    className={`w-full h-full text-center hover:font-bold text-xs group @container`}
+                    className={`w-full h-full hover:font-bold text-xs group @container`}
                 >
                     <span className='invisible @[2rem]:visible'>
                         {value === null ? '' : formatProportion(value.proportion, 0)}
@@ -155,7 +177,7 @@ const timeIntervalDisplay = (date: TemporalClass) => {
 };
 
 const MutationCell: FunctionComponent<{ mutation: Substitution | Deletion }> = ({ mutation }) => {
-    return <div className='text-center'>{mutation.code}</div>;
+    return <div>{mutation.code}</div>;
 };
 
 export default MutationsOverTimeGrid;

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

@@ -30,12 +30,7 @@ const Template = {
     render: (args: WastewaterMutationsOverTimeProps) => (
         <LapisUrlContext.Provider value={WISE_LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <WastewaterMutationsOverTime
-                    width={args.width}
-                    height={args.height}
-                    lapisFilter={args.lapisFilter}
-                    sequenceType={args.sequenceType}
-                />
+                <WastewaterMutationsOverTime {...args} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +43,7 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
         height: '700px',
         lapisFilter: {},
         sequenceType: 'nucleotide',
+        maxNumberOfGridRows: 100,
     },
     parameters: {
         fetchMock: {

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

@@ -23,7 +23,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     sequenceType: sequenceTypeSchema,
     width: z.string(),
     height: z.string(),
-    maxNumberOfGridRows: z.number().optional(),
+    maxNumberOfGridRows: z.number(),
 });
 
 export type WastewaterMutationsOverTimeProps = z.infer<typeof wastewaterMutationOverTimeSchema>;

package/src/web-components/{app.stories.ts → gs-app.stories.ts}

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import './app';
+import './gs-app';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';

package/src/web-components/{app.ts → gs-app.ts}

@@ -29,7 +29,7 @@ const lapisUrlSchema = z.string().url();
  * This component does __not__ use a shadow DOM. Children of this component will be rendered directly in the light DOM.
  */
 @customElement('gs-app')
-export class App extends LitElement {
+export class AppComponent extends LitElement {
     /**
      * Required.
      *
@@ -84,7 +84,7 @@ function GsAppError(error: string) {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-app': App;
+        'gs-app': AppComponent;
     }
 }
 

package/src/web-components/index.ts

@@ -1,4 +1,4 @@
-export { App } from './app.js';
+export { AppComponent } from './gs-app';
 export * from './visualization';
 export * from './wastewaterVisualization';
 export * from './input';

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -7,7 +7,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import './gs-date-range-selector';
-import '../app';
+import '../gs-app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeSelector/dateRangeOption';
 import { withinShadowRoot } from '../withinShadowRoot.story';

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import '../app';
+import '../gs-app';
 import './gs-lineage-filter';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';

package/src/web-components/input/gs-location-filter.stories.ts

@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import '../app';
+import '../gs-app';
 import './gs-location-filter';
 import data from '../../preact/locationFilter/__mockData__/aggregated.json';
 import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
-import '../app';
+import '../gs-app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './gs-mutation-filter';
@@ -158,7 +158,7 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
             const placeholderText = inputField().getAttribute('placeholder');
 
             expect(placeholderText).toEqual(
-                'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)',
+                'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)',
             );
         });
 

package/src/web-components/input/gs-text-input.stories.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import '../app';
+import '../gs-app';
 import './gs-text-input';
 import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
 import type { TextInputProps } from '../../preact/textInput/text-input';

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -9,7 +9,7 @@ import aggregatedDataWith2Fields from '../../preact/aggregatedData/__mockData__/
 import type { AggregateProps } from '../../preact/aggregatedData/aggregate';
 
 import './gs-aggregate';
-import '../app';
+import '../gs-app';
 
 const codeExample = `
 <gs-aggregate 

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import './gs-mutation-comparison';
-import '../app';
+import '../gs-app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import nucleotideMutationsOtherDataset from '../../preact/mutationComparison/__mockData__/nucleotideMutationsOtherDataset.json';

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import './gs-mutations-over-time';
-import '../app';
+import '../gs-app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
 import { type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';

package/src/web-components/visualization/gs-mutations.stories.ts

@@ -17,7 +17,7 @@ import { type MutationsProps } from '../../preact/mutations/mutations';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 import './gs-mutations';
-import '../app';
+import '../gs-app';
 
 const codeExample = String.raw`
 <gs-mutations