@genspectrum/dashboard-components 0.15.0 → 0.16.0

package/dist/style.css

@@ -3065,6 +3065,9 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.inset-0 {
+  inset: 0px;
+}
 .-right-3 {
   right: -0.75rem;
 }
@@ -3248,6 +3251,9 @@ input.tab:checked + .tab-content,
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\[180px\] {
+  min-width: 180px;
+}
 .min-w-\[7\.5rem\] {
   min-width: 7.5rem;
 }
@@ -3331,6 +3337,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
 .text-nowrap {
   text-wrap: nowrap;
 }

package/dist/util.d.ts

@@ -25,7 +25,7 @@ declare const aggregatePropsSchema: default_2.ZodObject<{
     initialSortDirection: default_2.ZodUnion<[default_2.ZodLiteral<"ascending">, default_2.ZodLiteral<"descending">]>;
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     maxNumberOfBars: default_2.ZodNumber;
 }, "strip", default_2.ZodTypeAny, {
     lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -35,13 +35,13 @@ declare const aggregatePropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     fields: string[];
-    height: string;
     width: string;
     pageSize: number | boolean;
     views: ("table" | "bar")[];
     initialSortField: string;
     initialSortDirection: "ascending" | "descending";
     maxNumberOfBars: number;
+    height?: string | undefined;
 }, {
     lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
@@ -50,13 +50,13 @@ declare const aggregatePropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     fields: string[];
-    height: string;
     width: string;
     pageSize: number | boolean;
     views: ("table" | "bar")[];
     initialSortField: string;
     initialSortDirection: "ascending" | "descending";
     maxNumberOfBars: number;
+    height?: string | undefined;
 }>;
 
 export declare type AggregateView = default_2.infer<typeof aggregateViewSchema>;
@@ -206,7 +206,7 @@ export declare type MutationComparisonProps = default_2.infer<typeof mutationCom
 
 declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     lapisFilters: default_2.ZodArray<default_2.ZodObject<{
         lapisFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
             nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
@@ -246,7 +246,6 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     views: default_2.ZodArray<default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"venn">]>, "many">;
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     lapisFilters: {
@@ -260,8 +259,8 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     }[];
     sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
+    height?: string | undefined;
 }, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     lapisFilters: {
@@ -275,6 +274,7 @@ declare const mutationComparisonPropsSchema: default_2.ZodObject<{
     }[];
     sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "venn")[];
+    height?: string | undefined;
 }>;
 
 export declare type MutationComparisonView = default_2.infer<typeof mutationComparisonViewSchema>;
@@ -339,7 +339,7 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
     views: default_2.ZodArray<default_2.ZodUnion<[default_2.ZodLiteral<"table">, default_2.ZodLiteral<"grid">, default_2.ZodLiteral<"insertions">]>, "many">;
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
 }, "strip", default_2.ZodTypeAny, {
     lapisFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
@@ -347,11 +347,11 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         nucleotideInsertions?: string[] | undefined;
         aminoAcidInsertions?: string[] | undefined;
     };
-    height: string;
     width: string;
     pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "grid" | "insertions")[];
+    height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
         aminoAcidMutations?: string[] | undefined;
@@ -365,11 +365,11 @@ declare const mutationsPropsSchema: default_2.ZodObject<{
         nucleotideInsertions?: string[] | undefined;
         aminoAcidInsertions?: string[] | undefined;
     };
-    height: string;
     width: string;
     pageSize: number | boolean;
     sequenceType: "nucleotide" | "amino acid";
     views: ("table" | "grid" | "insertions")[];
