@genspectrum/dashboard-components 0.1.5 → 0.2.0

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -3,12 +3,18 @@ import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { toYYYYMMDD } from './dateConversion';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ResizeContainer } from '../components/resize-container';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
-export interface DateRangeSelectorProps<CustomLabel extends string> {
+export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
+    width?: string;
+}
+
+export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
     initialValue?: PresetOptionValues | CustomLabel;
@@ -38,6 +44,28 @@ export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
     initialValue,
+    width,
+}: DateRangeSelectorProps<CustomLabel>) => {
+    const defaultSize = { width: '100%', height: '3rem' };
+    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+
+    return (
+        <ErrorBoundary defaultSize={defaultSize} size={size}>
+            <ResizeContainer defaultSize={defaultSize} size={size}>
+                <DateRangeSelectorInner
+                    customSelectOptions={customSelectOptions}
+                    earliestDate={earliestDate}
+                    initialValue={initialValue}
+                />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const DateRangeSelectorInner = <CustomLabel extends string>({
+    customSelectOptions,
+    earliestDate = '1900-01-01',
+    initialValue,
 }: DateRangeSelectorProps<CustomLabel>) => {
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
     const toDatePickerRef = useRef<HTMLInputElement>(null);
@@ -151,11 +179,11 @@ export const DateRangeSelector = <CustomLabel extends string>({
     };
 
     return (
-        <div class='join' ref={divRef}>
+        <div class='join w-full' ref={divRef}>
             <Select
                 items={selectableOptions}
                 selected={selectedDateRange}
-                selectStyle='select-bordered rounded-none join-item'
+                selectStyle='select-bordered rounded-none join-item grow'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
@@ -164,7 +192,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 }}
             />
             <input
-                class='input input-bordered rounded-none join-item'
+                class='input input-bordered rounded-none join-item grow'
                 type='text'
                 placeholder='Date from'
                 ref={fromDatePickerRef}
@@ -172,7 +200,7 @@ export const DateRangeSelector = <CustomLabel extends string>({
                 onBlur={onChangeDateFrom}
             />
             <input
-                class='input input-bordered rounded-none join-item'
+                class='input input-bordered rounded-none join-item grow'
                 type='text'
                 placeholder='Date to'
                 ref={toDatePickerRef}

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -6,7 +6,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
-const meta: Meta<typeof LocationFilter> = {
+const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',
     component: LocationFilter,
     parameters: {
@@ -32,7 +32,26 @@ const meta: Meta<typeof LocationFilter> = {
         },
     },
     args: {
+        width: '100%',
         fields: ['region', 'country', 'division', 'location'],
+        initialValue: 'United States',
+    },
+    argTypes: {
+        fields: {
+            control: {
+                type: 'object',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
     },
     decorators: [withActions],
 };
@@ -41,10 +60,8 @@ export default meta;
 
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
-        <div class='max-w-screen-lg'>
-            <LapisUrlContext.Provider value={LAPIS_URL}>
-                <LocationFilter fields={args.fields} />
-            </LapisUrlContext.Provider>
-        </div>
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <LocationFilter fields={args.fields} initialValue={args.initialValue} width={args.width} />
+        </LapisUrlContext.Provider>
     ),
 };

package/src/preact/locationFilter/location-filter.tsx

@@ -1,15 +1,37 @@
+import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import { LoadingDisplay } from '../components/loading-display';
+import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export type LocationFilterProps = {
+export interface LocationFilterInnerProps {
     initialValue?: string;
     fields: string[];
+}
+
+export interface LocationFilterProps extends LocationFilterInnerProps {
+    width?: string;
+}
+
+export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, initialValue, fields }) => {
+    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}>
+                <LocationFilterInner initialValue={initialValue} fields={fields} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
 };
 
-export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) => {
+export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');
@@ -19,22 +41,11 @@ export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) =>
 
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
-    if (isLoading)
-        return (
-            <form class='flex'>
-                <input type='text' class='input input-bordered grow' value={value} disabled />
-                <button class='btn ml-1' disabled type='submit'>
-                    Loading...
-                </button>
-            </form>
-        );
-
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
     if (error) {
-        return (
-            <p>
-                Error: {error.name} {error.message} {error.stack}
-            </p>
-        );
+        return <ErrorDisplay error={error} />;
     }
 
     const onInput = (event: InputEvent) => {
@@ -70,7 +81,7 @@ export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) =>
     };
 
     return (
-        <form class='flex' onSubmit={submit} ref={formRef}>
+        <form class='flex w-full' onSubmit={submit} ref={formRef}>
             <input
                 type='text'
                 class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -9,6 +9,7 @@ import { type LapisFilter, type SequenceType } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
 import Info from '../components/info';
@@ -28,12 +29,15 @@ export interface MutationComparisonVariant {
     displayName: string;
 }
 
-export interface MutationComparisonProps {
+export interface MutationComparisonProps extends MutationComparisonInnerProps {
+    size?: Size;
+    headline?: string;
+}
+
+export interface MutationComparisonInnerProps {
     variants: MutationComparisonVariant[];
     sequenceType: SequenceType;
     views: View[];
-    size?: Size;
-    headline?: string;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
@@ -42,6 +46,24 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     views,
     size,
     headline = 'Mutation comparison',
+}) => {
+    const defaultSize = { height: '600px', width: '100%' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <Headline heading={headline}>
+                    <MutationComparisonInner variants={variants} sequenceType={sequenceType} views={views} />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
+    variants,
+    sequenceType,
+    views,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -50,36 +72,18 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     }, [variants, sequenceType, lapis]);
 
     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}>
-                <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />
-            </Headline>
-        </ResizeContainer>
-    );
+    return <MutationComparisonTabs data={data.mutationData} sequenceType={sequenceType} views={views} />;
 };
 
 type MutationComparisonTabsProps = {

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -18,19 +18,34 @@ const meta: Meta<MutationFilterProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        size: {
+            control: {
+                type: 'object',
+            },
+        },
+        initialValue: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
     decorators: [withActions],
 };
 
 export default meta;
 
 export const Default: StoryObj<MutationFilterProps> = {
-    render: () => (
+    render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter />
+                <MutationFilter size={args.size} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
+    args: {
+        size: { width: '100%' },
+    },
 };
 
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -5,13 +5,19 @@ import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type Deletion, type Insertion, type Mutation, type Substitution } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { ErrorBoundary } from '../components/error-boundary';
 import Info from '../components/info';
