@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,43 @@
+import { type FunctionComponent } from 'preact';
+
+import { MinMaxRangeSlider } from './min-max-range-slider';
+import { PercentInput } from './percent-intput';
+
+export type ProportionInterval = { min: number; max: number };
+
+export interface ProportionSelectorProps {
+    proportionInterval: ProportionInterval;
+    setMinProportion: (minProportion: number) => void;
+    setMaxProportion: (maxProportion: number) => void;
+}
+
+export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
+    proportionInterval,
+    setMinProportion,
+    setMaxProportion,
+}) => {
+    const { min: minProportion, max: maxProportion } = proportionInterval;
+    return (
+        <div class='flex flex-col w-64 mb-2'>
+            <div class='flex items-center '>
+                <PercentInput
+                    percentage={minProportion * 100}
+                    setPercentage={(percentage) => setMinProportion(percentage / 100)}
+                />
+                <div class='m-2'>-</div>
+                <PercentInput
+                    percentage={maxProportion * 100}
+                    setPercentage={(percentage) => setMaxProportion(percentage / 100)}
+                />
+            </div>
+            <div class='my-1'>
+                <MinMaxRangeSlider
+                    min={minProportion * 100}
+                    max={maxProportion * 100}
+                    setMin={(percentage) => setMinProportion(percentage / 100)}
+                    setMax={(percentage) => setMaxProportion(percentage / 100)}
+                />
+            </div>
+        </div>
+    );
+};

package/src/preact/components/scaling-selector.stories.tsx

@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+
+import { ScalingSelector, type ScalingSelectorProps } from './scaling-selector';
+import { type SelectProps } from './select';
+
+const meta: Meta<SelectProps> = {
+    title: 'Component/Scaling selector',
+    component: ScalingSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const ScalingSelectorStory: StoryObj<ScalingSelectorProps> = {
+    args: {
+        yAxisScaleType: 'linear',
+        setYAxisScaleType: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        await userEvent.selectOptions(canvas.getByRole('combobox'), 'logarithmic');
+        await waitFor(() => expect(args.setYAxisScaleType).toHaveBeenCalledWith('logarithmic'));
+    },
+};

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

@@ -0,0 +1,36 @@
+import { type FunctionComponent } from 'preact';
+
+import { Select } from './select';
+import type { ScaleType } from '../shared/charts/getYAxisScale';
+
+export type ScalingSelectorProps = {
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+    className?: string;
+};
+
+export const ScalingSelector: FunctionComponent<ScalingSelectorProps> = ({
+    yAxisScaleType,
+    setYAxisScaleType,
+    className,
+}) => {
+    const items = [
+        { label: 'y axis scaling type', value: 'none', disabled: true },
+        { label: 'Linear', value: 'linear' },
+        { label: 'Logarithmic', value: 'logarithmic' },
+        { label: 'Logit', value: 'logit' },
+    ];
+
+    return (
+        <Select
+            items={items}
+            selected={yAxisScaleType}
+            onChange={(event: Event) => {
+                const select = event.target as HTMLSelectElement;
+                const value = select.value as ScaleType;
+                setYAxisScaleType(value);
+            }}
+            selectStyle={`${className} select-xs select-bordered`}
+        />
+    );
+};

package/src/preact/components/select.stories.tsx

@@ -0,0 +1,42 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+
+import { Select, type SelectProps } from './select';
+
+const meta: Meta<SelectProps> = {
+    title: 'Component/Select',
+    component: Select,
+    argTypes: {
+        onChange: { action: true },
+    },
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const SelectStory: StoryObj<SelectProps> = {
+    args: {
+        items: [
+            { label: 'Disabled first element', disabled: true, value: 'does not matter' },
+            { label: 'First Option', value: 'firstOption' },
+            { label: 'Second Option', value: 'secondOption' },
+        ],
+        selected: 'firstOption',
+        selectStyle: '',
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        await userEvent.selectOptions(canvas.getByRole('combobox'), 'secondOption');
+        await waitFor(() =>
+            expect(args.onChange).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'change',
+                    target: expect.objectContaining({
+                        value: 'secondOption',
+                    }),
+                }),
+            ),
+        );
+    },
+};

package/src/preact/components/select.tsx

