@genspectrum/dashboard-components 0.4.0 → 0.4.2

package/src/preact/components/proportion-selector-dropdown.tsx

@@ -1,33 +1,24 @@
 import { type FunctionComponent } from 'preact';
 
+import { Dropdown } from './dropdown';
 import { ProportionSelector, type ProportionSelectorProps } from './proportion-selector';
 
-export interface ProportionSelectorDropdownProps extends ProportionSelectorProps {
-    openDirection?: 'left' | 'right';
-}
+export type ProportionSelectorDropdownProps = ProportionSelectorProps;
 
 export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDropdownProps> = ({
     proportionInterval,
     setMinProportion,
     setMaxProportion,
-    openDirection = 'right',
 }) => {
     const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
 
     return (
-        <div class={`dropdown ${openDirection === 'left' ? 'dropdown-end' : ''}`}>
-            <div tabIndex={0} role='button' class='btn btn-xs whitespace-nowrap'>
-                Proportion {label}
-            </div>
-            <ul tabIndex={0} class='p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-72'>
-                <div class='mb-2 ml-2'>
-                    <ProportionSelector
-                        proportionInterval={proportionInterval}
-                        setMinProportion={setMinProportion}
-                        setMaxProportion={setMaxProportion}
-                    />
-                </div>
-            </ul>
-        </div>
+        <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
+            <ProportionSelector
+                proportionInterval={proportionInterval}
+                setMinProportion={setMinProportion}
+                setMaxProportion={setMaxProportion}
+            />
+        </Dropdown>
     );
 };

package/src/preact/components/tabs.tsx

@@ -17,11 +17,20 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [heightOfTabs, setHeightOfTabs] = useState('3rem');
     const tabRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    const updateHeightOfTabs = () => {
         if (tabRef.current) {
             const heightOfTabs = tabRef.current.getBoundingClientRect().height;
             setHeightOfTabs(`${heightOfTabs}px`);
         }
+    };
+
+    useEffect(() => {
+        updateHeightOfTabs();
+
+        window.addEventListener('resize', updateHeightOfTabs);
+        return () => {
+            window.removeEventListener('resize', updateHeightOfTabs);
+        };
     }, []);
 
     const tabElements = (
@@ -51,9 +60,9 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
 
     return (
         <div className='h-full w-full'>
-            <div ref={tabRef} className='flex flex-row justify-between'>
+            <div ref={tabRef} className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
-                {toolbar && <div className='py-2'>{toolbarElement}</div>}
+                {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
                 className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -179,11 +179,11 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     };
 
     return (
-        <div class='join w-full' ref={divRef}>
+        <div class='flex flex-wrap' ref={divRef}>
             <Select
                 items={getSelectableOptions(customSelectOptions)}
                 selected={selectedDateRange}
-                selectStyle='select-bordered rounded-none join-item grow'
+                selectStyle='select-bordered rounded-none flex-grow w-40'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
@@ -191,22 +191,26 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
                     onSelectChange(value as CustomLabel | PresetOptionValues);
                 }}
             />
-            <input
-                class='input input-bordered rounded-none join-item grow'
-                type='text'
-                placeholder='Date from'
-                ref={fromDatePickerRef}
-                onChange={onChangeDateFrom}
-                onBlur={onChangeDateFrom}
-            />
-            <input
-                class='input input-bordered rounded-none join-item grow'
-                type='text'
-                placeholder='Date to'
-                ref={toDatePickerRef}
-                onChange={onChangeDateTo}
-                onBlur={onChangeDateTo}
-            />
+            <div className={'flex flex-wrap flex-grow'}>
+                <input
+                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    type='text'
+                    size={10}
+                    placeholder='Date from'
+                    ref={fromDatePickerRef}
+                    onChange={onChangeDateFrom}
+                    onBlur={onChangeDateFrom}
+                />
+                <input
+                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    type='text'
+                    size={10}
+                    placeholder='Date to'
+                    ref={toDatePickerRef}
+                    onChange={onChangeDateTo}
+                    onBlur={onChangeDateTo}
+                />
+            </div>
         </div>
     );
 };

package/src/preact/locationFilter/location-filter.tsx

@@ -51,11 +51,11 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
     const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
         const inputValue = event.currentTarget.value;
         setValue(inputValue);
