@genspectrum/dashboard-components 0.19.4 → 0.19.6

package/dist/util.d.ts

@@ -151,6 +151,7 @@ declare const dateRangeValueSchema: default_2.ZodNullable<default_2.ZodUnion<[de
 
 export declare const gsEventNames: {
     readonly error: "gs-error";
+    readonly componentFinishedLoading: "gs-component-finished-loading";
     readonly dateRangeFilterChanged: "gs-date-range-filter-changed";
     readonly dateRangeOptionChanged: "gs-date-range-option-changed";
     readonly mutationFilterChanged: "gs-mutation-filter-changed";
@@ -486,6 +487,19 @@ declare const namedLapisFilterSchema: default_2.ZodObject<{
     displayName: string;
 }>;
 
+export declare type NumberRange = default_2.infer<typeof numberRangeSchema>;
+
+declare const numberRangeSchema: default_2.ZodObject<{
+    min: default_2.ZodOptional<default_2.ZodNumber>;
+    max: default_2.ZodOptional<default_2.ZodNumber>;
+}, "strip", default_2.ZodTypeAny, {
+    min?: number | undefined;
+    max?: number | undefined;
+}, {
+    min?: number | undefined;
+    max?: number | undefined;
+}>;
+
 export declare type NumberSequencesOverTimeProps = default_2.infer<typeof numberSequencesOverTimePropsSchema>;
 
 declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
@@ -930,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -938,7 +952,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -946,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -954,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -994,7 +1008,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1002,7 +1016,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1010,7 +1024,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1018,7 +1032,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1058,11 +1072,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1070,7 +1080,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1078,10 +1088,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1089,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1097,7 +1104,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1105,7 +1116,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1113,10 +1124,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1124,7 +1135,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1132,10 +1143,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1143,7 +1154,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1170,11 +1181,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1182,7 +1192,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1190,7 +1200,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1198,7 +1212,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-GgkxoF3X.js";
+import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-Cqa8Frcf.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

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

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -6,6 +6,7 @@ import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',
@@ -62,6 +63,11 @@ export const Default: StoryObj<AggregateProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<AggregateProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const FailsLoadingData: StoryObj<AggregateProps> = {
     ...Default,
     parameters: {

package/src/preact/aggregatedData/aggregate.tsx

@@ -5,6 +5,7 @@ import { useLapisUrl } from '../LapisUrlContext';
 import { AggregateTable } from './aggregate-table';
 import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
 import { lapisFilterSchema, views } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -75,6 +76,8 @@ type AggregatedDataTabsProps = {
 };
 
 const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
 
     const getTab = (view: AggregateView) => {
@@ -109,7 +112,13 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
 
     const tabs = originalComponentProps.views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar data={data} originalComponentProps={originalComponentProps} />} />;
+    return (
+        <Tabs
+            ref={tabsRef}
+            tabs={tabs}
+            toolbar={<Toolbar data={data} originalComponentProps={originalComponentProps} />}
+        />
+    );
 };
 
 type ToolbarProps = {

package/src/preact/components/tabs.tsx

@@ -1,4 +1,4 @@
-import { type FunctionComponent } from 'preact';
+import { forwardRef } from 'preact/compat';
 import { useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
@@ -12,7 +12,7 @@ interface ComponentTabsProps {
     toolbar?: JSXInternal.Element | ((activeTab: string) => JSXInternal.Element);
 }
 
-const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
+const Tabs = forwardRef<HTMLDivElement, ComponentTabsProps>(({ tabs, toolbar }, ref) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
 
     const tabElements = (
@@ -40,7 +40,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div className='h-full w-full flex flex-col'>
+        <div ref={ref} className='h-full w-full flex flex-col'>
             <div className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
@@ -54,6 +54,6 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
             </div>
         </div>
     );
-};
+});
 
 export default Tabs;

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -2,6 +2,7 @@ import { Fragment, type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type CDSFeature } from './loadGff3';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { MinMaxRangeSlider } from '../components/min-max-range-slider';
 import Tooltip from '../components/tooltip';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
@@ -183,6 +184,8 @@ interface CDSProps {
 }
 
 const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
+    const ref = useDispatchFinishedLoadingEvent();
+
     const { gffData, genomeLength, width } = componentProps;
 
     const [zoomStart, setZoomStart] = useState(0);
@@ -197,7 +200,7 @@ const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
     };
 
     return (
-        <div class='p-4'>
+        <div ref={ref} class='p-4'>
             <CDSBars gffData={gffData} zoomStart={zoomStart} zoomEnd={zoomEnd} />
             <XAxis zoomStart={zoomStart} zoomEnd={zoomEnd} fullWidth={width} />
             <div class='relative w-full h-5'>

package/src/preact/genomeViewer/genome-data-viewer.stories.tsx

@@ -2,6 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 
 import { GenomeDataViewer, type GenomeDataViewerProps } from './genome-data-viewer';
 import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 const meta: Meta<GenomeDataViewerProps> = {
     title: 'Visualization/GenomeDataViewer',
@@ -75,6 +76,11 @@ export const Default: StoryObj<GenomeDataViewerProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<GenomeDataViewerProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const InvalidProps: StoryObj<GenomeDataViewerProps> = {
     ...Default,
     args: {

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

@@ -10,6 +10,7 @@ import { type MutationAnnotations } from '../../web-components/mutation-annotati
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const dateToSomeDataset = '2022-01-01';
@@ -142,6 +143,11 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<MutationComparisonProps> = {
+    ...TwoVariants,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {
     ...TwoVariants,
     play: async ({ canvasElement }) => {

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

@@ -7,6 +7,7 @@ import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
 import { namedLapisFilterSchema, sequenceTypeSchema, views } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -80,6 +81,8 @@ type MutationComparisonTabsProps = {
 };
 
 const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, originalComponentProps }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
@@ -127,6 +130,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
 
     return (
         <Tabs
+            ref={tabsRef}
             tabs={tabs}
             toolbar={
                 <Toolbar

package/src/preact/mutations/mutations.stories.tsx

@@ -17,6 +17,7 @@ import { type MutationAnnotations } from '../../web-components/mutation-annotati
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsProps> = {
@@ -147,6 +148,11 @@ export const Default: StoryObj<MutationsProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<MutationsProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const GridTab: StoryObj<MutationsProps> = {
     ...Default,
     play: async ({ canvasElement, step }) => {

package/src/preact/mutations/mutations.tsx

@@ -15,6 +15,7 @@ import {
     type SubstitutionOrDeletionEntry,
     views,
 } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -87,6 +88,8 @@ type MutationTabsProps = {
 };
 
 const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, originalComponentProps }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
 
     const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
@@ -153,7 +156,7 @@ const MutationsTabs: FunctionComponent<MutationTabsProps> = ({ mutationsData, or
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />;
 };
 
 type ToolbarProps = {

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -51,7 +51,9 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
-        if (applySearchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)) {
+        if (
+            mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
+        ) {
             return true;
         }
 
@@ -67,7 +69,7 @@ export function getFilteredMutationOverTimeData({
     return filteredData;
 }
 
-export function applySearchFilter(
+export function mutationOrAnnotationDoNotMatchFilter(
     mutation: Mutation,
     sequenceType: SequenceType,
     filterValue: string,

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

@@ -10,6 +10,7 @@ import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 import { expectMutationAnnotation } from '../shared/stories/expectMutationAnnotation';
 
 const meta: Meta<MutationsOverTimeProps> = {
@@ -83,6 +84,11 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const ShowsMutationAnnotations: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     play: async ({ canvasElement }) => {

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

@@ -18,6 +18,7 @@ import {
 } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
 import { type ColorScale } from '../components/color-scale-selector';
@@ -126,6 +127,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     originalComponentProps,
     overallMutationData,
 }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const [mutationFilterValue, setMutationFilterValue] = useState('');
     const annotationProvider = useMutationAnnotationsProvider();
 
@@ -207,7 +210,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 
     return (
         <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
-            <Tabs tabs={tabs} toolbar={toolbar} />
+            <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
         </PageSizeContextProvider>
     );
 };

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -7,6 +7,7 @@ import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/two
 import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 export default {
     title: 'Visualization/NumberSequencesOverTime',
@@ -71,8 +72,9 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
     },
 };
 
-export const Table = {
+export const FiresFinishedLoadingEvent: StoryObj<NumberSequencesOverTimeProps> = {
     ...Template,
+    play: playThatExpectsFinishedLoadingEvent(),
 };
 
 export const TwoVariants: StoryObj<NumberSequencesOverTimeProps> = {

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -11,6 +11,7 @@ import {
     queryNumberOfSequencesOverTime,
 } from '../../query/queryNumberOfSequencesOverTime';
 import { namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -88,6 +89,8 @@ interface NumberSequencesOverTimeTabsProps {
 }
 
 const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
@@ -134,6 +137,7 @@ const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSeq
 
     return (
         <Tabs
+            ref={tabsRef}
             tabs={originalComponentProps.views.map((view) => getTab(view))}
             toolbar={(activeTab) => (
                 <Toolbar

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -11,6 +11,7 @@ import numeratorOneDataset from './__mockData__/numeratorFilterOneDataset.json';
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 export default {
     title: 'Visualization/PrevalenceOverTime',
@@ -121,6 +122,11 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<PrevalenceOverTimeProps> = {
+    ...TwoVariants,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
     ...Template,
     args: {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -9,6 +9,7 @@ import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
 import { lapisFilterSchema, namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -101,6 +102,8 @@ type PrevalenceOverTimeTabsProps = PrevalenceOverTimeProps & {
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({ data, ...componentProps }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const { views, granularity, confidenceIntervalMethods, pageSize, yAxisMaxLinear, yAxisMaxLogarithmic } =
         componentProps;
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -182,7 +185,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />;
 };
 
 type ToolbarProps = PrevalenceOverTimeProps & {