@@ -0,0 +1,21 @@
+import { type FunctionComponent } from 'preact';
+import { type JSXInternal } from 'preact/src/jsx';
+
+export interface SelectProps {
+    items: { label: string; value: string; disabled?: boolean }[];
+    selected: string;
+    onChange: JSXInternal.GenericEventHandler<HTMLSelectElement>;
+    selectStyle?: string;
+}
+
+export const Select: FunctionComponent<SelectProps> = ({ items, selected, onChange, selectStyle }) => {
+    return (
+        <select class={`select select-bordered ${selectStyle}`} value={selected} onChange={onChange}>
+            {items.map((item) => (
+                <option key={item.value} value={item.value} disabled={item.disabled}>
+                    {item.label}
+                </option>
+            ))}
+        </select>
+    );
+};

package/src/preact/components/table.stories.tsx

@@ -0,0 +1,24 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { Table } from './table';
+
+const meta: Meta = {
+    title: 'Component/Table',
+    component: Table,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const TableStory: StoryObj = {
+    render: (args) => {
+        return <Table data={args.data} columns={args.columns} pagination={false} />;
+    },
+    args: {
+        data: [
+            ['John Do', 'john@example.com', '123-456-7890'],
+            ['Jane Doe', 'jane@example.com', '098-765-4321'],
+        ],
+        columns: [{ name: 'Name' }, { name: 'Email', sort: true }, { name: 'Phone Number' }],
+    },
+};

package/src/preact/components/table.tsx

@@ -0,0 +1,51 @@
+import { Grid } from 'gridjs';
+import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types';
+import { type PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
+import { type ComponentChild } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import 'gridjs/dist/theme/mermaid.css';
+
+export const tableStyle = {
+    table: {
+        fontSize: '12px',
+    },
+    th: {
+        padding: '4px',
+        textAlign: 'center',
+    },
+    td: {
+        textAlign: 'center',
+        padding: '8px',
+    },
+    footer: {
+        fontSize: '12px',
+    },
+};
+
+interface TableProps {
+    data: TData;
+    columns: OneDArray<TColumn | string | ComponentChild>;
+    pagination: PaginationConfig | boolean;
+}
+
+export const Table = ({ data, columns, pagination }: TableProps) => {
+    const wrapper = useRef(null);
+
+    useEffect(() => {
+        if (wrapper.current === null) {
+            return;
+        }
+        const grid = new Grid({
+            columns,
+            data,
+            style: tableStyle,
+            pagination,
+        }).render(wrapper.current);
+
+        return () => {
+            grid.destroy();
+        };
+    });
+
+    return <div ref={wrapper} />;
+};

package/src/preact/components/tabs.stories.tsx

@@ -0,0 +1,60 @@
+import { type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, waitFor, within } from '@storybook/test';
+import { type Meta } from '@storybook/web-components';
+
+import Tabs from './tabs';
+
+const meta: Meta = {
+    title: 'Component/Tabs',
+    component: 'ComponentTabs',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const TabsStory: StoryObj = {
+    render: () => {
+        const firstTab = {
+            title: 'Tab 1',
+            content: <p>Tab 1 Content</p>,
+        };
+
+        const secondTab = {
+            title: 'Tab 2',
+            content: <p>Tab 2 Content</p>,
+        };
+
+        const toolbar = <p>Toolbar</p>;
+
+        return <Tabs tabs={[firstTab, secondTab]} toolbar={toolbar} />;
+    },
+};
+
+export const TabsWithToolbarOnlyShowingOnSecondTab: StoryObj = {
+    render: () => {
+        const firstTab = {
+            title: 'FirstTab',
+            content: <p>Tab 1 Content</p>,
+        };
+
+        const secondTab = {
+            title: 'SecondTab',
+            content: <p>Tab 2 Content</p>,
+        };
+
+        const toolbar = (activeTab: string) => {
+            return <>{activeTab === 'SecondTab' && <p>Toolbar</p>}</>;
+        };
+
+        return <Tabs tabs={[firstTab, secondTab]} toolbar={toolbar} />;
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByLabelText('FirstTab', { selector: 'input' })).toBeVisible());
+        await expect(canvas.queryByText('Toolbar')).not.toBeInTheDocument();
+
+        await fireEvent.click(canvas.getByLabelText('SecondTab', { selector: 'input' }));
+        await waitFor(() => expect(canvas.getByText('Toolbar')).toBeVisible());
+    },
+};

package/src/preact/components/tabs.tsx

@@ -0,0 +1,49 @@
+import { Fragment, type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { type JSXInternal } from 'preact/src/jsx';
+
+type Tab = {
+    title: string;
+    content: JSXInternal.Element;
+};
+
+interface ComponentTabsProps {
+    tabs: Tab[];
+    toolbar?: JSXInternal.Element | ((activeTab: string) => JSXInternal.Element);
+}
+
+const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
+    const [activeTab, setActiveTab] = useState(tabs[0].title);
+
+    const tabNames = tabs.map((tab) => tab.title).join(', ');
+
+    const tabElements = tabs.map((tab) => {
+        return (
+            <Fragment key={tab.title}>
+                <input
+                    type='radio'
+                    name={tabNames}
+                    role='tab'
+                    className='tab'
+                    aria-label={tab.title}
+                    checked={activeTab === tab.title}
+                    onChange={() => setActiveTab(tab.title)}
+                />
+                <div role='tabpanel' className='tab-content bg-base-100 border-base-300 rounded-box p-1'>
+                    {tab.content}
+                </div>
+            </Fragment>
+        );
+    });
+
+    const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
+
+    return (
+        <div role='tablist' className='tabs tabs-lifted'>
+            {tabElements}
+            {toolbar && <div className='m-1 col-[9999]'>{toolbarElement}</div>}
+        </div>
+    );
+};
+
+export default Tabs;

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

@@ -0,0 +1,32 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import { LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+const meta: Meta<DateRangeSelectorProps> = {
+    title: 'Input/DateRangeSelector',
+    component: DateRangeSelector,
+    parameters: {
+        actions: {
+            handles: ['gs-date-range-changed'],
+        },
+        fetchMock: {},
+    },
+    args: {
+        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        earliestDate: '1970-01-01',
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Primary: StoryObj<DateRangeSelectorProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <DateRangeSelector customSelectOptions={args.customSelectOptions} earliestDate={args.earliestDate} />
+        </LapisUrlContext.Provider>
+    ),
+};

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

@@ -0,0 +1,228 @@
+import flatpickr from 'flatpickr';
+import { type FunctionComponent } from 'preact';
+import 'flatpickr/dist/flatpickr.min.css';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { toYYYYMMDD } from './dateConversion';
+import { Select } from '../components/select';
+import type { ScaleType } from '../shared/charts/getYAxisScale';
+
+export type CustomSelectOption = { label: string; dateFrom: string; dateTo: string };
+
+export interface DateRangeSelectorProps {
+    customSelectOptions: CustomSelectOption[];
+    earliestDate?: string;
+}
+
+export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
+    customSelectOptions,
+    earliestDate = '1900-01-01',
+}) => {
+    const datePickerRef = useRef<HTMLInputElement>(null);
+    const endDatePickerRef = useRef<HTMLInputElement>(null);
+    const divRef = useRef<HTMLDivElement>(null);
+    const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
+    const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
+
+    const [selectedDateRange, setSelectedDateRange] = useState('last6Months');
+    const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
+        dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
+        dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
+    });
+
+    useEffect(() => {
+        const commonConfig = {
+            allowInput: true,
+            dateFormat: 'Y-m-d',
+        };
+
+        if (datePickerRef.current) {
+            setDateFromPicker(
+                flatpickr(datePickerRef.current, {
+                    ...commonConfig,
+                    defaultDate: selectedDates.dateFrom,
+                }),
+            );
+        }
+
+        if (endDatePickerRef.current) {
+            setDateToPicker(
+                flatpickr(endDatePickerRef.current, {
+                    ...commonConfig,
+                    defaultDate: selectedDates.dateTo,
+                }),
+            );
+        }
+
+        return () => {
+            dateFromPicker?.destroy();
+            dateToPicker?.destroy();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [datePickerRef, endDatePickerRef]);
+
+    const selectableOptions = () => {
+        const presetOptions = [
+            { label: 'Custom', value: 'custom' },
+            { label: 'All times', value: 'allTimes' },
+            { label: 'Last 2 weeks', value: 'last2Weeks' },
+            { label: 'Last month', value: 'lastMonth' },
+            { label: 'Last 2 weeks', value: 'last2Weeks' },
+            { label: 'Last month', value: 'lastMonth' },
+            { label: 'Last 2 months', value: 'last2Months' },
+            { label: 'Last 3 months', value: 'last3Months' },
+            { label: 'Last 6 months', value: 'last6Months' },
+        ];
+
+        const customOptions = customSelectOptions.map((customSelectOption) => {
+            return { label: customSelectOption.label, value: customLabelToOptionValue(customSelectOption.label) };
+        });
+
+        return [...presetOptions, ...customOptions];
+    };
+
+    const onSelectChange = (value: string) => {
+        setSelectedDateRange(value);
+
+        const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
+
+        dateToPicker?.set('minDate', dateRange.dateFrom);
+        dateFromPicker?.set('maxDate', dateRange.dateTo);
+
+        dateFromPicker?.setDate(dateRange.dateFrom);
+        dateToPicker?.setDate(dateRange.dateTo);
+
+        setSelectedDates({
+            dateFrom: dateRange.dateFrom,
+            dateTo: dateRange.dateTo,
+        });
+
+        submit();
+    };
+
+    const onChangeDateFrom = () => {
+        if (selectedDates.dateFrom.toDateString() === dateFromPicker?.selectedDates[0].toDateString()) {
+            return;
+        }
+
+        selectedDates.dateFrom = dateFromPicker?.selectedDates[0] || new Date();
+        dateToPicker?.set('minDate', dateFromPicker?.selectedDates[0]);
+        setSelectedDateRange('custom');
+
+        submit();
+    };
+
+    const onChangeDateTo = () => {
+        if (selectedDates.dateTo.toDateString() === dateToPicker?.selectedDates[0].toDateString()) {
+            return;
+        }
+
+        selectedDates.dateTo = dateToPicker?.selectedDates[0] || new Date();
+        dateFromPicker?.set('maxDate', dateToPicker?.selectedDates[0]);
+        setSelectedDateRange('custom');
+
+        submit();
+    };
+
+    const submit = () => {
+        const dateFrom = toYYYYMMDD(dateFromPicker?.selectedDates[0]);
+        const dateTo = toYYYYMMDD(dateToPicker?.selectedDates[0]);
+
+        const detail = {
+            ...(dateFrom !== undefined && { dateFrom }),
+            ...(dateTo !== undefined && { dateTo }),
+        };
+
+        divRef.current?.dispatchEvent(
+            new CustomEvent('gs-date-range-changed', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
+    return (
+        <div class='join' ref={divRef}>
+            <Select
+                items={selectableOptions()}
+                selected={selectedDateRange}
+                selectStyle='select-bordered rounded-none join-item'
+                onChange={(event: Event) => {
+                    event.preventDefault();
+                    const select = event.target as HTMLSelectElement;
+                    const value = select.value as ScaleType;
+                    onSelectChange(value);
+                }}
+            />
+            <input
+                class='input input-bordered rounded-none join-item'
+                type='text'
+                placeholder='Date from'
+                ref={datePickerRef}
+                onChange={onChangeDateFrom}
+                onBlur={onChangeDateFrom}
+            />
+            <input
+                class='input input-bordered rounded-none join-item'
+                type='text'
+                placeholder='Date to'
+                ref={endDatePickerRef}
+                onChange={onChangeDateTo}
+                onBlur={onChangeDateFrom}
+            />
+        </div>
+    );
+};
+
+const customLabelToOptionValue = (customLabel: string) => {
+    return `${customLabel}customLabel`;
+};
+
+const getDatesForSelectorValue = (
+    selectorValue: string,
+    customSelectOptions: CustomSelectOption[],
+    earliestDate: string,
+) => {
+    const today = new Date();
+
+    const customSelectOption = customSelectOptions.find(
+        (option) => customLabelToOptionValue(option.label) === selectorValue,
+    );
+    if (customSelectOption) {
+        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    }
+
+    switch (selectorValue) {
+        case 'last2Weeks': {
+            const twoWeeksAgo = new Date(today);
+            twoWeeksAgo.setDate(today.getDate() - 14);
+            return { dateFrom: twoWeeksAgo, dateTo: today };
+        }
+        case 'lastMonth': {
+            const lastMonth = new Date(today);
+            lastMonth.setMonth(today.getMonth() - 1);
+            return { dateFrom: lastMonth, dateTo: today };
+        }
+        case 'last2Months': {
+            const twoMonthsAgo = new Date(today);
+            twoMonthsAgo.setMonth(today.getMonth() - 2);
+            return { dateFrom: twoMonthsAgo, dateTo: today };
+        }
+        case 'last3Months': {
+            const threeMonthsAgo = new Date(today);
+            threeMonthsAgo.setMonth(today.getMonth() - 3);
+            return { dateFrom: threeMonthsAgo, dateTo: today };
+        }
+        case 'last6Months': {
+            const sixMonthsAgo = new Date(today);
+            sixMonthsAgo.setMonth(today.getMonth() - 6);
+            return { dateFrom: sixMonthsAgo, dateTo: today };
+        }
+        case 'allTimes': {
+            return { dateFrom: new Date(earliestDate), dateTo: today };
+        }
+        default:
+            return { dateFrom: today, dateTo: today };
+    }
+};

package/src/preact/dateRangeSelector/dateConversion.ts

@@ -0,0 +1,8 @@
+export const toYYYYMMDD = (date?: Date) => {
+    if (!date) {
+        return undefined;
+    }
+
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
+    return date.toLocaleDateString('en-CA', options);
+};