Repository: h2oai/wave
File: ui/src/table.tsx (TypeScript)

Code before:
    return sortAsc
      ? b > a ? -1 : 1
      : b > a ? 1 : -1
  },
  formatNum = (num: U) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
  valueToDateString = (value: S) => {
    const epoch = Number(value)
    return new Date(isNaN(epoch) ? value : epoch).toLocaleString()
  },
  toCSV = (data: unknown[][]): S => data.map(row => {
    const line = JSON.stringify(row)
    return line.substr(1, line.length - 2)
  }).join('\n'),
  TooltipWrapper = ({ children, cellOverflow }: { children: JSX.Element, cellOverflow?: S }) => {
    return cellOverflow === 'tooltip' ? (
      <Fluent.TooltipHost
        // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
        styles={{ root: { '::after': { content: '', display: 'block' } } }}
        content={children}
        overflowMode={Fluent.TooltipOverflowMode.Parent}
      >{children}</Fluent.TooltipHost>
    ) : <>{children}</>
  },
  ContextualMenu = ({ onFilterChange, col, listProps, selectedFilters, setFiltersInBulk }: ContextualMenuProps) => {
    const
      isFilterChecked = (data: S, key: S) => !!selectedFilters && selectedFilters[data]?.includes(key) ? true : false,
      [menuFilters, setMenuFilters] = React.useState(col.cellType?.tag
        ? Array.from(listProps.items.reduce((_filters, { key, text, data }) => {
          key.split(',').forEach(key => _filters.set(key, { key, text, data, checked: isFilterChecked(data, key) }))
          return _filters
        }, new Map<S, Fluent.IContextualMenuItem>()).values())
        : listProps.items.map(i => ({ ...i, checked: isFilterChecked(i.data, i.key) }))
      ),
      selectAll = () => {
        setMenuFilters(menuFilters.map(i => ({ ...i, checked: true })))
        setFiltersInBulk(col.key, menuFilters.map(f => f.key))
      },
      deselectAll = () => {
        setMenuFilters(menuFilters.map(i => ({ ...i, checked: false })))
        setFiltersInBulk(col.key, [])
      },
      getOnFilterChangeHandler = (data: S, key: S) => (_ev?: React.FormEvent<HTMLInputElement | HTMLElement>, checked?: B) => {
        setMenuFilters(filters => filters.map(f => f.key === key ? ({ ...f, checked }) : f))
        onFilterChange(data, key, checked)
      }

    return (
      <div style={{ padding: 10 }}>
        <Fluent.Text variant='mediumPlus' styles={{ root: { paddingTop: 10, paddingBottom: 10, fontWeight: 'bold' } }} block>Show only</Fluent.Text>
        <Fluent.Text variant='small'>
          <Fluent.Link onClick={selectAll}>Select All</Fluent.Link> | <Fluent.Link onClick={deselectAll}>Deselect All</Fluent.Link>

Review comment (suggestion):
Small stylistic update. `!!` is a boolean conversion which turns `undefined` to `false` since it's a falsy value.

```suggestion
      isFilterChecked = (data: S, key: S) => !!selectedFilters && !!selectedFilters[data]?.includes(key),
```

Code after:
    return sortAsc
      ? b > a ? -1 : 1
      : b > a ? 1 : -1
  },
  formatNum = (num: U) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
  valueToDateString = (value: S) => {
    const epoch = Number(value)
    return new Date(isNaN(epoch) ? value : epoch).toLocaleString()
  },
  toCSV = (data: unknown[][]): S => data.map(row => {
    const line = JSON.stringify(row)
    return line.substr(1, line.length - 2)
  }).join('\n'),
  TooltipWrapper = ({ children, cellOverflow }: { children: JSX.Element, cellOverflow?: S }) => {
    return cellOverflow === 'tooltip' ? (
      <Fluent.TooltipHost
        // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
        styles={{ root: { '::after': { content: '', display: 'block' } } }}
        content={children}
        overflowMode={Fluent.TooltipOverflowMode.Parent}
      >{children}</Fluent.TooltipHost>
    ) : <>{children}</>
  },
  ContextualMenu = ({ onFilterChange, col, listProps, selectedFilters, setFiltersInBulk }: ContextualMenuProps) => {
    const
      isFilterChecked = (data: S, key: S) => !!selectedFilters && !!selectedFilters[data]?.includes(key),
      [menuFilters, setMenuFilters] = React.useState(col.cellType?.tag
        ? Array.from(listProps.items.reduce((_filters, { key, text, data }) => {
          key.split(',').forEach(key => _filters.set(key, { key, text, data, checked: isFilterChecked(data, key) }))
          return _filters
        }, new Map<S, Fluent.IContextualMenuItem>()).values())
        : listProps.items.map(i => ({ ...i, checked: isFilterChecked(i.data, i.key) }))
      ),
      selectAll = () => {
        setMenuFilters(menuFilters.map(i => ({ ...i, checked: true })))
        setFiltersInBulk(col.key, menuFilters.map(f => f.key))
      },
      deselectAll = () => {
        setMenuFilters(menuFilters.map(i => ({ ...i, checked: false })))
        setFiltersInBulk(col.key, [])
      },
      getOnFilterChangeHandler = (data: S, key: S) => (_ev?: React.FormEvent<HTMLInputElement | HTMLElement>, checked?: B) => {
        setMenuFilters(filters => filters.map(f => f.key === key ? ({ ...f, checked }) : f))
        onFilterChange(data, key, checked)
      }

    return (
      <div style={{ padding: 10 }}>
        <Fluent.Text variant='mediumPlus' styles={{ root: { paddingTop: 10, paddingBottom: 10, fontWeight: 'bold' } }} block>Show only</Fluent.Text>
        <Fluent.Text variant='small'>
          <Fluent.Link onClick={selectAll}>Select All</Fluent.Link> | <Fluent.Link onClick={deselectAll}>Deselect All</Fluent.Link>