@genspectrum/dashboard-components 0.18.6 → 0.19.0

package/dist/util.d.ts

@@ -902,7 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -910,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -974,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -998,7 +998,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1006,7 +1006,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1014,7 +1014,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1022,7 +1022,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1030,7 +1030,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1038,7 +1038,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1046,7 +1046,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1054,7 +1054,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1062,11 +1062,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;
     }
 }
 
@@ -1074,7 +1073,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1082,10 +1081,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -1093,7 +1092,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,10 +1100,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1112,7 +1112,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-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.18.6",
+    "version": "0.19.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -38,8 +38,7 @@
             "require": "./dist/util.js"
         },
         "./custom-elements.json": "./custom-elements.json",
-        "./package.json": "./package.json",
-        "./style.css": "./dist/style.css"
+        "./package.json": "./package.json"
     },
     "files": [
         "dist",

package/src/preact/components/info.tsx

@@ -103,7 +103,6 @@ function generateFullExampleCode(componentCode: string, componentName: string) {
     return `<html>
 <head>
   <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"></script>
-  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
 </head>
 
 <body>

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

@@ -1,8 +1,6 @@
 import { type FunctionComponent, type JSX } from 'preact';
 import { useState } from 'preact/hooks';
 
-import './min-max-percent-slider.css';
-
 export interface MinMaxPercentSliderProps {
     min: number;
     max: number;

package/src/preact/components/table.tsx

@@ -3,8 +3,6 @@ import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types'
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
-import 'gridjs/dist/theme/mermaid.css';
-
 export const tableStyle = {
     table: {
         fontSize: '12px',

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

@@ -1,4 +1,3 @@
-import 'flatpickr/dist/flatpickr.min.css';
 import flatpickr from 'flatpickr';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -22,8 +21,10 @@ export function DatePicker({
 
     const [datePicker, setDatePicker] = useState<flatpickr.Instance | null>(null);
 
+    const calendarRef = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
-        if (!inputRef.current) {
+        if (!inputRef.current || !calendarRef.current) {
             return;
         }
 
@@ -33,6 +34,7 @@ export function DatePicker({
             defaultDate: value,
             minDate,
             maxDate,
+            appendTo: calendarRef.current,
         });
 
         setDatePicker(instance);
@@ -54,13 +56,16 @@ export function DatePicker({
     };
 
     return (
-        <input
-            className={`input w-full ${className}`}
-            type='text'
-            placeholder={placeholderText}
-            ref={inputRef}
-            onChange={handleChange}
-            onBlur={handleChange}
-        />
+        <div className={'w-full'}>
+            <input
+                className={`input w-full ${className}`}
+                type='text'
+                placeholder={placeholderText}
+                ref={inputRef}
+                onChange={handleChange}
+                onBlur={handleChange}
+            />
+            <div ref={calendarRef} />
+        </div>
     );
 }

package/src/styles/replaceCssProperties.stories.tsx

@@ -0,0 +1,49 @@
+import { css } from '@lit/reactive-element';
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+
+import { replaceCssProperties } from './replaceCssProperties';
+
+const DummyComponent: FunctionComponent = () => 'This just runs a function in the browser';
+
+const meta: Meta = {
+    title: 'Test/replaceCssProperties',
+    component: DummyComponent,
+};
+
+export default meta;
+
+/**
+ * This test somehow doesn't work with vitest on node, because the @properties are not parsed by `css()`.
+ */
+export const InvalidProps: StoryObj = {
+    play: async () => {
+        const styleSheet = css`
+            .some-other-rule {
+                color: red;
+            }
+
+            @property --test-with-initial-value {
+                syntax: '*';
+                inherits: false;
+                initial-value: solid;
+            }
+
+            @property --test-without-initial-value {
+                syntax: '*';
+                inherits: false;
+            }
+        `.styleSheet!;
+
+        replaceCssProperties(styleSheet);
+
+        const resultingCss = [...styleSheet.cssRules]
+            .map((rule) => rule.cssText)
+            .join('\n')
+            .replaceAll(' ', '');
+
+        await expect(resultingCss).toContain(':host{--test-with-initial-value:solid;}');
+        await expect(resultingCss).toContain('.some-other-rule{color:red;}');
+    },
+};

package/src/styles/replaceCssProperties.ts

@@ -0,0 +1,25 @@
+/**
+ * Replaces `@property` rules in a CSSStyleSheet with a `:host` rule.
+ *
+ * Tailwind uses `@property` rules, but they don't work in the shadow DOM.
+ * https://github.com/tailwindlabs/tailwindcss/issues/15005
+ *
+ * Inspired by https://github.com/tailwindlabs/tailwindcss/issues/15005#issuecomment-2737489813
+ */
+export function replaceCssProperties(styleSheet: CSSStyleSheet) {
+    const properties: string[] = [];
+
+    [...styleSheet.cssRules]
+        .map((rule, index) => [rule, index] as const)
+        .reverse()
+        .forEach(([rule, index]) => {
+            if (rule instanceof CSSPropertyRule && rule.initialValue !== null) {
+                styleSheet.deleteRule(index);
+                properties.push(`${rule.name}: ${rule.initialValue}`);
+            }
+        });
+
+    if (properties.length > 0) {
+        styleSheet.insertRule(`:host { ${properties.join('; ')} }`);
+    }
+}

package/src/styles/tailwind.css

@@ -2,6 +2,7 @@
 
 @plugin "daisyui" {
   themes: light --default;
+  root: ':host';
 }
 @plugin "@iconify/tailwind4" {
   prefixes: mdi, mdi-light;

package/src/web-components/PreactLitAdapter.tsx

@@ -10,14 +10,17 @@ import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { LapisUrlContextProvider } from '../preact/LapisUrlContext';
 import { INITIAL_REFERENCE_GENOMES, ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
 import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
+import { replaceCssProperties } from '../styles/replaceCssProperties';
 import tailwindStyle from '../styles/tailwind.css?inline';
 
-import '../styles/tailwind.css';
-import '../preact/components/min-max-percent-slider.css';
-
 const tailwindElementCss = unsafeCSS(tailwindStyle);
 const minMaxPercentSliderElementCss = unsafeCSS(minMaxPercentSliderCss);
 
+const styleSheet = tailwindElementCss.styleSheet;
+if (styleSheet !== undefined) {
+    replaceCssProperties(styleSheet);
+}
+
 export abstract class PreactLitAdapter extends ReactiveElement {
     static override styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 

package/src/web-components/PreactLitAdapterWithGridJsStyles.tsx

@@ -3,8 +3,6 @@ import { unsafeCSS } from 'lit';
 
 import { PreactLitAdapter } from './PreactLitAdapter';
 
-import 'gridjs/dist/theme/mermaid.css';
-
 const gridJsElementCss = unsafeCSS(gridJsStyle);
 
 export abstract class PreactLitAdapterWithGridJsStyles extends PreactLitAdapter {

package/src/web-components/gs-app.stories.ts

@@ -82,7 +82,9 @@ export const WithNoLapisUrl: StoryObj<StoryProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+            await expect(
+                canvas.getByText("Error in gs-app: Invalid LAPIS URL: 'notAValidUrl'", { exact: false }),
+            ).toBeVisible();
         });
     },
 };
@@ -119,7 +121,9 @@ export const FailsToFetchReferenceGenome: StoryObj<StoryProps> = {
         const canvas = within(canvasElement);
 
         await waitFor(async () => {
-            await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
+            await expect(
+                canvas.getByText('Error in gs-app: Cannot fetch reference genome.', { exact: false }),
+            ).toBeVisible();
         });
     },
 };

package/src/web-components/gs-app.ts

@@ -98,7 +98,10 @@ export class AppComponent extends LitElement {
 }
 
 function GsAppError(error: string) {
-    return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
+    // We're in the light dom, we must not use Tailwind so that we don't pollute the user's styles.
+    return html`<div style="padding: 0.5rem; border: solid red; background-color: lightcoral; border-radius: 0.5rem;">
+        Error in gs-app: ${error}
+    </div>`;
 }
 
 declare global {

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

@@ -1,3 +1,5 @@
+import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
+import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
@@ -6,6 +8,8 @@ import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/d
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
+const flatpickrCss = unsafeCSS(flatpickrStyle);
+
 /**
  * ## Context
  * This component is a group of input fields designed to specify date range filters
@@ -52,6 +56,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  */
 @customElement('gs-date-range-filter')
 export class DateRangeFilterComponent extends PreactLitAdapter {
+    static override styles = [...PreactLitAdapter.styles, flatpickrCss];
+
     /**
      * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `value`.