X-Axis title disappears when editing bar chart

[BGZ-spec]

Bug description

Description

When editing a bar chart in Superset, changing the X-axis title causes the title to disappear. Similarly, adjusting the margins leads to unexpected behavior—they either reset or are not applied correctly.

How to reproduce the bug

Open an existing bar chart in Superset or create a new one.
Enter the edit mode for the chart.
Change the X-axis title to a new value.
Observe that the X-axis title disappears from the chart.
Adjust the margin settings.
Notice that the margins do not update as expected or revert to previous settings.

Screenshots/recordings

Screencast from 2024-09-24 10-57-58.webm

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Firefox

Additional context

No response

Checklist

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [ ] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [ ] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot[bot]]

I found a similar closed issue that might be relevant to your problem: [chart viz][Time-series bar chart v2] chart will shrink when input customize X AXIS TITLE MARGIN or Y AXIS TITLE MARGIN. This issue was resolved by a pull request that fixed the customize margin functionality ^[1].

To fix the issue where the X-axis title disappears and margins reset or do not apply correctly when editing a bar chart in Superset, ensure that the x_axis_title and x_axis_title_margin controls are properly configured and rendered. Here is the relevant code snippet:

import { t } from '@superset-ui/core';
import {
  ControlPanelsContainerProps,
  ControlStateMapping,
  ControlSubSectionHeader,
  formatSelectOptions,
  sections,
} from '@superset-ui/chart-controls';
import { OrientationType } from '../../types';

function createAxisTitleControl(axis: 'x' | 'y') {
  const isXAxis = axis === 'x';
  const isVertical = (controls: ControlStateMapping) =>
    Boolean(controls?.orientation.value === OrientationType.Vertical);
  const isHorizontal = (controls: ControlStateMapping) =>
    Boolean(controls?.orientation.value === OrientationType.Horizontal);

  return [
    [
      {
        name: 'x_axis_title',
        config: {
          type: 'TextControl',
          label: t('Axis Title'),
          renderTrigger: true,
          default: '',
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isVertical(controls) : isHorizontal(controls),
        },
      },
    ],
    [
      {
        name: 'x_axis_title_margin',
        config: {
          type: 'SelectControl',
          freeForm: true,
          clearable: true,
          label: t('AXIS TITLE MARGIN'),
          renderTrigger: true,
          default: sections.TITLE_MARGIN_OPTIONS[0],
          choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isVertical(controls) : isHorizontal(controls),
        },
      },
    ],
  ];
}

const config = {
  controlPanelSections: [
    {
      label: t('Chart Title'),
      tabOverride: 'customize',
      expanded: true,
      controlSetRows: [
        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        ...createAxisTitleControl('x'),
      ],
    },
  ],
};

export default config;

Ensure that the x_axis_title and x_axis_title_margin controls are correctly set up in your chart configuration. The renderTrigger: true property ensures that changes to these controls will trigger a re-render of the chart, which should apply the updated title and margins correctly. Additionally, the visibility property ensures that these controls are only visible when the chart orientation is appropriate, preventing any misconfiguration ^[2][3][4].

To continue talking to Dosu, mention @dosu.

[BGZ-spec]

@dosu I have the original version of the code and haven't changed anything. I downloaded a clean, fresh version of Superset.

controlSetRows: [
        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        ...createAxisTitleControl('x'),
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ...createAxisTitleControl('y'),
      ],

When I comment out ...createAxisTitleControl('y'), changing the X-axis title works correctly.

[dosubot[bot]]

The issue arises because the visibility conditions for the X-axis and Y-axis titles are interdependent. Specifically, the visibility of the X-axis title controls depends on the chart orientation being vertical, and the visibility of the Y-axis title controls depends on the chart orientation being horizontal. When both createAxisTitleControl('x') and createAxisTitleControl('y') are used, they might conflict due to these interdependencies.

Here is the relevant code snippet showing the visibility conditions:

