@genspectrum/dashboard-components 0.1.4 → 0.1.5

package/dist/style.css

@@ -1065,7 +1065,6 @@ html {
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   border-width: var(--border-btn, 1px);
-  animation: button-pop var(--animation-btn, 0.25s) ease-out;
   transition-property: color, background-color, border-color, opacity, box-shadow, transform;
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -1540,6 +1539,14 @@ html {
   z-index: 3;
   opacity: 1;
 }
+.steps {
+  display: inline-grid;
+  grid-auto-flow: column;
+  overflow: hidden;
+  overflow-x: auto;
+  counter-reset: step;
+  grid-auto-columns: 1fr;
+}
 .steps .step {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -1554,8 +1561,7 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
-  .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
+.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -1600,7 +1606,7 @@ html {
   grid-column-start: span 9999;
 }
 input.tab:checked + .tab-content,
-.tab-active + .tab-content {
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
 .table {
@@ -1645,6 +1651,12 @@ input.tab:checked + .tab-content,
   font-size: 1rem;
   line-height: 1.5rem;
 }
+@media (prefers-reduced-motion: no-preference) {
+
+  .btn {
+    animation: button-pop var(--animation-btn, 0.25s) ease-out;
+  }
+}
 .btn:active:hover,
   .btn:active:focus {
   animation: button-pop 0s ease-out;
@@ -2222,12 +2234,79 @@ input.tab:checked + .tab-content,
 .steps .step[data-content]:after {
   content: attr(data-content);
 }
+.steps .step-neutral + .step-neutral:before,
+  .steps .step-neutral:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
+.steps .step-primary + .step-primary:before,
+  .steps .step-primary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+.steps .step-secondary + .step-secondary:before,
+  .steps .step-secondary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+.steps .step-accent + .step-accent:before,
+  .steps .step-accent:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+.steps .step-info + .step-info:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+}
+.steps .step-info:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+.steps .step-success + .step-success:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+}
+.steps .step-success:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+.steps .step-warning + .step-warning:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+}
+.steps .step-warning:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+.steps .step-error + .step-error:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+}
+.steps .step-error:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
 .tabs-lifted > .tab:focus-visible {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
-.tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tab:is(input:checked) {
+.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
   border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
   --tw-border-opacity: 1;
   --tw-text-opacity: 1;
@@ -2262,8 +2341,7 @@ input.tab:checked + .tab-content,
   padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tabs-lifted > .tab:is(input:checked) {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
   background-color: var(--tab-bg);
   border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
   border-inline-start-color: var(--tab-border-color);
@@ -2274,7 +2352,7 @@ input.tab:checked + .tab-content,
   padding-bottom: var(--tab-border, 1px);
   padding-top: 0;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
   z-index: 1;
   content: "";
   display: block;
@@ -2303,26 +2381,26 @@ input.tab:checked + .tab-content,
       );
   background-image: var(--radius-start), var(--radius-end);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
 .tabs-lifted
-  > .tab-active:not(.tab-disabled):not([disabled])
+  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
   + .tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
   background-image: var(--radius-end);
   background-position: top right;
 }
@@ -2643,9 +2721,21 @@ input.tab:checked + .tab-content,
 .static {
   position: static;
 }
+.absolute {
+  position: absolute;
+}
 .relative {
   position: relative;
 }
+.right-6 {
+  right: 1.5rem;
+}
+.top-8 {
+  top: 2rem;
+}
+.z-50 {
+  z-index: 50;
+}
 .z-\[1\] {
   z-index: 1;
 }
@@ -2682,6 +2772,9 @@ input.tab:checked + .tab-content,
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .inline {
   display: inline;
 }
@@ -2742,6 +2835,9 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -2797,6 +2893,10 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-error {
   --tw-border-opacity: 1;
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
@@ -2856,6 +2956,13 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.text-justify {
+  text-align: justify;
+}
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2881,15 +2988,31 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.underline {
+  text-decoration-line: underline;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2905,6 +3028,10 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -70,7 +70,7 @@
         "zod": "^3.23.0"
     },
     "devDependencies": {
-        "@custom-elements-manifest/analyzer": "^0.9.4",
+        "@custom-elements-manifest/analyzer": "^0.10.2",
         "@playwright/test": "^1.43.1",
         "@storybook/addon-actions": "^8.0.9",
         "@storybook/addon-essentials": "^8.0.9",
@@ -80,7 +80,7 @@
         "@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",

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

@@ -11,6 +11,7 @@ const meta: Meta<AggregateProps> = {
     argTypes: {
         fields: [{ control: 'object' }],
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
     parameters: {
         fetchMock: {
@@ -49,5 +50,6 @@ export const Default: StoryObj<AggregateProps> = {
             country: 'USA',
         },
         size: { width: '100%', height: '70vh' },
+        headline: 'Aggregate',
     },
 };

package/src/preact/aggregatedData/aggregate.tsx

@@ -22,17 +22,22 @@ export interface AggregateProps {
     fields: string[];
     views: View[];
     size?: Size;
+    headline?: string;
 }
 
-export const Aggregate: FunctionComponent<AggregateProps> = ({ fields, views, filter, size }) => {
+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}>
@@ -96,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/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

@@ -2,10 +2,18 @@ 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');

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/dateRangeSelector/date-range-selector.tsx

@@ -39,8 +39,8 @@ export const DateRangeSelector = <CustomLabel extends string>({
     earliestDate = '1900-01-01',
     initialValue,
 }: DateRangeSelectorProps<CustomLabel>) => {
-    const datePickerRef = useRef<HTMLInputElement>(null);
-    const endDatePickerRef = useRef<HTMLInputElement>(null);
+    const fromDatePickerRef = useRef<HTMLInputElement>(null);
+    const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
@@ -64,18 +64,18 @@ export const DateRangeSelector = <CustomLabel extends string>({
             dateFormat: 'Y-m-d',
         };
 
-        if (datePickerRef.current) {
+        if (fromDatePickerRef.current) {
             setDateFromPicker(
-                flatpickr(datePickerRef.current, {
+                flatpickr(fromDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateFrom,
                 }),
             );
         }
 
-        if (endDatePickerRef.current) {
+        if (toDatePickerRef.current) {
             setDateToPicker(
-                flatpickr(endDatePickerRef.current, {
+                flatpickr(toDatePickerRef.current, {
                     ...commonConfig,
                     defaultDate: selectedDates.dateTo,
                 }),
@@ -87,7 +87,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
             dateToPicker?.destroy();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [datePickerRef, endDatePickerRef]);
+    }, [fromDatePickerRef, toDatePickerRef]);
 
     const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
         setSelectedDateRange(value);
@@ -167,7 +167,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 class='input input-bordered rounded-none join-item'
                 type='text'
                 placeholder='Date from'
-                ref={datePickerRef}
+                ref={fromDatePickerRef}
                 onChange={onChangeDateFrom}
                 onBlur={onChangeDateFrom}
             />
@@ -175,9 +175,9 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 class='input input-bordered rounded-none join-item'
                 type='text'
                 placeholder='Date to'
-                ref={endDatePickerRef}
+                ref={toDatePickerRef}
                 onChange={onChangeDateTo}
-                onBlur={onChangeDateFrom}
+                onBlur={onChangeDateTo}
             />
         </div>
     );

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -28,6 +28,7 @@ const meta: Meta<MutationComparisonProps> = {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
     parameters: {
         fetchMock: {
@@ -81,6 +82,7 @@ const Template: StoryObj<MutationComparisonProps> = {
                     sequenceType={args.sequenceType}
                     views={args.views}
                     size={args.size}
+                    headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -108,6 +110,7 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
         size: { width: '100%', height: '700px' },
+        headline: 'Mutation comparison',
     },
 };
 

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -33,6 +33,7 @@ export interface MutationComparisonProps {
     sequenceType: SequenceType;
     views: View[];
     size?: Size;
+    headline?: string;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
@@ -40,6 +41,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     sequenceType,
     views,
     size,
+    headline = 'Mutation comparison',
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -47,8 +49,6 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
         return queryMutationData(variants, sequenceType, lapis);
     }, [variants, sequenceType, lapis]);
 
-    const headline = 'Mutation comparison';
-
     if (isLoading) {
         return (
             <Headline heading={headline}>
@@ -182,7 +182,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info className='mx-1' content='Info for mutation comparison' />
+            <Info>Info for mutation comparison</Info>
         </div>
     );
 };

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -90,7 +90,7 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initial
                     setSelectedFilters={setSelectedFilters}
                     fireChangeEvent={fireChangeEvent}
                 />
-                <Info className='mx-1' content='Info for mutation filter' />
+                <Info>Info for mutation filter</Info>
             </div>
 
             <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>