@genspectrum/dashboard-components 1.1.0 → 1.3.0

package/dist/util.d.ts

@@ -164,7 +164,7 @@ declare type LapisLineageFilter = Record<string, string | undefined>;
 
 declare type LapisLocationFilter = default_2.infer<typeof lapisLocationFilterSchema>;
 
-declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined]>>;
+declare const lapisLocationFilterSchema: default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodUndefined, default_2.ZodNull]>>;
 
 export declare type LapisNumberFilter = Record<string, number | undefined>;
 
@@ -949,7 +949,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -957,7 +957,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -965,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -973,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -981,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -989,7 +989,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -997,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1005,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1013,7 +1013,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1021,7 +1021,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>;
         }
     }
 }
@@ -1029,7 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1037,7 +1037,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>;
         }
     }
 }
@@ -1061,7 +1061,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1069,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1077,7 +1077,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1085,7 +1085,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1093,10 +1093,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1104,7 +1105,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1112,10 +1113,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1123,7 +1124,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1131,11 +1132,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1143,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-B64OQZjX.js";
+import { D, a, L, N, b, T, d, g, v } from "./NumberRangeFilterChangedEvent-CQ32Qy8D.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -99,6 +99,7 @@
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.2",
+        "@eslint/js": "^9.31.0",
         "@iconify-json/mdi": "^1.1.67",
         "@iconify-json/mdi-light": "^1.1.10",
         "@iconify/tailwind4": "^1.0.6",
@@ -127,11 +128,13 @@
         "autoprefixer": "^10.4.19",
         "daisyui": "^5.0.0",
         "depcheck": "^1.4.7",
-        "eslint": "^8.57.0",
-        "eslint-config-preact": "^1.3.0",
+        "eslint": "^9.31.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-storybook": "^0.12.0",
+        "globals": "^16.3.0",
         "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
@@ -143,6 +146,7 @@
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^4.0.9",
         "typescript": "^5.8.2",
+        "typescript-eslint": "^8.36.0",
         "vite": "^6.0.3",
         "vite-plugin-dts": "4.5.0",
         "vitest": "^3.0.2"

package/src/lapisApi/lapisApi.ts

@@ -9,6 +9,8 @@ import {
     mutationsResponse,
     problemDetail,
     type ProblemDetail,
+    type MutationsOverTimeRequest,
+    mutationsOverTimeResponse,
 } from './lapisTypes';
 import { type SequenceType } from '../types';
 import { lineageDefinitionResponseSchema } from './LineageDefinition';
@@ -112,6 +114,28 @@ export async function fetchSubstitutionsOrDeletions(
     return mutationsResponse.parse(await response.json());
 }
 