function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
  const isXAxis = axis === 'x';
  const isVertical = (controls: ControlStateMapping) =>
    Boolean(controls?.orientation.value === OrientationType.Vertical);
  const isHorizontal = (controls: ControlStateMapping) =>
    Boolean(controls?.orientation.value === OrientationType.Horizontal);
  return [
    [
      {
        name: 'x_axis_title',
        config: {
          type: 'TextControl',
          label: t('Axis Title'),
          renderTrigger: true,
          default: '',
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isVertical(controls) : isHorizontal(controls),
        },
      },
    ],
    [
      {
        name: 'x_axis_title_margin',
        config: {
          type: 'SelectControl',
          freeForm: true,
          clearable: true,
          label: t('AXIS TITLE MARGIN'),
          renderTrigger: true,
          default: sections.TITLE_MARGIN_OPTIONS[0],
          choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isVertical(controls) : isHorizontal(controls),
        },
      },
    ],
    [
      {
        name: 'y_axis_title',
        config: {
          type: 'TextControl',
          label: t('Axis Title'),
          renderTrigger: true,
          default: '',
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isHorizontal(controls) : isVertical(controls),
        },
      },
    ],
    [
      {
        name: 'y_axis_title_margin',
        config: {
          type: 'SelectControl',
          freeForm: true,
          clearable: true,
          label: t('AXIS TITLE MARGIN'),
          renderTrigger: true,
          default: sections.TITLE_MARGIN_OPTIONS[0],
          choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
          description: t('Changing this control takes effect instantly'),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            isXAxis ? isHorizontal(controls) : isVertical(controls),
        },
      },
    ],
  ];
}

When you comment out ...createAxisTitleControl('y'), the conflicting visibility conditions are removed, allowing the X-axis title to work correctly ^[1].

To continue talking to Dosu, mention @dosu.

[viktorfilyk4]

Hi! I pulled repo today, setup project using docker-compose and I encounter the same issue. I would like to work on this. As I read comments above it seems like only frontend issue

[rusackas]

@viktorfilyk4 that would very much be appreciated. Ping us here if/when you open a PR. Thanks in advance!

[BGZ-spec]

Has anyone managed to fix the problem?

[viktorfilyk4]

@BGZ-spec I am currently working on this. Trying to figure out what's the problem. The same for me, when I comment ...createAxisTitleControl('y') line, it works fine.

Any suggestions?

[viktorfilyk4]

@dosu Can you suggest how to fix this problem?

[dosubot[bot]]

To fix the issue with the X-axis title disappearing when both createAxisTitleControl('x') and createAxisTitleControl('y') are used, you need to ensure that the visibility conditions for the axis titles are correctly set based on the chart's orientation.

The visibility condition for the X-axis title is currently set to be visible only when the chart is vertical:

visibility: ({ controls }: ControlPanelsContainerProps) =>
  isXAxis ? isVertical(controls) : isHorizontal(controls),

To ensure the X-axis title is visible when it should be, verify that the orientation control is correctly set to Vertical when you want the X-axis title to appear. If the chart orientation is not set to Vertical, the X-axis title will not be visible.

Similarly, ensure that the Y-axis title visibility condition is set correctly:

visibility: ({ controls }: ControlPanelsContainerProps) =>
  isXAxis ? isHorizontal(controls) : isVertical(controls),

This condition ensures that the Y-axis title is visible when the chart is horizontal. Adjust the chart's orientation settings accordingly to make sure the axis titles appear as expected ^[1].

To continue talking to Dosu, mention @dosu.

[sfirke]

I'm experiencing this when creating a bar chart with a categorical x-axis in 4.0.2.

[DamianPendrak]

Hi, I noticed the issue has been unassigned and without updates for a while, I went ahead and created a pull request #30821 to address it. I hope this helps! Let me know if there's anything you'd like me to adjust. @rusackas @sfirke

[curio77]

Happens here too with a fresh setup of v4.0.2. Also, if the (X) axis title does not disappear, the title margin is not respected.