Cross filter - cant figure out how to emit filter

[datagene-github]

I am using apache superset version 4.0.2. I have a dashboard with different chart, and I enabled the cross filter, but when I click on a chart, the filter value that is passed (based on the query in the other charts) is the label of the legend of the chart I clicked on. when I checked online https://www.restack.io/docs/superset-knowledge-apache-superset-cross-filter I am supposed to configure the chart to emit filter, but I cant find where to do that

[dosubot[bot]]

Hey @datagene-github! I'm here to help you with any bugs, questions, or contributions you might have. Let's work together to solve this.

To configure a chart to emit a filter in Apache Superset version 4.0.2, ensuring that the correct filter value is passed instead of the legend label, you should focus on the getCrossFilterDataMask function and the clickEventHandler function.

The getCrossFilterDataMask function is responsible for creating the data mask that includes the correct filter values. It maps the selected values to their corresponding groupby values using the labelMap. This ensures that the correct filter values are used instead of the legend labels.

Here's the relevant part of the code:

const getCrossFilterDataMask =
  (
    selectedValues: Record<number, string>,
    groupby: QueryFormColumn[],
    labelMap: Record<string, string[]>,
  ) =>
  (value: string) => {
    const selected = Object.values(selectedValues);
    let values: string[];
    if (selected.includes(value)) {
      values = selected.filter(v => v !== value);
    } else {
      values = [value];
    }

    const groupbyValues = values.map(value => labelMap[value]);
    return {
      dataMask: {
        extraFormData: {
          filters:
            values.length === 0
              ? []
              : groupby.map((col, idx) => {
                  const val = groupbyValues.map(v => v[idx]);
                  if (val === null || val === undefined)
                    return {
                      col,
                      op: 'IS NULL' as const,
                    };
                  return {
                    col,
                    op: 'IN' as const,
                    val: val as (string | number | boolean)[],
                  };
                }),
        },
        filterState: {
          value: groupbyValues.length ? groupbyValues : null,
          selectedValues: values.length ? values : null,
        },
      },
      isCurrentValueSelected: selected.includes(value),
    };
  };

The clickEventHandler function uses this data mask to update the filter state when a chart element is clicked:

export const clickEventHandler =
  (
    getCrossFilterDataMask: (
      value: string,
    ) => ContextMenuFilters['crossFilter'],
    setDataMask: (dataMask: DataMask) => void,
    emitCrossFilters?: boolean,
  ) =>
  ({ name }: { name: string }) => {
    if (!emitCrossFilters) {
      return;
    }
    const dataMask = getCrossFilterDataMask(name)?.dataMask;
    if (dataMask) {
      setDataMask(dataMask);
    }
  };

Ensure that emitCrossFilters is enabled and that the labelMap is correctly mapping legend labels to the actual filter values. This setup will ensure that the correct filter values are passed when cross filters are emitted ^[1][2].

To continue talking to Dosu, mention @dosu.