@genspectrum/dashboard-components 0.1.1

package/src/preact/components/csv-download-button.stories.tsx

@@ -0,0 +1,25 @@
+import { type StoryObj } from '@storybook/preact';
+import { type Meta } from '@storybook/web-components';
+
+import { CsvDownloadButton, type CsvDownloadButtonProps } from './csv-download-button';
+
+const meta: Meta<CsvDownloadButtonProps> = {
+    title: 'Component/CSV Download Button',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const DownloadButton: StoryObj = {
+    render: (args) => {
+        return <CsvDownloadButton label={args.label} filename={args.filename} getData={() => args.data} />;
+    },
+    args: {
+        data: [
+            { field1: 'value1_1', fieldWithEmptyValues: null, field2: 5 },
+            { field1: 'value2_1', fieldWithEmptyValues: undefined, field2: 42 },
+        ],
+        label: 'My Download Button',
+        filename: 'myFile.csv',
+    },
+};

package/src/preact/components/csv-download-button.tsx

@@ -0,0 +1,51 @@
+import { type FunctionComponent } from 'preact';
+
+export interface CsvDownloadButtonProps {
+    label?: string;
+    filename?: string;
+    getData: () => Record<string, string | number | boolean | null>[];
+    className?: string;
+}
+
+export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
+    label = 'Download',
+    filename = 'data.csv',
+    getData,
+    className,
+}) => {
+    const download = () => {
+        const content = getDownloadContent();
+        const blob = new Blob([content], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+
+    const getDownloadContent = () => {
+        const data = getData();
+        const keys = getDataKeys(data);
+        const header = `${keys.join(',')}\n`;
+        const rows = data.map((row) => keys.map((key) => row[key]).join(',')).join('\n');
+        return header + rows;
+    };
+
+    const getDataKeys = (data: Record<string, string | number | boolean | null>[]) => {
+        const keysSet = data
+            .map((row) => Object.keys(row))
+            .reduce((accumulatedKeys, keys) => {
+                keys.forEach((key) => accumulatedKeys.add(key));
+                return accumulatedKeys;
+            }, new Set<string>());
+
+        return [...keysSet];
+    };
+
+    return (
+        <button className={className} onClick={download}>
+            {label}
+        </button>
+    );
+};

package/src/preact/components/error-display.stories.tsx

@@ -0,0 +1,22 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { ErrorDisplay } from './error-display';
+
+const meta: Meta = {
+    title: 'Component/Error',
+    component: ErrorDisplay,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const ErrorStory: StoryObj = {
+    render: () => <ErrorDisplay error={new Error('some message')} />,
+
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText('Error: ', { exact: false });
+        await waitFor(() => expect(error).toBeInTheDocument());
+    },
+};

package/src/preact/components/error-display.tsx

@@ -0,0 +1,5 @@
+import { type FunctionComponent } from 'preact';
+
+export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
+    return <div>Error: {error.message}</div>;
+};

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

@@ -0,0 +1,29 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+
+import Headline, { type HeadlineProps } from './headline';
+
+const meta: Meta<typeof Headline> = {
+    title: 'Component/Headline',
+    component: Headline,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const HeadlineStory: StoryObj<HeadlineProps> = {
+    render: (args) => (
+        <Headline {...args}>
+            <div class='flex justify-center px-4 py-16 bg-base-200'>Some Content</div>
+        </Headline>
+    ),
+    args: {
+        heading: 'My Headline',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('My Headline')).toBeInTheDocument();
+        await expect(canvas.getByText('Some Content')).toBeInTheDocument();
+    },
+};

package/src/preact/components/headline.tsx

@@ -0,0 +1,16 @@
+import { type FunctionComponent } from 'preact';
+
+export interface HeadlineProps {
+    heading: string;
+}
+
+const Headline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
+    return (
+        <>
+            <h1>{heading}</h1>
+            {children}
+        </>
+    );
+};
+
+export default Headline;

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

