<commit_before>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { Tabs2 as Tabs, Tab2 as Tab } from '@blueprintjs/core';
import { RootState } from '../../types';
import { changeTab, ChangeTab } from '../../actions/updateValue';
import QueueTable from '../Queue/QueueTable';
import SearchTab from './SearchTab';
import Account from '../Account/Account';
import BlockLists from '../BlockList/BlockLists';
import SettingsTab from './SettingsTab';
import Watchers from '../Watchers/Watchers';

export interface Props {
  readonly selected: number;
  readonly queueSize: number;
}

export interface Handlers {
  readonly onSelectTab: (selectedTabIndex: number) => void;
}

const TabNavigation: React.SFC<Props & Handlers> = ({
  onSelectTab,
  queueSize,
  selected
}) => {
  return (
    <Tabs
      id="mturk-engine-tab-navigation"
      selectedTabId={selected}
      onChange={onSelectTab}
      animate={false}
      renderActiveTabPanelOnly
    >
      <Tab id={0} title="Search" panel={<SearchTab />} />
      <Tab id={1} title={`Queue (${queueSize})`} panel={<QueueTable />} />
      <Tab id={2} title="Watchers" panel={<Watchers />} />
      <Tab id={3} title="Blocklist" panel={<BlockLists />} />
      <Tab id={4} title="Account" panel={<Account />} />
      <Tab id={5} title="Settings" panel={<SettingsTab />} />
    </Tabs>
  );
};

const mapState = (state: RootState): Props => ({
  selected: state.tab,
  queueSize: state.queue.size
});

const mapDispatch = (dispatch: Dispatch<ChangeTab>): Handlers => ({
  onSelectTab: (selectedTabIndex: number) => {
    dispatch(changeTab(selectedTabIndex));
  }
});

export default connect(mapState, mapDispatch)(TabNavigation);
<commit_msg>Tentative: remove renderActiveTabPanelOnly to increase tab switching performance.<commit_after>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { Tabs2 as Tabs, Tab2 as Tab } from '@blueprintjs/core';
import { RootState } from '../../types';
import { changeTab, ChangeTab } from '../../actions/updateValue';
import QueueTable from '../Queue/QueueTable';
import SearchTab from './SearchTab';
import Account from '../Account/Account';
import BlockLists from '../BlockList/BlockLists';
import SettingsTab from './SettingsTab';
import Watchers from '../Watchers/Watchers';

export interface Props {
  readonly selected: number;
  readonly queueSize: number;
}

export interface Handlers {
  readonly onSelectTab: (selectedTabIndex: number) => void;
}

const TabNavigation: React.SFC<Props & Handlers> = ({
  onSelectTab,
  queueSize,
  selected
}) => {
  return (
    <Tabs
      id="mturk-engine-tab-navigation"
      selectedTabId={selected}
      onChange={onSelectTab}
      animate={false}
    >
      <Tab id={0} title="Search" panel={<SearchTab />} />
      <Tab id={1} title={`Queue (${queueSize})`} panel={<QueueTable />} />
      <Tab id={2} title="Watchers" panel={<Watchers />} />
      <Tab id={3} title="Blocklist" panel={<BlockLists />} />
      <Tab id={4} title="Account" panel={<Account />} />
      <Tab id={5} title="Settings" panel={<SettingsTab />} />
    </Tabs>
  );
};

const mapState = (state: RootState): Props => ({
  selected: state.tab,
  queueSize: state.queue.size
});

const mapDispatch = (dispatch: Dispatch<ChangeTab>): Handlers => ({
  onSelectTab: (selectedTabIndex: number) => {
    dispatch(changeTab(selectedTabIndex));
  }
});

export default connect(mapState, mapDispatch)(TabNavigation);

{'fraction_non_alphanumeric': 0.15973377703826955, 'fraction_numerical': 0.004437049362174155, 'mean_word_length': 3.4919053549190537, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 45, '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': '362647', 'n_tokens_mistral': 1103, 'n_tokens_neox': 1098, 'n_words': 268}