@genspectrum/dashboard-components 0.1.4 → 0.2.0

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

@@ -8,9 +8,10 @@ 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 from '../components/info';
+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';
@@ -21,20 +22,49 @@ import { useQuery } from '../useQuery';
 
 export type View = 'line';
 
-export interface RelativeGrowthAdvantageProps {
+export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
+    size?: Size;
+    headline?: string;
+}
+
+export interface RelativeGrowthAdvantagePropsInner {
     numerator: LapisFilter;
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
-    size?: Size;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
+    views,
+    size,
+    numerator,
+    denominator,
+    generationTime,
+    headline = 'Relative growth advantage',
+}) => {
+    const defaultSize = { height: '600px', width: '100%' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <Headline heading={headline}>
+                    <RelativeGrowthAdvantageInner
+                        views={views}
+                        numerator={numerator}
+                        denominator={denominator}
+                        generationTime={generationTime}
+                    />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantageProps> = ({
     numerator,
     denominator,
     generationTime,
     views,
-    size,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -44,42 +74,26 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
         [lapis, numerator, denominator, generationTime, views],
     );
 
-    const headline = 'Relative growth advantage';
     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}
-                />
-            </Headline>
-        </ResizeContainer>
+        <RelativeGrowthAdvantageTabs
+            data={data}
+            yAxisScaleType={yAxisScaleType}
+            setYAxisScaleType={setYAxisScaleType}
+            views={views}
+            generationTime={generationTime}
+        />
     );
 };
 
@@ -88,6 +102,7 @@ type RelativeGrowthAdvantageTabsProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     views: View[];
+    generationTime: number;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
@@ -95,6 +110,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     yAxisScaleType,
     setYAxisScaleType,
     views,
+    generationTime,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -117,7 +133,11 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 
     const tabs = views.map((view) => getTab(view));
     const toolbar = () => (
-        <RelativeGrowthAdvantageToolbar yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
+        <RelativeGrowthAdvantageToolbar
+            generationTime={generationTime}
+            yAxisScaleType={yAxisScaleType}
+            setYAxisScaleType={setYAxisScaleType}
+        />
     );
 
     return <Tabs tabs={tabs} toolbar={toolbar} />;
@@ -126,16 +146,53 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 type RelativeGrowthAdvantageToolbarProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
+    generationTime: number;
 };
 
 const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
+    generationTime,
 }) => {
     return (
         <div class='flex'>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
-            <Info className='ml-1' content='Line chart' />
+            <RelativeGrowthAdvantageInfo generationTime={generationTime} />
         </div>
     );
 };
+
+const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
+    return (
+        <Info size={{ width: '600px', height: '30vh' }}>
+            <InfoHeadline1>Relative growth advantage</InfoHeadline1>
+            <InfoParagraph>
+                If variants spread pre-dominantly by local transmission across demographic groups, this estimate
+                reflects the relative viral intrinsic growth advantage of the focal variant in the selected country and
+                time frame. We report the relative growth advantage per {generationTime} days (in percentage; 0% means
+                equal growth). Importantly, the relative growth advantage estimate reflects the advantage compared to
+                the co-circulating variants. Thus, as new variants spread, the advantage of the focal variant may
+                decrease. Different mechanisms can alter the intrinsic growth rate, including an intrinsic transmission
+                advantage, immune evasion, and a prolonged infectious period. When absolute numbers of a variant are
+                low, the growth advantage may merely reflect the current importance of introductions from abroad or the
+                variant spreading in a particular demographic group. In this case, the estimate does not provide
+                information on any intrinsic fitness advantages.
+            </InfoParagraph>
+            <InfoParagraph>
+                Example: Assume that 10 infections from the focal variant and 100 infections from the co-circulating
+                variants occur today and that the focal variant has a relative growth advantage of 50%. Then, if the
+                number of new infections from the co-circulating variants remains at 100 in {generationTime} days from
+                today, we expect the number of new infections from the focal variant to be 15.
+            </InfoParagraph>
+
+            <InfoHeadline2>Reference</InfoHeadline2>
+            <InfoParagraph>
+                Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland."
+                Epidemics (2021); doi:{' '}
+                <InfoLink href='https://www.sciencedirect.com/science/article/pii/S1755436521000335?via=ihub'>
+                    10.1016/j.epidem.2021.100480
+                </InfoLink>
+            </InfoParagraph>
+        </Info>
+    );
+};

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

