function FilterableColumnHeader()

in src/components/CompareResults/TableHeader.tsx [81:189]
105 lines of code
8 McCabe index (conditional complexity)

function FilterableColumnHeader({
  name,
  columnId,
  possibleValues,
  checkedValues,
  onToggleFilter,
  onClearFilter,
  tooltip,
}: FilterableColumnHeaderProps) {
  const popupState = usePopupState({ variant: 'popover', popupId: columnId });
  const possibleCheckedValues = checkedValues?.size ?? possibleValues.length;

  const onClickFilter = (valueKey: string) => {
    const newCheckedValues = checkedValues
      ? new Set(checkedValues)
      : new Set(possibleValues.map(({ key }) => key));
    if (newCheckedValues.has(valueKey)) {
      newCheckedValues.delete(valueKey);
    } else {
      newCheckedValues.add(valueKey);
    }
    onToggleFilter(newCheckedValues);
  };

  const onClickOnlyFilter = (valueKey: string) => {
    const newCheckedValues = new Set([valueKey]);
    onToggleFilter(newCheckedValues);
  };

  const hasFilteredValues =
    checkedValues && checkedValues.size < possibleValues.length;
  const buttonAriaLabel = hasFilteredValues
    ? `${name} (Click to filter values. Some filters are active.)`
    : `${name} (Click to filter values)`;

  return (
    <>
      {/* setting tooltip in button will stop the overlay on filtermenu and also prevent tooltip from popping up when filter menu is open and active */}
      <Tooltip title={tooltip} placement='top' arrow>
        <Button
          {...bindTrigger(popupState)}
          color='tableHeaderButton'
          size='small'
          aria-label={buttonAriaLabel}
          sx={{ paddingInline: 1.5, fontSize: '16px' }}
        >
          {name}
          <Box
            sx={{
              paddingInlineStart: 0.5,
              color: 'primary.main',
            }}
            aria-label={`${possibleCheckedValues} items selected`}
          >
            ({possibleCheckedValues})
          </Box>
          <KeyboardArrowDownIcon />
        </Button>
      </Tooltip>
      <Menu {...bindMenu(popupState)}>
        <MenuItem
          dense={true}
          onClick={onClearFilter}
          sx={{ fontSize: '16px' }}
        >
          Select all values
        </MenuItem>
        <Divider />
        {possibleValues.map((possibleValue) => (
          <MenuItem
            sx={{ fontSize: '16px' }}
            dense={true}
            key={possibleValue.key}
            onClick={() => onClickOnlyFilter(possibleValue.key)}
          >
            Select only “{possibleValue.label}”
          </MenuItem>
        ))}
        <Divider />
        {possibleValues.map((possibleValue) => {
          const isChecked =
            !checkedValues || checkedValues.has(possibleValue.key);
          return (
            <MenuItem
              dense
              key={possibleValue.key}
              role='menuitemcheckbox'
              aria-checked={isChecked ? 'true' : 'false'}
              aria-label={`${possibleValue.label}${
                isChecked ? ' (selected)' : ''
              }`}
              onClick={() => onClickFilter(possibleValue.key)}
            >
              <ListItemIcon>
                <Checkbox
                  checked={isChecked}
                  tabIndex={-1}
                  disableRipple
                  sx={{ padding: 0 }}
                />
              </ListItemIcon>
              <ListItemText primary={possibleValue.label} />
            </MenuItem>
          );
        })}
      </Menu>
    </>
  );
}