@genspectrum/dashboard-components 0.14.2 → 0.16.0

package/src/preact/{dateRangeSelector/date-range-selector.stories.tsx → dateRangeFilter/date-range-filter.stories.tsx}

@@ -4,7 +4,7 @@ import type { StepFunction } from '@storybook/types';
 import dayjs from 'dayjs/esm';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
@@ -19,9 +19,9 @@ const customDateRange = {
     dateTo: '2021-12-31',
 };
 
-const meta: Meta<DateRangeSelectorProps> = {
-    title: 'Input/DateRangeSelector',
-    component: DateRangeSelector,
+const meta: Meta<DateRangeFilterProps> = {
+    title: 'Input/DateRangeFilter',
+    component: DateRangeFilter,
     parameters: {
         actions: {
             handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
@@ -61,15 +61,15 @@ const meta: Meta<DateRangeSelectorProps> = {
 
 export default meta;
 
-const Primary: StoryObj<DateRangeSelectorProps> = {
+const Primary: StoryObj<DateRangeFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
-            <DateRangeSelector {...args} />
+            <DateRangeFilter {...args} />
         </LapisUrlContextProvider>
     ),
 };
 
-export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialValues: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -88,7 +88,7 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
 
 const initialDateFrom = '2000-01-01';
 
-export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialDateFrom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -107,7 +107,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
 
 const initialDateTo = '2000-01-01';
 
-export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialDateTo: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -124,7 +124,7 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
+export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -167,7 +167,7 @@ export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> =
     },
 };
 
-export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps> = {
+export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
@@ -183,7 +183,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps>
             return (
                 <div ref={ref}>
                     <LapisUrlContextProvider value={LAPIS_URL}>
-                        <DateRangeSelector {...args} value={value} />
+                        <DateRangeFilter {...args} value={value} />
                     </LapisUrlContextProvider>
                     <button className='btn' onClick={() => setValue(customDateRange.label)}>
                         Set to Custom
@@ -230,7 +230,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps>
     },
 };
 
-export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+export const ChangingDateOption: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
@@ -263,7 +263,7 @@ export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
+export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -278,7 +278,7 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
+export const WithNoDateColumn: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,

package/src/preact/{dateRangeSelector/date-range-selector.tsx → dateRangeFilter/date-range-filter.tsx}

@@ -18,39 +18,39 @@ import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
-const dateRangeSelectorInnerPropsSchema = z.object({
+const dateRangeFilterInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
     value: dateRangeValueSchema.optional(),
     lapisDateField: z.string().min(1),
 });
 
-const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
+const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
-export type DateRangeSelectorProps = z.infer<typeof dateRangeSelectorPropsSchema>;
-export type DateRangeSelectorInnerProps = z.infer<typeof dateRangeSelectorInnerPropsSchema>;
+export type DateRangeFilterProps = z.infer<typeof dateRangeFilterPropsSchema>;
+export type DateRangeFilterInnerProps = z.infer<typeof dateRangeFilterInnerPropsSchema>;
 
-export const DateRangeSelector = (props: DateRangeSelectorProps) => {
+export const DateRangeFilter = (props: DateRangeFilterProps) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeSelectorPropsSchema}>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeFilterPropsSchema}>
             <div style={{ width }}>
-                <DateRangeSelectorInner {...innerProps} />
+                <DateRangeFilterInner {...innerProps} />
             </div>
         </ErrorBoundary>
     );
 };
 
