@genspectrum/dashboard-components 0.1.4 → 0.2.0

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,11 +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;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
@@ -40,6 +45,25 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     sequenceType,
     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);
 
@@ -47,39 +71,19 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
         return queryMutationData(variants, sequenceType, lapis);
     }, [variants, sequenceType, lapis]);
 
-    const headline = 'Mutation comparison';
-
     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 = {
@@ -182,7 +186,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info className='mx-1' content='Info for mutation comparison' />
+            <Info>Info for mutation comparison</Info>
         </div>
     );
 };

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,14 +101,14 @@ 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}
                     setSelectedFilters={setSelectedFilters}
                     fireChangeEvent={fireChangeEvent}
                 />
-                <Info className='mx-1' content='Info for mutation filter' />
+                <Info>Info for mutation filter</Info>
             </div>
 
             <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>
@@ -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.stories.tsx

@@ -23,6 +23,7 @@ const meta: Meta<MutationsProps> = {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
 };
 
@@ -37,6 +38,7 @@ const Template = {
                     sequenceType={args.sequenceType}
                     views={args.views}
                     size={args.size}
+                    headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
@@ -50,6 +52,7 @@ export const Default: StoryObj<MutationsProps> = {
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         size: { width: '100%', height: '700px' },
+        headline: 'Mutations',
     },
     parameters: {
         fetchMock: {

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,51 +31,56 @@ 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;
 }
 
-export const Mutations: FunctionComponent<MutationsProps> = ({ variant, sequenceType, views, size }) => {
+export const Mutations: FunctionComponent<MutationsProps> = ({
+    variant,
+    sequenceType,
+    views,
+    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]);
 
-    const headline = 'Mutations';
     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 = {
@@ -197,7 +203,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info className='mx-1' content='Info for mutations' />
+            <Info>Info for mutations</Info>
         </div>
     );
 };

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

@@ -30,6 +30,7 @@ export default {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
 };
 
@@ -44,6 +45,7 @@ const Template = {
                 views={args.views}
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
                 size={args.size}
+                headline={args.headline}
             />
         </LapisUrlContext.Provider>
     ),
@@ -62,6 +64,7 @@ export const TwoVariants = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {
@@ -128,6 +131,7 @@ export const OneVariant = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {

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

@@ -11,9 +11,10 @@ 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 from '../components/info';
+import Info, { InfoHeadline1, 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';
@@ -25,14 +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;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -43,6 +48,35 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     views,
     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);
 
@@ -51,43 +85,25 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
         [lapis, numerator, denominator, granularity, smoothingWindow],
     );
 
-    const headline = 'Prevalence over time';
-
     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}
+        />
     );
 };
 
@@ -202,9 +218,19 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getPrevalenceOverTimeTableData(data, granularity)}
                 filename='prevalence-over-time.csv'
             />
-            <Info className='ml-1' content='Info for prevalence over time' />
+
+            <PrevalenceOverTimeInfo />
         </div>
     );
 };
 
+const PrevalenceOverTimeInfo: FunctionComponent = () => {
+    return (
+        <Info size={{ width: '600px', height: '30vh' }}>
+            <InfoHeadline1>Prevalence over time</InfoHeadline1>
+            <InfoParagraph>Prevalence over time info.</InfoParagraph>
+        </Info>
+    );
+};
+
 export default PrevalenceOverTime;

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

@@ -19,6 +19,7 @@ export default {
             control: { type: 'check' },
         },
         size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
 };
 
@@ -31,6 +32,7 @@ export const Primary = {
                 generationTime={args.generationTime}
                 views={args.views}
                 size={args.size}
+                headline={args.headline}
             />
         </LapisUrlContext.Provider>
     ),
@@ -40,6 +42,7 @@ export const Primary = {
         generationTime: 7,
         views: ['line'],
         size: { width: '100%', height: '700px' },
+        headline: 'Relative growth advantage',
     },
     parameters: {
         fetchMock: {