@genspectrum/dashboard-components 1.6.0 → 1.8.0

package/dist/util.d.ts

@@ -194,6 +194,19 @@ declare const mapSourceSchema: default_2.ZodObject<{
     topologyObjectsKey: string;
 }>;
 
+export declare type MeanProportionInterval = default_2.infer<typeof meanProportionIntervalSchema>;
+
+declare const meanProportionIntervalSchema: default_2.ZodObject<{
+    min: default_2.ZodNumber;
+    max: default_2.ZodNumber;
+}, "strip", default_2.ZodTypeAny, {
+    min: number;
+    max: number;
+}, {
+    min: number;
+    max: number;
+}>;
+
 export declare type MutationAnnotation = default_2.infer<typeof mutationAnnotationSchema>;
 
 export declare type MutationAnnotations = default_2.infer<typeof mutationAnnotationsSchema>;
@@ -430,6 +443,17 @@ export declare type MutationsView = default_2.infer<typeof mutationsViewSchema>;
 
 declare const mutationsViewSchema: default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"grid">, default_2.ZodLiteral<"insertions">]>;
 
+export declare type MutationType = default_2.infer<typeof mutationTypeSchema>;
+
+export declare const mutationType: {
+    readonly nucleotideMutations: "nucleotideMutations";
+    readonly nucleotideInsertions: "nucleotideInsertions";
+    readonly aminoAcidMutations: "aminoAcidMutations";
+    readonly aminoAcidInsertions: "aminoAcidInsertions";
+};
+
+declare const mutationTypeSchema: default_2.ZodEnum<["nucleotideMutations", "nucleotideInsertions", "aminoAcidMutations", "aminoAcidInsertions"]>;
+
 export declare type NamedLapisFilter = default_2.infer<typeof namedLapisFilterSchema>;
 
 declare const namedLapisFilterSchema: default_2.ZodObject<{
@@ -917,7 +941,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -925,7 +949,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -947,22 +971,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutations': MutationsComponent;
@@ -1091,6 +1099,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-date-range-filter': DateRangeFilterComponent;
@@ -1113,10 +1137,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1124,7 +1148,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1132,10 +1156,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1143,7 +1167,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-CQ32Qy8D.js";
+import { D, a, L, N, b, T, d, g, m, v } from "./NumberRangeFilterChangedEvent-BnPI-Asz.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,
@@ -8,6 +8,7 @@ export {
   T as TextFilterChangedEvent,
   d as dateRangeOptionPresets,
   g as gsEventNames,
+  m as mutationType,
   v as views
 };
 //# sourceMappingURL=util.js.map

package/package.json

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

package/src/preact/MutationLinkTemplateContext.tsx

@@ -0,0 +1,56 @@
+import { createContext, type Provider } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+import type { SequenceType } from '../types';
+import type { Deletion, Substitution } from '../utils/mutations';
+import { mutationLinkTemplateSchema } from '../web-components/mutation-link-template-context';
+import { ErrorDisplay } from './components/error-display';
+import { ResizeContainer } from './components/resize-container';
+
+type MutationLinkTemplate = {
+    nucleotideMutation?: string;
+    aminoAcidMutation?: string;
+};
+
+const MutationLinkTemplateContext = createContext<MutationLinkTemplate>({
+    nucleotideMutation: undefined,
+    aminoAcidMutation: undefined,
+});
+
+export const MutationLinkTemplateContextProvider: Provider<MutationLinkTemplate> = ({ value, children }) => {
+    const parseResult = useMemo(() => mutationLinkTemplateSchema.safeParse(value), [value]);
+
+    if (!parseResult.success) {
+        return (
+            <ResizeContainer size={{ width: '100%' }}>
+                <ErrorDisplay error={parseResult.error} layout='vertical' />
+            </ResizeContainer>
+        );
+    }
+
+    return (
+        <MutationLinkTemplateContext.Provider value={parseResult.data}>{children}</MutationLinkTemplateContext.Provider>
+    );
+};
+
+export function useMutationLinkProvider() {
+    const linkTemplate = useContext(MutationLinkTemplateContext);
+
+    return (mutation: Substitution | Deletion, sequenceType: SequenceType) => {
+        switch (sequenceType) {
+            case 'nucleotide': {
+                if (linkTemplate.nucleotideMutation !== undefined) {
+                    return linkTemplate.nucleotideMutation.replace('{{mutation}}', encodeURIComponent(mutation.code));
+                }
+                return undefined;
+            }
+
+            case 'amino acid': {
+                if (linkTemplate.aminoAcidMutation !== undefined) {
+                    return linkTemplate.aminoAcidMutation.replace('{{mutation}}', encodeURIComponent(mutation.code));
+                }
+                return undefined;
+            }
+        }
+    };
+}

package/src/preact/components/annotated-mutation.stories.tsx

@@ -2,15 +2,25 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 import { AnnotatedMutation, type AnnotatedMutationProps } from './annotated-mutation';
-import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import type { MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import type { MutationLinkTemplate } from '../../web-components/mutation-link-template-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+import { MutationLinkTemplateContextProvider } from '../MutationLinkTemplateContext';
 
-const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+type ContextProps = {
+    annotations: MutationAnnotations;
+    linkTemplate: MutationLinkTemplate;
+};
+
+type StoryProps = AnnotatedMutationProps & ContextProps;
+
+const meta: Meta<StoryProps> = {
     title: 'Component/Annotated Mutation',
     component: AnnotatedMutation,
     parameters: { fetchMock: {} },
     argTypes: {
         annotations: { control: { type: 'object' } },
+        linkTemplate: { control: { type: 'object' } },
         mutation: { control: { type: 'object' } },
         sequenceType: {
             options: ['nucleotide', 'amino acid'],
@@ -21,14 +31,16 @@ const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }>
 
 export default meta;
 
-export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+export const MutationWithoutAnnotationEntry: StoryObj<StoryProps> = {
     render: (args) => {
-        const { annotations, ...annotatedMutationsArgs } = args;
+        const { annotations, linkTemplate, ...annotatedMutationsArgs } = args;
 
         return (
-            <MutationAnnotationsContextProvider value={annotations}>
-                <AnnotatedMutation {...annotatedMutationsArgs} />
-            </MutationAnnotationsContextProvider>
+            <MutationLinkTemplateContextProvider value={linkTemplate}>
+                <MutationAnnotationsContextProvider value={annotations}>
+                    <AnnotatedMutation {...annotatedMutationsArgs} />
+                </MutationAnnotationsContextProvider>
+            </MutationLinkTemplateContextProvider>
         );
     },
     args: {
@@ -48,6 +60,7 @@ export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & {
                 nucleotideMutations: ['123T'],
             },
         ],
+        linkTemplate: {},
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -58,7 +71,7 @@ export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & {
     },
 };
 
-export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+export const MutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
         ...MutationWithoutAnnotationEntry.args,
@@ -77,15 +90,13 @@ export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { an
         await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
 
-        await userEvent.click(canvas.getByText('A23403G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
         await expect(canvas.getByRole('link', { name: 'with a link.' })).toBeVisible();
     },
 };
 
-export const MutationWithMultipleAnnotationEntries: StoryObj<
-    AnnotatedMutationProps & { annotations: MutationAnnotations }
-> = {
+export const MutationWithMultipleAnnotationEntries: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
         ...MutationWithoutAnnotationEntry.args,
@@ -111,17 +122,16 @@ export const MutationWithMultipleAnnotationEntries: StoryObj<
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
         await expect(canvas.queryByText('+')).toBeVisible();
 
-        await userEvent.click(canvas.getByText('A23403G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
         await expect(canvas.queryByText('Another test annotation')).toBeVisible();
     },
 };
 
-export const AminoAcidMutationWithAnnotationEntry: StoryObj<
-    AnnotatedMutationProps & { annotations: MutationAnnotations }
-> = {
+export const AminoAcidMutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {
+        ...MutationWithoutAnnotationEntry.args,
         mutation: {
             type: 'substitution',
             code: 'S:A501G',
@@ -145,7 +155,7 @@ export const AminoAcidMutationWithAnnotationEntry: StoryObj<
         await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
         await expect(getAnnotationIndicator(canvas)).toBeVisible();
 
-        await userEvent.click(canvas.getByText('S:A501G'));
+        await userEvent.click(canvas.getByText('*'));
         await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
     },
 };
@@ -157,3 +167,45 @@ function getAnnotationIndicator(canvas: ReturnType<typeof within>) {
 function getAnnotationName(canvas: ReturnType<typeof within>) {
     return canvas.queryByText('Test annotation');
 }
+
+export const NucleotideMutationWithLink: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        linkTemplate: {
+            nucleotideMutation: 'http://foo.com/query?nucMut={{mutation}}',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        const link = canvas.getByText('A23403G').closest('a');
+        void expect(link).toHaveAttribute('href', 'http://foo.com/query?nucMut=A23403G');
+    },
+};
+
+export const AminoAcidMutationWithLink: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        mutation: {
+            type: 'substitution',
+            code: 'S:A501G',
+            position: 501,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'amino acid',
+        linkTemplate: {
+            aminoAcidMutation: 'http://foo.com/query?aaMut={{mutation}}',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
+        const link = canvas.getByText('S:A501G').closest('a');
+        void expect(link).toHaveAttribute('href', 'http://foo.com/query?aaMut=S%3AA501G');
+    },
+};

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

@@ -7,6 +7,7 @@ import type { Deletion, Substitution } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
 import { ButtonWithModalDialog, useModalRef } from './modal';
+import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 
 export type AnnotatedMutationProps = {
     mutation: Substitution | Deletion;
@@ -15,13 +16,22 @@ export type AnnotatedMutationProps = {
 
 export const AnnotatedMutation: FunctionComponent<AnnotatedMutationProps> = (props) => {
     const annotationsProvider = useMutationAnnotationsProvider();
+    const linkProvider = useMutationLinkProvider();
     const modalRef = useModalRef();
 
-    return <AnnotatedMutationWithoutContext {...props} annotationsProvider={annotationsProvider} modalRef={modalRef} />;
+    return (
+        <AnnotatedMutationWithoutContext
+            {...props}
+            annotationsProvider={annotationsProvider}
+            linkProvider={linkProvider}
+            modalRef={modalRef}
+        />
+    );
 };
 
 type GridJsAnnotatedMutationProps = AnnotatedMutationProps & {
     annotationsProvider: ReturnType<typeof useMutationAnnotationsProvider>;
+    linkProvider: ReturnType<typeof useMutationLinkProvider>;
 };
 
 /**
@@ -43,12 +53,26 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     mutation,
     sequenceType,
     annotationsProvider,
+    linkProvider,
     modalRef,
 }) => {
+    const link = linkProvider(mutation, sequenceType);
+    let innerLabel = <>{mutation.code}</>;
+    if (link !== undefined) {
+        innerLabel = (
+            <a
+                className='hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 underline'
+                href={link}
+            >
+                {mutation.code}
+            </a>
+        );
+    }
+
     const mutationAnnotations = annotationsProvider(mutation, sequenceType);
 
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
-        return mutation.code;
+        return innerLabel;
     }
 
     const modalContent = (
@@ -66,22 +90,24 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     );
 
     return (
-        <ButtonWithModalDialog
-            buttonClassName={'select-text cursor-pointer'}
-            modalContent={modalContent}
-            modalRef={modalRef}
-        >
-            {mutation.code}
-            <sup>
-                {mutationAnnotations
-                    .map((annotation) => annotation.symbol)
-                    .map((symbol, index) => (
-                        <Fragment key={symbol}>
-                            <span className='text-red-600'>{symbol}</span>
-                            {index !== mutationAnnotations.length - 1 && ','}
-                        </Fragment>
-                    ))}
-            </sup>
-        </ButtonWithModalDialog>
+        <>
+            {innerLabel}
+            <ButtonWithModalDialog
+                buttonClassName={'select-text cursor-pointer'}
+                modalContent={modalContent}
+                modalRef={modalRef}
+            >
+                <sup className='hover:underline focus-visible:underline decoration-red-600'>
+                    {mutationAnnotations
+                        .map((annotation) => annotation.symbol)
+                        .map((symbol, index) => (
+                            <Fragment key={symbol}>
+                                <span className='text-red-600'>{symbol}</span>
+                                {index !== mutationAnnotations.length - 1 && ','}
+                            </Fragment>
+                        ))}
+                </sup>
+            </ButtonWithModalDialog>
+        </>
     );
 };

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -20,9 +20,16 @@ function getMaxTickNumber(fullWidth: number): number {
 }
 
 function getTicks(zoomStart: number, zoomEnd: number, fullWidth: number) {
-    const maxTickNumber = getMaxTickNumber(fullWidth);
+    let maxTickNumber = getMaxTickNumber(fullWidth);
     const length = zoomEnd - zoomStart;
-    const minTickSize = length / maxTickNumber;
+    let minTickSize = length / maxTickNumber;
+    if (minTickSize <= 1) {
+        maxTickNumber = MIN_TICK_NUMBER;
+        minTickSize = length / maxTickNumber;
+    }
+    if (minTickSize <= 1) {
+        return [];
+    }
     let maxTickSize = 10 ** Math.round(Math.log(minTickSize) / Math.log(10));
     const numTicks = Math.round(length / maxTickSize);
     if (numTicks > maxTickNumber) {
@@ -78,6 +85,7 @@ const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
                             width: `calc(${widthPercent}% - 1px)`,
                         }}
                     >
+                        {/* TODO(#994): determine if text can be shown based on text width */}
                         {width >= averageWidth ? tick.start : ''}
                     </div>
                 );
@@ -142,6 +150,9 @@ const CDSBars: FunctionComponent<CDSBarsProps> = (componentProps) => {
                                 if (start >= end) {
                                     return null;
                                 }
+                                if (zoomEnd - zoomStart <= 2) {
+                                    return null;
+                                }
 
                                 const widthPercent = ((end - start) / visibleRegionLength) * 100;
                                 const leftPercent = ((start - zoomStart) / visibleRegionLength) * 100;

package/src/preact/genomeViewer/loadGff3.ts

@@ -22,6 +22,12 @@ export async function loadGff3(gff3Source: string, genomeLength: number | undefi
     }
 
     const response = await fetch(gff3Source);
+    if (!response.ok) {
+        throw new UserFacingError(
+            'GFF3 download failed',
+            `Server returned ${response.status} ${response.statusText} for ${response.url}`,
+        );
+    }
     const content = await response.text();
     genomeLength ??= loadGenomeLength(content);
     return { features: parseGFF3(content), length: genomeLength };

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

@@ -6,6 +6,7 @@ import { type Dataset } from '../../operator/Dataset';
 import type { SequenceType } from '../../types';
 import { type DeletionClass, type SubstitutionClass } from '../../utils/mutations';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { useMutationLinkProvider } from '../MutationLinkTemplateContext';
 import { GridJsAnnotatedMutation } from '../components/annotated-mutation';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
@@ -26,6 +27,7 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
     sequenceType,
 }) => {
     const annotationsProvider = useMutationAnnotationsProvider();
+    const linkProvider = useMutationLinkProvider();
 
     const headers = [
         {
@@ -38,6 +40,7 @@ export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = (
                     mutation={cell}
                     sequenceType={sequenceType}
                     annotationsProvider={annotationsProvider}
+                    linkProvider={linkProvider}
                 />
             ),
         },

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

@@ -6,6 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { mutationType } from '../../types';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -230,7 +231,7 @@ export const FiltersOutDisabledMutationTypes: StoryObj<MutationFilterProps> = {
     ...Default,
     args: {
         ...Default.args,
-        enabledMutationTypes: ['nucleotideMutations'],
+        enabledMutationTypes: [mutationType.nucleotideMutations],
     },
     play: async ({ canvasElement, step }) => {
         const { canvas, changedListenerMock } = await prepare(canvasElement, step);