-        if (inputValue.trim() === value.trim()) {
+        if (inputValue.trim() === value.trim() && inputValue !== '') {
             return;
         }
         const eventDetail = parseLocation(inputValue, fields);
-        if (hasMatchingEntry(data, eventDetail)) {
+        if (hasAllUndefined(eventDetail) || hasMatchingEntry(data, eventDetail)) {
             divRef.current?.dispatchEvent(
                 new CustomEvent('gs-location-changed', {
                     detail: eventDetail,
@@ -92,10 +92,17 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
 };
 
 const parseLocation = (location: string, fields: string[]) => {
+    if (location === '') {
+        return fields.reduce((acc, field) => ({ ...acc, [field]: undefined }), {});
+    }
     const fieldValues = location.split('/').map((part) => part.trim());
+
     return fields.reduce((acc, field, i) => ({ ...acc, [field]: fieldValues[i] }), {});
 };
 
+const hasAllUndefined = (obj: Record<string, string | undefined>) =>
+    Object.values(obj).every((value) => value === undefined);
+
 const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {
     if (data === null) {
         return false;

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

@@ -167,7 +167,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setProportionInterval,
 }) => {
     return (
-        <div class='flex flex-row'>
+        <>
             <ProportionSelectorDropdown
                 proportionInterval={proportionInterval}
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
@@ -184,6 +184,6 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 filename='mutation_comparison.csv'
             />
             <Info height={'100px'}>Info for mutation comparison</Info>
-        </div>
+        </>
     );
 };

package/src/preact/mutations/mutations.tsx

@@ -168,7 +168,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setProportionInterval,
 }) => {
     return (
-        <div class='flex flex-row'>
+        <>
             <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             {activeTab === 'Table' && (
                 <MutationTypeSelector
@@ -182,7 +182,6 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                         proportionInterval={proportionInterval}
                         setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                         setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
-                        openDirection={'left'}
                     />
                     <CsvDownloadButton
                         className='mx-1 btn btn-xs'
@@ -206,6 +205,6 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 />
             )}
             <Info height={'100px'}>Info for mutations</Info>
-        </div>
+        </>
     );
 };

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

@@ -208,7 +208,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     granularity,
 }) => {
     return (
-        <div class='flex'>
+        <>
             {activeTab !== 'Table' && (
                 <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             )}
@@ -226,11 +226,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             />
 
             <PrevalenceOverTimeInfo />
-        </div>
+        </>
     );
 };
 
-const PrevalenceOverTimeInfo: FunctionComponent = ({}) => {
+const PrevalenceOverTimeInfo: FunctionComponent = () => {
     return (
         <Info height={'100px'}>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
@@ -238,5 +238,3 @@ const PrevalenceOverTimeInfo: FunctionComponent = ({}) => {
         </Info>
     );
 };
-
-export default PrevalenceOverTime;

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

@@ -161,10 +161,10 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
     generationTime,
 }) => {
     return (
-        <div class='flex'>
+        <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             <RelativeGrowthAdvantageInfo generationTime={generationTime} />
-        </div>
+        </>
     );
 };
 

package/src/preact/shared/floating-ui/hooks.ts

@@ -0,0 +1,83 @@
+import { autoUpdate, computePosition, type Middleware } from '@floating-ui/dom';
+import type { Placement } from '@floating-ui/utils';
+import { useEffect, useRef } from 'preact/hooks';
+import type { MutableRefObject } from 'react';
+
+export function useFloatingUi(
+    referenceRef: MutableRefObject<HTMLElement | null>,
+    floatingRef: MutableRefObject<HTMLElement | null>,
+    middleware?: Array<Middleware | null | undefined | false>,
+    placement?: Placement,
+) {
+    const cleanupRef = useRef<Function | null>(null);
+
+    useEffect(() => {
+        if (!referenceRef.current || !floatingRef.current) {
+            return;
+        }
+
+        const { current: reference } = referenceRef;
+        const { current: floating } = floatingRef;
+
+        const update = () => {
+            computePosition(reference, floating, {
+                placement,
+                middleware,
+            }).then(({ x, y }) => {
+                floating.style.left = `${x}px`;
+                floating.style.top = `${y}px`;
+            });
+        };
+
+        update();
+        cleanupRef.current = autoUpdate(reference, floating, update);
+
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+            }
+        };
+    }, [placement, middleware, referenceRef, floatingRef]);
+}
+
+export function useCloseOnClickOutside(
+    floatingRef: MutableRefObject<HTMLElement | null>,
+    referenceRef: MutableRefObject<HTMLElement | null>,
+    setShowContent: (value: ((prevState: boolean) => boolean) | boolean) => void,
+) {
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const path = event.composedPath();
+            if (
+                floatingRef.current &&
+                !path.includes(floatingRef.current) &&
+                referenceRef.current &&
+                !path.includes(referenceRef.current)
+            ) {
+                setShowContent(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [floatingRef, referenceRef, setShowContent]);
+}
+
+export function useCloseOnEsc(setShowHelp: (value: ((prevState: boolean) => boolean) | boolean) => void) {
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setShowHelp(false);
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [setShowHelp]);
+}

package/src/preact/textInput/text-input.tsx

@@ -56,7 +56,7 @@ export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
     }
 
     const onInput = () => {
-        const value = inputRef.current?.value;
+        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
 
         if (isValidValue(value)) {
             inputRef.current?.dispatchEvent(
@@ -71,7 +71,7 @@ export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
 
     const isValidValue = (value: string | undefined) => {
         if (value === undefined) {
-            return false;
+            return true;
         }
         return data.includes(value);
     };

package/src/web-components/input/gs-location-filter.stories.ts

@@ -185,7 +185,16 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
         await step('Input invalid location', async () => {
             await userEvent.type(inputField(), 'Not / A / Location');
             await expect(listenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>18/}');
+            await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({
+                region: undefined,
+                country: undefined,
+                division: undefined,
+                location: undefined,
+            });
         });
 
         await step('Select Asia', async () => {

package/src/web-components/input/gs-text-input.stories.ts

@@ -118,7 +118,13 @@ export const FiresEvent: StoryObj<Required<TextInputProps>> = {
         await step('Enters an invalid host name', async () => {
             await userEvent.type(inputField(), 'notInList');
             await expect(listenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>9/}');
+            await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({
+                host: undefined,
+            });
         });
 
         await step('Enter a valid host name', async () => {

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

@@ -1,6 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import PrevalenceOverTime, { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
+import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';