@genspectrum/dashboard-components 0.6.11 → 0.6.13

package/dist/genspectrum-components.d.ts

@@ -990,21 +990,21 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time-component': MutationsOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time-component': MutationsOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 

package/dist/style.css

@@ -983,6 +983,39 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .alert {
   display: grid;
   width: 100%;
@@ -1024,6 +1057,15 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+    --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)));
+  }
+
   .tab:hover {
     --tw-text-opacity: 1;
   }
@@ -1117,6 +1159,25 @@ html {
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
+.divider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  height: 1rem;
+  white-space: nowrap;
+}
+.divider:before,
+  .divider:after {
+  height: 0.125rem;
+  width: 100%;
+  flex-grow: 1;
+  --tw-content: '';
+  content: var(--tw-content);
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+}
 .dropdown {
   position: relative;
   display: inline-block;
@@ -1633,6 +1694,11 @@ input.tab:checked + .tab-content,
   --alert-bg: var(--fallback-er,oklch(var(--er)/1));
   --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
 }
+.btm-nav > *:where(.active) {
+  border-top-width: 2px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -1785,6 +1851,9 @@ input.tab:checked + .tab-content,
     background-position-y: 0;
   }
 }
+.divider:not(:empty) {
+  gap: 1rem;
+}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -1900,6 +1969,14 @@ input.tab:checked + .tab-content,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+  --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)));
+}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -2135,30 +2212,6 @@ input.tab:checked + .tab-content,
   background-position: calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
-.skeleton {
-  border-radius: var(--rounded-box, 1rem);
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  will-change: background-position;
-  animation: skeleton 1.8s ease-in-out infinite;
-  background-image: linear-gradient(
-    105deg,
-    transparent 0%,
-    transparent 40%,
-    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
-    transparent 60%,
-    transparent 100%
-  );
-  background-size: 200% auto;
-  background-repeat: no-repeat;
-  background-position-x: -50%;
-}
-@media (prefers-reduced-motion) {
-
-  .skeleton {
-    animation-duration: 15s;
-  }
-}
 @keyframes skeleton {
 
   from {
@@ -2396,6 +2449,12 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.table-zebra tr.active,
+    .table-zebra tr.active:nth-child(even),
+    .table-zebra-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+}
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
@@ -2468,6 +2527,18 @@ input.tab:checked + .tab-content,
   --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
       var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
 }
