@genspectrum/dashboard-components 0.18.5 → 0.19.0

package/dist/util.d.ts

@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -942,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1062,11 +1062,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1074,7 +1073,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1082,10 +1081,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1093,7 +1092,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,10 +1100,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1112,7 +1112,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.5",
+    "version": "0.19.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -38,8 +38,7 @@
             "require": "./dist/util.js"
         },
         "./custom-elements.json": "./custom-elements.json",
-        "./package.json": "./package.json",
-        "./style.css": "./dist/style.css"
+        "./package.json": "./package.json"
     },
     "files": [
         "dist",
@@ -132,7 +131,7 @@
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-storybook": "^0.11.0",
+        "eslint-plugin-storybook": "^0.12.0",
         "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",

package/src/preact/MutationAnnotationsContext.tsx

@@ -37,33 +37,7 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
             return parseResult;
         }
 
-        const nucleotideMap = new Map<string, MutationAnnotations>();
-        const nucleotidePositions = new Map<string, MutationAnnotations>();
-        const aminoAcidMap = new Map<string, MutationAnnotations>();
-        const aminoAcidPositions = new Map<string, MutationAnnotations>();
-
-        value.forEach((annotation) => {
-            new Set(annotation.nucleotideMutations).forEach((code) => {
-                addAnnotationToMap(nucleotideMap, code, annotation);
-            });
-            new Set(annotation.aminoAcidMutations).forEach((code) => {
-                addAnnotationToMap(aminoAcidMap, code, annotation);
-            });
-            new Set(annotation.nucleotidePositions).forEach((position) => {
-                addAnnotationToMap(nucleotidePositions, position, annotation);
-            });
-            new Set(annotation.aminoAcidPositions).forEach((position) => {
-                addAnnotationToMap(aminoAcidPositions, position, annotation);
-            });
-        });
-
-        return {
-            success: true as const,
-            value: {
-                nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
-                'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
-            },
-        };
+        return { success: true as const, value: getMutationAnnotationsContext(value) };
     }, [value]);
 
     if (!parseResult.success) {
@@ -79,6 +53,33 @@ export const MutationAnnotationsContextProvider: FunctionalComponent<
     );
 };
 
+export function getMutationAnnotationsContext(value: MutationAnnotations) {
+    const nucleotideMap = new Map<string, MutationAnnotations>();
+    const nucleotidePositions = new Map<string, MutationAnnotations>();
+    const aminoAcidMap = new Map<string, MutationAnnotations>();
+    const aminoAcidPositions = new Map<string, MutationAnnotations>();
+
+    value.forEach((annotation) => {
+        new Set(annotation.nucleotideMutations).forEach((code) => {
+            addAnnotationToMap(nucleotideMap, code, annotation);
+        });
+        new Set(annotation.aminoAcidMutations).forEach((code) => {
+            addAnnotationToMap(aminoAcidMap, code, annotation);
+        });
+        new Set(annotation.nucleotidePositions).forEach((position) => {
+            addAnnotationToMap(nucleotidePositions, position, annotation);
+        });
+        new Set(annotation.aminoAcidPositions).forEach((position) => {
+            addAnnotationToMap(aminoAcidPositions, position, annotation);
+        });
+    });
+
+    return {
+        nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
+        'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
+    };
+}
+
 function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
     const oldAnnotations = map.get(code.toUpperCase()) ?? [];
     map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
