<commit_before>import React, { useEffect } from 'react'
import { getHostKey, getHostName } from 'libs'
import Loading from 'components/Loading'
import queryString from 'query-string'
import { useStore } from './StoreContext'
import { observer } from 'mobx-react'
import { Button, Table, message, PageHeader, Popconfirm } from 'antd'
import { Link, useHistory } from 'react-router-dom'

const Host = (props) => {
  const key = getHostKey(props)
  const { isRegex, pattern } = props
  const query = isRegex ? { isRegex, pattern } : { domain: key }
  const to = {
    pathname: '/',
    search: queryString.stringify(query)
  }
  return <Link to={to}>{getHostName(props)}</Link>
}

const Regex = (isRegex) => {
  if (isRegex) {
    return 'Yes'
  }
  return 'No'
}

export default observer((props) => {
  useEffect(() => {
    AppStore.init({})
  }, [])
  const history = useHistory()
  const { AppStore } = useStore()
  const { hosts, loading } = AppStore
  if (loading) {
    return <Loading />
  }

  const data = hosts.map((host) => {
    return {
      host,
      isRegex: Boolean(host.isRegex)
    }
  })
  const columns = [
    {
      title: 'Host',
      dataIndex: 'host',
      key: 'host',
      render: Host,
      sorter: (a, b) => {
        const aKey = getHostKey(a.host)
        const bKey = getHostKey(b.host)
        return aKey.localeCompare(bKey)
      }
    },
    {
      title: 'isRegex',
      dataIndex: 'isRegex',
      key: 'isRegex',
      render: Regex,
      sorter: (a, b) => a.isRegex - b.isRegex
    },
    {
      title: 'Action',
      key: 'action',
      render: ({ host, isRegex }) => {
        const name = getHostName(host)
        return (
          <Popconfirm
            title={`Are you sure delete this host: ${name}`}
            onConfirm={() => {
              AppStore.removeHost({ host })
              message.success(`Successfully remove host: ${name}`)
            }}
            okText='Yes'
            cancelText='No'
          >
            <Button type='danger'>Delete</Button>
          </Popconfirm>
        )
      }
    }
  ]
  return (
    <>
      <PageHeader
        onBack={() => history.goBack()}
        title='All Hosts & Patterns'
      />
      <Table columns={columns} dataSource={data} pagination={false} />
    </>
  )
})
<commit_msg>fix: Host Tables page is not scrollable<commit_after>import React, { useEffect } from 'react'
import { getHostKey, getHostName } from 'libs'
import Loading from 'components/Loading'
import queryString from 'query-string'
import { useStore } from './StoreContext'
import { observer } from 'mobx-react'
import { Affix, Button, Table, message, PageHeader, Popconfirm } from 'antd'
import { Link, useHistory } from 'react-router-dom'

const Host = (props) => {
  const key = getHostKey(props)
  const { isRegex, pattern } = props
  const query = isRegex ? { isRegex, pattern } : { domain: key }
  const to = {
    pathname: '/',
    search: queryString.stringify(query)
  }
  return <Link to={to}>{getHostName(props)}</Link>
}

const Regex = (isRegex) => {
  if (isRegex) {
    return 'Yes'
  }
  return 'No'
}

export default observer((props) => {
  useEffect(() => {
    AppStore.init({})
  }, [])
  const history = useHistory()
  const { AppStore } = useStore()
  const { hosts, loading } = AppStore
  if (loading) {
    return <Loading />
  }

  const data = hosts.map((host) => {
    return {
      host,
      isRegex: Boolean(host.isRegex)
    }
  })
  const columns = [
    {
      title: 'Host',
      dataIndex: 'host',
      key: 'host',
      render: Host,
      sorter: (a, b) => {
        const aKey = getHostKey(a.host)
        const bKey = getHostKey(b.host)
        return aKey.localeCompare(bKey)
      }
    },
    {
      title: 'isRegex',
      dataIndex: 'isRegex',
      key: 'isRegex',
      render: Regex,
      sorter: (a, b) => a.isRegex - b.isRegex
    },
    {
      title: 'Action',
      key: 'action',
      render: ({ host, isRegex }) => {
        const name = getHostName(host)
        return (
          <Popconfirm
            title={`Are you sure delete this host: ${name}`}
            onConfirm={() => {
              AppStore.removeHost({ host })
              message.success(`Successfully remove host: ${name}`)
            }}
            okText='Yes'
            cancelText='No'
          >
            <Button type='danger'>Delete</Button>
          </Popconfirm>
        )
      }
    }
  ]
  return (
    <div style={{ overflow: 'scroll', height: '100vh' }}>
      <Affix offsetTop={0.01}>
        <PageHeader
          ghost={false}
          onBack={() => history.goBack()}
          title='All Hosts & Patterns'
        />
      </Affix>
      <Table columns={columns} dataSource={data} pagination={false} />
    </div>
  )
})

{'fraction_non_alphanumeric': 0.14940364092906466, 'fraction_numerical': 0.0012554927809165098, 'mean_word_length': 2.1994645247657294, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4309655', 'n_tokens_mistral': 1527, 'n_tokens_neox': 1522, 'n_words': 368}