+.btm-nav-xs > *:where(.active) {
+  border-top-width: 1px;
+}
+.btm-nav-sm > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-md > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-lg > *:where(.active) {
+  border-top-width: 4px;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -2887,6 +2958,9 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-0 {
+  margin-bottom: 0px;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2911,6 +2985,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -2950,12 +3027,24 @@ input.tab:checked + .tab-content,
 .w-16 {
   width: 4rem;
 }
+.w-20 {
+  width: 5rem;
+}
+.w-24 {
+  width: 6rem;
+}
 .w-32 {
   width: 8rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-64 {
   width: 16rem;
 }
+.w-\[6rem\] {
+  width: 6rem;
+}
 .w-\[7\.5rem\] {
   width: 7.5rem;
 }
@@ -3193,6 +3282,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.11",
+    "version": "0.6.13",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -90,7 +90,7 @@
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
-        "@types/node": "^20.12.7",
+        "@types/node": "^22.0.0",
         "@types/object-hash": "^3.0.6",
         "@typescript-eslint/eslint-plugin": "^7.14.1",
         "@typescript-eslint/parser": "^7.14.1",

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

@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, fn, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 import { type CheckboxItem, CheckboxSelector, type CheckboxSelectorProps } from './checkbox-selector';
 
@@ -14,12 +16,33 @@ const meta: Meta<CheckboxSelectorProps> = {
 
 export default meta;
 
+const WrapperWithState: FunctionComponent<CheckboxSelectorProps> = ({
+    items: initialItems,
+    label,
+    setItems: setItemsMock,
+}) => {
+    const [items, setItems] = useState<CheckboxItem[]>(initialItems);
+
+    return (
+        <div className='w-32'>
+            <CheckboxSelector
+                items={items}
+                label={label}
+                setItems={(items: CheckboxItem[]) => {
+                    setItemsMock(items);
+                    setItems(items);
+                }}
+            />
+        </div>
+    );
+};
+
 export const CheckboxSelectorStory: StoryObj<CheckboxSelectorProps> = {
     render: (args) => {
         let wrapperStateItems = args.items;
 
         return (
-            <CheckboxSelector
+            <WrapperWithState
                 items={wrapperStateItems}
                 label={args.label}
                 setItems={(items: CheckboxItem[]) => {
@@ -37,20 +60,79 @@ export const CheckboxSelectorStory: StoryObj<CheckboxSelectorProps> = {
         label: 'Some label',
         setItems: fn(),
     },
-    play: async ({ canvasElement, args }) => {
+    play: async ({ canvasElement, args, step }) => {
         const canvas = within(canvasElement);
 
-        const open = () => canvas.getByText('Some label', { exact: false });
+        const open = () => canvas.getByText('Some label');
+        const selectAll = () => canvas.getByText('Select all');
+        const selectNone = () => canvas.getByText('Select none');
+        const firstItem = () => canvas.getByLabelText('item1');
         open().click();
 
-        const item1 = canvas.getByLabelText('item1', { exact: false });
-        item1.click();
+        await step('Select one item', async () => {
+            firstItem().click();
 
-        await waitFor(() =>
-            expect(args.setItems).toHaveBeenCalledWith([
-                { checked: true, label: 'item1' },
-                { checked: false, label: 'item2' },
-            ]),
-        );
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select all items with one item already selected', async () => {
+            selectAll().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Deselect one item', async () => {
+            firstItem().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select none with one item already selected', async () => {
+            selectNone().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select all items with none selected', async () => {
+            selectAll().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: true, label: 'item1' },
+                    { checked: true, label: 'item2' },
+                ]),
+            );
+        });
+
+        await step('Select none with all items selected', async () => {
+            selectNone().click();
+
+            await waitFor(() =>
+                expect(args.setItems).toHaveBeenCalledWith([
+                    { checked: false, label: 'item1' },
+                    { checked: false, label: 'item2' },
+                ]),
+            );
+        });
     },
 };

package/src/preact/components/checkbox-selector.tsx

@@ -18,6 +18,25 @@ export const CheckboxSelector = <Item extends CheckboxItem>({
 }: CheckboxSelectorProps<Item>) => {
     return (
         <Dropdown buttonTitle={label} placement={'bottom-start'}>
+            <button
+                className='btn btn-xs btn-ghost'
+                onClick={() => {
+                    const newItems = items.map((item) => ({ ...item, checked: true }));
+                    setItems(newItems);
+                }}
+            >
+                Select all
+            </button>
+            <button
+                className='btn btn-xs btn-ghost'
+                onClick={() => {
+                    const newItems = items.map((item) => ({ ...item, checked: false }));
+                    setItems(newItems);
+                }}
+            >
+                Select none
+            </button>
+            <div className='divider mt-0 mb-0' />
             <ul>
                 {items.map((item, index) => (
                     <li className='flex flex-row items-center' key={item.label}>

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

@@ -10,8 +10,10 @@ export const ColorScaleSelectorDropdown: FunctionComponent<ColorScaleSelectorDro
     setColorScale,
 }) => {
     return (
-        <Dropdown buttonTitle={`Color scale`} placement={'bottom-start'}>
-            <ColorScaleSelector colorScale={colorScale} setColorScale={setColorScale} />
-        </Dropdown>
+        <div className='w-20'>
+            <Dropdown buttonTitle={`Color scale`} placement={'bottom-start'}>
+                <ColorScaleSelector colorScale={colorScale} setColorScale={setColorScale} />
+            </Dropdown>
+        </div>
     );
 };

package/src/preact/components/dropdown.tsx

@@ -28,13 +28,13 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ children, buttonTit
     };
 
     return (
-        <div>
-            <button type='button' className='btn btn-xs whitespace-nowrap' onClick={toggle} ref={referenceRef}>
+        <>
+            <button type='button' className='btn btn-xs whitespace-nowrap w-full' onClick={toggle} ref={referenceRef}>
                 {buttonTitle}
             </button>
             <div ref={floatingRef} className={`${dropdownClass} ${showContent ? '' : 'hidden'}`}>
                 {children}
             </div>
-        </div>
+        </>
     );
 };

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

@@ -1,5 +1,12 @@
 import { type FunctionComponent } from 'preact';
 
 export const LoadingDisplay: FunctionComponent = () => {
-    return <div aria-label={'Loading'} className='h-full w-full skeleton' />;
+    return (
+        <div
+            aria-label={'Loading'}
+            className='h-full w-full border-2 border-gray-100 rounded-md flex justify-center items-center'
+        >
+            <div className='loading loading-spinner loading-md text-neutral-500' />
+        </div>
+    );
 };

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

@@ -0,0 +1,115 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import {
+    type DisplayedMutationType,
+    MutationTypeSelector,
+    type MutationTypeSelectorProps,
+} from './mutation-type-selector';
+
+const meta: Meta<MutationTypeSelectorProps> = {
+    title: 'Component/Mutation type selector',
+    component: MutationTypeSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    displayedMutationTypes: DisplayedMutationType[];
+}> = ({ displayedMutationTypes: initialMutationTypes }) => {
+    const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>(initialMutationTypes);
+
+    return (
+        <MutationTypeSelector
+            displayedMutationTypes={displayedMutationTypes}
+            setDisplayedMutationTypes={(mutationTypes: DisplayedMutationType[]) => {
+                setDisplayedMutationTypes(mutationTypes);
+            }}
+        />
+    );
+};
+
+const MutationTypeSelectorStory: StoryObj<MutationTypeSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+};
+
+export const AllMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: true,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: true,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show short form of types as label', async () => {
+            await expect(canvas.getByText('Subst., Del.')).toBeInTheDocument();
+        });
+    },
+};
+
+export const NoMutationTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: false,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'No types' as label", async () => {
+            await expect(canvas.getByText('No types')).toBeInTheDocument();
+        });
+    },
+};
+
+export const OneTypesSelected: StoryObj<MutationTypeSelectorProps> = {
+    ...MutationTypeSelectorStory,
+    args: {
+        displayedMutationTypes: [
+            {
+                label: 'Substitution',
+                type: 'substitution',
+                checked: true,
+            },
+            {
+                label: 'Deletion',
+                type: 'deletion',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show the selected type as label', async () => {
+            const substitutionElements = await canvas.getAllByText('Substitution');
+            await expect(substitutionElements.length).toBe(2);
+        });
+    },
+};

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