@@ -3,18 +3,41 @@ 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 defaultSize = { width: '100%', height: '3rem' };
+    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+
+    return (
+        <ErrorBoundary defaultSize={defaultSize} size={size}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <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 +81,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/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

@@ -55,8 +55,10 @@ 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> `,
+            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}

@@ -3,6 +3,7 @@ import { expect, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
 import {
     type DateRangeSelectorProps,
@@ -14,20 +15,33 @@ 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';
 
+const codeExample = String.raw`
+<gs-date-range-selector
+    customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
+    earliestDate="1970-01-01"
+    initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    width="100%"
+></gs-date-range-selector>`;
+
 const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
-    parameters: {
+    parameters: withComponentDocs({
         actions: {
             handles: ['gs-date-range-changed'],
         },
         fetchMock: {},
-    },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
     argTypes: {
         initialValue: {
             control: {
@@ -44,13 +58,30 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
                 'CustomDateRange',
             ],
         },
+        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,
+        width: '100%',
     },
     decorators: [withActions],
+    tags: ['autodocs'],
 };
 
 export default meta;
@@ -63,6 +94,7 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDate
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
+                    .width=${args.width}
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,

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

@@ -0,0 +1,110 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import {
+    type CustomSelectOption,
+    DateRangeSelector,
+    type PresetOptionValues,
+} from '../../preact/dateRangeSelector/date-range-selector';
+import { type Equals, type Expect } from '../../utils/typeAssertions';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * ## Context
+ * This component is a group of input fields designed to specify a date range. 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,
+ * - an input field with an attached date picker for the end date.
+ *
+ * Setting a value in the select field will overwrite the previous values of the start and end date.
+ * 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
+ * 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`.
+ */
+@customElement('gs-date-range-selector')
+export class DateRangeSelectorComponent extends PreactLitAdapter {
+    /**
+     * An array of custom options that the select field should provide,
+     * in addition to the predefined options.
+     * The `label` will be shown to the user, and it will be available as `initialValue`.
+     * The dates must be in the format `YYYY-MM-DD`.
+     */
+    @property({ type: Array })
+    customSelectOptions: { label: string; dateFrom: string; dateTo: string }[] = [];
+
+    /**
+     * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
+     */
+    @property({ type: String })
+    earliestDate: string | undefined = '1900-01-01';
+
+    // prettier-ignore
+    // The multiline union type must not start with `| 'custom'` - Storybook will list "" as the first type which is wrong
+    /**
+     * The initial value to use for this date range selector.
+     * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
+     *
+     * If the value is invalid, the component will default to `'last6Months'`.
+     */
+    @property()
+    initialValue:
+        'custom'
+        | 'allTimes'
+        | 'last2Weeks'
+        | 'lastMonth'
+        | 'last2Months'
+        | 'last3Months'
+        | 'last6Months'
+        | string
+        | undefined = 'last6Months';
+
+    /**
+     * The width of the component.
+     *
+     * If not set, the component will take the full width of its container.
+     *
+     * The width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    width: string | undefined = undefined;
+
+    override render() {
+        return (
+            <DateRangeSelector
+                customSelectOptions={this.customSelectOptions}
+                earliestDate={this.earliestDate}
+                initialValue={this.initialValue}
+                width={this.width}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<{
+            dateFrom: string;
+            dateTo: string;
+        }>;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type CustomSelectOptionsMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.customSelectOptions, CustomSelectOption<string>[]>
+>;
+type InitialValueMatches = Expect<
+    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, PresetOptionValues | string | undefined>
+>;
+/* 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']"
+    value='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%',
     },
 };
 
@@ -119,7 +144,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}

@@ -48,8 +48,19 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: Array })
     fields: string[] = [];
 
+    /**
+     * The width of the component.
+     *
+     * If not set, the component will take the full width of its container.
+     *
+     * The width should be a string with a unit in css style, e.g. '100%', '500px' or '50vw'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    width: string | undefined = undefined;
+
     override render() {
-        return <LocationFilter initialValue={this.initialValue} fields={this.fields} />;
+        return <LocationFilter initialValue={this.initialValue} fields={this.fields} width={this.width} />;
     }
 }
 

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

@@ -3,22 +3,47 @@ import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
 import '../app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
-import './mutation-filter-component';
+import './gs-mutation-filter';
 
-const meta: Meta = {
+const codeExample = String.raw`
+<gs-mutation-filter 
+    initialValue='["A123T"]'
+    size='{ "width": "100%", "height": "6.5rem" }'
+></gs-mutation-filter>`;
+
+const meta: Meta<MutationFilterProps> = {
     title: 'Input/Mutation filter',
     component: 'gs-mutation-filter',
-    parameters: {
+    parameters: withComponentDocs({
         actions: {
             handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
         },
         fetchMock: {},
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'object',
+            },
+        },
+        size: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     decorators: [withActions],
+    tags: ['autodocs'],
 };
 
 export default meta;
@@ -27,12 +52,13 @@ const Template: StoryObj<MutationFilterProps> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-mutation-filter .initialValue=${args.initialValue}></gs-mutation-filter>
+                <gs-mutation-filter .initialValue=${args.initialValue} .size=${args.size}></gs-mutation-filter>
             </div>
         </gs-app>`;
     },
     args: {
         initialValue: [],
+        size: { width: '100%', height: '3rem' },
     },
 };