@genspectrum/dashboard-components 0.6.5 → 0.6.7

package/dist/genspectrum-components.d.ts

@@ -976,21 +976,21 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 

package/dist/style.css

@@ -1428,6 +1428,11 @@ html {
   visibility: visible;
   opacity: 1;
 }
+.modal-action {
+  display: flex;
+  margin-top: 1.5rem;
+  justify-content: flex-end;
+}
 :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
   overflow: hidden;
   scrollbar-gutter: stable;
@@ -1954,6 +1959,11 @@ input.tab:checked + .tab-content,
   --tw-scale-y: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.modal-action > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 @keyframes modal-pop {
 
   0% {
@@ -2528,6 +2538,9 @@ input.tab:checked + .tab-content,
   border-end-end-radius: inherit;
   border-start-end-radius: inherit;
 }
+.modal-bottom {
+  place-items: end;
+}
 .select-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -2767,6 +2780,9 @@ input.tab:checked + .tab-content,
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -2782,18 +2798,39 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.bottom-full {
+  bottom: 100%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\/2 {
+  left: 50%;
+}
+.left-full {
+  left: 100%;
+}
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.right-full {
+  right: 100%;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-2 {
   top: 0.5rem;
 }
+.top-full {
+  top: 100%;
+}
 .z-10 {
   z-index: 10;
 }
@@ -2810,6 +2847,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2822,18 +2863,30 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2\.5 {
   margin-left: 0.625rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -2855,9 +2908,15 @@ input.tab:checked + .tab-content,
 .hidden {
   display: none;
 }
+.h-8 {
+  height: 2rem;
+}
 .h-full {
   height: 100%;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-16 {
   width: 4rem;
 }
@@ -2892,6 +2951,14 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .resize {
   resize: both;
 }
@@ -2925,9 +2992,6 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2992,6 +3056,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3090,9 +3158,6 @@ input.tab:checked + .tab-content,
 .underline {
   text-decoration-line: underline;
 }
-.opacity-90 {
-  opacity: 0.9;
-}
 .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);
@@ -3118,6 +3183,25 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+@media (min-width: 640px) {
+
+  .sm\:modal-middle {
+    place-items: center;
+  }
+
+  .sm\:modal-middle :where(.modal-box) {
+    width: 91.666667%;
+    max-width: 32rem;
+    --tw-translate-y: 0px;
+    --tw-scale-x: .9;
+    --tw-scale-y: .9;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    border-top-left-radius: var(--rounded-box, 1rem);
+    border-top-right-radius: var(--rounded-box, 1rem);
+    border-bottom-right-radius: var(--rounded-box, 1rem);
+    border-bottom-left-radius: var(--rounded-box, 1rem);
+  }
+}
 .focus-within\:border-gray-400:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -3154,8 +3238,8 @@ input.tab:checked + .tab-content,
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.peer:hover ~ .peer-hover\:block {
-  display: block;
+.peer:hover ~ .peer-hover\:visible {
+  visibility: visible;
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.5",
+    "version": "0.6.7",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/constants.ts

@@ -2,5 +2,6 @@ export const LAPIS_URL = 'https://lapis.cov-spectrum.org/open/v2';
 
 export const AGGREGATED_ENDPOINT = `${LAPIS_URL}/sample/aggregated`;
 export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMutations`;
+export const AMINO_ACID_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/aminoAcidMutations`;
 export const NUCLEOTIDE_INSERTIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideInsertions`;
 export const REFERENCE_GENOME_ENDPOINT = `${LAPIS_URL}/sample/referenceGenome`;

package/src/preact/aggregatedData/aggregate.tsx

@@ -104,7 +104,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 height={'100px'}>Info for aggregate</Info>
+            <Info>Info for aggregate</Info>
         </div>
     );
 };

package/src/preact/components/color-scale-selector-dropdown.stories.tsx

@@ -0,0 +1,27 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { type ColorScale } from './color-scale-selector';
+import { ColorScaleSelectorDropdown, type ColorScaleSelectorDropdownProps } from './color-scale-selector-dropdown';
+import { ProportionSelector } from './proportion-selector';
+
+const meta: Meta<ColorScaleSelectorDropdownProps> = {
+    title: 'Component/Color scale selector dropdown',
+    component: ProportionSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{}> = () => {
+    const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
+
+    return <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />;
+};
+
+export const ColorScaleSelectorStory: StoryObj<ColorScaleSelectorDropdownProps> = {
+    render: () => {
+        return <WrapperWithState />;
+    },
+};

package/src/preact/components/color-scale-selector-dropdown.tsx

@@ -0,0 +1,17 @@
+import { type FunctionComponent } from 'preact';
+
+import { ColorScaleSelector, type ColorScaleSelectorProps } from './color-scale-selector';
+import { Dropdown } from './dropdown';
+
+export type ColorScaleSelectorDropdownProps = ColorScaleSelectorProps;
+
+export const ColorScaleSelectorDropdown: FunctionComponent<ColorScaleSelectorDropdownProps> = ({
+    colorScale,
+    setColorScale,
+}) => {
+    return (
+        <Dropdown buttonTitle={`Color scale`} placement={'bottom-start'}>
+            <ColorScaleSelector colorScale={colorScale} setColorScale={setColorScale} />
+        </Dropdown>
+    );
+};

package/src/preact/components/color-scale-selector.stories.tsx

@@ -0,0 +1,61 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { type ColorScale, ColorScaleSelector, type ColorScaleSelectorProps } from './color-scale-selector';
+
+const meta: Meta<ColorScaleSelectorProps> = {
+    title: 'Component/Color scale selector',
+    component: ColorScaleSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    setColorScale: (colorScale: ColorScale) => void;
+}> = ({ setColorScale }) => {
+    const [internalColorScale, setInternalColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
+
+    return (
+        <ColorScaleSelector
+            colorScale={internalColorScale}
+            setColorScale={(colorScale) => {
+                setColorScale(colorScale);
+                setInternalColorScale(colorScale);
+            }}
+        />
+    );
+};
+
+export const ColorScaleSelectorStory: StoryObj<ColorScaleSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+    args: {
+        setColorScale: fn(),
+    },
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial value to be 0 and value 100%', async () => {
+            await expect(canvas.getAllByText('%', { exact: false })[0]).toHaveTextContent('0%');
+            await expect(canvas.getAllByText('%', { exact: false })[1]).toHaveTextContent('100%');
+        });
+
+        await step('Move min slider to 20%', async () => {
+            const minSlider = canvas.getAllByRole('slider')[0];
+            await fireEvent.input(minSlider, { target: { value: '20' } });
+            await expect(args.setColorScale).toHaveBeenCalledWith({ min: 0.2, max: 1, color: 'indigo' });
+            await waitFor(() => expect(canvas.getAllByText('%', { exact: false })[0]).toHaveTextContent('20%'));
+        });
+
+        await step('Move max slider to 80%', async () => {
+            const maxSlider = canvas.getAllByRole('slider')[1];
+            await fireEvent.input(maxSlider, { target: { value: '80' } });
+            await expect(args.setColorScale).toHaveBeenCalledWith({ min: 0.2, max: 0.8, color: 'indigo' });
+            await waitFor(() => expect(canvas.getAllByText('%', { exact: false })[1]).toHaveTextContent('80%'));
+        });
+    },
+};

package/src/preact/components/color-scale-selector.tsx

@@ -0,0 +1,79 @@
+import { type FunctionComponent } from 'preact';
+
+import { MinMaxRangeSlider } from './min-max-range-slider';
+import { type GraphColor, singleGraphColorRGBByName } from '../shared/charts/colors';
+import { formatProportion } from '../shared/table/formatProportion';
+
+export interface ColorScale {
+    min: number;
+    max: number;
+    color: GraphColor;
+}
+
+export interface ColorScaleSelectorProps {
+    colorScale: ColorScale;
+    setColorScale: (colorScale: ColorScale) => void;
+}
+
+export const ColorScaleSelector: FunctionComponent<ColorScaleSelectorProps> = ({ colorScale, setColorScale }) => {
+    const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
+
+    return (
+        <div className='flex items-center'>
+            <div
+                style={{
+                    backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
+                    color: 'black',
+                }}
+                className={colorDisplayCss}
+            >
+                {formatProportion(colorScale.min, 0)}
+            </div>
+            <div className='w-64'>
+                <MinMaxRangeSlider
+                    min={colorScale.min * 100}
+                    max={colorScale.max * 100}
+                    setMin={(percentage) => {
+                        setColorScale({ ...colorScale, min: percentage / 100 });
+                    }}
+                    setMax={(percentage) => {
+                        setColorScale({ ...colorScale, max: percentage / 100 });
+                    }}
+                />
+            </div>
+            <div
+                style={{
+                    backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
+                    color: 'white',
+                }}
+                className={colorDisplayCss}
+            >
+                {formatProportion(colorScale.max, 0)}
+            </div>
+        </div>
+    );
+};
+
+export const getColorWithingScale = (value: number, colorScale: ColorScale) => {
+    if (colorScale.min === colorScale.max) {
+        return singleGraphColorRGBByName(colorScale.color, 0);
+    }
+
+    const colorRange = colorScale.max - colorScale.min;
+
+    const alpha = (value - colorScale.min) / colorRange;
+
+    return singleGraphColorRGBByName(colorScale.color, alpha);
+};
+
+export const getTextColorForScale = (value: number, colorScale: ColorScale) => {
+    if (colorScale.min === colorScale.max) {
+        return 'black';
+    }
+
+    const colorRange = colorScale.max - colorScale.min;
+
+    const alpha = (value - colorScale.min) / colorRange;
+
+    return alpha <= 0.5 ? 'black' : 'white';
+};

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

@@ -7,9 +7,6 @@ const meta: Meta<InfoProps> = {
     title: 'Component/Info',
     component: Info,
     parameters: { fetchMock: {} },
-    args: {
-        height: '100px',
-    },
 };
 
 export default meta;
@@ -24,20 +21,50 @@ export const InfoStory: StoryObj<InfoProps> = {
     ),
 };
 
-export const ShowsInfoOnClick: StoryObj<InfoProps> = {
+export const OpenInfo: StoryObj<InfoProps> = {
     ...InfoStory,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        const openInfo = canvas.getByRole('button', { name: '?' });
 
-        await waitFor(() => expect(openInfo).toBeInTheDocument());
+        await openInfo(canvas);
+    },
+};
+
+export const ShowsAndClosesInfoOnClick: StoryObj<InfoProps> = {
+    ...InfoStory,
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
 
-        await userEvent.click(openInfo);
+        await openInfo(canvas);
 
-        await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeVisible());
+        await step('Close the info dialog by clicking the close button', async () => {
+            const dialog = await waitFor(() => canvas.getByRole('dialog'));
+            const closeButton = within(dialog).getByRole('button', { name: 'Close' });
+            closeButton.click();
+            await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
+        });
 
-        await userEvent.click(document.body);
+        await openInfo(canvas);
+        await step('Close the info dialog by clicking the x button', async () => {
+            const dialog = await waitFor(() => canvas.getByRole('dialog'));
+            const xButton = within(dialog).getByRole('button', { name: '✕' });
+            xButton.click();
+            await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
+        });
 
-        await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
+        await openInfo(canvas);
+        await step('Close the info dialog by clicking outside', async () => {
+            const dialog = await waitFor(() => canvas.getByRole('dialog'));
+            const xButton = within(dialog).getByRole('button', { name: 'Helper to close when clicked outside' });
+            xButton.click();
+            await waitFor(() => expect(canvas.queryByText(tooltipText, { exact: false })).not.toBeVisible());
+        });
     },
 };
+
+const openInfo = async (canvas: ReturnType<typeof within>) => {
+    const openInfo = canvas.getByRole('button', { name: '?' });
+    await waitFor(() => expect(openInfo).toBeInTheDocument());
+    await userEvent.click(openInfo);
+    await waitFor(() => expect(canvas.getByText(tooltipText, { exact: false })).toBeVisible());
+};

package/src/preact/components/info.tsx

@@ -1,57 +1,36 @@
-import { offset, shift, size } from '@floating-ui/dom';
 import { type FunctionComponent } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useRef } from 'preact/hooks';
 
-import { dropdownClass } from './dropdown';
-import { useCloseOnClickOutside, useCloseOnEsc, useFloatingUi } from '../shared/floating-ui/hooks';
+export interface InfoProps {}
 
-export interface InfoProps {
-    height?: string;
-}
-
-const Info: FunctionComponent<InfoProps> = ({ children, height }) => {
-    const [showHelp, setShowHelp] = useState(false);
-    const referenceRef = useRef<HTMLButtonElement>(null);
-    const floatingRef = useRef<HTMLDivElement>(null);
-
-    useFloatingUi(referenceRef, floatingRef, [
-        offset(10),
-        shift(),
-        size({
-            apply() {
-                if (!floatingRef.current) {
-                    return;
-                }
-                floatingRef.current.style.width = '100vw';
-                floatingRef.current.style.height = height ? height : '50vh';
-            },
-        }),
-    ]);
+const Info: FunctionComponent<InfoProps> = ({ children }) => {
+    const dialogRef = useRef<HTMLDialogElement>(null);
 
     const toggleHelp = () => {
-        setShowHelp(!showHelp);
+        dialogRef.current?.showModal();
     };
 
-    useCloseOnEsc(setShowHelp);
-    useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
-
     return (
         <div className='relative'>
-            <button type='button' className='btn btn-xs' onClick={toggleHelp} ref={referenceRef}>
+            <button type='button' className='btn btn-xs' onClick={toggleHelp}>
                 ?
             </button>
-            <div
-                ref={floatingRef}
-                className={`${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? '' : 'hidden'}`}
-            >
-                <div className={'flex flex-col'}>{children}</div>
-                <button
-                    onClick={() => setShowHelp(false)}
-                    className={'float-right underline text-sm hover:text-blue-700 mr-2'}
-                >
-                    Close
-                </button>
-            </div>
+            <dialog ref={dialogRef} className={'modal modal-bottom sm:modal-middle'}>
+                <div className='modal-box'>
+                    <form method='dialog'>
+                        <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'>✕</button>
+                    </form>
+                    <div className={'flex flex-col'}>{children}</div>
+                    <div className='modal-action'>
+                        <form method='dialog'>
+                            <button className={'float-right underline text-sm hover:text-blue-700 mr-2'}>Close</button>
+                        </form>
+                    </div>
+                </div>
+                <form method='dialog' className='modal-backdrop'>
+                    <button>Helper to close when clicked outside</button>
+                </form>
+            </dialog>
         </div>
     );
 };

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

@@ -69,7 +69,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
     `;
 
     return (
-        <div class='my-4 relative'>
+        <div class='my-4 relative w-full h-full'>
             <input
                 id='fromSlider'
                 type='range'

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

@@ -7,6 +7,15 @@ const meta: Meta<TooltipProps> = {
     title: 'Component/Tooltip',
     component: Tooltip,
     parameters: { fetchMock: {} },
+    argTypes: {
+        content: { control: 'text' },
+        position: {
+            control: {
+                type: 'radio',
+            },
+            options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'],
+        },
+    },
 };
 
 export default meta;
@@ -17,12 +26,13 @@ export const TooltipStory: StoryObj<TooltipProps> = {
     render: (args) => (
         <div class='flex justify-center px-4 py-16'>
             <Tooltip {...args}>
-                <div>Hover me</div>
+                <div className='bg-red-200'>Hover me</div>
             </Tooltip>
         </div>
     ),
     args: {
         content: tooltipContent,
+        position: 'bottom',
     },
 };
 
@@ -38,7 +48,7 @@ export const RendersStringContent: StoryObj<TooltipProps> = {
     },
 };
 
-export const RendersComponentConent: StoryObj<TooltipProps> = {
+export const RendersComponentContent: StoryObj<TooltipProps> = {
     ...TooltipStory,
     args: {
         content: <div>{tooltipContent}</div>,