@@ -0,0 +1,22 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import Info, { type InfoProps } from './info';
+
+const meta: Meta<InfoProps> = {
+    title: 'Component/Info',
+    component: Info,
+    parameters: { fetchMock: {} },
+    args: {
+        content: 'This is a tooltip which shows some information.',
+    },
+};
+
+export default meta;
+
+export const InfoStory: StoryObj<InfoProps> = {
+    render: (args) => (
+        <div class='flex justify-center px-4 py-16 bg-base-200'>
+            <Info {...args} />
+        </div>
+    ),
+};

package/src/preact/components/info.tsx

@@ -0,0 +1,16 @@
+import { type FunctionComponent } from 'preact';
+
+export interface InfoProps {
+    content: string;
+    className?: string;
+}
+
+const Info: FunctionComponent<InfoProps> = ({ content, className }) => {
+    return (
+        <div class={`${className} tooltip`} data-tip={content}>
+            <button class='btn btn-xs'>?</button>
+        </div>
+    );
+};
+
+export default Info;

package/src/preact/components/loading-display.stories.tsx

@@ -0,0 +1,20 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { LoadingDisplay } from './loading-display';
+
+const meta: Meta = {
+    title: 'Component/Loading',
+    component: LoadingDisplay,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const LoadingStory: StoryObj = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loading = canvas.getByText('Loading...');
+        await waitFor(() => expect(loading).toBeInTheDocument());
+    },
+};

package/src/preact/components/loading-display.tsx

@@ -0,0 +1,5 @@
+import { type FunctionComponent } from 'preact';
+
+export const LoadingDisplay: FunctionComponent = () => {
+    return <div>Loading...</div>;
+};

package/src/preact/components/min-max-percent-slider.css

@@ -0,0 +1,40 @@
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 24px;
+    height: 24px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px #C6C6C6;
+    cursor: pointer;
+}
+
+input[type=range]::-moz-range-thumb {
+    -webkit-appearance: none;
+    pointer-events: all;
+    width: 24px;
+    height: 24px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px #C6C6C6;
+    cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-thumb:hover {
+    background: #f7f7f7;
+}
+
+input[type=range]::-webkit-slider-thumb:active {
+    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
+    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2px;
+    width: 100%;
+    position: absolute;
+    background-color: #C6C6C6;
+    pointer-events: none;
+}

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

@@ -0,0 +1,95 @@
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { type ChangeEvent } from 'react';
+import './min-max-percent-slider.css';
+
+export interface MinMaxPercentSliderProps {
+    min: number;
+    max: number;
+    setMin: (min: number) => void;
+    setMax: (max: number) => void;
+    rangeMin?: number;
+    rangeMax?: number;
+    step?: number;
+}
+
+export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
+    min,
+    max,
+    setMin,
+    setMax,
+    rangeMin = 0,
+    rangeMax = 100,
+    step = 0.1,
+}) => {
+    const sliderColor = '#C6C6C6';
+    const rangeColor = '#387bbe';
+
+    const [zIndexTo, setZIndexTo] = useState(0);
+
+    const onMinChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const input = event.target as HTMLInputElement;
+        const minValue = Number(input.value);
+
+        if (minValue > max) {
+            setMax(minValue);
+            setMin(minValue);
+        } else {
+            setMin(minValue);
+        }
+    };
+
+    const onMaxChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const input = event.target as HTMLInputElement;
+        const maxValue = Number(input.value);
+
+        if (maxValue <= 0) {
+            setZIndexTo(2);
+        } else {
+            setZIndexTo(0);
+        }
+
+        if (maxValue < min) {
+            setMin(maxValue);
+            setMax(maxValue);
+        } else {
+            setMax(maxValue);
+        }
+    };
+
+    const background = `
+        linear-gradient(
+            to right,
+            ${sliderColor} 0%,
+            ${sliderColor} ${min}%,
+            ${rangeColor} ${min}%,
+            ${rangeColor} ${max}%,
+            ${sliderColor} ${max}%,
+            ${sliderColor} 100%)
+    `;
+
+    return (
+        <div class='my-4 relative'>
+            <input
+                id='fromSlider'
+                type='range'
+                value={min}
+                onInput={onMinChange}
+                min={rangeMin}
+                max={rangeMax}
+                step={step}
+                style={{ background, zIndex: 1, height: 0 }}
+            />
+            <input
+                id='toSlider'
+                type='range'
+                value={max}
+                min={rangeMin}
+                max={rangeMax}
+                step={step}
+                onInput={onMaxChange}
+                style={{ background, zIndex: zIndexTo }}
+            />
+        </div>
+    );
+};

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

