Repository: apache/superset
File: superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx (TypeScript)

Code before:
      </div>
    ),
    [
      items,
      activeOverflowedFiltersInScope,
      overflowedFiltersInScope,
      overflowedCrossFilters,
      filtersOutOfScope,
      showCollapsePanel,
      customizationsOutOfScope,
      showCustomizationCollapsePanel,
      customizationRenderer,
      renderer,
      rendererCrossFilter,
      hasRequiredFirst,
      overflowedIds,
    ],
  );

  const overflowedByIndex = useMemo(() => {
    const filtersOutOfScopeIds = new Set(filtersOutOfScope.map(({ id }) => id));
    const overflowedFiltersInScopeIds = new Set(
      overflowedFiltersInScope.map(({ id }) => id),
    );

    return filtersWithValues.map(filter => {
      // Out-of-scope filters in vertical mode are in a Collapse panel, not overflowed
      if (
        filterBarOrientation === FilterBarOrientation.Vertical &&
        filtersOutOfScopeIds.has(filter.id)
      ) {
        return false;
      }
      return (
        filtersOutOfScopeIds.has(filter.id) ||
        overflowedFiltersInScopeIds.has(filter.id)
      );
    });
  }, [
    filtersOutOfScope,
    filtersWithValues,
    overflowedFiltersInScope,
    filterBarOrientation,
  ]);

  useEffect(() => {
    if (outlinedFilterId && overflowedIds.includes(outlinedFilterId)) {
      popoverRef?.current?.open();
    }
  }, [outlinedFilterId, lastUpdated, popoverRef, overflowedIds]);


Review comment (bug):
I think we can simplify this to:
```js
return filtersWithValues.map(filter => {
  // Out-of-scope filters in vertical mode are in a Collapse panel, not overflowed
  if (filtersOutOfScopeIds.has(filter.id)) {
    return filterBarOrientation === FilterBarOrientation.Horizontal;
  }
  return overflowedFiltersInScopeIds.has(filter.id);
});
```

Code after:
      </div>
    ),
    [
      items,
      activeOverflowedFiltersInScope,
      overflowedFiltersInScope,
      overflowedCrossFilters,
      filtersOutOfScope,
      showCollapsePanel,
      customizationsOutOfScope,
      showCustomizationCollapsePanel,
      customizationRenderer,
      renderer,
      rendererCrossFilter,
      hasRequiredFirst,
      overflowedIds,
    ],
  );

  const overflowedByIndex = useMemo(() => {
    const filtersOutOfScopeIds = new Set(filtersOutOfScope.map(({ id }) => id));
    const overflowedFiltersInScopeIds = new Set(
      overflowedFiltersInScope.map(({ id }) => id),
    );

    return filtersWithValues.map(filter => {
      // Out-of-scope filters in vertical mode are in a Collapse panel, not overflowed
      if (filtersOutOfScopeIds.has(filter.id)) {
        return filterBarOrientation === FilterBarOrientation.Horizontal;
      }
      return overflowedFiltersInScopeIds.has(filter.id);
    });
  }, [
    filtersOutOfScope,
    filtersWithValues,
    overflowedFiltersInScope,
    filterBarOrientation,
  ]);

  useEffect(() => {
    if (outlinedFilterId && overflowedIds.includes(outlinedFilterId)) {
      popoverRef?.current?.open();
    }
  }, [outlinedFilterId, lastUpdated, popoverRef, overflowedIds]);

  return (
    <>
      {portalNodes
        .filter((node, index) => filterIds.has(filtersWithValues[index].id))
        .map((node, index) => (
          <InPortal node={node} key={filtersWithValues[index].id}>