@genspectrum/dashboard-components 0.15.0 → 0.16.1

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>;
@@ -848,7 +848,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -856,7 +856,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -864,7 +864,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -872,7 +872,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -880,7 +880,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -888,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -896,7 +896,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -904,7 +904,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -952,7 +952,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -968,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -984,7 +984,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,7 +992,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1000,7 +1000,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1066,10 +1066,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1077,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,10 +1085,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1096,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

package/src/preact/ReferenceGenomeContext.ts

@@ -2,4 +2,19 @@ import { createContext } from 'preact';
 
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 
-export const ReferenceGenomeContext = createContext<ReferenceGenome>({ nucleotideSequences: [], genes: [] });
+const UNINITIALIZED_SEQUENCE = '__uninitialized__';
+
+export const INITIAL_REFERENCE_GENOMES = {
+    nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: '' }],
+    genes: [],
+};
+
+export const ReferenceGenomeContext = createContext<ReferenceGenome>(INITIAL_REFERENCE_GENOMES);
+
+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/info.tsx

@@ -97,6 +97,7 @@ function componentParametersToCode(componentName: string, params: object, lapisU
 
     const attributes = indentLines(
         Object.entries(params)
+            .filter(([_, value]) => value !== undefined)
             .map(([key, value]) => `${key}='${stringifyIfNeeded(value) as string}'`)
             .join('\n'),
         4,

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,
     },
 };