@genspectrum/dashboard-components 0.19.2 → 0.19.4

package/dist/util.d.ts

@@ -149,6 +149,18 @@ declare const dateRangeValueSchema: default_2.ZodNullable<default_2.ZodUnion<[de
     dateTo?: string | undefined;
 }>]>>;
 
+export declare const gsEventNames: {
+    readonly error: "gs-error";
+    readonly dateRangeFilterChanged: "gs-date-range-filter-changed";
+    readonly dateRangeOptionChanged: "gs-date-range-option-changed";
+    readonly mutationFilterChanged: "gs-mutation-filter-changed";
+    readonly lineageFilterChanged: "gs-lineage-filter-changed";
+    readonly locationChanged: "gs-location-changed";
+    readonly textFilterChanged: "gs-text-filter-changed";
+    readonly numberRangeFilterChanged: "gs-number-range-filter-changed";
+    readonly numberRangeValueChanged: "gs-number-range-value-changed";
+};
+
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
 declare const lapisFilterSchema: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
@@ -879,7 +891,7 @@ export { }
 
 declare global {
     interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
+        [gsEventNames.error]: ErrorEvent;
     }
 }
 
@@ -900,6 +912,22 @@ 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-mutation-comparison-component': MutationComparisonComponent;
@@ -1030,7 +1058,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;
     }
 }
 
@@ -1038,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1046,7 +1078,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1054,7 +1089,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1062,10 +1097,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1073,7 +1105,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1081,11 +1113,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1093,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,10 +1132,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1112,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1123,7 +1154,7 @@ declare global {
         'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1139,10 +1170,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1150,7 +1182,23 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+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>;
         }
     }
 }

package/dist/util.js

@@ -1,10 +1,11 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-ixHQkq8y.js";
+import { D, a, L, T, d, g, v } from "./LineageFilterChangedEvent-GgkxoF3X.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,
   L as LocationChangedEvent,
   T as TextFilterChangedEvent,
   d as dateRangeOptionPresets,
+  g as gsEventNames,
   v as views
 };
 //# sourceMappingURL=util.js.map

package/package.json

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

package/src/componentsEntrypoint.ts

@@ -1,9 +1,11 @@
+import { type gsEventNames } from './utils/gsEventNames';
+
 export * from './web-components';
 
 export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
 
 declare global {
     interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
+        [gsEventNames.error]: ErrorEvent;
     }
 }

package/src/preact/components/error-display.stories.tsx

