@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -8,12 +8,13 @@ import {
 } from '../../query/queryRelativeGrowthAdvantage';
 import { type LapisFilter } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
@@ -21,22 +22,51 @@ import { useQuery } from '../useQuery';
 
 export type View = 'line';
 
-export interface RelativeGrowthAdvantageProps {
+export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
+    width: string;
+    height: string;
+    headline?: string;
+}
+
+export interface RelativeGrowthAdvantagePropsInner {
     numerator: LapisFilter;
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
-    size?: Size;
-    headline?: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
+    views,
+    width,
+    height,
     numerator,
     denominator,
     generationTime,
-    views,
-    size,
     headline = 'Relative growth advantage',
+}) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
+                <Headline heading={headline}>
+                    <RelativeGrowthAdvantageInner
+                        views={views}
+                        numerator={numerator}
+                        denominator={denominator}
+                        generationTime={generationTime}
+                    />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
+    numerator,
+    denominator,
+    generationTime,
+    views,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -47,41 +77,25 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     );
 
     if (isLoading) {
-        return (
-            <Headline heading={headline}>
-                <LoadingDisplay />
-            </Headline>
-        );
+        return <LoadingDisplay />;
     }
 
     if (error !== null) {
-        return (
-            <Headline heading={headline}>
-                <ErrorDisplay error={error} />
-            </Headline>
-        );
+        return <ErrorDisplay error={error} />;
     }
 
     if (data === null) {
-        return (
-            <Headline heading={headline}>
-                <NoDataDisplay />
-            </Headline>
-        );
+        return <NoDataDisplay />;
     }
 
     return (
-        <ResizeContainer size={size} defaultSize={{ height: '700px', width: '100%' }}>
-            <Headline heading={headline}>
-                <RelativeGrowthAdvantageTabs
-                    data={data}
-                    yAxisScaleType={yAxisScaleType}
-                    setYAxisScaleType={setYAxisScaleType}
-                    views={views}
-                    generationTime={generationTime}
-                />
-            </Headline>
-        </ResizeContainer>
+        <RelativeGrowthAdvantageTabs
+            data={data}
+            yAxisScaleType={yAxisScaleType}
+            setYAxisScaleType={setYAxisScaleType}
+            views={views}
+            generationTime={generationTime}
+        />
     );
 };
 

package/src/preact/textInput/text-input.stories.tsx

@@ -33,6 +33,29 @@ const meta: Meta<TextInputProps> = {
         },
     },
     decorators: [withActions],
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'select',
+            },
+            options: ['host'],
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
 };
 
 export default meta;
@@ -44,12 +67,15 @@ export const Default: StoryObj<TextInputProps> = {
                 lapisField={args.lapisField}
                 placeholderText={args.placeholderText}
                 initialValue={args.initialValue}
+                width={args.width}
             />
         </LapisUrlContext.Provider>
     ),
     args: {
         lapisField: 'host',
         placeholderText: 'Enter a host name',
+        initialValue: '',
+        width: '100%',
     },
 };
 

package/src/preact/textInput/text-input.tsx

