@genspectrum/dashboard-components 0.18.3 → 0.18.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.18.3",
+    "version": "0.18.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -145,7 +145,7 @@
         "tailwindcss": "^4.0.9",
         "typescript": "^5.8.2",
         "vite": "^6.0.3",
-        "vite-plugin-dts": "^4.0.3",
+        "vite-plugin-dts": "4.5.0",
         "vitest": "^3.0.2"
     }
 }

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

@@ -4,6 +4,7 @@ import { type FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 
 import { type DisplayedSegment, SegmentSelector, type SegmentSelectorProps } from './segment-selector';
+import type { SequenceType } from '../../types';
 
 const meta: Meta<SegmentSelectorProps> = {
     title: 'Component/Segment selector',
@@ -15,7 +16,8 @@ export default meta;
 
 const WrapperWithState: FunctionComponent<{
     displayedSegments: DisplayedSegment[];
-}> = ({ displayedSegments: initialDisplayedSegments }) => {
+    sequenceType: SequenceType;
+}> = ({ displayedSegments: initialDisplayedSegments, sequenceType }) => {
     const [displayedSegments, setDisplayedSegments] = useState<DisplayedSegment[]>(initialDisplayedSegments);
 
     return (
@@ -24,6 +26,7 @@ const WrapperWithState: FunctionComponent<{
             setDisplayedSegments={(items: DisplayedSegment[]) => {
                 setDisplayedSegments(items);
             }}
+            sequenceType={sequenceType}
         />
     );
 };
@@ -50,12 +53,13 @@ export const AllSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: true,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
-        await step("Show 'All segments' as label", async () => {
-            await expect(canvas.getByText('All segments')).toBeInTheDocument();
+        await step("Show 'All genes' as label", async () => {
+            await expect(canvas.getByText('All genes')).toBeInTheDocument();
         });
     },
 };
@@ -80,6 +84,7 @@ export const NoSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: false,
             },
         ],
+        sequenceType: 'nucleotide',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
@@ -110,12 +115,13 @@ export const LongSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: true,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
-        await step('Show number of active segments as label', async () => {
-            await expect(canvas.getByText('2 segments')).toBeInTheDocument();
+        await step('Show number of active genes as label', async () => {
+            await expect(canvas.getByText('2 genes')).toBeInTheDocument();
         });
     },
 };
@@ -140,6 +146,7 @@ export const ShortSegmentsSelected: StoryObj<SegmentSelectorProps> = {
                 checked: false,
             },
         ],
+        sequenceType: 'amino acid',
     },
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);

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

@@ -13,40 +13,44 @@ export type DisplayedSegment = CheckboxItem & {
 export type SegmentSelectorProps = {
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (items: DisplayedSegment[]) => void;
+    sequenceType: SequenceType;
 };
 
 export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
     displayedSegments,
     setDisplayedSegments,
+    sequenceType,
 }) => {
     if (displayedSegments.length <= 1) {
         return null;
     }
 
     return (
-        <div className='w-24'>
+        <div className='w-20 inline-flex'>
             <CheckboxSelector
                 items={displayedSegments}
-                label={getSegmentSelectorLabel(displayedSegments)}
+                label={getSegmentSelectorLabel(displayedSegments, sequenceType)}
                 setItems={(items) => setDisplayedSegments(items)}
             />
         </div>
     );
 };
 
-const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
+const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[], sequenceType: SequenceType) => {
     const allSelectedSelected = displayedSegments
         .filter((segment) => segment.checked)
         .map((segment) => segment.segment);
 
+    const label = sequenceType === 'amino acid' ? 'gene' : 'segment';
+
     if (allSelectedSelected.length === 0) {
-        return `No segments`;
+        return `No ${label}s`;
     }
     if (displayedSegments.length === allSelectedSelected.length) {
-        return `All segments`;
+        return `All ${label}s`;
     }
 
-    const longestDisplayString = `All segments`;
+    const longestDisplayString = `All ${label}s`;
 
     const allSelectedSelectedString = allSelectedSelected.join(', ');
 
@@ -54,7 +58,7 @@ const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
         return allSelectedSelectedString;
     }
 
-    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? 'segment' : 'segments'}`;
+    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? label : `${label}s`}`;
 };
 
 export function useDisplayedSegments(sequenceType: SequenceType) {

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

@@ -172,7 +172,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                 setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
             />
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             <MutationTypeSelector
                 displayedMutationTypes={displayedMutationTypes}
                 setDisplayedMutationTypes={setDisplayedMutationTypes}

package/src/preact/mutations/mutations.tsx

@@ -185,7 +185,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             {activeTab === 'Table' && (
                 <MutationTypeSelector
                     setDisplayedMutationTypes={setDisplayedMutationTypes}

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

@@ -192,7 +192,7 @@ const ProportionCell: FunctionComponent<{
                         backgroundColor: getColorWithinScale(proportion, colorScale),
                         color: getTextColorForScale(proportion, colorScale),
                     }}
-                    className={`w-full h-full hover:font-bold text-xs group @container`}
+                    className={`w-full h-full hover:font-bold text-xs group @container text-nowrap`}
                 >
                     {value === null ? (
                         <span className='invisible'>No data</span>

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

@@ -228,7 +228,11 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             {activeTab === 'Grid' && (
                 <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             )}
-            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
+            <SegmentSelector
+                displayedSegments={displayedSegments}
+                setDisplayedSegments={setDisplayedSegments}
+                sequenceType={originalComponentProps.sequenceType}
+            />
             <MutationTypeSelector
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
                 displayedMutationTypes={displayedMutationTypes}