-export const DateRangeSelectorInner = ({
+export const DateRangeFilterInner = ({
     dateRangeOptions,
     earliestDate = '1900-01-01',
     value,
     lapisDateField,
-}: DateRangeSelectorInnerProps) => {
+}: DateRangeFilterInnerProps) => {
     const initialValues = useMemo(
         () => computeInitialValues(value, earliestDate, dateRangeOptions),
         [value, earliestDate, dateRangeOptions],

package/src/preact/{dateRangeSelector → dateRangeFilter}/dateRangeOption.ts

@@ -3,7 +3,7 @@ import z from 'zod';
 import { toYYYYMMDD } from './dateConversion';
 
 /**
- * A date range option that can be used in the `gs-date-range-selector` component.
+ * A date range option that can be used in the `gs-date-range-filter` component.
  */
 export const dateRangeOptionSchema = z.object({
     /** The label of the date range option that will be shown to the user */
@@ -65,7 +65,7 @@ const lastYear = new Date(today);
 lastYear.setFullYear(today.getFullYear() - 1);
 
 /**
- * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.
  */
 export const dateRangeOptionPresets = {
     last2Weeks: {

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);
 

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

@@ -10,6 +10,7 @@ import { type MutationsFilter, mutationsFilterSchema } from '../../types';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
+import { UserFacingError } from '../components/error-display';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
 const mutationFilterInnerPropsSchema = z.object({
@@ -54,6 +55,13 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
 
     const filterRef = useRef<HTMLDivElement>(null);
 
+    if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+        throw new UserFacingError(
+            'No reference sequences available',
+            'This organism has neither nucleotide nor amino acid sequences configured in its reference genome. You cannot filter by mutations.',
+        );
+    }
+
     const handleRemoveValue = (option: ParsedMutationFilter) => {
         const newSelectedFilters = {
             ...selectedFilters,

package/src/preact/mutations/mutations.stories.tsx

@@ -55,7 +55,6 @@ export const Default: StoryObj<MutationsProps> = {
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
-        height: '700px',
         pageSize: 10,
     },
     parameters: {

package/src/preact/mutations/mutations.tsx

@@ -41,7 +41,7 @@ const mutationsPropsSchema = z.object({
     views: mutationsViewSchema.array(),
     pageSize: z.union([z.boolean(), z.number()]),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
 });
 export type MutationsProps = z.infer<typeof mutationsPropsSchema>;
 

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -62,7 +62,6 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         sequenceType: 'nucleotide',
         views: ['grid'],
         width: '100%',
-        height: '700px',
         granularity: 'month',
         lapisDateField: 'date',
     },
@@ -76,7 +75,6 @@ export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps>
         sequenceType: 'nucleotide',
         views: ['grid'],
         width: '100%',
-        height: '700px',
         granularity: 'year',
         lapisDateField: 'date',
     },

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -45,7 +45,7 @@ const mutationOverTimeSchema = z.object({
     granularity: temporalGranularitySchema,
     lapisDateField: z.string().min(1),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
 });
 export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 

package/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx

@@ -10,11 +10,16 @@ import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
     yAxisScaleType: ScaleType;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeBarChart = ({
+    data,
+    yAxisScaleType,
+    maintainAspectRatio,
+}: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'bar',
@@ -22,7 +27,7 @@ export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: Number
                 datasets: getDatasets(data),
             },
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 animation: false,
                 scales: {
                     y: {
@@ -40,7 +45,7 @@ export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: Number
                 },
             },
         }),
-        [data, yAxisScaleType],
+        [data, maintainAspectRatio, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

package/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx

@@ -10,11 +10,16 @@ import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
     yAxisScaleType: ScaleType;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeLineChart = ({
+    data,
+    yAxisScaleType,
+    maintainAspectRatio,
+}: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'line',
@@ -22,7 +27,7 @@ export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: Numbe
                 datasets: getDatasets(data),
             },
             options: {
-                maintainAspectRatio: false,
+                maintainAspectRatio,
                 animation: false,
                 scales: {
                     y: {
@@ -40,7 +45,7 @@ export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: Numbe
                 },
             },
         }),
-        [data, yAxisScaleType],
+        [data, maintainAspectRatio, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -24,6 +24,9 @@ export default {
             control: { type: 'check' },
         },
         pageSize: { control: 'object' },
+        height: {
+            control: 'text',
+        },
     },
 };
 
@@ -40,7 +43,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         ],
         lapisDateField: 'date',
         width: '100%',
-        height: '700px',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -21,6 +21,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -33,7 +34,7 @@ export type NumberSequencesOverTimeView = z.infer<typeof numberSequencesOverTime
 
 const numberSequencesOverTimePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     lapisFilters: z.array(namedLapisFilterSchema).min(1),
     lapisDateField: z.string().min(1),
     views: z.array(numberSequencesOverTimeViewSchema),
@@ -89,17 +90,31 @@ interface NumberSequencesOverTimeTabsProps {
 const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
                 return {
                     title: 'Bar',
-                    content: <NumberSequencesOverTimeBarChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <NumberSequencesOverTimeBarChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            maintainAspectRatio={maintainAspectRatio}
+                        />
+                    ),
                 };
             case 'line':
                 return {
                     title: 'Line',
-                    content: <NumberSequencesOverTimeLineChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <NumberSequencesOverTimeLineChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            maintainAspectRatio={maintainAspectRatio}
+                        />
+                    ),
                 };
             case 'table':
                 return {

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

@@ -1,5 +1,6 @@
 import { Chart, type ChartConfiguration, type ChartDataset, registerables, type TooltipItem } from 'chart.js';
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
+import { useMemo } from 'preact/hooks';
 
 import { maxInData } from './prevalence-over-time';
 import {
@@ -21,55 +22,67 @@ interface PrevalenceOverTimeBarChartProps {
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
 
+const NO_DATA = 'noData';
+
 const PrevalenceOverTimeBarChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
     yAxisMaxConfig,
+    maintainAspectRatio,
 }: PrevalenceOverTimeBarChartProps) => {
-    const nullFirstData = data
-        .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
-        .map((variantData) => {
-            return {
-                content: variantData.content.sort(sortNullToBeginningThenByDate),
-                displayName: variantData.displayName,
-            };
-        });
+    const config = useMemo<ChartConfiguration | typeof NO_DATA>(() => {
+        const nullFirstData = data
+            .filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0)
+            .map((variantData) => {
+                return {
+                    content: variantData.content.sort(sortNullToBeginningThenByDate),
+                    displayName: variantData.displayName,
+                };
+            });
+
+        if (nullFirstData.length === 0) {
+            return NO_DATA;
+        }
+
+        const datasets = nullFirstData.map((graphData, index) =>
+            getDataset(graphData, index, confidenceIntervalMethod),
+        );
+
+        const maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    if (nullFirstData.length === 0) {
-        return <NoDataDisplay />;
-    }
-
-    const datasets = nullFirstData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod));
-
-    const maxY =
-        yAxisScaleType !== 'logit'
-            ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
-            : undefined;
-
-    const config: ChartConfiguration = {
-        type: BarWithErrorBarsController.id,
-        data: {
-            datasets,
-        },
-        options: {
-            maintainAspectRatio: false,
-            animation: false,
-            scales: {
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: BarWithErrorBarsController.id,
+            data: {
+                datasets,
             },
-            plugins: {
-                legend: {
-                    display: false,
+            options: {
+                maintainAspectRatio,
+                animation: false,
+                scales: {
+                    y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: tooltip(confidenceIntervalMethod),
                 },
-                tooltip: tooltip(confidenceIntervalMethod),
             },
-        },
-    };
+        };
+    }, [data, yAxisScaleType, confidenceIntervalMethod, yAxisMaxConfig, maintainAspectRatio]);
+
+    if (config === NO_DATA) {
+        return <NoDataDisplay />;
+    }
 
     return <GsChart configuration={config} />;
 };