<commit_before>import {Tabs, Tab, TabList, TabPanel} from 'react-tabs';

import Label from '~/react/components/label';
import TabsType from '~/types/view/display/tabs';

import ReactRenderer from '../reactRenderer';

// TODO: See if there's a simple way to expose the hashtag functionality so
// users can hook this up to whatever routing solution they use.
// Maybe add in a callback on the render data options?
class FormatronTabs extends React.Component {
  componentDidMount() {
    window.addEventListener('hashchange', this.onHashChange);
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.onHashChange);
  }

  onHashChange = e => {
    setTimeout(() => this.forceUpdate());
  }

  onTabSelect = index => {
    window.location.hash = this.props.viewType.
      getTabLabel(
        this.props.viewType
          .getTabs()
          .get(index),
        this.props.renderData
      );
  }

  render() {
    const {viewType, renderData, renderers, rendererMethod} = this.props;

    const tabs = viewType.getTabs();

    const hash = window.location.hash.slice(1);
    const selected = Math.max(
      tabs.findIndex(tab => viewType.getTabLabel(tab, renderData) == hash),
      0
    );

    return (
      <div className='formatron-tabs'><commit_msg>Switched tabs renderer hash value to index.<commit_after>import {Tabs, Tab, TabList, TabPanel} from 'react-tabs';

import Label from '~/react/components/label';
import TabsType from '~/types/view/display/tabs';

import ReactRenderer from '../reactRenderer';

// TODO: See if there's a simple way to expose the hashtag functionality so
// users can hook this up to whatever routing solution they use.
// Maybe add in a callback on the render data options?
class FormatronTabs extends React.Component {
  componentDidMount() {
    window.addEventListener('hashchange', this.onHashChange);
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.onHashChange);
  }

  onHashChange = e => {
    setTimeout(() => this.forceUpdate());
  }

  onTabSelect = index => {
    window.location.hash = `tab_${index}`;
  }

  render() {
    const {viewType, renderData, renderers, rendererMethod} = this.props;

    const tabs = viewType.getTabs();

    const hash = window.location.hash.slice(1);
    const selected = (hash.includes('_') && Number(hash.split('_')[1])) || 0;

    return (
      <div className='formatron-tabs'>
{'fraction_non_alphanumeric': 0.12649361351462712, 'fraction_numerical': 0.0020601565718994645, 'mean_word_length': 3.546816479400749, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 12, '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': '7572336', 'n_tokens_mistral': 729, 'n_tokens_neox': 704, 'n_words': 197}