@@ -0,0 +1,30 @@
+import { type FunctionComponent } from 'preact/compat';
+
+import { type CheckboxItem, CheckboxSelector } from './checkbox-selector';
+import type { SubstitutionOrDeletion } from '../../types';
+
+export type DisplayedMutationType = CheckboxItem & {
+    type: SubstitutionOrDeletion;
+};
+
+export type MutationTypeSelectorProps = {
+    displayedMutationTypes: DisplayedMutationType[];
+    setDisplayedMutationTypes: (mutationTypes: DisplayedMutationType[]) => void;
+};
+
+export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps> = ({
+    displayedMutationTypes,
+    setDisplayedMutationTypes,
+}) => {
+    const checkedLabels = displayedMutationTypes.filter((type) => type.checked).map((type) => type.label);
+    const mutationTypesSelectorLabel = `Types: ${checkedLabels.length > 0 ? checkedLabels.join(', ') : 'None'}`;
+
+    return (
+        <CheckboxSelector
+            className='mx-1'
+            items={displayedMutationTypes}
+            label={mutationTypesSelectorLabel}
+            setItems={(items) => setDisplayedMutationTypes(items)}
+        />
+    );
+};

package/src/preact/components/no-data-display.stories.tsx

@@ -0,0 +1,20 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { NoDataDisplay } from './no-data-display';
+
+const meta: Meta = {
+    title: 'Component/No data',
+    component: NoDataDisplay,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const NoDataStory: StoryObj = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const noData = canvas.getByText('No data available.');
+        await waitFor(() => expect(noData).toBeInTheDocument());
+    },
+};

package/src/preact/components/no-data-display.tsx

@@ -0,0 +1,5 @@
+import { type FunctionComponent } from 'preact';
+
+export const NoDataDisplay: FunctionComponent = () => {
+    return <div>No data available.</div>;
+};

package/src/preact/components/percent-intput.tsx

@@ -0,0 +1,49 @@
+import { type FunctionComponent } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { type ChangeEvent } from 'react';
+
+export type PercentInputProps = {
+    percentage: number;
+    setPercentage: (percentage: number) => void;
+};
+
+const percentageInRange = (percentage: number) => {
+    return percentage <= 100 && percentage >= 0;
+};
+
+export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage, setPercentage }) => {
+    const [internalPercentage, setInternalPercentage] = useState(percentage);
+
+    useEffect(() => {
+        setInternalPercentage(percentage);
+    }, [percentage]);
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const input = event.target as HTMLInputElement;
+        const value = Number(input.value);
+
+        const inRange = percentageInRange(value);
+
+        if (inRange) {
+            setPercentage(value);
+        }
+        setInternalPercentage(value);
+    };
+
+    const isError = !percentageInRange(internalPercentage);
+    return (
+        <label className={`input input-bordered flex items-center gap-2 w-32 ${isError ? 'input-error' : ''}`}>
+            <input
+                type='number'
+                step={0.1}
+                min={0}
+                max={100}
+                value={internalPercentage}
+                onInput={handleInputChange}
+                lang='en'
+                className={`grow w-16`}
+            />
+            %
+        </label>
+    );
+};

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