@@ -3,6 +3,7 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { ErrorDisplay, UserFacingError } from './error-display';
 import { ResizeContainer } from './resize-container';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 const meta: Meta = {
     title: 'Component/Error',
@@ -58,7 +59,7 @@ export const FiresEvent: StoryObj = {
 
     play: async ({ canvasElement }) => {
         const listenerMock = fn();
-        canvasElement.addEventListener('gs-error', listenerMock);
+        canvasElement.addEventListener(gsEventNames.error, listenerMock);
 
         await waitFor(async () => {
             await expect(listenerMock.mock.calls.at(-1)![0].error.name).toStrictEqual('UserFacingError');

package/src/preact/components/error-display.tsx

@@ -5,12 +5,11 @@ import { type ZodError } from 'zod';
 import { InfoHeadline1, InfoParagraph } from './info';
 import { Modal } from './modal';
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
-
-export const GS_ERROR_EVENT_TYPE = 'gs-error';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 export class ErrorEvent extends Event {
     constructor(public readonly error: Error) {
-        super(GS_ERROR_EVENT_TYPE, {
+        super(gsEventNames.error, {
             bubbles: true,
             composed: true,
         });

package/src/preact/components/min-max-range-slider.tsx

@@ -6,6 +6,7 @@ export interface MinMaxPercentSliderProps {
     max: number;
     setMin: (min: number) => void;
     setMax: (max: number) => void;
+    onDrop?: () => void;
     rangeMin?: number;
     rangeMax?: number;
     step?: number;
@@ -16,6 +17,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
     max,
     setMin,
     setMax,
+    onDrop,
     rangeMin = 0,
     rangeMax = 100,
     step = 0.1,
@@ -55,14 +57,16 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
         }
     };
 
+    const lowerBoundary = getGradientBoundary(min, rangeMin, rangeMax);
+    const upperBoundary = getGradientBoundary(max, rangeMin, rangeMax);
     const background = `
         linear-gradient(
             to right,
             ${sliderColor} 0%,
-            ${sliderColor} ${min}%,
-            ${rangeColor} ${min}%,
-            ${rangeColor} ${max}%,
-            ${sliderColor} ${max}%,
+            ${sliderColor} ${lowerBoundary}%,
+            ${rangeColor} ${lowerBoundary}%,
+            ${rangeColor} ${upperBoundary}%,
+            ${sliderColor} ${upperBoundary}%,
             ${sliderColor} 100%)
     `;
 
@@ -73,6 +77,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 type='range'
                 value={min}
                 onInput={onMinChange}
+                onMouseUp={() => onDrop?.()}
+                onTouchEnd={() => onDrop?.()}
                 min={`${rangeMin}`}
                 max={`${rangeMax}`}
                 step={step}
@@ -86,8 +92,17 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 max={`${rangeMax}`}
                 step={step}
                 onInput={onMaxChange}
+                onMouseUp={() => onDrop?.()}
+                onTouchEnd={() => onDrop?.()}
                 style={{ background, zIndex: zIndexTo }}
             />
         </div>
     );
 };
+
+/**
+ * This is a linear function that returns 0 for x = lowerBound and 100 for x = upperBound.
+ */
+function getGradientBoundary(x: number, lowerBound: number, upperBound: number) {
+    return ((x - lowerBound) / (upperBound - lowerBound)) * 100;
+}

package/src/preact/components/resize-container.tsx

@@ -1,18 +1,15 @@
-import { type FunctionComponent } from 'preact';
+import { type ComponentChildren } from 'preact';
+import { forwardRef } from 'preact/compat';
 
 export type Size = {
     width: string;
     height?: string;
 };
 
-export interface ResizeContainerProps {
-    size: Size;
-}
-
-export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size }) => {
-    return (
-        <div style={size} className='bg-white'>
+export const ResizeContainer = forwardRef<HTMLDivElement, { size: Size; children: ComponentChildren }>(
+    ({ size, children }, ref) => (
+        <div ref={ref} style={{ width: size.width, height: size.height, position: 'relative' }}>
             {children}
         </div>
-    );
-};
+    ),
+);

package/src/preact/components/tooltip.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { type CSSProperties } from 'preact/compat';
 import { type JSXInternal } from 'preact/src/jsx';
 
 export type TooltipPosition =
@@ -14,6 +15,7 @@ export type TooltipPosition =
 export type TooltipProps = {
     content: string | JSXInternal.Element;
     position?: TooltipPosition;
+    tooltipStyle?: CSSProperties;
 };
 
 function getPositionCss(position?: TooltipPosition) {
@@ -39,12 +41,13 @@ function getPositionCss(position?: TooltipPosition) {
     }
 }
 
-const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom' }) => {
+const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom', tooltipStyle }) => {
     return (
-        <div className='relative w-full h-full'>
-            <div className='peer w-full h-full'>{children}</div>
+        <div className={`relative group`}>
+            <div>{children}</div>
             <div
-                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`}
+                className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`}
+                style={{ ...tooltipStyle }}
             >
                 {content}
             </div>

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { dateRangeOptionPresets, type DateRangeValue } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -27,7 +28,7 @@ const meta: Meta<DateRangeFilterProps> = {
     component: DateRangeFilter,
     parameters: {
         actions: {
-            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
+            handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...previewHandles],
         },
         fetchMock: {},
     },
@@ -198,7 +199,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
-                ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
+                ref.current?.addEventListener(gsEventNames.dateRangeOptionChanged, (event) => {
                     setValue(event.detail);
                 });
             }, []);
@@ -255,7 +256,10 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
 
         await step('Clearing the value from within the component is still possible', async () => {
             await waitFor(async () => {
-                await userEvent.click(canvas.getByRole('button', { name: '×' }));
+                await expect(canvas.getByRole('button', { name: '×' })).toBeVisible();
+            });
+            await userEvent.click(canvas.getByRole('button', { name: '×' }));
+            await waitFor(async () => {
                 await expectOptionSelected(canvasElement, placeholder);
             });
             await waitFor(async () => {
@@ -333,8 +337,8 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const filterChangedListenerMock = fn();
     const optionChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-        canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock);
     });
 
     return { canvas, filterChangedListenerMock, optionChangedListenerMock };

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -10,6 +10,7 @@ import {
     dateRangeOptionSchema,
     dateRangeValueSchema,
 } from './dateRangeOption';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { ClearableSelect } from '../components/clearable-select';
 import { ErrorBoundary } from '../components/error-boundary';
 
@@ -170,7 +171,7 @@ export const DateRangeFilterInner = ({
         };
 
         divRef.current?.dispatchEvent(
-            new CustomEvent('gs-date-range-filter-changed', {
+            new CustomEvent(gsEventNames.dateRangeFilterChanged, {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -1,6 +1,7 @@
 import z from 'zod';
 
 import { toYYYYMMDD } from './dateConversion';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 /**
  * A date range option that can be used in the `gs-date-range-filter` component.
@@ -36,7 +37,7 @@ export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
     constructor(detail: DateRangeValue) {
-        super('gs-date-range-option-changed', {
+        super(gsEventNames.dateRangeOptionChanged, {
             detail,
             bubbles: true,
             composed: true,