@genspectrum/dashboard-components 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.1.3",
+    "version": "0.1.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -35,9 +35,10 @@
         "lint:lit-analyzer": "lit-analyzer",
         "generate-manifest": "npx custom-elements-manifest analyze --litelement --globs src/web-components/**",
         "generate-manifest:watch": "npm run generate-manifest -- --watch",
-        "format": "prettier \"**/*.{cjs,html,js,json,md,ts,tsx}\" --ignore-path ./.eslintignore --write",
+        "format": "prettier \"**/*.{cjs,html,js,json,md,ts,tsx}\" --write",
         "check-format": "prettier --check \"**/*.{ts,tsx,json,md,mdx,mjs,cjs}\"",
         "check-types": "tsc --noEmit",
+        "check-dependencies": "depcheck",
         "storybook": "storybook dev -p 6006",
         "storybook-preact": "storybook dev --port 6007 --config-dir .storybook-preact",
         "build-storybook": "storybook build",
@@ -55,8 +56,8 @@
         "lit"
     ],
     "dependencies": {
-        "@floating-ui/dom": "^1.6.3",
         "@lit/context": "^1.1.1",
+        "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",
         "chart.js": "^4.4.2",
         "chartjs-chart-error-bars": "^4.4.0",
@@ -69,17 +70,18 @@
         "zod": "^3.23.0"
     },
     "devDependencies": {
-        "@custom-elements-manifest/analyzer": "^0.9.4",
+        "@custom-elements-manifest/analyzer": "^0.10.2",
         "@playwright/test": "^1.43.1",
-        "@preact/preset-vite": "^2.8.2",
+        "@storybook/addon-actions": "^8.0.9",
         "@storybook/addon-essentials": "^8.0.9",
         "@storybook/addon-interactions": "^8.0.9",
         "@storybook/addon-links": "^8.0.9",
-        "@storybook/blocks": "^8.0.0",
+        "@storybook/blocks": "^8.0.10",
         "@storybook/preact": "^8.0.9",
         "@storybook/preact-vite": "^8.0.9",
         "@storybook/test": "^8.0.0",
-        "@storybook/test-runner": "^0.17.0",
+        "@storybook/test-runner": "^0.18.0",
+        "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^20.12.7",
@@ -87,6 +89,7 @@
         "@typescript-eslint/parser": "^7.7.0",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
+        "depcheck": "^1.4.7",
         "eslint": "^8.57.0",
         "eslint-config-preact": "^1.3.0",
         "eslint-plugin-import": "^2.29.1",
@@ -97,6 +100,7 @@
         "msw": "^2.2.14",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
+        "react": "^18.3.1",
         "release-please": "^16.10.2",
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -10,6 +10,8 @@ const meta: Meta<AggregateProps> = {
     component: Aggregate,
     argTypes: {
         fields: [{ control: 'object' }],
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
     parameters: {
         fetchMock: {
@@ -37,11 +39,9 @@ export default meta;
 
 export const Default: StoryObj<AggregateProps> = {
     render: (args) => (
-        <div class='max-w-screen-lg'>
-            <LapisUrlContext.Provider value={LAPIS_URL}>
-                <Aggregate {...args} />
-            </LapisUrlContext.Provider>
-        </div>
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <Aggregate {...args} />
+        </LapisUrlContext.Provider>
     ),
     args: {
         fields: ['division', 'host'],
@@ -49,5 +49,7 @@ export const Default: StoryObj<AggregateProps> = {
         filter: {
             country: 'USA',
         },
+        size: { width: '100%', height: '70vh' },
+        headline: 'Aggregate',
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -11,6 +11,7 @@ import Headline from '../components/headline';
 import Info from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
@@ -20,17 +21,23 @@ export interface AggregateProps {
     filter: LapisFilter;
     fields: string[];
     views: View[];
+    size?: Size;
+    headline?: string;
 }
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({ fields, views, filter }) => {
+export const Aggregate: FunctionComponent<AggregateProps> = ({
+    fields,
+    views,
+    filter,
+    size,
+    headline = 'Aggregate',
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryAggregateData(filter, fields, lapis);
     }, [filter, fields, lapis]);
 
-    const headline = 'Aggregate';
-
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -56,9 +63,11 @@ export const Aggregate: FunctionComponent<AggregateProps> = ({ fields, views, fi
     }
 
     return (
-        <Headline heading={headline}>
-            <AggregatedDataTabs data={data} views={views} fields={fields} />
-        </Headline>
+        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
+            <Headline heading={headline}>
+                <AggregatedDataTabs data={data} views={views} fields={fields} />
+            </Headline>
+        </ResizeContainer>
     );
 };
 
@@ -92,7 +101,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({ data }) => {
     return (
         <div class='flex flex-row'>
             <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
-            <Info className='mx-1' content='Info for aggregate' />
+            <Info>Info for aggregate</Info>
         </div>
     );
 };

package/src/preact/components/ReferenceGenomesAwaiter.tsx

@@ -0,0 +1,25 @@
+import { type ComponentChildren, type FunctionalComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
+import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+
+/**
+ * Sometimes the reference genome is not immediately available.
+ * This component will display a loading spinner until the reference genome is available.
+ * Child components can assume that the reference genome is available on the first render,
+ * which e.g. matters for initial values of `useState`.
+ */
+export const ReferenceGenomesAwaiter: FunctionalComponent<{ children: ComponentChildren }> = ({ children }) => {
+    const referenceGenome = useContext(ReferenceGenomeContext);
+
+    if (isNotInitialized(referenceGenome)) {
+        return <div className='laoding loading-spinner loading-md'>Loading...</div>;
+    }
+
+    return <>{children}</>;
+};
+
+function isNotInitialized(referenceGenome: ReferenceGenome) {
+    return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
+}

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

@@ -1,9 +1,15 @@
 import { type FunctionComponent } from 'preact';
 
+type ToStringable = {
+    toString: () => string;
+};
+
+type DataValue = string | number | boolean | null | ToStringable;
+
 export interface CsvDownloadButtonProps {
     label?: string;
     filename?: string;
-    getData: () => Record<string, string | number | boolean | null>[];
+    getData: () => Record<string, DataValue>[];
     className?: string;
 }
 
@@ -32,7 +38,7 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
         return header + rows;
     };
 
-    const getDataKeys = (data: Record<string, string | number | boolean | null>[]) => {
+    const getDataKeys = (data: Record<string, DataValue>[]) => {
         const keysSet = data
             .map((row) => Object.keys(row))
             .reduce((accumulatedKeys, keys) => {

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

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

package/src/preact/components/headline.tsx

@@ -1,15 +1,35 @@
 import { type FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 export interface HeadlineProps {
-    heading: string;
+    heading?: string;
 }
 
 const Headline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
+    if (!heading) {
+        return <>{children}</>;
+    }
+
+    return <ResizingHeadline heading={heading}>{children}</ResizingHeadline>;
+};
+
+const ResizingHeadline: FunctionComponent<HeadlineProps> = ({ heading, children }) => {
+    const ref = useRef<HTMLHeadingElement>(null);
+
+    const [h1Height, setH1Height] = useState('2rem');
+
+    useEffect(() => {
+        if (ref.current) {
+            const h1Height = ref.current.getBoundingClientRect().height;
+            setH1Height(`${h1Height}px`);
+        }
+    }, []);
+
     return (
-        <>
-            <h1>{heading}</h1>
-            {children}
-        </>
+        <div className='h-full w-full'>
+            <h1 ref={ref}>{heading}</h1>
+            <div style={{ height: `calc(100% - ${h1Height})` }}>{children}</div>
+        </div>
     );
 };
 

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

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, waitFor, within } from '@storybook/test';
 
 import Info, { type InfoProps } from './info';
 
@@ -7,16 +8,36 @@ const meta: Meta<InfoProps> = {
     component: Info,
     parameters: { fetchMock: {} },
     args: {
-        content: 'This is a tooltip which shows some information.',
+        size: { width: '400px', height: '100px' },
     },
 };
 
 export default meta;
 
+const tooltipText = 'This is a tooltip which shows some information.';
+
 export const InfoStory: StoryObj<InfoProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16 bg-base-200'>
-            <Info {...args} />
+        <div class='flex justify-center px-4 py-16'>
+            <Info {...args}>{tooltipText}</Info>
         </div>
     ),
 };
+
+export const ShowsInfoOnClick: StoryObj<InfoProps> = {
+    ...InfoStory,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const loading = canvas.getByRole('button', { name: '?' });
+
+        await waitFor(() => expect(loading).toBeInTheDocument());
+
+        await fireEvent.click(loading);
+
+        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Close' }));
+
+        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeInTheDocument());
+    },
+};

package/src/preact/components/info.tsx

@@ -1,16 +1,60 @@
 import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 export interface InfoProps {
-    content: string;
-    className?: string;
+    size?: {
+        height?: string;
+        width?: string;
+    };
 }
 
-const Info: FunctionComponent<InfoProps> = ({ content, className }) => {
+const Info: FunctionComponent<InfoProps> = ({ children, size }) => {
+    const [showHelp, setShowHelp] = useState(false);
+
+    const toggleHelp = () => {
+        setShowHelp(!showHelp);
+    };
+
     return (
-        <div class={`${className} tooltip`} data-tip={content}>
-            <button class='btn btn-xs'>?</button>
+        <div className='relative'>
+            <button className='btn btn-xs' onClick={toggleHelp}>
+                ?
+            </button>
+            {showHelp && (
+                <div
+                    className='absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50'
+                    style={size}
+                >
+                    <div className='flex flex-col'>{children}</div>
+                    <div className='flex justify-end'>
+                        <button className='text-sm underline mt-2' onClick={toggleHelp}>
+                            Close
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };
 
+export const InfoHeadline1: FunctionComponent = ({ children }) => {
+    return <h1 className='text-lg font-bold'>{children}</h1>;
+};
+
+export const InfoHeadline2: FunctionComponent = ({ children }) => {
+    return <h2 className='text-base font-bold mt-4'>{children}</h2>;
+};
+
+export const InfoParagraph: FunctionComponent = ({ children }) => {
+    return <p className='text-justify my-1'>{children}</p>;
+};
+
+export const InfoLink: FunctionComponent<{ href: string }> = ({ children, href }) => {
+    return (
+        <a className='text-blue-600 hover:text-blue-800' href={href} target='_blank' rel='noopener noreferrer'>
+            {children}
+        </a>
+    );
+};
+
 export default Info;

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

@@ -1,6 +1,6 @@
-import { type FunctionComponent } from 'preact';
+import { type FunctionComponent, type JSX } from 'preact';
 import { useState } from 'preact/hooks';
-import { type ChangeEvent } from 'react';
+
 import './min-max-percent-slider.css';
 
 export interface MinMaxPercentSliderProps {
@@ -27,7 +27,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
 
     const [zIndexTo, setZIndexTo] = useState(0);
 
-    const onMinChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const onMinChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const minValue = Number(input.value);
 
@@ -39,7 +39,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
         }
     };
 
-    const onMaxChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const onMaxChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const maxValue = Number(input.value);
 

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

@@ -1,6 +1,5 @@
-import { type FunctionComponent } from 'preact';
+import { type FunctionComponent, type JSX } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import { type ChangeEvent } from 'react';
 
 export type PercentInputProps = {
     percentage: number;
@@ -18,7 +17,7 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage,
         setInternalPercentage(percentage);
     }, [percentage]);
 
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (event: JSX.TargetedInputEvent<HTMLInputElement>) => {
         const input = event.target as HTMLInputElement;
         const value = Number(input.value);
 

package/src/preact/components/resize-container.tsx

@@ -0,0 +1,23 @@
+import { type FunctionComponent } from 'preact';
+
+export type Size = {
+    width?: string;
+    height?: string;
+};
+
+export interface ResizeContainerProps {
+    size?: Size;
+    defaultSize: Size;
+}
+
+export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size, defaultSize }) => {
+    return <div style={extendByDefault(size, defaultSize)}>{children}</div>;
+};
+
+const extendByDefault = (size: Size | undefined, defaultSize: Size) => {
+    if (size === undefined) {
+        return defaultSize;
+    }
+
+    return { ...defaultSize, ...size };
+};

package/src/preact/components/table.tsx

@@ -3,6 +3,7 @@ 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 = {

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

@@ -51,10 +51,10 @@ export const TabsWithToolbarOnlyShowingOnSecondTab: StoryObj = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => expect(canvas.getByLabelText('FirstTab', { selector: 'input' })).toBeVisible());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'SecondTab' })).toBeVisible());
         await expect(canvas.queryByText('Toolbar')).not.toBeInTheDocument();
 
-        await fireEvent.click(canvas.getByLabelText('SecondTab', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'SecondTab' }));
         await waitFor(() => expect(canvas.getByText('Toolbar')).toBeVisible());
     },
 };

package/src/preact/components/tabs.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
 type Tab = {
@@ -14,34 +14,57 @@ interface ComponentTabsProps {
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0].title);
+    const [heightOfTabs, setHeightOfTabs] = useState('3rem');
+    const tabRef = useRef<HTMLDivElement>(null);
 
-    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>
-        );
-    });
+    useEffect(() => {
+        if (tabRef.current) {
+            const heightOfTabs = tabRef.current.getBoundingClientRect().height;
+            setHeightOfTabs(`${heightOfTabs}px`);
+        }
+    }, []);
+
+    const tabElements = (
+        <div className='flex flex-row'>
+            {tabs.map((tab) => {
+                return (
+                    <Fragment key={tab.title}>
+                        <button
+                            className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
+                                activeTab === tab.title
+                                    ? 'border-b-2 border-gray-400'
+                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                            }`}
+                            onClick={() => {
+                                setActiveTab(tab.title);
+                            }}
+                        >
+                            {tab.title}
+                        </button>
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
 
     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 className='h-full w-full'>
+            <div ref={tabRef} className='flex flex-row justify-between'>
+                {tabElements}
+                {toolbar && <div className='py-2'>{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'}`}
+                style={{ height: `calc(100% - ${heightOfTabs})` }}
+            >
+                {tabs.map((tab) => (
+                    <div className='h-full overflow-auto' key={tab.title} hidden={activeTab !== tab.title}>
+                        {tab.content}
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };

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

@@ -1,11 +1,21 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import {
+    DateRangeSelector,
+    type DateRangeSelectorProps,
+    PRESET_VALUE_ALL_TIMES,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_2_MONTHS,
+    PRESET_VALUE_LAST_2_WEEKS,
+    PRESET_VALUE_LAST_3_MONTHS,
+    PRESET_VALUE_LAST_6_MONTHS,
+    PRESET_VALUE_LAST_MONTH,
+} from './date-range-selector';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
-const meta: Meta<DateRangeSelectorProps> = {
+const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
@@ -14,19 +24,41 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                PRESET_VALUE_CUSTOM,
+                PRESET_VALUE_ALL_TIMES,
+                PRESET_VALUE_LAST_2_WEEKS,
+                PRESET_VALUE_LAST_MONTH,
+                PRESET_VALUE_LAST_2_MONTHS,
+                PRESET_VALUE_LAST_3_MONTHS,
+                PRESET_VALUE_LAST_6_MONTHS,
+                'CustomDateRange',
+            ],
+        },
+    },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
+        initialValue: PRESET_VALUE_LAST_3_MONTHS,
     },
     decorators: [withActions],
 };
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps> = {
+export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <DateRangeSelector customSelectOptions={args.customSelectOptions} earliestDate={args.earliestDate} />
+            <DateRangeSelector
+                customSelectOptions={args.customSelectOptions}
+                earliestDate={args.earliestDate}
+                initialValue={args.initialValue}
+            />
         </LapisUrlContext.Provider>
     ),
 };