@@ -3,18 +3,40 @@ import { useContext, useRef } from 'preact/hooks';
 
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export interface TextInputProps {
+export interface TextInputInnerProps {
     lapisField: string;
     placeholderText?: string;
     initialValue?: string;
 }
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, placeholderText, initialValue }) => {
+export interface TextInputProps extends TextInputInnerProps {
+    width: string;
+}
+
+export const TextInput: FunctionComponent<TextInputProps> = ({ width, lapisField, placeholderText, initialValue }) => {
+    const size = { width, height: '3rem' };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <TextInputInner lapisField={lapisField} placeholderText={placeholderText} initialValue={initialValue} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
+    lapisField,
+    placeholderText,
+    initialValue,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
     const inputRef = useRef<HTMLInputElement>(null);
@@ -58,7 +80,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ lapisField, place
         <>
             <input
                 type='text'
-                class='input input-bordered'
+                class='input input-bordered w-full'
                 placeholder={placeholderText !== undefined ? placeholderText : lapisField}
                 onInput={onInput}
                 ref={inputRef}

package/src/query/queryPrevalenceOverTime.ts

@@ -23,7 +23,7 @@ export type PrevalenceOverTimeVariantData = {
 
 export function queryPrevalenceOverTime(
     numeratorFilter: NamedLapisFilter | NamedLapisFilter[],
-    denominatorFilter: NamedLapisFilter,
+    denominatorFilter: LapisFilter,
     granularity: TemporalGranularity,
     smoothingWindow: number,
     lapis: string,
@@ -31,10 +31,10 @@ export function queryPrevalenceOverTime(
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(getFilter(denominatorFilter), granularity, smoothingWindow);
+    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
-        const { displayName, ...filter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(filter, granularity, smoothingWindow);
+        const { displayName, lapisFilter } = namedLapisFilter;
+        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -53,12 +53,6 @@ export function queryPrevalenceOverTime(
     return Promise.all(subQueries);
 }
 
-function getFilter(filter: NamedLapisFilter) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { displayName, ...filterWithoutDisplayName } = filter;
-    return filterWithoutDisplayName;
-}
-
 function makeArray<T>(arrayOrSingleItem: T | T[]) {
     if (Array.isArray(arrayOrSingleItem)) {
         return arrayOrSingleItem;

package/src/types.ts

@@ -2,7 +2,10 @@ import { type Deletion, type Insertion, type Substitution } from './utils/mutati
 
 export type LapisFilter = Record<string, string | number | null | boolean>;
 
-export type NamedLapisFilter = LapisFilter & { displayName: string };
+export type NamedLapisFilter = {
+    lapisFilter: LapisFilter;
+    displayName: string;
+};
 
 export type TemporalGranularity = 'day' | 'week' | 'month' | 'year';
 

package/src/web-components/ResizeContainer.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Components/Size of components' />
+
+# Size of components
+
+All visualization and input components can be provided with a width prop (or height, when applicable) to control the size of the component.
+If not provided, the default width or height is used. In most cases, the default is a width of '100%' of its parent container and a predefined height.
+
+Both width and height can be set using the css units (e.g. 'px', 'em', 'rem', '%', 'vh', 'vw', etc.).
+By using '%', the size of the component can be controlled by the parent component.
+
+Caution: When using '%' as a unit, the parent component should have a defined width or height.

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

@@ -25,7 +25,6 @@ const meta: Meta = {
     parameters: withComponentDocs({
         fetchMock: {},
         componentDocs: {
-            tag: 'gs-app',
             opensShadowDom: false,
             expectsChildren: true,
             codeExample,
@@ -92,7 +91,7 @@ export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
         const canvas = within(canvasElement);
 
         await waitFor(() => {
-            expect(canvas.getByText('Error')).toBeVisible();
+            expect(canvas.getByText('Error', { exact: false })).toBeVisible();
         });
     },
 };

package/src/web-components/app.ts

@@ -27,6 +27,8 @@ import { fetchReferenceGenome } from '../lapisApi/lapisApi';
 @customElement('gs-app')
 export class App extends LitElement {
     /**
+     * Required.
+     *
      * The URL of the LAPIS instance that all children of this component will use.
      */
     @provide({ context: lapisContext })
@@ -54,9 +56,11 @@ export class App extends LitElement {
 
     override render() {
         return this.updateReferenceGenome.render({
-            complete: () => html` <slot></slot>`,
-            error: () => html`<p>Error</p>`, // TODO(#143): Add more advanced error handling
-            pending: () => html` <p>Loading reference genomes...</p> `,
+            complete: () => html``, // Children will be rendered in the light DOM anyway. We can't use slots without a shadow DOM.
+            error: () =>
+                html` <div class="m-2 w-full alert alert-error">
+                    Error: Cannot fetch reference genome. Is LAPIS available?
+                </div>`,
         });
     }
 

package/src/web-components/index.ts

@@ -1,3 +1,3 @@
 export { App } from './app.js';
-export * from './display';
+export * from './visualization';
 export * from './input';

package/src/web-components/input/{date-range-selector-component.stories.ts → gs-date-range-selector.stories.ts}

@@ -15,7 +15,7 @@ import {
     PRESET_VALUE_LAST_6_MONTHS,
     PRESET_VALUE_LAST_MONTH,
 } from '../../preact/dateRangeSelector/date-range-selector';
-import './date-range-selector-component';
+import './gs-date-range-selector';
 import '../app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import { withinShadowRoot } from '../withinShadowRoot.story';
@@ -25,9 +25,11 @@ const codeExample = String.raw`
     customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
     initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    width="100%"
+    dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
 
-const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
+const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
@@ -36,7 +38,6 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         },
         fetchMock: {},
         componentDocs: {
-            tag: 'gs-date-range-selector',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -58,11 +59,29 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
                 'CustomDateRange',
             ],
         },
+        dateColumn: { control: { type: 'text' } },
+        customSelectOptions: {
+            control: {
+                type: 'object',
+            },
+        },
+        earliestDate: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
         initialValue: PRESET_VALUE_LAST_6_MONTHS,
+        dateColumn: 'aDateColumn',
+        width: '100%',
     },
     decorators: [withActions],
     tags: ['autodocs'],
@@ -70,7 +89,7 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
@@ -78,6 +97,8 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDate
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
+                    .width=${args.width}
+                    .dateColumn=${args.dateColumn}
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,
@@ -91,5 +112,9 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDate
                 expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));
             });
         });
+
+        // Due to the limitations of storybook testing which does not fire an event,
+        // when selecting a value from the dropdown we can't test the fired event here.
+        // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts
     },
 };

package/src/web-components/input/{date-range-selector-component.tsx → gs-date-range-selector.tsx}

@@ -10,7 +10,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
  * ## Context
- * This component is a group of input fields designed to specify a date range. It consists of 3 fields:
+ * This component is a group of input fields designed to specify date range filters
+ * for a given date column of this Lapis instance. It consists of 3 fields:
  *
  * - a select field to choose a predefined date range,
  * - an input field with an attached date picker for the start date,
@@ -20,12 +21,21 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Setting a value in either of the date pickers will set the select field to "custom",
  * which represents an arbitrary date range.
  *
- * @fires {CustomEvent<{ dateFrom: string; dateTo: string; }>} gs-date-range-changed
+ * @fires {CustomEvent<{ `${dateColumn}From`: string; `${dateColumn}To`: string; }>} gs-date-range-changed
  * Fired when:
  * - The select field is changed,
  * - A date is selected in either of the date pickers,
  * - A date was typed into either of the date input fields, and the input field loses focus ("on blur").
  * Contains the dates in the format `YYYY-MM-DD`.
+ *
+ * Example: For `dateColumn = yourDate`, an event with `detail` containing
+ * ```
+ * {
+ *  yourDataFrom: "2021-01-01",
+ *  yourDataTo: "2021-12-31"
+ * }
+ *  ```
+ *  will be fired.
  */
 @customElement('gs-date-range-selector')
 export class DateRangeSelectorComponent extends PreactLitAdapter {
@@ -42,7 +52,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
      */
     @property({ type: String })
-    earliestDate: string | undefined = '1900-01-01';
+    earliestDate: string = '1900-01-01';
 
     // prettier-ignore
     // The multiline union type must not start with `| 'custom'` - Storybook will list "" as the first type which is wrong
@@ -61,8 +71,21 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
         | 'last2Months'
         | 'last3Months'
         | 'last6Months'
-        | string
-        | undefined = 'last6Months';
+        | string = 'last6Months';
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The name of the column in LAPIS that contains the date information.
+     */
+    @property({ type: String })
+    dateColumn: string = 'date';
 
     override render() {
         return (
@@ -70,6 +93,8 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
                 customSelectOptions={this.customSelectOptions}
                 earliestDate={this.earliestDate}
                 initialValue={this.initialValue}
+                dateColumn={this.dateColumn}
+                width={this.width}
             />
         );
     }
@@ -81,10 +106,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<{
-            dateFrom: string;
-            dateTo: string;
-        }>;
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -93,6 +115,6 @@ type CustomSelectOptionsMatches = Expect<
     Equals<typeof DateRangeSelectorComponent.prototype.customSelectOptions, CustomSelectOption<string>[]>
 >;
 type InitialValueMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, PresetOptionValues | string | undefined>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, PresetOptionValues | string>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/{location-filter-component.stories.ts → gs-location-filter.stories.ts}

@@ -7,11 +7,18 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
-import './location-filter-component';
+import './gs-location-filter';
 import data from '../../preact/locationFilter/__mockData__/aggregated.json';
 import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
+const codeExample = String.raw`
+<gs-location-filter
+    fields='["region", "country"]'
+    initialValue='Europe / Switzerland'
+    width="100%"
+></gs-location-filter>`;
+
 const meta: Meta = {
     title: 'Input/Location filter',
     component: 'gs-location-filter',
@@ -20,12 +27,28 @@ const meta: Meta = {
             handles: ['gs-location-changed'],
         },
         componentDocs: {
-            tag: 'gs-location-filter',
             opensShadowDom: true,
             expectsChildren: false,
-            codeExample: `<gs-location-filter fields="['continent', 'country']" value='Europe / Switzerland'></gs-location-filter>`,
+            codeExample,
         },
     }),
+    argTypes: {
+        fields: {
+            control: {
+                type: 'object',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
     decorators: [withActions],
     tags: ['autodocs'],
 };
@@ -39,6 +62,7 @@ const Template: StoryObj<LocationFilterProps> = {
                 <gs-location-filter
                     .fields=${args.fields}
                     initialValue=${ifDefined(args.initialValue)}
+                    .width=${args.width}
                 ></gs-location-filter>
             </div>
         </gs-app>`;
@@ -46,6 +70,7 @@ const Template: StoryObj<LocationFilterProps> = {
     args: {
         fields: ['region', 'country', 'division', 'location'],
         initialValue: '',
+        width: '100%',
     },
 };
 
@@ -109,7 +134,9 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
                     matcher: aggregatedEndpointMatcher,
                     response: {
                         status: 400,
-                        body: { error: 'no data' },
+                        body: {
+                            error: { status: 400, detail: 'Dummy error message from mock LAPIS', type: 'about:blank' },
+                        },
                     },
                 },
             ],
@@ -119,7 +146,7 @@ export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
 
         await waitFor(() =>
-            expect(canvas.getByText('Bad Request: {"error":"no data"} ', { exact: false })).toBeInTheDocument(),
+            expect(canvas.getByText('Oops! Something went wrong.', { exact: false })).toBeInTheDocument(),
         );
     },
 };

package/src/web-components/input/{location-filter-component.tsx → gs-location-filter.tsx}

@@ -40,6 +40,8 @@ export class LocationFilterComponent extends PreactLitAdapter {
     initialValue = '';
 
     /**
+     * Required.
+     *
      * The fields to display in the location filter, in hierarchical order.
      * The top-level field should be the first entry in the array.
      * This component assumes that the values for each field form a strict hierarchy
@@ -48,8 +50,16 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: Array })
     fields: string[] = [];
 
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
     override render() {
-        return <LocationFilter initialValue={this.initialValue} fields={this.fields} />;
+        return <LocationFilter initialValue={this.initialValue} fields={this.fields} width={this.width} />;
     }
 }