@genspectrum/dashboard-components 0.4.0 → 0.4.1

package/src/preact/components/info.tsx

@@ -1,7 +1,9 @@
-import { autoUpdate, computePosition, offset, shift, size } from '@floating-ui/dom';
+import { offset, shift, size } from '@floating-ui/dom';
 import { type FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { type MutableRefObject } from 'react';
+import { useRef, useState } from 'preact/hooks';
+
+import { dropdownClass } from './dropdown';
+import { useCloseOnClickOutside, useCloseOnEsc, useFloatingUi } from '../shared/floating-ui/hooks';
 
 export interface InfoProps {
     height?: string;
@@ -12,7 +14,19 @@ const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
     const referenceRef = useRef<HTMLButtonElement>(null);
     const floatingRef = useRef<HTMLDivElement>(null);
 
-    useFloatingUi(referenceRef, floatingRef, height, showHelp);
+    useFloatingUi(referenceRef, floatingRef, [
+        offset(10),
+        shift(),
+        size({
+            apply() {
+                if (!floatingRef.current) {
+                    return;
+                }
+                floatingRef.current.style.width = '100vw';
+                floatingRef.current.style.height = height ? height : '50vh';
+            },
+        }),
+    ]);
 
     const toggleHelp = () => {
         setShowHelp(!showHelp);
@@ -22,14 +36,13 @@ const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
     useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
 
     return (
-        <div className='relative z-10'>
+        <div className='relative'>
             <button type='button' className='btn btn-xs' onClick={toggleHelp} ref={referenceRef}>
                 ?
             </button>
             <div
                 ref={floatingRef}
-                className='bg-white p-2 border border-gray-100 shadow-lg rounded overflow-y-auto opacity-90'
-                style={{ position: 'absolute', zIndex: 10, display: showHelp ? '' : 'none' }}
+                className={`${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? '' : 'hidden'}`}
             >
                 <div className={'flex flex-col'}>{children}</div>
                 <button
@@ -43,93 +56,6 @@ const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
     );
 };
 
-function useFloatingUi(
-    referenceRef: MutableRefObject<HTMLButtonElement | null>,
-    floatingRef: MutableRefObject<HTMLDivElement | null>,
-    height: string | undefined,
-    showHelp: boolean,
-) {
-    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, {
-                middleware: [
-                    offset(10),
-                    shift(),
-                    size({
-                        apply({}) {
-                            floating.style.width = '100vw';
-                            floating.style.height = height ? height : '50vh';
-                        },
-                    }),
-                ],
-            }).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();
-            }
-        };
-    }, [showHelp, height, referenceRef, floatingRef]);
-}
-
-function useCloseOnClickOutside(
-    floatingRef: MutableRefObject<HTMLDivElement | null>,
-    referenceRef: MutableRefObject<HTMLButtonElement | null>,
-    setShowHelp: (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)
-            ) {
-                setShowHelp(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [floatingRef, referenceRef, setShowHelp]);
-}
-
-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]);
-}
-
 export const InfoHeadline1: FunctionComponent = ({ children }) => {
     return <h1 className='text-lg font-bold'>{children}</h1>;
 };

package/src/preact/components/mutation-type-selector.tsx

@@ -21,7 +21,6 @@ export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps>
 
     return (
         <CheckboxSelector
-            className='mx-1'
             items={displayedMutationTypes}
             label={mutationTypesSelectorLabel}
             setItems={(items) => setDisplayedMutationTypes(items)}

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/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/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';