@genspectrum/dashboard-components 0.1.5 → 0.3.0

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

@@ -5,10 +5,11 @@ import { getMutationComparisonTableData } from './getMutationComparisonTableData
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import { type LapisFilter, type SequenceType } from '../../types';
+import { type NamedLapisFilter, 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';
@@ -17,31 +18,49 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonVariant {
-    lapisFilter: LapisFilter;
-    displayName: string;
+export interface MutationComparisonProps extends MutationComparisonInnerProps {
+    width: string;
+    height: string;
+    headline?: string;
 }
 
-export interface MutationComparisonProps {
-    variants: MutationComparisonVariant[];
+export interface MutationComparisonInnerProps {
+    variants: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
-    size?: Size;
-    headline?: string;
 }
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     variants,
     sequenceType,
     views,
-    size,
+    width,
+    height,
     headline = 'Mutation comparison',
+}) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
+                <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 +69,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/mutationComparison/queryMutationData.ts

@@ -1,6 +1,5 @@
-import { type MutationComparisonVariant } from './mutation-comparison';
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
-import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type NamedLapisFilter, type SubstitutionOrDeletionEntry } from '../../types';
 import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
 
@@ -10,7 +9,7 @@ export type MutationData = {
 };
 
 export async function queryMutationData(
-    variants: MutationComparisonVariant[],
+    variants: NamedLapisFilter[],
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {

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

@@ -18,19 +18,32 @@ const meta: Meta<MutationFilterProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+        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 width={args.width} height={args.height} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
+    args: {
+        width: '100%',
+        height: '700px',
+    },
 };
 
 export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
@@ -140,7 +153,7 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter initialValue={args.initialValue} />
+                <MutationFilter initialValue={args.initialValue} width={args.width} height={args.height} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -151,6 +164,8 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
             nucleotideInsertions: ['ins_123:AAA'],
             aminoAcidInsertions: ['ins_S:123:AAA'],
         },
+        width: '100%',
+        height: '700px',
     },
     play: async ({ canvasElement, step }) => {
         const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);

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

@@ -5,13 +5,20 @@ 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 } 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 {
+    width: string;
+    height: string;
+}
 
 export type SelectedFilters = {
     nucleotideMutations: (Substitution | Deletion)[];
@@ -24,7 +31,19 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue }) => {
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width, height }) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <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 +102,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 +314,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

@@ -22,7 +22,8 @@ const meta: Meta<MutationsProps> = {
             options: ['table', 'grid', 'insertions'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -37,7 +38,8 @@ const Template = {
                     variant={args.variant}
                     sequenceType={args.sequenceType}
                     views={args.views}
-                    size={args.size}
+                    width={args.width}
+                    height={args.height}
                     headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
@@ -51,7 +53,8 @@ export const Default: StoryObj<MutationsProps> = {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Mutations',
     },
     parameters: {

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';
@@ -24,17 +25,21 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'grid' | 'insertions';
 
-export interface MutationsProps {
+export interface MutationsInnerProps {
     variant: LapisFilter;
     sequenceType: SequenceType;
     views: View[];
-    size?: Size;
+}
+
+export interface MutationsProps extends MutationsInnerProps {
+    width: string;
+    height: string;
     headline?: string;
 }
 
@@ -42,45 +47,42 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
     variant,
     sequenceType,
     views,
-    size,
+    width,
+    height,
     headline = 'Mutations',
 }) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
+                <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.stories.tsx

@@ -29,7 +29,8 @@ export default {
             options: ['wilson'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -44,7 +45,8 @@ const Template = {
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
-                size={args.size}
+                width={args.width}
+                height={args.height}
                 headline={args.headline}
             />
         </LapisUrlContext.Provider>
@@ -55,15 +57,16 @@ export const TwoVariants = {
     ...Template,
     args: {
         numerator: [
-            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
-            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
         denominator: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {
@@ -124,13 +127,17 @@ export const TwoVariants = {
 export const OneVariant = {
     ...Template,
     args: {
-        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        numerator: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
         denominator: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {

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

@@ -7,16 +7,17 @@ import PrevalenceOverTimeBubbleChart from './prevalence-over-time-bubble-chart';
 import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
-import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { type LapisFilter, 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';
 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 ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
@@ -25,15 +26,19 @@ import { useQuery } from '../useQuery';
 
 export type View = 'bar' | 'line' | 'bubble' | 'table';
 
-export interface PrevalenceOverTimeProps {
+export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
+    width: string;
+    height: string;
+    headline?: string;
+}
+
+export interface PrevalenceOverTimeInnerProps {
     numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: NamedLapisFilter;
+    denominator: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
-    size?: Size;
-    headline?: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -43,8 +48,37 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     smoothingWindow,
     views,
     confidenceIntervalMethods,
-    size,
+    width,
+    height,
     headline = 'Prevalence over time',
+}) => {
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
+                <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 +88,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}
+        />
     );
 };
 

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

@@ -18,7 +18,8 @@ export default {
             options: ['line'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -31,7 +32,8 @@ export const Primary = {
                 denominator={args.denominator}
                 generationTime={args.generationTime}
                 views={args.views}
-                size={args.size}
+                width={args.width}
+                height={args.height}
                 headline={args.headline}
             />
         </LapisUrlContext.Provider>
@@ -41,7 +43,8 @@ export const Primary = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Relative growth advantage',
     },
     parameters: {