+import { ResizeContainer, type Size } from '../components/resize-container';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
-export type MutationFilterProps = {
+export interface MutationFilterInnerProps {
     initialValue?: SelectedMutationFilterStrings | string[] | undefined;
-};
+}
+
+export interface MutationFilterProps extends MutationFilterInnerProps {
+    size?: Size;
+}
 
 export type SelectedFilters = {
     nucleotideMutations: (Substitution | Deletion)[];
@@ -24,7 +30,19 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue }) => {
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, size }) => {
+    const defaultSize = { width: '100%', height: '6.5rem' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <MutationFilterInner initialValue={initialValue} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> = ({ initialValue }) => {
     const referenceGenome = useContext(ReferenceGenomeContext);
     const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>(
         getInitialState(initialValue, referenceGenome),
@@ -83,7 +101,7 @@ export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initial
     };
 
     return (
-        <div class={`rounded-lg border border-gray-300 bg-white p-2`}>
+        <div class={`h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`}>
             <div class='flex justify-between'>
                 <SelectedMutationDisplay
                     selectedFilters={selectedFilters}
@@ -295,11 +313,11 @@ const SelectedFilter = <MutationType extends Mutation>({
 }: SelectedFilterProps<MutationType>) => {
     return (
         <div
-            class='flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1'
+            class='flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max'
             style={{ backgroundColor, color: textColor }}
         >
-            <div>{mutation.toString()}</div>
-            <button onClick={() => onDelete(mutation)}>
+            <div className='whitespace-nowrap min-w-max'>{mutation.toString()}</div>
+            <button type='button' onClick={() => onDelete(mutation)}>
                 <DeleteIcon />
             </button>
         </div>

package/src/preact/mutations/mutations.tsx

@@ -16,6 +16,7 @@ import {
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
 import Info from '../components/info';
@@ -30,10 +31,13 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'grid' | 'insertions';
 
-export interface MutationsProps {
+export interface MutationsInnerProps {
     variant: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
+}
+
+export interface MutationsProps extends MutationsInnerProps {
     size?: Size;
     headline?: string;
 }
@@ -45,42 +49,38 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
     size,
     headline = 'Mutations',
 }) => {
+    const defaultSize = { height: '600px', width: '100%' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <Headline heading={headline}>
+                    <MutationsInner variant={variant} sequenceType={sequenceType} views={views} />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const MutationsInner: FunctionComponent<MutationsInnerProps> = ({ variant, sequenceType, views }) => {
     const lapis = useContext(LapisUrlContext);
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationsData(variant, sequenceType, lapis);
     }, [variant, sequenceType, lapis]);
 
     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}>
-                <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />
-            </Headline>
-        </ResizeContainer>
-    );
+    return <MutationsTabs mutationsData={data} sequenceType={sequenceType} views={views} />;
 };
 
 type MutationTabsProps = {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -11,6 +11,7 @@ import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
@@ -25,15 +26,18 @@ import { useQuery } from '../useQuery';
 
 export type View = 'bar' | 'line' | 'bubble' | 'table';
 
-export interface PrevalenceOverTimeProps {
+export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
+    size?: Size;
+    headline?: string;
+}
+
+export interface PrevalenceOverTimeInnerProps {
     numerator: NamedLapisFilter | NamedLapisFilter[];
     denominator: NamedLapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
-    size?: Size;
-    headline?: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -45,6 +49,34 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     confidenceIntervalMethods,
     size,
     headline = 'Prevalence over time',
+}) => {
+    const defaultSize = { height: '600px', width: '100%' };
+
+    return (
+        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
+            <ResizeContainer size={size} defaultSize={defaultSize}>
+                <Headline heading={headline}>
+                    <PrevalenceOverTimeInner
+                        numerator={numerator}
+                        denominator={denominator}
+                        granularity={granularity}
+                        smoothingWindow={smoothingWindow}
+                        views={views}
+                        confidenceIntervalMethods={confidenceIntervalMethods}
+                    />
+                </Headline>
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerProps> = ({
+    numerator,
+    denominator,
+    granularity,
+    smoothingWindow,
+    views,
+    confidenceIntervalMethods,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -54,40 +86,24 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     );
 
     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: '600px', width: '100%' }}>
-            <Headline heading={headline}>
-                <PrevalenceOverTimeTabs
-                    views={views}
-                    data={data}
-                    granularity={granularity}
-                    confidenceIntervalMethods={confidenceIntervalMethods}
-                />
-            </Headline>
-        </ResizeContainer>
+        <PrevalenceOverTimeTabs
+            views={views}
+            data={data}
+            granularity={granularity}
+            confidenceIntervalMethods={confidenceIntervalMethods}
+        />
     );
 };