<commit_before>'use strict';

import './styles.postcss';
import React from 'react';

import DashTabs from './DashTabs';
import DashSummary from './DashSummary';
import DashLayerSwitcher from './DashLayerSwitcher';
import DashDates from './DashDates';
import DashFilters from './DashFilters';
import DashDonation from './DashDonation';

import utils from '../../scripts/helpers/utils';

class Dashboard extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      dashboardOpen: true
    };
  }

  componentWillMount() {
    this.setState(utils.checkDevice());
  }

  toogleDashboard() {
    this.setState({ dashboardOpen: !this.state.dashboardOpen })
  }

  render() {
    let tabsMobile;
    let tabsDesktop;
    let layersSwitcher;
    let filtersSwitcher;

    if ( this.state.mobile || this.state.tablet ) {
      tabsMobile =  <DashTabs
                      currentMode = { this.props.currentMode }
                      changeModeFn = { this.props.changeModeFn }
                    />
      tabsDesktop = null;
    } else {
      tabsDesktop = <DashTabs
                      currentMode = { this.props.currentMode }
                      changeModeFn = { this.props.changeModeFn }
                    />

      tabsMobile = null;
    }

    if (!this.state.mobile && !this.props.embed) {
      filtersSwitcher = <div
              className= 'btn btn-third btn-filters-switcher'
              onClick= { this.props.toggleFiltersFn } >
              filters
            </div>
    };

    layersSwitcher = <DashLayerSwitcher
              currentMode = { this.props.currentMode }
              layer = { this.props.layer }
              changeLayerFn= { this.props.changeLayerFn }
            />

    const dashboardClass = this.state.dashboardOpen ? 
      this.state.mobile ? 
          "l-dashboard is-open -mobile" :
            "l-dashboard is-open -pc" :
          "l-dashboard";

    return (
      <div>
        { tabsMobile }
        <div className={ dashboardClass }>
          <button
            className="btn-dashboard-switcher -left"
            onClick={ this.toogleDashboard.bind(this) }
          >
            <svg className="icon icon-arrowleft"><use xlinkHref="#icon-arrowleft"></use></svg>
          </button>

          <button
            className="btn-dashboard-switcher -bottom"
            onClick={ this.toogleDashboard.bind(this) }
          >
            <svg className="icon icon-arrow"><use xlinkHref="#icon-arrow"></use></svg>
          </button>

          { tabsDesktop }

          <div className="m-dashboard-panel">
            <div className="dashboard-header">

              { this.props.embed &&
                <a href="#" className="btn btn-primary btn-embed">Explore the map</a>
              }

              { !this.props.embed &&
                <div>
                  <button
                    className="text text-cta btn-filters-switcher"
                    onClick={ this.props.toggleFiltersFn } >
                    filters
                  </button>
                  <a href="http://www.care.org/donate" rel="noreferrer" target="_blank"className="btn btn-contrast -small">
                    Donate
                  </a>
                </div>
              }

            </div>
            <div className="scroll-wrapper">
              <DashDates
                filters={ this.props.filters }
                timelineDate={ this.props.timelineDate }
                layer={ this.props.layer }
              />
              <DashFilters
                filters={ this.props.filters }<commit_msg>Mobile dashboard header style fixed<commit_after>'use strict';

import './styles.postcss';
import React from 'react';

import DashTabs from './DashTabs';
import DashSummary from './DashSummary';
import DashLayerSwitcher from './DashLayerSwitcher';
import DashDates from './DashDates';
import DashFilters from './DashFilters';
import DashDonation from './DashDonation';

import utils from '../../scripts/helpers/utils';

class Dashboard extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      dashboardOpen: true
    };
  }

  componentWillMount() {
    this.setState(utils.checkDevice());
  }

  toogleDashboard() {
    this.setState({ dashboardOpen: !this.state.dashboardOpen })
  }

  render() {
    let tabsMobile;
    let tabsDesktop;
    let layersSwitcher;
    let filtersSwitcher;

    if ( this.state.mobile || this.state.tablet ) {
      tabsMobile =  <DashTabs
                      currentMode = { this.props.currentMode }
                      changeModeFn = { this.props.changeModeFn }
                    />
      tabsDesktop = null;
    } else {
      tabsDesktop = <DashTabs
                      currentMode = { this.props.currentMode }
                      changeModeFn = { this.props.changeModeFn }
                    />

      tabsMobile = null;
    }

    if (!this.state.mobile && !this.props.embed) {
      filtersSwitcher = <div
              className= 'btn btn-third btn-filters-switcher'
              onClick= { this.props.toggleFiltersFn } >
              filters
            </div>
    };

    layersSwitcher = <DashLayerSwitcher
              currentMode = { this.props.currentMode }
              layer = { this.props.layer }
              changeLayerFn= { this.props.changeLayerFn }
            />

    const dashboardClass = this.state.dashboardOpen ? 
      this.state.mobile ? 
          "l-dashboard is-open -mobile" :
            "l-dashboard is-open -pc" :
          "l-dashboard";

    return (
      <div>
        { tabsMobile }
        <div className={ dashboardClass }>
          <button
            className="btn-dashboard-switcher -left"
            onClick={ this.toogleDashboard.bind(this) }
          >
            <svg className="icon icon-arrowleft"><use xlinkHref="#icon-arrowleft"></use></svg>
          </button>

          <button
            className="btn-dashboard-switcher -bottom"
            onClick={ this.toogleDashboard.bind(this) }
          >
            <svg className="icon icon-arrow"><use xlinkHref="#icon-arrow"></use></svg>
          </button>

          { tabsDesktop }

          <div className="m-dashboard-panel">
            <div className="dashboard-header">

              { this.props.embed &&
                <a href="#" className="btn btn-primary btn-embed">Explore the map</a>
              }

              { !this.props.embed &&
                  <button
                    className="text text-cta btn-filters-switcher"
                    onClick={ this.props.toggleFiltersFn } >
                    filters
                  </button>
              }
              { !this.props.embed &&
                  <a href="http://www.care.org/donate" rel="noreferrer" target="_blank"className="btn btn-contrast -small">
                    Donate
                  </a>
              }

            </div>
            <div className="scroll-wrapper">
              <DashDates
                filters={ this.props.filters }
                timelineDate={ this.props.timelineDate }
                layer={ this.props.layer }
              />
              <DashFilters
                filters={ this.props.filters }
{'fraction_non_alphanumeric': 0.11724327292696321, 'fraction_numerical': 0.0, 'mean_word_length': 1.6223902087832973, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '4102849', 'n_tokens_mistral': 2025, 'n_tokens_neox': 1973, 'n_words': 373}