@genspectrum/dashboard-components 0.6.15 → 0.6.16

package/dist/genspectrum-components.d.ts

@@ -1022,17 +1022,17 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time-component': MutationsOverTimeComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-over-time-component': MutationsOverTimeComponent;
     }
 }
 
@@ -1059,21 +1059,21 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 

package/dist/style.css

@@ -3036,9 +3036,6 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-44 {
-  width: 11rem;
-}
 .w-64 {
   width: 16rem;
 }

package/package.json

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

package/src/preact/components/proportion-selector-dropdown.stories.tsx

@@ -17,7 +17,8 @@ export default meta;
 const WrapperWithState: FunctionComponent<{
     setMinProportion: (value: number) => void;
     setMaxProportion: (value: number) => void;
-}> = ({ setMinProportion, setMaxProportion }) => {
+    labelPrefix?: string;
+}> = ({ setMinProportion, setMaxProportion, labelPrefix }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
 
     return (
@@ -31,24 +32,32 @@ const WrapperWithState: FunctionComponent<{
                 setProportionInterval({ ...proportionInterval, max: value });
                 setMaxProportion(value);
             }}
+            labelPrefix={labelPrefix}
         />
     );
 };
 
 export const ProportionSelectorStory: StoryObj<ProportionSelectorDropdownProps> = {
     render: (args) => {
-        return <WrapperWithState setMinProportion={args.setMinProportion} setMaxProportion={args.setMaxProportion} />;
+        return (
+            <WrapperWithState
+                setMinProportion={args.setMinProportion}
+                setMaxProportion={args.setMaxProportion}
+                labelPrefix={args.labelPrefix}
+            />
+        );
     },
     args: {
         setMinProportion: fn(),
         setMaxProportion: fn(),
+        labelPrefix: 'TestPrefix',
     },
     play: async ({ canvasElement, step, args }) => {
         const canvas = within(canvasElement);
 
         await step('Expect initial proportion to show on the button', async () => {
             const button = canvas.getByRole('button');
-            await expect(button).toHaveTextContent('Proportion 5.0% - 100.0%');
+            await expect(button).toHaveTextContent('TestPrefix 5.0% - 100.0%');
         });
 
         await step('Change min proportion and expect it to show on the button', async () => {
@@ -59,7 +68,7 @@ export const ProportionSelectorStory: StoryObj<ProportionSelectorDropdownProps>
             await userEvent.clear(minInput);
             await userEvent.type(minInput, '10');
 
-            await waitFor(() => expect(button).toHaveTextContent('Proportion 10.0% - 100.0%'));
+            await waitFor(() => expect(button).toHaveTextContent('TestPrefix 10.0% - 100.0%'));
             await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
         });
     },

package/src/preact/components/proportion-selector-dropdown.tsx

@@ -3,18 +3,21 @@ import { type FunctionComponent } from 'preact';
 import { Dropdown } from './dropdown';
 import { ProportionSelector, type ProportionSelectorProps } from './proportion-selector';
 
-export type ProportionSelectorDropdownProps = ProportionSelectorProps;
+export type ProportionSelectorDropdownProps = ProportionSelectorProps & { labelPrefix?: string };
 
 export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDropdownProps> = ({
     proportionInterval,
     setMinProportion,
     setMaxProportion,
+    labelPrefix = 'Proportion',
 }) => {
-    const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
+    const percentLabel = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
+
+    const width = 'w-[calc(1.5 * var(--tw-space-x-reverse) + 1.5 * var(--tw-space-x))]';
 
     return (
-        <div className='w-44'>
-            <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
+        <div className={width}>
+            <Dropdown buttonTitle={`${labelPrefix} ${percentLabel}`} placement={'bottom-start'}>
                 <ProportionSelector
                     proportionInterval={proportionInterval}
                     setMinProportion={setMinProportion}

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -204,6 +204,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 proportionInterval={proportionInterval}
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                 setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+                labelPrefix='Mean proportion'
             />
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'

package/standalone-bundle/dashboard-components.js

@@ -23184,10 +23184,11 @@ const NS = ({
 }, ed = ({
   proportionInterval: n,
   setMinProportion: t,
-  setMaxProportion: e
+  setMaxProportion: e,
+  labelPrefix: r = "Proportion"
 }) => {
-  const r = `${(n.min * 100).toFixed(1)}% - ${(n.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ m("div", { className: "w-44", children: /* @__PURE__ */ m(Qu, { buttonTitle: `Proportion ${r}`, placement: "bottom-start", children: /* @__PURE__ */ m(
+  const i = `${(n.min * 100).toFixed(1)}% - ${(n.max * 100).toFixed(1)}%`;
+  return /* @__PURE__ */ m("div", { className: "w-[calc(1.5 * var(--tw-space-x-reverse) + 1.5 * var(--tw-space-x))]", children: /* @__PURE__ */ m(Qu, { buttonTitle: `${r} ${i}`, placement: "bottom-start", children: /* @__PURE__ */ m(
     NS,
     {
       proportionInterval: n,
@@ -26422,9 +26423,6 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-44 {
-  width: 11rem;
-}
 .w-64 {
   width: 16rem;
 }
@@ -29853,7 +29851,8 @@ const yA = ({
     {
       proportionInterval: o,
       setMinProportion: (u) => s((d) => ({ ...d, min: u })),
-      setMaxProportion: (u) => s((d) => ({ ...d, max: u }))
+      setMaxProportion: (u) => s((d) => ({ ...d, max: u })),
+      labelPrefix: "Mean proportion"
     }
   ),
   /* @__PURE__ */ m(