@@ -16,14 +16,39 @@ export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps>
     displayedMutationTypes,
     setDisplayedMutationTypes,
 }) => {
-    const checkedLabels = displayedMutationTypes.filter((type) => type.checked).map((type) => type.label);
-    const mutationTypesSelectorLabel = `Types: ${checkedLabels.length > 0 ? checkedLabels.join(', ') : 'None'}`;
-
     return (
-        <CheckboxSelector
-            items={displayedMutationTypes}
-            label={mutationTypesSelectorLabel}
-            setItems={(items) => setDisplayedMutationTypes(items)}
-        />
+        <div className='w-[6rem]'>
+            <CheckboxSelector
+                items={displayedMutationTypes}
+                label={getMutationTypesSelectorLabel(displayedMutationTypes)}
+                setItems={(items) => setDisplayedMutationTypes(items)}
+            />
+        </div>
     );
 };
+
+const getMutationTypesSelectorLabel = (displayedMutationTypes: DisplayedMutationType[]) => {
+    const checkedLabels = displayedMutationTypes.filter((displayedMutationType) => displayedMutationType.checked);
+
+    if (checkedLabels.length === 0) {
+        return `No types`;
+    }
+    if (displayedMutationTypes.length === checkedLabels.length) {
+        return displayedMutationTypes
+            .map((type) => {
+                switch (type.type) {
+                    case 'substitution':
+                        return 'Subst.';
+                    case 'deletion':
+                        return 'Del.';
+                }
+            })
+            .join(', ');
+    }
+
+    return checkedLabels
+        .map((type) => {
+            return type.label;
+        })
+        .join(', ');
+};