@genspectrum/dashboard-components 0.17.0 → 0.18.0

package/dist/util.d.ts

@@ -906,7 +906,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -914,7 +914,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -922,7 +922,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -930,7 +930,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1034,11 +1034,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1046,7 +1042,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1054,7 +1050,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1062,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1070,10 +1069,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1081,7 +1081,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.17.0",
+    "version": "0.18.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -83,6 +83,7 @@
         "@lit/context": "^1.1.1",
         "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",
+        "@tanstack/table-core": "^8.21.2",
         "chart.js": "^4.4.6",
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
@@ -101,7 +102,7 @@
         "@custom-elements-manifest/analyzer": "^0.10.2",
         "@iconify-json/mdi": "^1.1.67",
         "@iconify-json/mdi-light": "^1.1.10",
-        "@iconify/tailwind": "^1.1.2",
+        "@iconify/tailwind4": "^1.0.6",
         "@playwright/test": "^1.43.1",
         "@storybook/addon-actions": "^8.0.9",
         "@storybook/addon-essentials": "^8.0.9",
@@ -115,7 +116,7 @@
         "@storybook/types": "^8.0.9",
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
-        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/postcss": "^4.0.9",
         "@testing-library/preact": "^3.2.4",
         "@types/geojson": "^7946.0.15",
         "@types/leaflet": "^1.9.15",
@@ -125,7 +126,7 @@
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",
-        "daisyui": "^4.10.2",
+        "daisyui": "^5.0.0",
         "depcheck": "^1.4.7",
         "eslint": "^8.57.0",
         "eslint-config-preact": "^1.3.0",
@@ -141,7 +142,7 @@
         "react": "^18.3.1",
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
-        "tailwindcss": "^3.4.3",
+        "tailwindcss": "^4.0.9",
         "typescript": "~5.7.2",
         "vite": "^6.0.3",
         "vite-plugin-dts": "^4.0.3",

package/src/preact/aggregatedData/aggregate.tsx

@@ -119,11 +119,11 @@ type ToolbarProps = {
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({ data, originalComponentProps }) => {
     return (
-        <div class='flex flex-row'>
-            <CsvDownloadButton className='mx-1 btn btn-xs' getData={() => data} filename='aggregate.csv' />
+        <>
+            <CsvDownloadButton className='btn btn-xs' getData={() => data} filename='aggregate.csv' />
             <AggregateInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
-        </div>
+        </>
     );
 };
 

package/src/preact/components/clearable-select.tsx

@@ -50,7 +50,7 @@ export function ClearableSelect({
     return (
         <div className={`relative inline min-w-24 ${className}`}>
             <select
-                className={`w-full select select-bordered pr-14 ${selectClassName}`}
+                className={`w-full select pr-14 ${selectClassName}`}
                 value={selectedOption ?? undefinedValue}
                 onChange={handleChange}
             >

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

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

package/src/preact/components/confidence-interval-selector.tsx

@@ -39,7 +39,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
                 const value = select.value as ConfidenceIntervalMethod;
                 setConfidenceIntervalMethod(value);
             }}
-            selectStyle={'select-xs select-bordered'}
+            selectStyle={'select-xs'}
         />
     );
 };

package/src/preact/components/downshift-combobox.tsx

