@genspectrum/dashboard-components 0.6.6 → 0.6.8

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;
@@ -2834,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;
@@ -2891,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;
 }
@@ -2969,9 +2992,6 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3138,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);
@@ -3166,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));

package/package.json

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

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.tsx

@@ -41,8 +41,8 @@ function getPositionCss(position?: TooltipPosition) {
 
 const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position = 'bottom' }) => {
     return (
-        <div className='relative'>
-            <div className='peer'>{children}</div>
+        <div className='relative w-full h-full'>
+            <div className='peer w-full h-full'>{children}</div>
             <div
                 className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`}
             >

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

@@ -188,7 +188,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info height={'100px'}>Info for mutation comparison</Info>
+            <Info>Info for mutation comparison</Info>
         </>
     );
 };

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

@@ -9,7 +9,7 @@ export const MutationFilterInfo = () => {
 
     const firstGene = referenceGenome.genes[0].name;
     return (
-        <Info height={'80vh'}>
+        <Info>
             <InfoHeadline1> Mutation Filter</InfoHeadline1>
             <InfoParagraph>This component allows you to filter for mutations at specific positions.</InfoParagraph>
 

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

@@ -104,7 +104,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Remove the first mutation', async () => {
-            const firstMutationDeleteButton = canvas.getAllByRole('button')[1];
+            const firstMutationDeleteButton = canvas.getAllByRole('button', { name: '✕' })[1];
             await waitFor(() => fireEvent.click(firstMutationDeleteButton));
 
             await expect(changedListenerMock).toHaveBeenCalledWith(

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

@@ -8,7 +8,6 @@ import { type Deletion, type Insertion, type Mutation, type Substitution } from
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
-import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
 export interface MutationFilterInnerProps {
     initialValue?: SelectedMutationFilterStrings | string[] | undefined;
@@ -312,8 +311,8 @@ const SelectedFilter = <MutationType extends Mutation>({
             style={{ backgroundColor, color: textColor }}
         >
             {mutation.toString()}
-            <button type='button' onClick={() => onDelete(mutation)}>
-                <DeleteIcon />
+            <button className='ml-1' type='button' onClick={() => onDelete(mutation)}>
+                ✕
             </button>
         </span>
     );

package/src/preact/mutations/mutations.tsx

@@ -207,7 +207,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info height={'100px'}>Info for mutations</Info>
+            <Info>Info for mutations</Info>
         </>
     );
 };