@@ -87,6 +88,12 @@ function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string,
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
+    return getMutationAnnotationsProvider(mutationAnnotations);
+}
+
+export function getMutationAnnotationsProvider(
+    mutationAnnotations: Record<SequenceType, MutationAnnotationPerSequenceType>,
+) {
     return (mutation: Mutation, sequenceType: SequenceType) => {
         const position =
             mutation.segment === undefined

package/src/preact/components/dropdown.tsx

@@ -30,7 +30,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ children, buttonTit
     return (
         <>
             <button type='button' className='btn btn-xs whitespace-nowrap w-full' onClick={toggle} ref={referenceRef}>
-                {buttonTitle}
+                <span className={'w-full truncate'}>{buttonTitle}</span>
             </button>
             <div ref={floatingRef} className={`${dropdownClass} ${showContent ? '' : 'hidden'}`}>
                 {children}

package/src/preact/components/info.tsx

@@ -21,7 +21,7 @@ export const InfoHeadline2: FunctionComponent = ({ children }) => {
 };
 
 export const InfoParagraph: FunctionComponent = ({ children }) => {
-    return <p className='text-justify text-base font-normal my-1'>{children}</p>;
+    return <p className='text-justify text-base font-normal my-1 text-wrap'>{children}</p>;
 };
 
 export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {
@@ -103,7 +103,6 @@ function generateFullExampleCode(componentCode: string, componentName: string) {
     return `<html>
 <head>
   <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"></script>
-  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
 </head>
 
 <body>

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

@@ -1,8 +1,6 @@
 import { type FunctionComponent, type JSX } from 'preact';
 import { useState } from 'preact/hooks';
 
-import './min-max-percent-slider.css';
-
 export interface MinMaxPercentSliderProps {
     min: number;
     max: number;

package/src/preact/components/mutations-over-time-text-filter.stories.tsx

@@ -0,0 +1,57 @@
+import { type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type Meta } from '@storybook/web-components';
+import { useState } from 'preact/hooks';
+
+import { MutationsOverTimeTextFilter, type TextFilterProps } from './mutations-over-time-text-filter';
+
+const meta: Meta = {
+    title: 'Component/Mutations over time text filter',
+    component: 'MutationsOverTimeTextFilter',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState = ({ setFilterValue, value }: { setFilterValue: (value: string) => void; value: string }) => {
+    const [state, setState] = useState(value);
+
+    return (
+        <MutationsOverTimeTextFilter
+            setFilterValue={(value) => {
+                setFilterValue(value);
+                setState(value);
+            }}
+            value={state}
+        />
+    );
+};
+
+export const MutationsOverTimeTextFilterStory: StoryObj<TextFilterProps> = {
+    render: (args) => {
+        return <WrapperWithState setFilterValue={args.setFilterValue} value={args.value} />;
+    },
+    args: {
+        setFilterValue: fn(),
+        value: 'Test',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial value to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Test');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('textbox');
+            await userEvent.clear(inputField);
+            await userEvent.type(inputField, 'OtherText');
+
+            await waitFor(() => expect(button).toHaveTextContent('OtherText'));
+        });
+    },
+};

package/src/preact/components/mutations-over-time-text-filter.tsx

@@ -0,0 +1,63 @@
+import type { h } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+import { Dropdown } from './dropdown';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export type TextFilterProps = { setFilterValue: (newValue: string) => void; value: string };
+
+export function MutationsOverTimeTextFilter({ setFilterValue, value }: TextFilterProps) {
+    const onInput = (newValue: string) => {
+        setFilterValue(newValue);
+    };
+
+    const onDeleteClick = () => setFilterValue('');
+
+    return (
+        <div className={'w-28 inline-flex'}>
+            <Dropdown buttonTitle={value === '' ? `Filter mutations` : value} placement={'bottom-start'}>
+                <div>
+                    <label className='flex gap-1 input input-xs'>
+                        <DebouncedInput placeholder={'Filter'} onInput={onInput} value={value} type='text' />
+                        {value !== undefined && value !== '' && (
+                            <button className={'cursor-pointer'} onClick={onDeleteClick}>
+                                <DeleteIcon />
+                            </button>
+                        )}
+                    </label>
+                </div>
+            </Dropdown>
+        </div>
+    );
+}
+
+function DebouncedInput({
+    value: initialValue,
+    onInput,
+    debounce = 500,
+    ...props
+}: {
+    onInput: (value: string) => void;
+    debounce?: number;
+    value?: string;
+} & Omit<h.JSX.IntrinsicElements['input'], 'onInput'>) {
+    const [value, setValue] = useState<string | undefined>(initialValue);
+
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            onInput(value ?? '');
+        }, debounce);
+
+        return () => clearTimeout(timeout);
+    }, [value, debounce, onInput]);
+
+    const onChangeInput = useCallback((event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setValue(event.currentTarget.value);
+    }, []);
+
+    return <input {...props} value={value} onInput={onChangeInput} />;
+}

package/src/preact/components/segment-selector.tsx

@@ -26,7 +26,7 @@ export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
     }
 
     return (
-        <div className='w-20 inline-flex'>
+        <div className='w-24 inline-flex'>
             <CheckboxSelector
                 items={displayedSegments}
                 label={getSegmentSelectorLabel(displayedSegments, sequenceType)}

package/src/preact/components/table.tsx

@@ -3,8 +3,6 @@ import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types'
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
-import 'gridjs/dist/theme/mermaid.css';
-
 export const tableStyle = {
     table: {
         fontSize: '12px',

package/src/preact/dateRangeFilter/date-picker.tsx

@@ -1,4 +1,3 @@
-import 'flatpickr/dist/flatpickr.min.css';
 import flatpickr from 'flatpickr';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -22,8 +21,10 @@ export function DatePicker({
 
     const [datePicker, setDatePicker] = useState<flatpickr.Instance | null>(null);
 
+    const calendarRef = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
-        if (!inputRef.current) {
+        if (!inputRef.current || !calendarRef.current) {
             return;
         }
 
@@ -33,6 +34,7 @@ export function DatePicker({
             defaultDate: value,
             minDate,
             maxDate,
+            appendTo: calendarRef.current,
         });
 
         setDatePicker(instance);
@@ -54,13 +56,16 @@ export function DatePicker({
     };
 
     return (
-        <input
-            className={`input w-full ${className}`}
-            type='text'
-            placeholder={placeholderText}
-            ref={inputRef}
-            onChange={handleChange}
-            onBlur={handleChange}
-        />
+        <div className={'w-full'}>
+            <input
+                className={`input w-full ${className}`}
+                type='text'
+                placeholder={placeholderText}
+                ref={inputRef}
+                onChange={handleChange}
+                onBlur={handleChange}
+            />
+            <div ref={calendarRef} />
+        </div>
     );
 }