@genspectrum/dashboard-components 0.3.2 → 0.4.1

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/input/gs-date-range-selector.stories.ts

@@ -5,8 +5,11 @@ import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
+import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import './gs-date-range-selector';
+import '../app';
+import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import {
-    type DateRangeSelectorProps,
     PRESET_VALUE_ALL_TIMES,
     PRESET_VALUE_CUSTOM,
     PRESET_VALUE_LAST_2_MONTHS,
@@ -14,10 +17,7 @@ import {
     PRESET_VALUE_LAST_3_MONTHS,
     PRESET_VALUE_LAST_6_MONTHS,
     PRESET_VALUE_LAST_MONTH,
-} from '../../preact/dateRangeSelector/date-range-selector';
-import './gs-date-range-selector';
-import '../app';
-import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
+} from '../../preact/dateRangeSelector/selectableOptions';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,6 +25,8 @@ const codeExample = String.raw`
     customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
     initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    initialDateFrom="2020-01-01"
+    initialDateTo="2021-01-01"
     width="100%"
     dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
@@ -82,6 +84,8 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         initialValue: PRESET_VALUE_LAST_6_MONTHS,
         dateColumn: 'aDateColumn',
         width: '100%',
+        initialDateFrom: '',
+        initialDateTo: '',
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -97,6 +101,8 @@ export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'C
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
+                    .initialDateFrom=${args.initialDateFrom}
+                    .initialDateTo=${args.initialDateTo}
                     .width=${args.width}
                     .dateColumn=${args.dateColumn}
                 ></gs-date-range-selector>

package/src/web-components/input/gs-date-range-selector.tsx

@@ -1,10 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-    type CustomSelectOption,
-    DateRangeSelector,
-    type PresetOptionValues,
-} from '../../preact/dateRangeSelector/date-range-selector';
+import { DateRangeSelector } from '../../preact/dateRangeSelector/date-range-selector';
+import { type CustomSelectOption, type PresetOptionValues } from '../../preact/dateRangeSelector/selectableOptions';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -61,6 +58,8 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
      *
      * If the value is invalid, the component will default to `'last6Months'`.
+     *
+     * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
      */
     @property()
     initialValue:
@@ -73,6 +72,22 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
         | 'last6Months'
         | string = 'last6Months';
 
+    /**
+     * A date string in the format `YYYY-MM-DD`.
+     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
+     * If `initialDateTo` is set, but this is unset, it will default to `earliestDate`.
+     */
+    @property()
+    initialDateFrom: string = '';
+
+    /**
+     * A date string in the format `YYYY-MM-DD`.
+     * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
+     * If `initialDateFrom` is set, but this is unset, it will default to the current date.
+     */
+    @property()
+    initialDateTo: string = '';
+
     /**
      * The width of the component.
      *
@@ -93,6 +108,8 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
                 customSelectOptions={this.customSelectOptions}
                 earliestDate={this.earliestDate}
                 initialValue={this.initialValue}
+                initialDateFrom={this.initialDateFrom}
+                initialDateTo={this.initialDateTo}
                 dateColumn={this.dateColumn}
                 width={this.width}
             />

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

@@ -190,13 +190,12 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Select Asia', async () => {
             await userEvent.type(inputField(), 'Asia');
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        region: 'Asia',
-                    },
-                }),
-            );
+            await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({
+                region: 'Asia',
+                country: undefined,
+                division: undefined,
+                location: undefined,
+            });
         });
 
         await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {

package/src/web-components/input/gs-location-filter.tsx

@@ -20,13 +20,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
- * and the corresponding values as values, if they are not `undefined`.
+ * and the corresponding values as values, even if they are `undefined`.
  * Example:
  * ```
  * {
  *   continent: "Asia",
  *   country: "China",
- *   city: "Beijing"
+ *   city: "Beijing",
+ *   district: undefined,
  * }
  * ```
  */

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

@@ -14,7 +14,6 @@ const codeExample = String.raw`
 <gs-mutation-filter 
     initialValue='["A123T"]'
     width='100%'
-    height='6.5rem'
 ></gs-mutation-filter>`;
 
 const meta: Meta<MutationFilterProps> = {
@@ -38,7 +37,6 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
         width: { control: 'text' },
-        height: { control: 'text' },
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -50,18 +48,13 @@ const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-mutation-filter
-                    .initialValue=${args.initialValue}
-                    .width=${args.width}
-                    .height=${args.height}
-                ></gs-mutation-filter>
+                <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
     args: {
         initialValue: [],
         width: '100%',
-        height: '3rem',
     },
 };
 

package/src/web-components/input/gs-mutation-filter.tsx

@@ -91,18 +91,10 @@ export class MutationFilterComponent extends PreactLitAdapter {
     @property({ type: String })
     width: string = '100%';
 
-    /**
-     * The height of the component.
-     *
-     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
-     */
-    @property({ type: String })
-    height: string = '6.5rem';
-
     override render() {
         return (
             <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} width={this.width} height={this.height} />
+                <MutationFilter initialValue={this.initialValue} width={this.width} />
             </ReferenceGenomesAwaiter>
         );
     }

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