@@ -0,0 +1,66 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { ProportionSelector } from './proportion-selector';
+import { ProportionSelectorDropdown, type ProportionSelectorDropdownProps } from './proportion-selector-dropdown';
+
+const meta: Meta<ProportionSelectorDropdownProps> = {
+    title: 'Component/Proportion selector dropdown',
+    component: ProportionSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    setMinProportion: (value: number) => void;
+    setMaxProportion: (value: number) => void;
+}> = ({ setMinProportion, setMaxProportion }) => {
+    const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
+
+    return (
+        <ProportionSelectorDropdown
+            proportionInterval={proportionInterval}
+            setMinProportion={(value: number) => {
+                setProportionInterval({ ...proportionInterval, min: value });
+                setMinProportion(value);
+            }}
+            setMaxProportion={(value: number) => {
+                setProportionInterval({ ...proportionInterval, max: value });
+                setMaxProportion(value);
+            }}
+        />
+    );
+};
+
+export const ProportionSelectorStory: StoryObj<ProportionSelectorDropdownProps> = {
+    render: (args) => {
+        return <WrapperWithState setMinProportion={args.setMinProportion} setMaxProportion={args.setMaxProportion} />;
+    },
+    args: {
+        setMinProportion: fn(),
+        setMaxProportion: fn(),
+    },
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial proportion to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Proportion 5.0% - 100.0%');
+        });
+
+        await step('Change min proportion and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const minInput = canvas.getAllByLabelText('%')[0];
+            await userEvent.clear(minInput);
+            await userEvent.type(minInput, '10');
+
+            await expect(button).toHaveTextContent('Proportion 10.0% - 100.0%');
+            await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
+        });
+    },
+};

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

@@ -0,0 +1,33 @@
+import { type FunctionComponent } from 'preact';
+
+import { ProportionSelector, type ProportionSelectorProps } from './proportion-selector';
+
+export interface ProportionSelectorDropdownProps extends ProportionSelectorProps {
+    openDirection?: 'left' | 'right';
+}
+
+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>
+    );
+};

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

@@ -0,0 +1,81 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { ProportionSelector, type ProportionSelectorProps } from './proportion-selector';
+
+const meta: Meta<ProportionSelectorProps> = {
+    title: 'Component/Proportion selector',
+    component: ProportionSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    setMinProportion: (value: number) => void;
+    setMaxProportion: (value: number) => void;
+}> = ({ setMinProportion, setMaxProportion }) => {
+    const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
+
+    return (
+        <ProportionSelector
+            proportionInterval={proportionInterval}
+            setMinProportion={(value: number) => {
+                setProportionInterval((prev) => ({ ...prev, min: value }));
+                setMinProportion(value);
+            }}
+            setMaxProportion={(value: number) => {
+                setProportionInterval((prev) => ({ ...prev, max: value }));
+                setMaxProportion(value);
+            }}
+        />
+    );
+};
+
+export const ProportionSelectorStory: StoryObj<ProportionSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState setMinProportion={args.setMinProportion} setMaxProportion={args.setMaxProportion} />;
+    },
+    args: {
+        setMinProportion: fn(),
+        setMaxProportion: fn(),
+    },
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial min proportion to be 5% and max proportion 100%', async () => {
+            await expect(canvas.getAllByLabelText('%')[0]).toHaveValue(5);
+            await expect(canvas.getAllByLabelText('%')[1]).toHaveValue(100);
+        });
+
+        await step('Change min proportion to 10%', async () => {
+            const minInput = canvas.getAllByLabelText('%')[0];
+            await userEvent.clear(minInput);
+            await userEvent.type(minInput, '10');
+            await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
+        });
+
+        await step('Change max proportion to 50%', async () => {
+            const maxInput = canvas.getAllByLabelText('%')[1];
+            await userEvent.clear(maxInput);
+            await userEvent.type(maxInput, '50');
+            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.5);
+        });
+
+        await step('Move min proportion silder to 20%', async () => {
+            const minSlider = canvas.getAllByRole('slider')[0];
+            await fireEvent.input(minSlider, { target: { value: '20' } });
+            await expect(args.setMinProportion).toHaveBeenCalledWith(0.2);
+            await waitFor(() => expect(canvas.getAllByLabelText('%')[0]).toHaveValue(20));
+        });
+
+        await step('Move max proportion silder to 80%', async () => {
+            const maxSlider = canvas.getAllByRole('slider')[1];
+            await fireEvent.input(maxSlider, { target: { value: '80' } });
+            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.8);
+            await waitFor(() => expect(canvas.getAllByLabelText('%')[1]).toHaveValue(80));
+        });
+    },
+};