Error: "Failed to execute 'removeChild' on 'Node'" after adding column to simple table chart

[MichaelF25]

Bug description

1. Created some SQL-Query (TrinoDB Database) in SQL Lab which executed fine with expected results in SQL Lab
2. Saved the Query as Dataset
3. Superset asked if I want to examine the dataset by creating a table chart
4. Confirmed question
5. Table chart is created, but only 1-2 seconds visible at the screen and an error is displayed:

I've tried to create the chart manually and added column by column and did a refresh. By this way I can reproduce which columns are causing the issue but these are pretty simple (decimal(7)) columns which are even also not calculated ones. Also other columns of same type from same table are working fine.

How to reproduce the bug

1. Created some SQL-Query (TrinoDB Database) in SQL Lab which executes fine with expected results in SQL Lab
2. Save the Query as Dataset
3. Superset askes to examine the dataset by creating a table chart
4. Confirm question
5. Table chart is created, but only 1-2 seconds visible at the screen and an error is displayed

Screenshots/recordings

No response

Superset version

4.0.1

Python version

I don't know

Node version

I don't know

Browser

Chrome

Additional context

No response

Checklist

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [X] 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]]

Hey there, @MichaelF25! I'm a bot designed to help solve bugs, answer questions, and assist you while waiting for a human maintainer. Let's tackle this issue together!

To resolve the "Failed to execute 'removeChild' on 'Node'" error when adding certain columns to a table chart in Superset version 4.0.1, you need to ensure that the drag-and-drop and column resizing functionalities are correctly implemented and managed.

Here are the key points to address:

1. Ensure Proper Initialization and Cleanup:

   • Make sure that the event listeners for drag-and-drop and resizing are correctly initialized and removed when necessary. This prevents any lingering event listeners that might cause issues.

2. Handle Drag-and-Drop Correctly:

   • The handleColumnDragStart, handleDragDrop, and allowDrop methods manage the drag-and-drop functionality. Ensure these methods are correctly attached to the table header cells.

3. Manage Column Resizing:

   • The handleMouseDown, handleMouseMove, and handleMouseup methods manage column resizing. Ensure these methods are correctly handling the mouse events and updating the column widths.

Here is an example of how to properly initialize and manage these functionalities:

import InteractiveTableUtils from 'path/to/InteractiveTableUtils';

class MyTableComponent extends React.Component {
  tableRef = React.createRef<HTMLTableElement>();
  interactiveTableUtils: InteractiveTableUtils | null = null;

  componentDidMount() {
    if (this.tableRef.current) {
      this.interactiveTableUtils = new InteractiveTableUtils(
        this.tableRef.current,
        this.props.columns,
        this.setDerivedColumns,
      );
      this.interactiveTableUtils.initializeResizableColumns(true, this.tableRef.current);
      this.interactiveTableUtils.initializeDragDropColumns(true, this.tableRef.current);
    }
  }

  componentWillUnmount() {
    if (this.interactiveTableUtils) {
      this.interactiveTableUtils.clearListeners();
    }
  }

  setDerivedColumns = (columns: ColumnsType<any>) => {
    // Update the state or props with the new column definitions
    this.setState({ columns });
  };

  render() {
    return (
      <table ref={this.tableRef}>
        {/* Render table rows and cells */}
      </table>
    );
  }
}

Ensure that the InteractiveTableUtils class is correctly managing the drag-and-drop and resizing functionalities. This should help resolve the "Failed to execute 'removeChild' on 'Node'" error ^[1][2].

Additionally, there are recent changes in Superset version 4.0.1 that might affect the handling of table charts or DOM manipulation. Specifically, fixes related to drag-and-drop functionality and DOM elements could impact the handling of table charts ^[3].

Lastly, the NumericCell component in Superset's DataTable has an error handling mechanism that addresses issues with rendering numeric values, including decimal(7) columns. It uses a try-catch block to catch any errors during the formatting of the number using toLocaleString. If an error is caught, it logs the error using logging.error ^[4].

To continue talking to Dosu, mention @dosu.