+    height?: string | undefined;
     baselineLapisFilter?: (Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
         aminoAcidMutations?: string[] | undefined;
@@ -424,7 +424,7 @@ export declare type NumberSequencesOverTimeProps = default_2.infer<typeof number
 
 declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     lapisFilters: default_2.ZodArray<default_2.ZodObject<{
         lapisFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
             nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
@@ -466,7 +466,6 @@ declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
     smoothingWindow: default_2.ZodNumber;
     pageSize: default_2.ZodUnion<[default_2.ZodBoolean, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     lapisFilters: {
@@ -482,8 +481,8 @@ declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
     granularity: "day" | "week" | "month" | "year";
     smoothingWindow: number;
     lapisDateField: string;
+    height?: string | undefined;
 }, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     lapisFilters: {
@@ -499,6 +498,7 @@ declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
     granularity: "day" | "week" | "month" | "year";
     smoothingWindow: number;
     lapisDateField: string;
+    height?: string | undefined;
 }>;
 
 export declare type NumberSequencesOverTimeView = default_2.infer<typeof numberSequencesOverTimeViewSchema>;
@@ -509,7 +509,7 @@ export declare type PrevalenceOverTimeProps = default_2.infer<typeof prevalenceO
 
 declare const prevalenceOverTimePropsSchema: default_2.ZodObject<{
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     numeratorFilters: default_2.ZodArray<default_2.ZodObject<{
         lapisFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
             nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
@@ -570,7 +570,6 @@ declare const prevalenceOverTimePropsSchema: default_2.ZodObject<{
     yAxisMaxLinear: default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>;
     yAxisMaxLogarithmic: default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     views: ("table" | "bar" | "line" | "bubble")[];
@@ -595,8 +594,8 @@ declare const prevalenceOverTimePropsSchema: default_2.ZodObject<{
     lapisDateField: string;
     yAxisMaxLinear: number | "maxInData" | "limitTo1";
     yAxisMaxLogarithmic: number | "maxInData" | "limitTo1";
+    height?: string | undefined;
 }, {
-    height: string;
     width: string;
     pageSize: number | boolean;
     views: ("table" | "bar" | "line" | "bubble")[];
@@ -621,6 +620,7 @@ declare const prevalenceOverTimePropsSchema: default_2.ZodObject<{
     lapisDateField: string;
     yAxisMaxLinear: number | "maxInData" | "limitTo1";
     yAxisMaxLogarithmic: number | "maxInData" | "limitTo1";
+    height?: string | undefined;
 }>;
 
 export declare type PrevalenceOverTimeView = default_2.infer<typeof prevalenceOverTimeViewSchema>;
@@ -631,7 +631,7 @@ export declare type RelativeGrowthAdvantageProps = default_2.infer<typeof relati
 
 declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     numeratorFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
         nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
         aminoAcidMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
@@ -670,7 +670,6 @@ declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
     yAxisMaxLinear: default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>;
     yAxisMaxLogarithmic: default_2.ZodUnion<[default_2.ZodLiteral<"maxInData">, default_2.ZodLiteral<"limitTo1">, default_2.ZodNumber]>;
 }, "strip", default_2.ZodTypeAny, {
-    height: string;
     width: string;
     views: "line"[];
     denominatorFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -689,8 +688,8 @@ declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     generationTime: number;
+    height?: string | undefined;
 }, {
-    height: string;
     width: string;
     views: "line"[];
     denominatorFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
@@ -709,6 +708,7 @@ declare const relativeGrowthAdvantagePropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     };
     generationTime: number;
+    height?: string | undefined;
 }>;
 
 export declare type RelativeGrowthAdvantageView = default_2.infer<typeof relativeGrowthAdvantageViewSchema>;
@@ -723,7 +723,7 @@ export declare type StatisticsProps = default_2.infer<typeof statisticsPropsSche
 
 declare const statisticsPropsSchema: default_2.ZodObject<{
     width: default_2.ZodString;
-    height: default_2.ZodString;
+    height: default_2.ZodOptional<default_2.ZodString>;
     numeratorFilter: default_2.ZodIntersection<default_2.ZodRecord<default_2.ZodString, default_2.ZodUnion<[default_2.ZodString, default_2.ZodArray<default_2.ZodString, "many">, default_2.ZodNumber, default_2.ZodNull, default_2.ZodBoolean, default_2.ZodUndefined]>>, default_2.ZodObject<{
         nucleotideMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
         aminoAcidMutations: default_2.ZodOptional<default_2.ZodArray<default_2.ZodString, "many">>;
@@ -757,7 +757,6 @@ declare const statisticsPropsSchema: default_2.ZodObject<{
         aminoAcidInsertions?: string[] | undefined;
     }>>;
 }, "strip", default_2.ZodTypeAny, {
-    height: string;
     width: string;
     denominatorFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
@@ -771,8 +770,8 @@ declare const statisticsPropsSchema: default_2.ZodObject<{
         nucleotideInsertions?: string[] | undefined;
         aminoAcidInsertions?: string[] | undefined;
     };
+    height?: string | undefined;
 }, {
-    height: string;
     width: string;
     denominatorFilter: Record<string, string | number | boolean | string[] | null | undefined> & {
         nucleotideMutations?: string[] | undefined;
@@ -786,6 +785,7 @@ declare const statisticsPropsSchema: default_2.ZodObject<{
         nucleotideInsertions?: string[] | undefined;
         aminoAcidInsertions?: string[] | undefined;
     };
+    height?: string | undefined;
 }>;
 
 export declare type TemporalGranularity = default_2.infer<typeof temporalGranularitySchema>;
@@ -846,22 +846,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -928,7 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -936,7 +920,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +928,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -952,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1064,6 +1048,25 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-lineage-filter': LineageFilterComponent;
@@ -1085,10 +1088,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1096,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.15.0",
+    "version": "0.16.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/ReferenceGenomeContext.ts

@@ -2,4 +2,17 @@ import { createContext } from 'preact';
 
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 
-export const ReferenceGenomeContext = createContext<ReferenceGenome>({ nucleotideSequences: [], genes: [] });
+const UNINITIALIZED_SEQUENCE = '__uninitialized__';
+
+export const ReferenceGenomeContext = createContext<ReferenceGenome>({
+    nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: '' }],
+    genes: [],
+});
+
+export function isNotInitialized(referenceGenome: ReferenceGenome) {
+    return (
+        referenceGenome.genes.length === 0 &&
+        referenceGenome.nucleotideSequences.length === 1 &&
+        referenceGenome.nucleotideSequences[0].name === UNINITIALIZED_SEQUENCE
+    );
+}

package/src/preact/aggregatedData/aggregate-bar-chart.tsx

@@ -13,6 +13,7 @@ interface AggregateBarChartProps {
     data: AggregateData;
     fields: string[];
     maxNumberOfBars: number;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, BarController);
@@ -23,7 +24,12 @@ type DataPoint = {
     proportion: number;
 };
 
-export const AggregateBarChart: FunctionComponent<AggregateBarChartProps> = ({ data, fields, maxNumberOfBars }) => {
+export const AggregateBarChart: FunctionComponent<AggregateBarChartProps> = ({
+    data,
+    fields,
+    maxNumberOfBars,
+    maintainAspectRatio,
+}) => {
     if (data.length === 0) {
         return <NoDataDisplay />;
     }
@@ -42,10 +48,22 @@ export const AggregateBarChart: FunctionComponent<AggregateBarChartProps> = ({ d
         );
     }
 
-    return <AggregateBarChartInner data={data} fields={fields} maxNumberOfBars={maxNumberOfBars} />;
+    return (
+        <AggregateBarChartInner
+            data={data}
+            fields={fields}
+            maxNumberOfBars={maxNumberOfBars}
+            maintainAspectRatio={maintainAspectRatio}
+        />
+    );
 };
 
-const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({ data, fields, maxNumberOfBars }) => {
+const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({
+    data,
+    fields,
+    maxNumberOfBars,
+    maintainAspectRatio,
+}) => {
     const config = useMemo((): ChartConfiguration<'bar', DataPoint[]> => {
         const { datasets, countsOfEachBar } = getDatasets(fields, maxNumberOfBars, data);
 
@@ -55,7 +73,7 @@ const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({ dat
                 datasets,
             },
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 animation: false,
                 indexAxis: 'y',
                 scales: {
@@ -64,6 +82,9 @@ const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({ dat
                     },
                     y: {
                         stacked: true,
+                        ticks: {
+                            autoSkip: false,
+                        },
                     },
                 },
                 plugins: {
@@ -92,7 +113,7 @@ const AggregateBarChartInner: FunctionComponent<AggregateBarChartProps> = ({ dat
                 },
             },
         };
-    }, [data, fields, maxNumberOfBars]);
+    }, [data, fields, maintainAspectRatio, maxNumberOfBars]);
 
     return <GsChart configuration={config} />;
 };

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -55,7 +55,6 @@ export const Default: StoryObj<AggregateProps> = {
             country: 'USA',
         },
         width: '100%',
-        height: '700px',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,

package/src/preact/aggregatedData/aggregate.tsx

@@ -15,6 +15,7 @@ import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 import { AggregateBarChart } from './aggregate-bar-chart';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 
 const aggregateViewSchema = z.union([z.literal(views.table), z.literal(views.bar)]);
 export type AggregateView = z.infer<typeof aggregateViewSchema>;
@@ -27,7 +28,7 @@ const aggregatePropsSchema = z.object({
     initialSortDirection: z.union([z.literal('ascending'), z.literal('descending')]),
     pageSize: z.union([z.boolean(), z.number()]),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     maxNumberOfBars: z.number(),
 });
 export type AggregateProps = z.infer<typeof aggregatePropsSchema>;
@@ -74,6 +75,8 @@ type AggregatedDataTabsProps = {
 };
 
 const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: AggregateView) => {
         switch (view) {
             case views.table:
@@ -97,6 +100,7 @@ const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data,
                             data={data}
                             fields={originalComponentProps.fields}
                             maxNumberOfBars={originalComponentProps.maxNumberOfBars}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

package/src/preact/components/ReferenceGenomesAwaiter.tsx

@@ -1,8 +1,7 @@
 import { type ComponentChildren, type FunctionalComponent } from 'preact';
 import { useContext } from 'preact/hooks';
 
-import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
-import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { isNotInitialized, ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 /**
  * Sometimes the reference genome is not immediately available.
@@ -19,7 +18,3 @@ export const ReferenceGenomesAwaiter: FunctionalComponent<{ children: ComponentC
 
     return <>{children}</>;
 };
-
-function isNotInitialized(referenceGenome: ReferenceGenome) {
-    return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
-}

package/src/preact/components/resize-container.tsx

@@ -2,7 +2,7 @@ import { type FunctionComponent } from 'preact';
 
 export type Size = {
     width: string;
-    height: string;
+    height?: string;
 };
 
 export interface ResizeContainerProps {

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

@@ -13,11 +13,13 @@ Chart.register(...registerables, VennDiagramController, ArcSlice);
 export interface MutationComparisonVennProps {
     data: Dataset<MutationData>;
     proportionInterval: ProportionInterval;
+    maintainAspectRatio: boolean;
 }
 
 export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennProps> = ({
     data,
     proportionInterval,
+    maintainAspectRatio,
 }) => {
     const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
 
@@ -48,7 +50,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             type: 'venn',
             data: sets,
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 scales: {
                     x: {
                         ticks: {
@@ -91,7 +93,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
                 },
             },
         }),
-        [sets],
+        [maintainAspectRatio, sets],
     );
 
     if (data.content.length > 5) {

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

@@ -112,7 +112,6 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
         width: '100%',
-        height: '700px',
         pageSize: 10,
     },
 };

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

@@ -21,6 +21,7 @@ import { ProportionSelectorDropdown } from '../components/proportion-selector-dr
 import { ResizeContainer } from '../components/resize-container';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { useQuery } from '../useQuery';
 
 export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
@@ -28,7 +29,7 @@ export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema
 
 const mutationComparisonPropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     lapisFilters: z.array(namedLapisFilterSchema).min(1),
     sequenceType: sequenceTypeSchema,
     views: z.array(mutationComparisonViewSchema),
@@ -91,6 +92,8 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         [data, displayedSegments, displayedMutationTypes],
     );
 
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: MutationComparisonView) => {
         switch (view) {
             case 'table':
@@ -111,6 +114,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonVenn
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

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

@@ -1,4 +1,4 @@
-import { type PreactRenderer, type Meta, type StoryObj } from '@storybook/preact';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type StepFunction } from '@storybook/types';
 
@@ -8,6 +8,7 @@ import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<MutationFilterProps> = {
     title: 'Input/MutationFilter',
@@ -219,6 +220,21 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const WithNoReferenceSequencesDefined: StoryObj<MutationFilterProps> = {
+    ...Default,
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={{ nucleotideSequences: [], genes: [] }}>
+                <MutationFilter {...args} />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContextProvider>
+    ),
+    play: playThatExpectsErrorMessage(
+        'Error - No reference sequences available',
+        'This organism has neither nucleotide nor amino acid sequences',
+    ),
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);