<commit_before>import React from 'react';
import { string, func, arrayOf, bool, number } from 'prop-types';
import IconButton from 'material-ui/IconButton';
import ClearFiltersIconFixme from 'material-ui-icons/FormatClear';
import withMuiThemeProvider from '../../helpers/withMuiThemeProvider';

import styles from './styles/container.scss';
import Header from './header/Header';
import SectionTree from './SectionTree';
import AllFiltersList from './AllFiltersList';

const fixmeExampleSectionTree = {
  children: [
    {
      label: 'Section 1',
      children: [
        {
          label: 'SubSection 1',
          children: [
            {
              label: 'Sub-SubSection 1',
              children: [{ formComponentId: 'select-station-thing' }]
            }
          ]
        }
      ]
    },
    {
      label: 'Section 2',
      children: []
    },
    {
      label: 'Section 3',
      children: [
        {
          label: 'SubSection 1',
          children: [{ formComponentId: 'select-station-thing' }]
        },
        {
          label: 'SubSection 2',
          children: [{ formComponentId: 'select-station-thing' }]
        }
      ]
    }
  ]
};

// {
//         priceRange: { low: 0, high: 10 }, // one filter
//         stationsOne: ['KCRW', 'KIIS'], // two filters
//         stationsTwo: { values: ['KCRW'], someInternalBooleanOption: false }, // one filter
//         someBoolean: false // one filter
//       }

// labels for each node in the tree (subheader components)
// content (a form component) for each leaf
// values for each leaf (props to the form component)
// number of filters selected at each leaf

export class DiscoverySideBarContainerPure extends React.Component {
  static propTypes = {
    onClearAllFilters: func,
    onClearFilter: func,
    clearAllFilters: bool,

    // provided by wrapper:
    tabs: arrayOf(string).isRequired,
    selectedTab: string.isRequired,
    onSelectTab: func.isRequired,
    filtersActivePath: arrayOf(number).isRequired,
    onFiltersNavigate: func.isRequired
  };
  static defaultProps = {};

  render() {
    return (
      <div className={styles.container}>
        <Header
          tabs={this.props.tabs}
          selectedTab={this.props.selectedTab}
          rightIconButton={this.props.clearAllFilters}
          rightIconButtonElement={
            <IconButton onClick={this.props.onClearAllFilters}>
              <ClearFiltersIconFixme />
            </IconButton>
          }
          onSelectTab={this.props.onSelectTab}
        />
        {this.props.selectedTab === 'Filters' && (
          <div style={{ width: '100%' }}>
            <AllFiltersList
              onClearAllFilters={this.props.onClearAllFilters}
              onClearFilter={this.props.onClearFilter}
            />
            <SectionTree
              sections={fixmeExampleSectionTree}
              activePath={this.props.filtersActivePath}
              onNavigate={this.props.onFiltersNavigate}
              formComponents={{
                'select-station-thing': <div>select a station</div>
              }}
            />
          </div>
        )}
        {this.props.selectedTab === 'Browse' && (
          <div data-testtarget="browse" style={{ width: '100%' }}>
            this is browse content
          </div>
        )}
      </div>
    );
  }
}
<commit_msg>only show active filters when at root level:<commit_after>import React from 'react';
import { string, func, arrayOf, bool, number } from 'prop-types';
import IconButton from 'material-ui/IconButton';
import ClearFiltersIconFixme from 'material-ui-icons/FormatClear';
import withMuiThemeProvider from '../../helpers/withMuiThemeProvider';

import styles from './styles/container.scss';
import Header from './header/Header';
import SectionTree from './SectionTree';
import AllFiltersList from './AllFiltersList';

const fixmeExampleSectionTree = {
  children: [
    {
      label: 'Section 1',
      children: [
        {
          label: 'SubSection 1',
          children: [
            {
              label: 'Sub-SubSection 1',
              children: [{ formComponentId: 'select-station-thing' }]
            }
          ]
        }
      ]
    },
    {
      label: 'Section 2',
      children: []
    },
    {
      label: 'Section 3',
      children: [
        {
          label: 'SubSection 1',
          children: [{ formComponentId: 'select-station-thing' }]
        },
        {
          label: 'SubSection 2',
          children: [{ formComponentId: 'select-station-thing' }]
        }
      ]
    }
  ]
};

// {
//         priceRange: { low: 0, high: 10 }, // one filter
//         stationsOne: ['KCRW', 'KIIS'], // two filters
//         stationsTwo: { values: ['KCRW'], someInternalBooleanOption: false }, // one filter
//         someBoolean: false // one filter
//       }

// labels for each node in the tree (subheader components)
// content (a form component) for each leaf
// values for each leaf (props to the form component)
// number of filters selected at each leaf

export class DiscoverySideBarContainerPure extends React.Component {
  static propTypes = {
    onClearAllFilters: func,
    onClearFilter: func,
    clearAllFilters: bool,

    // provided by wrapper:
    tabs: arrayOf(string).isRequired,
    selectedTab: string.isRequired,
    onSelectTab: func.isRequired,
    filtersActivePath: arrayOf(number).isRequired,
    onFiltersNavigate: func.isRequired
  };
  static defaultProps = {};

  render() {
    return (
      <div className={styles.container}>
        <Header
          tabs={this.props.tabs}
          selectedTab={this.props.selectedTab}
          rightIconButton={this.props.clearAllFilters}
          rightIconButtonElement={
            <IconButton onClick={this.props.onClearAllFilters}>
              <ClearFiltersIconFixme />
            </IconButton>
          }
          onSelectTab={this.props.onSelectTab}
        />
        {this.props.selectedTab === 'Filters' && (
          <div style={{ width: '100%' }}>
            {this.props.filtersActivePath.length === 0 && (
              <AllFiltersList
                onClearAllFilters={this.props.onClearAllFilters}
                onClearFilter={this.props.onClearFilter}
              />
            )}

            <SectionTree
              sections={fixmeExampleSectionTree}
              activePath={this.props.filtersActivePath}
              onNavigate={this.props.onFiltersNavigate}
              formComponents={{
                'select-station-thing': <div>select a station</div>
              }}
            />
          </div>
        )}
        {this.props.selectedTab === 'Browse' && (
          <div data-testtarget="browse" style={{ width: '100%' }}>
            this is browse content
          </div>
        )}
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.12325956324197566, 'fraction_numerical': 0.004836582148614979, 'mean_word_length': 2.0141342756183747, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, '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': '2498580', 'n_tokens_mistral': 1905, 'n_tokens_neox': 1891, 'n_words': 421}