@genspectrum/dashboard-components 0.19.1 → 0.19.3

package/dist/util.d.ts

@@ -149,6 +149,16 @@ 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";
+};
+
 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 +889,7 @@ export { }
 
 declare global {
     interface HTMLElementEventMap {
-        'gs-error': ErrorEvent;
+        [gsEventNames.error]: ErrorEvent;
     }
 }
 
@@ -902,7 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -910,7 +920,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>;
         }
     }
 }
@@ -950,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -958,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -974,7 +984,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -996,6 +1006,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-aggregate': AggregateComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutations-over-time': MutationsOverTimeComponent;
@@ -1014,7 +1040,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1022,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1065,8 +1091,8 @@ declare global {
         'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1085,7 +1111,7 @@ declare global {
         'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1104,7 +1130,7 @@ declare global {
         'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1123,7 +1149,7 @@ declare global {
         'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1142,7 +1168,7 @@ declare global {
         'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 

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-b0iuroUL.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.1",
+    "version": "0.19.3",
     "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/downshift-combobox.tsx

@@ -1,6 +1,6 @@
 import { useCombobox } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -15,7 +15,7 @@ export function DownshiftCombobox<Item>({
     inputClassName = '',
 }: {
     allItems: Item[];
-    value?: Item | null;
+    value: Item | null;
     filterItemsByInputValue: (item: Item, value: string) => boolean;
     createEvent: (item: Item | null) => CustomEvent;
     itemToString: (item: Item | undefined | null) => string;
@@ -23,12 +23,25 @@ export function DownshiftCombobox<Item>({
     formatItemInList: (item: Item) => ComponentChild;
     inputClassName?: string;
 }) {
-    const [itemsFilter, setItemsFilter] = useState(itemToString(value));
+    const [selectedItem, setSelectedItem] = useState<Item | null>(() => value);
+    const [itemsFilter, setItemsFilter] = useState(() => itemToString(selectedItem));
+
+    useEffect(() => {
+        setSelectedItem(value);
+        setItemsFilter(itemToString(value));
+    }, [itemToString, value]);
+
     const items = useMemo(
         () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
         [allItems, filterItemsByInputValue, itemsFilter],
     );
     const divRef = useRef<HTMLDivElement>(null);
+    const [inputIsInvalid, setInputIsInvalid] = useState(false);
+
+    const selectItem = (item: Item | null) => {
+        setSelectedItem(item);
+        divRef.current?.dispatchEvent(createEvent(item));
+    };
 
     const shadowRoot = divRef.current?.shadowRoot ?? undefined;
 
@@ -49,39 +62,41 @@ export function DownshiftCombobox<Item>({
         getInputProps,
         highlightedIndex,
         getItemProps,
-        selectedItem,
         inputValue,
-        selectItem,
-        setInputValue,
         closeMenu,
     } = useCombobox({
         onInputValueChange({ inputValue }) {
-            setItemsFilter(inputValue);
+            setInputIsInvalid(false);
+            setItemsFilter(inputValue.trim());
         },
         onSelectedItemChange({ selectedItem }) {
-            if (selectedItem !== null) {
-                divRef.current?.dispatchEvent(createEvent(selectedItem));
-            }
+            selectItem(selectedItem);
         },
         items,
         itemToString(item) {
             return itemToString(item);
         },
-        selectedItem: value,
+        selectedItem,
         environment,
     });
 
     const onInputBlur = () => {
         if (inputValue === '') {
-            divRef.current?.dispatchEvent(createEvent(null));
             selectItem(null);
-        } else if (inputValue !== itemToString(selectedItem)) {
-            setInputValue(itemToString(selectedItem) || '');
+            return;
+        }
+
+        const trimmedInput = inputValue.trim();
+        const matchingItem = items.find((item) => itemToString(item) === trimmedInput);
+        if (matchingItem !== undefined) {
+            selectItem(matchingItem);
+            return;
         }
+
+        setInputIsInvalid(true);
     };
 
     const clearInput = () => {
-        divRef.current?.dispatchEvent(createEvent(null));
         selectItem(null);
     };
 
@@ -91,7 +106,7 @@ export function DownshiftCombobox<Item>({
         <div ref={divRef} className={'relative w-full'}>
             <div className='w-full flex flex-col gap-1'>
                 <div
-                    className={`flex gap-0.5 input min-w-32 w-full ${inputClassName}`}
+                    className={`flex gap-0.5 input min-w-32 w-full ${inputClassName} ${inputIsInvalid ? 'input-error' : ''}`}
                     onBlur={(event) => {
                         if (event.relatedTarget != buttonRef.current) {
                             closeMenu();

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/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);
                 });
             }, []);
@@ -333,8 +334,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,