@@ -91,7 +91,7 @@ export function DownshiftCombobox<Item>({
         <div ref={divRef} className={'relative w-full'}>
             <div className='w-full flex flex-col gap-1'>
                 <div
-                    className={`flex gap-0.5 input input-bordered min-w-32 ${inputClassName}`}
+                    className={`flex gap-0.5 input min-w-32 w-full ${inputClassName}`}
                     onBlur={(event) => {
                         if (event.relatedTarget != buttonRef.current) {
                             closeMenu();
@@ -131,7 +131,7 @@ export function DownshiftCombobox<Item>({
                 {items.length > 0 ? (
                     items.map((item, index) => (
                         <li
-                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm`}
+                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-xs`}
                             key={itemToString(item)}
                             {...getItemProps({ item, index })}
                         >
@@ -139,7 +139,7 @@ export function DownshiftCombobox<Item>({
                         </li>
                     ))
                 ) : (
-                    <li className='py-2 px-3 shadow-sm'>No elements to select.</li>
+                    <li className='py-2 px-3 shadow-xs'>No elements to select.</li>
                 )}
             </ul>
         </div>

package/src/preact/components/fullscreen.tsx

@@ -18,9 +18,13 @@ export const Fullscreen = () => {
                     }
                 }
             }}
-            className={`mt-0.5 iconify text-2xl ${isFullscreen ? 'mdi--fullscreen-exit hover:scale-90' : 'mdi--fullscreen hover:scale-110'}`}
+            className={`btn btn-xs`}
             title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-        />
+        >
+            <div
+                className={`iconify text-2xl ${isFullscreen ? 'mdi--fullscreen-exit hover:scale-90' : 'mdi--fullscreen hover:scale-110'}`}
+            />
+        </button>
     );
 };
 

package/src/preact/components/info.tsx

@@ -4,7 +4,7 @@ import { Modal } from './modal';
 
 const Info: FunctionComponent = ({ children }) => {
     return (
-        <div className='relative'>
+        <div className='relative inline-flex'>
             <Modal buttonClassName='btn btn-xs' modalContent={children}>
                 ?
             </Modal>

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

@@ -17,7 +17,7 @@ export const MutationTypeSelector: FunctionComponent<MutationTypeSelectorProps>
     setDisplayedMutationTypes,
 }) => {
     return (
-        <div className='w-[6rem]'>
+        <div className='w-[6rem] inline-flex'>
             <CheckboxSelector
                 items={displayedMutationTypes}
                 label={getMutationTypesSelectorLabel(displayedMutationTypes)}

package/src/preact/components/percent-intput.tsx

@@ -40,7 +40,8 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({
 
     const isError = indicateError || !percentageInRange(internalPercentage);
     return (
-        <label className={`input input-bordered flex items-center gap-2 w-32 ${isError ? 'input-error' : ''}`}>
+        <label className={`input flex items-center w-32 ${isError ? 'input-error' : ''}`}>
+            <span className='label'>%</span>
             <input
                 type='number'
                 step={0.1}
@@ -49,9 +50,8 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({
                 value={internalPercentage}
                 onInput={handleInputChange}
                 lang='en'
-                className={`grow w-16`}
+                className={`grow w-12`}
             />
-            %
         </label>
     );
 };

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

@@ -16,7 +16,7 @@ export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDro
     const width = 'w-[calc(1.5 * var(--tw-space-x-reverse) + 1.5 * var(--tw-space-x))]';
 
     return (
-        <div className={width}>
+        <div className={`${width} inline-flex`}>
             <Dropdown buttonTitle={`${labelPrefix} ${percentLabel}`} placement={'bottom-start'}>
                 <ProportionSelector
                     proportionInterval={proportionInterval}

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

@@ -36,7 +36,7 @@ export const ScalingSelector: FunctionComponent<ScalingSelectorProps> = ({
                 const value = select.value as ScaleType;
                 setYAxisScaleType(value);
             }}
-            selectStyle={`${className} select-xs select-bordered`}
+            selectStyle={`${className ?? ''} select-xs`}
         />
     );
 };

package/src/preact/components/select.tsx

@@ -10,7 +10,7 @@ export interface SelectProps {
 
 export const Select: FunctionComponent<SelectProps> = ({ items, selected, onChange, selectStyle }) => {
     return (
-        <select class={`select select-bordered ${selectStyle}`} value={selected} onChange={onChange}>
+        <select class={`select ${selectStyle} w-fit`} value={selected} onChange={onChange}>
             {items.map((item) => (
                 <option key={item.value} value={item.value} disabled={item.disabled}>
                     {item.label}

package/src/preact/components/tabs.tsx

@@ -45,7 +45,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
-            <div className={`p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`}>
+            <div className={`p-2 grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`}>
                 {tabs.map((tab) => (
                     <div className='h-full' key={tab.title} hidden={activeTab !== tab.title}>
                         {tab.content}

package/src/preact/dateRangeFilter/date-picker.tsx

@@ -55,7 +55,7 @@ export function DatePicker({
 
     return (
         <input
-            className={`input input-bordered w-full ${className}`}
+            className={`input w-full ${className}`}
             type='text'
             placeholder={placeholderText}
             ref={inputRef}

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -193,7 +193,7 @@ export const DateRangeFilterInner = ({
     return (
         <div className={'@container'} ref={divRef}>
             <div className='flex min-w-[7.5rem] flex-col @md:flex-row'>
-                <div className='flex-grow'>
+                <div className='grow'>
                     <ClearableSelect
                         items={options.map((item) => item.label)}
                         placeholderText={placeholder}
@@ -205,9 +205,9 @@ export const DateRangeFilterInner = ({
                         selectClassName={'rounded-t-md rounded-b-none @md:rounded-l-md @md:rounded-r-none'}
                     />
                 </div>
-                <div className={'flex flex-grow flex-col @4xs:flex-row'}>
+                <div className={'flex grow flex-col @4xs:flex-row'}>
                     <DatePicker
-                        className={'flex-grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none'}
+                        className={'grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none'}
                         value={state?.dateFrom}
                         onChange={onChangeDateFrom}
                         maxDate={state?.dateTo}
@@ -215,7 +215,7 @@ export const DateRangeFilterInner = ({
                     />
                     <DatePicker
                         className={
-                            'flex-grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md '
+                            'grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md '
                         }
                         value={state?.dateTo}
                         onChange={onChangeDateTo}

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

@@ -178,7 +178,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 setDisplayedMutationTypes={setDisplayedMutationTypes}
             />
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />

package/src/preact/mutations/mutations.tsx

@@ -200,7 +200,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                         setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
                     />
                     <CsvDownloadButton
-                        className='mx-1 btn btn-xs'
+                        className='btn btn-xs'
                         getData={() =>
                             getMutationsTableData(
                                 filteredData.tableData,
@@ -215,7 +215,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             )}
             {activeTab === 'Insertions' && (
                 <CsvDownloadButton
-                    className='mx-1 btn btn-xs'
+                    className='btn btn-xs'
                     getData={() =>
                         getInsertionsTableData(filteredData.insertions).map((row) => {
                             return {