@genspectrum/dashboard-components 0.19.5 → 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";
@@ -943,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -951,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>;
         }
     }
 }
@@ -959,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -967,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>;
         }
     }
 }
@@ -1007,7 +1008,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1015,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>;
         }
     }
 }
@@ -1023,7 +1024,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1031,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>;
         }
     }
 }
@@ -1123,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;
     }
 }
 
@@ -1134,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>;
         }
     }
 }
@@ -1142,10 +1143,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1153,7 +1154,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-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.5",
+    "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/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 & {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -7,6 +7,7 @@ import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './re
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 export default {
     title: 'Visualization/RelativeGrowthAdvantage',
@@ -90,6 +91,11 @@ export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<RelativeGrowthAdvantageProps> = {
+    ...Primary,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const TooFewDataToComputeGrowthAdvantage: StoryObj<RelativeGrowthAdvantageProps> = {
     ...Primary,
     args: {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -9,6 +9,7 @@ import {
     type RelativeGrowthAdvantageData,
 } from '../../query/queryRelativeGrowthAdvantage';
 import { lapisFilterSchema, views } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -103,6 +104,8 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     originalComponentProps,
 }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
 
     const getTab = (view: RelativeGrowthAdvantageView) => {
@@ -138,7 +141,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
         />
     );
 
-    return <Tabs tabs={tabs} toolbar={toolbar} />;
+    return <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />;
 };
 
 type RelativeGrowthAdvantageToolbarProps = {

package/src/preact/sequencesByLocation/sequences-by-location.stories.tsx

@@ -7,6 +7,7 @@ import { LapisUrlContextProvider } from '../LapisUrlContext';
 import aggregatedWorld from './__mockData__/aggregatedWorld.json';
 import { SequencesByLocation, type SequencesByLocationProps } from './sequences-by-location';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 import 'leaflet/dist/leaflet.css';
 import './leafletStyleModifications.css';
@@ -92,6 +93,11 @@ export const Default: StoryObj<SequencesByLocationProps> = {
     },
 };
 
+export const FiresFinishedLoadingEvent: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};
+
 export const NoData: StoryObj<SequencesByLocationProps> = {
     ...Default,
     parameters: {

package/src/preact/sequencesByLocation/sequences-by-location.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../query/computeMapLocationData';
 import { type AggregateData } from '../../query/queryAggregateData';
 import { querySequencesByLocationData } from '../../query/querySequencesByLocationData';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -93,6 +94,8 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
     originalComponentProps,
     data,
 }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
 
     const getTab = (view: SequencesByLocationMapView) => {
@@ -136,6 +139,7 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
 
     return (
         <Tabs
+            ref={tabsRef}
             tabs={tabs}
             toolbar={<Toolbar originalComponentProps={originalComponentProps} tableData={data.tableData} />}
         />

package/src/preact/shared/stories/expectFinishedLoadingEvent.ts

@@ -0,0 +1,12 @@
+import { expect, fn, waitFor } from '@storybook/test';
+
+import { gsEventNames } from '../../../utils/gsEventNames';
+
+export function playThatExpectsFinishedLoadingEvent() {
+    return async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+        const componentFinishedLoadingListenerMock = fn();
+        canvasElement.addEventListener(gsEventNames.componentFinishedLoading, componentFinishedLoadingListenerMock);
+
+        await waitFor(() => expect(componentFinishedLoadingListenerMock).toHaveBeenCalled());
+    };
+}

package/src/preact/statistic/statistics.stories.tsx

@@ -6,6 +6,7 @@ import { LapisUrlContextProvider } from '../LapisUrlContext';
 import denominatorData from './__mockData__/denominator.json';
 import numeratorData from './__mockData__/numerator.json';
 import { Statistics, type StatisticsProps } from './statistics';
+import { playThatExpectsFinishedLoadingEvent } from '../shared/stories/expectFinishedLoadingEvent';
 
 const meta: Meta<StatisticsProps> = {
     title: 'Visualization/Statistics',
@@ -78,3 +79,8 @@ export const Default: StoryObj<StatisticsProps> = {
         });
     },
 };
+
+export const FiresFinishedLoadingEvent: StoryObj<StatisticsProps> = {
+    ...Default,
+    play: playThatExpectsFinishedLoadingEvent(),
+};

package/src/preact/statistic/statistics.tsx

@@ -3,6 +3,7 @@ import z from 'zod';
 
 import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
 import { lapisFilterSchema } from '../../types';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
@@ -60,9 +61,11 @@ type MetricDataTabsProps = {
 };
 
 const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
+    const ref = useDispatchFinishedLoadingEvent();
+
     const { count, proportion } = data;
     return (
-        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100 min-w-[180px]'>
+        <div ref={ref} className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100 min-w-[180px]'>
             <div className='stat'>
                 <div className='stat-title'>Sequences</div>
                 <div className='stat-value text-2xl sm:text-4xl'>{count.toLocaleString('en-us')}</div>