+export async function fetchMutationsOverTime(
+    lapisUrl: string,
+    body: MutationsOverTimeRequest,
+    sequenceType: SequenceType,
+    signal?: AbortSignal,
+) {
+    const response = await callLapis(
+        mutationsOverTimeEndpoint(lapisUrl, sequenceType),
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+            signal,
+        },
+        `${sequenceType} mutations over time`,
+    );
+
+    return mutationsOverTimeResponse.parse(await response.json());
+}
+
 export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSignal) {
     const response = await callLapis(
         referenceGenomeEndpoint(lapisUrl),
@@ -176,7 +200,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
             const lapisErrorResult = lapisError.safeParse(json);
             if (lapisErrorResult.success) {
                 throw new LapisError(
-                    response.statusText + lapisErrorResult.data.error.detail,
+                    response.statusText + (lapisErrorResult.data.error.detail ?? ''),
                     response.status,
                     lapisErrorResult.data.error,
                     requestedData,
@@ -186,7 +210,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
             const problemDetailResult = problemDetail.safeParse(json);
             if (problemDetailResult.success) {
                 throw new LapisError(
-                    response.statusText + problemDetailResult.data.detail,
+                    response.statusText + (problemDetailResult.data.detail ?? ''),
                     response.status,
                     problemDetailResult.data,
                     requestedData,
@@ -215,6 +239,11 @@ export const substitutionsOrDeletionsEndpoint = (lapisUrl: string, sequenceType:
         ? `${lapisUrl}/sample/aminoAcidMutations`
         : `${lapisUrl}/sample/nucleotideMutations`;
 };
+export const mutationsOverTimeEndpoint = (lapisUrl: string, sequenceType: SequenceType) => {
+    return sequenceType === 'amino acid'
+        ? `${lapisUrl}/component/aminoAcidMutationsOverTime`
+        : `${lapisUrl}/component/nucleotideMutationsOverTime`;
+};
 export const referenceGenomeEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/referenceGenome`;
 export const lineageDefinitionEndpoint = (lapisUrl: string, lapisField: string) =>
     `${lapisUrl}/sample/lineageDefinition/${lapisField}`;

package/src/lapisApi/lapisTypes.ts

@@ -7,6 +7,13 @@ export const orderBy = z.object({
     type: orderByType,
 });
 
+const filterValue = z.union([z.string(), z.number(), z.boolean(), z.null(), z.undefined(), z.array(z.string())]);
+
+const dateRange = z.object({
+    dateFrom: z.string(),
+    dateTo: z.string(),
+});
+
 export const lapisBaseRequest = z
     .object({
         limit: z.number().optional(),
@@ -14,7 +21,7 @@ export const lapisBaseRequest = z
         fields: z.array(z.string()).optional(),
         orderBy: z.array(orderBy).optional(),
     })
-    .catchall(z.union([z.boolean(), z.undefined(), z.string(), z.number(), z.null(), z.array(z.string())]));
+    .catchall(filterValue);
 export type LapisBaseRequest = z.infer<typeof lapisBaseRequest>;
 
 export const mutationsRequest = lapisBaseRequest.extend({ minProportion: z.number().optional() });
@@ -32,6 +39,33 @@ const mutationProportionCount = z.object({
 export const mutationsResponse = makeLapisResponse(z.array(mutationProportionCount));
 export type MutationsResponse = z.infer<typeof mutationsResponse>;
 
+export const mutationsOverTimeRequest = z.object({
+    filters: z.record(filterValue),
+    downloadAsFile: z.boolean().optional(),
+    downloadFileBasename: z.string().optional(),
+    compression: z.enum(['gzip', 'none']).optional(),
+    includeMutations: z.array(z.string()).optional(),
+    dateRanges: z.array(dateRange).optional(),
+    dateField: z.string().optional(),
+});
+export type MutationsOverTimeRequest = z.infer<typeof mutationsOverTimeRequest>;
+
+export const mutationsOverTimeResponse = makeLapisResponse(
+    z.object({
+        mutations: z.array(z.string()),
+        dateRanges: z.array(dateRange),
+        data: z.array(
+            z.array(
+                z.object({
+                    count: z.number(),
+                    coverage: z.number(),
+                }),
+            ),
+        ),
+    }),
+);
+export type MutationsOverTimeResponse = z.infer<typeof mutationsOverTimeResponse>;
+
 const insertionCount = z.object({
     insertion: z.string(),
     count: z.number(),

package/src/operator/DivisionOperator.ts

@@ -8,7 +8,8 @@ export type DivisionOperatorResult<
     ResultField extends string,
     NumeratorField extends string,
     DenominatorField extends string,
-> = { [P in KeyField]: ValueObject[KeyField] } & MappedNumber<ResultField> &
+> = Record<KeyField, ValueObject[KeyField]> &
+    MappedNumber<ResultField> &
     MappedNumber<NumeratorField> &
     MappedNumber<DenominatorField>;
 
@@ -50,7 +51,8 @@ export class DivisionOperator<
                 [this.numeratorField]: numeratorValue as number,
                 [this.denominatorField]: row[this.valueField] as number,
                 [this.resultField]: (numeratorValue as number) / (row[this.valueField] as number),
-            } as { [P in KeyField]: ValueObject[KeyField] } & MappedNumber<ResultField> &
+            } as Record<KeyField, ValueObject[KeyField]> &
+                MappedNumber<ResultField> &
                 MappedNumber<NumeratorField> &
                 MappedNumber<DenominatorField>;
         });

package/src/operator/FetchDetailsOperator.ts

@@ -3,7 +3,7 @@ import { type Operator } from './Operator';
 import { fetchDetails } from '../lapisApi/lapisApi';
 import { type LapisFilter } from '../types';
 
-type Details<Fields extends string> = { [field in Fields]: string | number | boolean | null };
+type Details<Fields extends string> = Record<Fields, string | number | boolean | null>;
 
 export class FetchDetailsOperator<Fields extends string> implements Operator<Details<Fields>> {
     constructor(

package/src/operator/RenameFieldOperator.ts

@@ -4,8 +4,8 @@ import type { Operator } from './Operator';
 export class RenameFieldOperator<
     OldFieldName extends string,
     NewFieldName extends string,
-    Data extends { [key in OldFieldName]: unknown },
-> extends MapOperator<Data, Data & { [key in NewFieldName]: Data[OldFieldName] }> {
+    Data extends Record<OldFieldName, unknown>,
+> extends MapOperator<Data, Data & Record<NewFieldName, Data[OldFieldName]>> {
     constructor(child: Operator<Data>, oldFieldName: OldFieldName, newFieldName: NewFieldName) {
         super(
             child,
@@ -13,7 +13,7 @@ export class RenameFieldOperator<
                 ({
                     ...value,
                     [newFieldName]: value[oldFieldName],
-                }) as Data & { [key in NewFieldName]: Data[OldFieldName] },
+                }) as Data & Record<NewFieldName, Data[OldFieldName]>,
         );
     }
 }

package/src/preact/aggregatedData/aggregate.tsx

@@ -11,7 +11,6 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
@@ -63,10 +62,6 @@ export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <AggregatedDataTabs data={data} originalComponentProps={componentProps} />;
 };
 

package/src/preact/components/annotated-mutation.tsx

@@ -58,7 +58,6 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
                 <Fragment key={annotation.name}>
                     <InfoHeadline2>{annotation.name}</InfoHeadline2>
                     <InfoParagraph>
-                        {/* eslint-disable-next-line react/no-danger */}
                         <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
                     </InfoParagraph>
                 </Fragment>

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

@@ -14,7 +14,7 @@ export default meta;
 
 export const Default: StoryObj<ClearableSelectProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <ClearableSelect {...args} />
         </div>
     ),

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

@@ -33,7 +33,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
     return (
         <Select
             items={items}
-            selected={confidenceIntervalMethod === undefined ? 'none' : confidenceIntervalMethod}
+            selected={confidenceIntervalMethod}
             onChange={(event: Event) => {
                 const select = event.target as HTMLSelectElement;
                 const value = select.value as ConfidenceIntervalMethod;

package/src/preact/components/error-boundary.tsx

@@ -19,7 +19,7 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
     schema,
     children,
 }: RenderableProps<ErrorBoundaryProps<T>>) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- useErrorBoundary unfortunately return `[any, ...]`
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- useErrorBoundary unfortunately returns `[any, ...]`
     const [internalError, resetError] = useErrorBoundary();
     const componentPropsParseError = useCheckComponentProps(schema, componentProps);
 
@@ -54,10 +54,6 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
 
 function useCheckComponentProps<T extends Record<string, unknown>>(schema: ZodSchema<T>, componentProps: T) {
     return useMemo(() => {
-        if (schema === undefined || componentProps === undefined) {
-            return undefined;
-        }
-
         const parseResult = schema.safeParse(componentProps);
         if (parseResult.success) {
             return undefined;

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

@@ -151,7 +151,7 @@ function ZodErrorDetails({ error }: { error: InvalidPropsError }) {
                 </p>
             )}
             <p>This is a summary of the unexpected attribute values:</p>
-            <ul class='m-4 list-outside list-disc '>
+            <ul className='m-4 list-outside list-disc '>
                 {error.zodError.issues.map((issue, index) => {
                     const actual =
                         issue.path[0] in error.componentProps

package/src/preact/components/fullscreen.tsx

@@ -33,14 +33,11 @@ function findComponentRoot(element: HTMLElement) {
 }
 
 function findShadowRoot(element: HTMLElement) {
-    let current: Node = element;
-    while (current) {
+    let current: Node | null = element;
+    while (current !== null) {
         if (current instanceof ShadowRoot) {
             return current;
         }
-        if (current.parentNode === null) {
-            return null;
-        }
         current = current.parentNode;
     }
     return null;

package/src/preact/components/info.stories.tsx

@@ -15,7 +15,7 @@ const tooltipText = 'This is a tooltip which shows some information.';
 
 export const InfoStory: StoryObj = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <Info {...args}>{tooltipText}</Info>
         </div>
     ),

package/src/preact/components/min-max-range-slider.tsx

@@ -71,7 +71,7 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
     `;
 
     return (
-        <div class='my-4 relative w-full h-full'>
+        <div className='my-4 relative w-full h-full'>
             <input
                 id='fromSlider'
                 type='range'

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

@@ -60,21 +60,21 @@ export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
     const indicateError = internalMinProportion > internalMaxProportion;
 
     return (
-        <div class='flex flex-col w-64 mb-2'>
-            <div class='flex items-center '>
+        <div className='flex flex-col w-64 mb-2'>
+            <div className='flex items-center '>
                 <PercentInput
                     percentage={internalMinProportion * 100}
                     setPercentage={updateMinPercentage}
                     indicateError={indicateError}
                 />
-                <div class='m-2'>-</div>
+                <div className='m-2'>-</div>
                 <PercentInput
                     percentage={internalMaxProportion * 100}
                     setPercentage={updateMaxPercentage}
                     indicateError={indicateError}
                 />
             </div>
-            <div class='my-1'>
+            <div className='my-1'>
                 <MinMaxRangeSlider
                     min={internalMinProportion * 100}
                     max={internalMaxProportion * 100}

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 ${selectStyle} w-fit`} value={selected} onChange={onChange}>
+        <select className={`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/table.tsx

@@ -29,7 +29,7 @@ export interface TableProps {
 export const Table = ({ data, columns, pageSize }: TableProps) => {
     const pagination = typeof pageSize === 'number' ? { limit: pageSize } : pageSize;
 
-    const wrapper = useRef(null);
+    const wrapper = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (wrapper.current === null) {

package/src/preact/components/tabs.tsx

@@ -40,7 +40,7 @@ const Tabs = forwardRef<HTMLDivElement, ComponentTabsProps>(({ tabs, toolbar },
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div ref={ref} className='h-full w-full flex flex-col'>
+        <div ref={ref} className='h-full w-full flex flex-col bg-white'>
             <div className='flex flex-row justify-between flex-wrap'>
                 {tabElements}
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}

package/src/preact/components/tooltip.stories.tsx

@@ -24,7 +24,7 @@ const tooltipContent = 'This is some content.';
 
 export const TooltipStory: StoryObj<TooltipProps> = {
     render: (args) => (
-        <div class='flex justify-center px-4 py-16'>
+        <div className='flex justify-center px-4 py-16'>
             <Tooltip {...args}>
                 <div className='bg-red-200'>Hover me</div>
             </Tooltip>

package/src/preact/components/tooltip.tsx

@@ -47,7 +47,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ children, content, position
             <div>{children}</div>
             <div
                 className={`absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`}
-                style={{ ...tooltipStyle }}
+                style={tooltipStyle}
             >
                 {content}
             </div>

package/src/preact/genomeViewer/CDSPlot.tsx

@@ -72,7 +72,7 @@ const XAxis: FunctionComponent<XAxisProps> = (componentProps) => {
                 return (
                     <div
                         key={idx}
-                        class='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
+                        className='absolute text-xs text-black px-1 hover:opacity-80 border-l border-r border-gray-400 border-t'
                         style={{
                             left: `calc(${leftPercent}% - 1px)`,
                             width: `calc(${widthPercent}% - 1px)`,
@@ -200,10 +200,10 @@ const CDSPlot: FunctionComponent<CDSProps> = (componentProps) => {
     };
 
     return (
-        <div ref={ref} class='p-4'>
+        <div ref={ref} className='p-4'>
             <CDSBars gffData={gffData} zoomStart={zoomStart} zoomEnd={zoomEnd} />
             <XAxis zoomStart={zoomStart} zoomEnd={zoomEnd} fullWidth={width} />
-            <div class='relative w-full h-5'>
+            <div className='relative w-full h-5'>
                 <MinMaxRangeSlider
                     min={zoomStart}
                     max={zoomEnd}