Apache Superset Cannot Add Metrics to Tree Chart

Bug description

Unable to add metrics in the tree chart page. Throws error that says, Unexpected error: TypeError: Cannot read properties of undefined (reading 'some').

How to reproduce the bug

1. Go to Charts Tab.
2. Click on + Chart
3. Choose a dataset and select Tree Chart.
4. In the data column, drag and drop any columns into the metric field.
5. Error is shown

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.9

Node version

16

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.

Comment From: dosubot[bot]

Hey @ThinneshHummingsoft! I'm here to help you with your bug report. I can assist you with solving bugs, answering questions, and even becoming a contributor. Let's get to the bottom of this together!

To resolve the "Unexpected error: TypeError: Cannot read properties of undefined (reading 'some')" error when adding metrics in the tree chart page of Apache Superset, ensure that the savedMetrics and columns props passed to the DndMetricSelect component are properly defined and not undefined.

The error occurs because the some method is being called on undefined in the coerceMetrics function. This can happen if savedMetrics or columns are not properly initialized.

Here is the relevant part of the code where the error might be occurring:

const coerceMetrics = (
  addedMetrics: QueryFormMetric | QueryFormMetric[] | undefined | null,
  savedMetrics: Metric[],
  columns: ColumnMeta[],
) => {
  if (!addedMetrics) {
    return [];
  }
  const metricsCompatibleWithDataset = ensureIsArray(addedMetrics).filter(
    metric => {
      if (isSavedMetric(metric)) {
        return savedMetrics.some(
          savedMetric => savedMetric.metric_name === metric,
        );
      }
      if (isAdhocMetricSimple(metric)) {
        return columns.some(
          column => column.column_name === metric.column.column_name,
        );
      }
      return true;
    },
  );

  return metricsCompatibleWithDataset.map(metric => {
    if (!isDictionaryForAdhocMetric(metric)) {
      return metric;
    }
    if (isAdhocMetricSimple(metric)) {
      const column = columns.find(
        col => col.column_name === metric.column.column_name,
      );
      if (column) {
        return new AdhocMetric({ ...metric, column });
      }
    }
    return new AdhocMetric(metric);
  });
};

To fix this, ensure that savedMetrics and columns are always defined when passed to the DndMetricSelect component. You can add default values or checks to handle cases where these might be undefined.

For example:

const DndMetricSelect = (props: any) => {
  const { onChange, multi, datasource, savedMetrics = [], columns = [] } = props;

  // ... rest of the component code
};

By providing default values ([] for both savedMetrics and columns), you can prevent the some method from being called on undefined, thus avoiding the TypeError ^[1].

To continue talking to Dosu, mention @dosu.

Comment From: duniang818

I have met the same error with you:

Comment From: rusackas

https://github.com/apache/superset/pull/30679 is merged! Closing