@genspectrum/dashboard-components 0.1.5 → 0.2.0

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

@@ -8,6 +8,7 @@ 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';
@@ -21,22 +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;
-    headline?: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
+    views,
+    size,
     numerator,
     denominator,
     generationTime,
-    views,
-    size,
     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,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
@@ -47,41 +75,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.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}

@@ -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,6 +25,7 @@ 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%"
 ></gs-date-range-selector>`;
 
 const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
@@ -36,7 +37,6 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         },
         fetchMock: {},
         componentDocs: {
-            tag: 'gs-date-range-selector',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -58,11 +58,27 @@ 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'],
@@ -78,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/{date-range-selector-component.tsx → gs-date-range-selector.tsx}

@@ -64,12 +64,24 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
         | 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}
             />
         );
     }

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}

@@ -8,9 +8,13 @@ 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 codeExample = String.raw`<gs-mutation-filter initialValue='["A123T"]'></gs-mutation-filter>`;
+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',
@@ -21,12 +25,23 @@ const meta: Meta<MutationFilterProps> = {
         },
         fetchMock: {},
         componentDocs: {
-            tag: 'gs-mutation-filter',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
         },
     }),
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'object',
+            },
+        },
+        size: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
     decorators: [withActions],
     tags: ['autodocs'],
 };
@@ -37,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' },
     },
 };
 

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

@@ -1,8 +1,12 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import { type TextInputComponent } from './text-input-component';
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
-import { MutationFilter, type SelectedMutationFilterStrings } from '../../preact/mutationFilter/mutation-filter';
+import {
+    MutationFilter,
+    type MutationFilterProps,
+    type SelectedMutationFilterStrings,
+} from '../../preact/mutationFilter/mutation-filter';
+import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
@@ -53,6 +57,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  */
 @customElement('gs-mutation-filter')
 export class MutationFilterComponent extends PreactLitAdapter {
+    // prettier-ignore
+    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
      * The initial value to use for this mutation filter.
      * Must be either
@@ -60,12 +66,31 @@ export class MutationFilterComponent extends PreactLitAdapter {
      * - an object with the keys `nucleotideMutations`, `aminoAcidMutations`, `nucleotideInsertions` and `aminoAcidInsertions` and corresponding string arrays.
      */
     @property()
-    initialValue: SelectedMutationFilterStrings | string[] | undefined = undefined;
+    initialValue:
+        {
+              nucleotideMutations: string[];
+              aminoAcidMutations: string[];
+              nucleotideInsertions: string[];
+              aminoAcidInsertions: string[];
+          }
+        | string[]
+        | undefined = undefined;
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
+     * If the unit is %, the size will be relative to the container of the component.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
 
     override render() {
         return (
             <ReferenceGenomesAwaiter>
-                <MutationFilter initialValue={this.initialValue} />
+                <MutationFilter initialValue={this.initialValue} size={this.size} />
             </ReferenceGenomesAwaiter>
         );
     }
@@ -73,7 +98,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': TextInputComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
 
     interface HTMLElementEventMap {
@@ -81,3 +106,9 @@ declare global {
         'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type InitialValueMatches = Expect<
+    Equals<typeof MutationFilterComponent.prototype.initialValue, MutationFilterProps['initialValue']>
+>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

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

@@ -6,13 +6,18 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
-import './text-input-component';
+import './gs-text-input';
 import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
 import type { TextInputProps } from '../../preact/textInput/text-input';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-text-input lapisField="host" placeholderText="Enter host name" initialValue="Homo sapiens"></gs-text-input>`;
+<gs-text-input 
+    lapisField="host"
+    placeholderText="Enter host name"
+    initialValue="Homo sapiens"
+    width="50%">
+</gs-text-input>`;
 
 const meta: Meta<TextInputProps> = {
     title: 'Input/Text input',
@@ -39,12 +44,33 @@ const meta: Meta<TextInputProps> = {
             ],
         },
         componentDocs: {
-            tag: 'gs-text-input',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
         },
     }),
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
     decorators: [withActions],
     tags: ['autodocs'],
 };
@@ -59,6 +85,7 @@ export const Default: StoryObj<TextInputProps> = {
                     .lapisField=${args.lapisField}
                     .placeholderText=${args.placeholderText}
                     .initialValue=${args.initialValue}
+                    .width=${args.width}
                 ></gs-text-input>
             </div>
         </gs-app>`;
@@ -67,6 +94,7 @@ export const Default: StoryObj<TextInputProps> = {
         lapisField: 'host',
         placeholderText: 'Enter host name',
         initialValue: 'Homo sapiens',
+        width: '100%',
     },
 };
 

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

@@ -39,12 +39,24 @@ export class TextInputComponent extends PreactLitAdapter {
     @property()
     placeholderText: string | undefined = '';
 
+    /**
+     * 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 (
             <TextInput
                 lapisField={this.lapisField}
                 placeholderText={this.placeholderText}
                 initialValue={this.initialValue}
+                width={this.width}
             />
         );
     }

package/src/web-components/input/index.ts

@@ -1,4 +1,4 @@
-export { DateRangeSelectorComponent } from './date-range-selector-component';
-export { LocationFilterComponent } from './location-filter-component';
-export { TextInputComponent } from './text-input-component';
-export { MutationFilterComponent } from './mutation-filter-component';
+export { DateRangeSelectorComponent } from './gs-date-range-selector';
+export { LocationFilterComponent } from './gs-location-filter';
+export { TextInputComponent } from './gs-text-input';
+export { MutationFilterComponent } from './gs-mutation-filter';

package/src/web-components/visualization/data_visualization_statistical_analysis.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Visualization/Data Visualization and Statistical Analysis' />
+
+# Data Visualization and Statistical Analysis
+
+## Scales
+
+On most plots, users can select the y-axis scaling through a dropdown.
+They can choose between linear, logarithmic and logistic scaling.
+By default, it is set to a linear scale.
+
+In general, for each scale the displayed height of a value is calculated by applying the corresponding scale function.
+
+-   Linear: `value`
+-   Logarithmic: `ln(value)`
+-   Logistic: `ln(value / (1 - value))`
+
+## Confidence Intervals
+
+On bar and line plots, users can choose to display confidence intervals.
+For line plots, this is done by shading the area between the upper and lower bounds.
+For bar plots, this is done by adding error bars to the top of each bar.
+
+Currently, only one method is available for calculating the confidence intervals:
+the [wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval#Wilson_score_interval) with a confidence level of 95%.