@genspectrum/dashboard-components 0.19.5 → 0.19.7

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>

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

@@ -9,6 +9,7 @@ import { LapisUrlContextProvider } from '../../LapisUrlContext';
 import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
 import details from './__mockData__/details.json';
 import type { MutationsOverTimeProps } from '../../mutationsOverTime/mutations-over-time';
+import { playThatExpectsFinishedLoadingEvent } from '../../shared/stories/expectFinishedLoadingEvent';
 
 const meta: Meta<WastewaterMutationsOverTimeProps> = {
     title: 'Wastewater visualization/Wastewater mutations over time',
@@ -67,6 +68,7 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
             ],
         },
     },
+    play: playThatExpectsFinishedLoadingEvent(),
 };
 
 export const ChangingRowsPerPageChangesItForEveryTag: StoryObj<WastewaterMutationsOverTimeProps> = {

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

@@ -5,6 +5,7 @@ import z from 'zod';
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
 import { lapisFilterSchema, type SequenceType, sequenceTypeSchema } from '../../../types';
 import { Map2dView } from '../../../utils/map2d';
+import { useDispatchFinishedLoadingEvent } from '../../../utils/useDispatchFinishedLoadingEvent';
 import { useLapisUrl } from '../../LapisUrlContext';
 import { useMutationAnnotationsProvider } from '../../MutationAnnotationsContext';
 import { type ColorScale } from '../../components/color-scale-selector';
@@ -145,6 +146,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
 }) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+
     const [mutationFilterValue, setMutationFilterValue] = useState('');
     const annotationProvider = useMutationAnnotationsProvider();
 
@@ -196,7 +199,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/utilEntrypoint.ts

@@ -41,4 +41,9 @@ export type { MutationAnnotations, MutationAnnotation } from './web-components/m
 
 export { gsEventNames } from './utils/gsEventNames';
 
-export { type NumberRange } from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';
+export {
+    type NumberRange,
+    type LapisNumberFilter,
+    NumberRangeFilterChangedEvent,
+    NumberRangeValueChangedEvent,
+} from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';

package/src/utils/gsEventNames.ts

@@ -1,5 +1,6 @@
 export const gsEventNames = {
     error: 'gs-error',
+    componentFinishedLoading: 'gs-component-finished-loading',
     dateRangeFilterChanged: 'gs-date-range-filter-changed',
     dateRangeOptionChanged: 'gs-date-range-option-changed',
     mutationFilterChanged: 'gs-mutation-filter-changed',

package/src/utils/useDispatchFinishedLoadingEvent.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+import { gsEventNames } from './gsEventNames';
+
+export function useDispatchFinishedLoadingEvent() {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (ref.current === null) {
+            return;
+        }
+
+        ref.current.dispatchEvent(
+            new CustomEvent(gsEventNames.componentFinishedLoading, { bubbles: true, composed: true }),
+        );
+    }, [ref]);
+
+    return ref;
+}

package/src/web-components/input/gs-number-range-filter.tsx

@@ -19,7 +19,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * The slider must be restricted to a certain range.
  * Users can however still enter values outside of this range in the text input fields.
  *
- * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-filter-changed
+ * @fires {CustomEvent<Record<string, number | undefined>>} gs-number-range-filter-changed
  * Fired when the slider is released,
  * `onBlur` on the input fields after the user has typed a valid range in the input fields,
  * or when one of the input fields is cleared.
@@ -39,7 +39,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * }
  * ```
  *
- * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-value-changed
+ * @fires {CustomEvent<Record<string, number | undefined>>} gs-number-range-value-changed
  * Similar to the `gs-number-range-filter-changed` event,
  * but contains an `event.detail` that has a fixed format:
  * ```

package/src/web-components/visualization/gs-aggregate.tsx

@@ -30,6 +30,9 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The chart shows the bars with the highest aggregated `count`.
  * The number of bars can be adjusted with the `maxNumberOfBars` property.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-aggregate')
 export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-genome-data-viewer.tsx

@@ -10,6 +10,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * This component shows the Coding Sequence (CDS) of a genome using a gff3 file as input.
  * The CDS shows which parts of the genome are translated into proteins.
  *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data.
  */
 @customElement('gs-genome-data-viewer')
 export class GenomeDataViewerComponent extends PreactLitAdapter {

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -34,6 +34,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  * selected proportion interval.
  * Thus, changing the proportion interval may change a mutations from being "common" between the datasets
  * to being "for one dataset only".
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-mutation-comparison')
 export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {

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

@@ -38,6 +38,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  * Users can filter the displayed rows by mean proportion via a slider in the toolbar.
  * The mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.
  * The initial mean proportion can be set via `initialMeanProportionInterval`.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-mutations.tsx

@@ -60,6 +60,8 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  *
  * The insertions view shows the count of all insertions for the dataset.
  *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-mutations')
 export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -19,6 +19,9 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * Thus, the `lapisFilter` implicitly also defines the range that is shown on the x-axis.
  * If you want to restrict the x-axis to a smaller date range,
  * then you need to set appropriate filter values in the `lapisFilter`.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-number-sequences-over-time')
 export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -41,6 +41,9 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * ### Table View
  *
  * Displays the prevalence over time as a table with one row per time point.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-prevalence-over-time')
 export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -33,6 +33,9 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * The dots in the plot show the proportions of the focal variant (defined by the `numeratorFilter`) to the baseline variant (defined by the `denominatorFilter`)
  * for every day as observed in the data.
  * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {

package/src/web-components/visualization/gs-sequences-by-location.tsx

@@ -94,6 +94,9 @@ const leafletModificationsCss = unsafeCSS(leafletStyleModifications);
  * - `lapisLocationField`,
  * - `count` (the number of samples in this location matching the `lapisFilter`),
  * - `proportion` (`count` / sum of the `count` of all locations).
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-sequences-by-location')
 export class SequencesByLocationComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/visualization/gs-statistics.tsx

@@ -10,6 +10,9 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * This component displays general statistics (number of sequences, overall proportion)
  * for a given numerator and denominator filter.
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-statistics')
 export class StatisticsComponent extends PreactLitAdapterWithGridJsStyles {

package/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx

@@ -24,6 +24,9 @@ import { type MutationAnnotations, mutationAnnotationsContext } from '../mutatio
  * This component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.
  *
  * @slot infoText - Additional information text to be shown in the info modal (the "?" button).
+ *
+ * @fires {CustomEvent<undefined>} gs-component-finished-loading
+ * Fired when the component has finished loading the required data from LAPIS.
  */
 @customElement('gs-wastewater-mutations-over-time')
 export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {