@genspectrum/dashboard-components 0.17.1 → 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>;
         }
     }
 }
@@ -970,7 +970,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -978,7 +978,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -986,7 +986,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -994,7 +994,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1050,11 +1050,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1062,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': 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.1",
+    "version": "0.18.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -102,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",
@@ -116,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",
@@ -126,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",
@@ -142,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 {

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

@@ -240,7 +240,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 labelPrefix='Mean proportion'
             />
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getDownloadData(filteredData)}
                 filename='mutations_over_time.csv'
             />

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -167,7 +167,7 @@ const Toolbar = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalC
                 />
             )}
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity)}
                 filename='number_of_sequences_over_time.csv'
             />

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -218,7 +218,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 />
             )}
             <CsvDownloadButton
-                className='mx-1 btn btn-xs'
+                className='btn btn-xs'
                 getData={() => getPrevalenceOverTimeTableData(data, granularity)}
                 filename='prevalence_over_time.csv'
             />

package/src/preact/sequencesByLocation/sequences-by-location-map.tsx

@@ -106,7 +106,7 @@ const DataMatchInformation: FunctionComponent<DataMatchInformationProps> = ({
 
     return (
         <Modal
-            buttonClassName='text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border'
+            buttonClassName='text-sm absolute bottom-0 px-1 z-1001 bg-white rounded-sm border border-gray-200'
             modalContent={
                 <>
                     <InfoHeadline1>Sequences By Location - Map View</InfoHeadline1>

package/src/preact/sequencesByLocation/sequences-by-location.tsx

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

package/src/styles/tailwind.css

@@ -1,3 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin "daisyui" {
+  themes: light --default;
+}
+@plugin "@iconify/tailwind4" {
+  prefixes: mdi, mdi-light;
+}
+
+@theme {
+  --container-2xs: 18rem;
+  --container-3xs: 16rem;
+  --container-4xs: 14rem;
+}

package/src/web-components/input/gs-date-range-filter.stories.ts

@@ -78,7 +78,7 @@ export default meta;
 export const Default: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
@@ -94,7 +94,7 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
 export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     earliestDate="${args.earliestDate}"

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -87,7 +87,7 @@ export default meta;
 const Template: StoryObj<Required<LineageFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-lineage-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}

package/src/web-components/input/gs-location-filter.stories.ts

@@ -67,7 +67,7 @@ export default meta;
 const Template: StoryObj<LocationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-location-filter
                     .fields=${args.fields}
                     .lapisFilter=${args.lapisFilter}

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -46,7 +46,7 @@ export default meta;
 const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-mutation-filter .initialValue=${args.initialValue} .width=${args.width}></gs-mutation-filter>
             </div>
         </gs-app>`;

package/src/web-components/input/gs-text-filter.stories.ts

@@ -86,7 +86,7 @@ export default meta;
 export const Default: StoryObj<Required<TextFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
-            <div class="max-w-screen-lg">
+            <div class="max-w-(--breakpoint-lg)">
                 <gs-text-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}