<commit_before>import React, {Component} from "react";
import {connect} from "react-redux";
import {fetchStats, fetchVars} from "../../actions/profile";
import "./intro.css";
import "./sections.css";

import {strip} from "d3plus-text";

import "../../canon/Section.css";
import Stat from "../../canon/Stat";
import Viz from "../../canon/Viz.jsx";

import CropsAreaVsValue from "./agriculture/CropsAreaVsValue";
import CropsByHarvest from "./agriculture/CropsByHarvest";
import CropsByProduction from "./agriculture/CropsByProduction";

import RainfallBars from "./climate/RainfallBars";

import Conditions from "./health/Conditions";
import ConditionsByGender from "./health/ConditionsByGender";
import ConditionsByResidence from "./health/ConditionsByResidence";

import Poverty from "./poverty/Poverty";

const sections = [
  {
    title: "Agriculture",
    topics: [
      CropsByHarvest,
      CropsByProduction,
      CropsAreaVsValue
    ]
  },
  {
    title: "Climate",
    topics: [
      RainfallBars
    ]
  },
  {
    title: "Health",
    topics: [
      Conditions,
      ConditionsByGender,
      ConditionsByResidence
    ]
  },
  {
    title: "Poverty",
    topics: [
      Poverty
    ]
  }
];

sections.forEach(s => {
  s.slug = strip(s.title).toLowerCase();
});

class Profile extends Component {

  render() {

    const {id} = this.props.params;
    const {attrs, focus, stats} = this.props;
    const geos = attrs.geo.reduce((obj, d) => (obj[d.id] = d, obj), {});
    const attr = geos[id];
    const focusISO = focus.map(f => geos[f].iso3);

    return (
      <div className="profile">

        <div className="intro">

          <div className="splash" style={{backgroundImage: `url('/images/geo/${id}.jpg')`}}>
            <div className="gradient"></div>
          </div>

          <div className="header">
            <Viz type="Geomap" config={{
              ocean: "transparent",
              padding: 0,
              shapeConfig: {Path: {
                fill: d => d.properties.iso_a3 === attr.iso3 ? "white" : focusISO.includes(d.properties.iso_a3) ? "rgba(255, 255, 255, 0.35)" : "rgba(255, 255, 255, 0.1)",
                stroke: "rgba(255, 255, 255, 0.25)"
              }},
              tiles: false,
              topojson: "/topojson/continent.json",
              topojsonKey: "collection",
              zoom: false
            }} />
            <div className="meta">
              <div className="title">{ attr.name }</div>
              { stats.map(stat => <Stat key={ stat.key } label={ stat.label } value={ stat.attr ? attrs[stat.attr].find(d => d.id === stat.value).name : stat.value } />) }
            </div>
          </div>
          <div className="subnav">
            { sections.map(s =>
              <a className="sublink" href={ `#${s.slug}` } key={ s.slug }>
                <img className="icon" src={ `/images/sections/${s.slug}.svg` } />
                { s.title }
              </a>) }
          </div>
        </div>

        <div className="sections">

          {
            sections.map(s => <div className="section" key={ s.slug }>
              <h2><a name={ s.slug } href={ `#${ s.slug }`}>{ s.title }</a></h2>
              { s.topics.map((Comp, i) => <Comp id={ id } profile={ attr } key={ i } />)}
            </div>)
          }

        </div>

      </div>
    );
  }
}
<commit_msg>initial pass at allowing parameterization for topics<commit_after>import React, {Component} from "react";
import {connect} from "react-redux";
import {fetchStats, fetchVars} from "../../actions/profile";
import "./intro.css";
import "./sections.css";

import {strip} from "d3plus-text";

import "../../canon/Section.css";
import Stat from "../../canon/Stat";
import Viz from "../../canon/Viz.jsx";

import CropsAreaVsValue from "./agriculture/CropsAreaVsValue";
import CropsByHarvest from "./agriculture/CropsByHarvest";
import CropsByProduction from "./agriculture/CropsByProduction";

import RainfallBars from "./climate/RainfallBars";

import Conditions from "./health/Conditions";
import ConditionsByGender from "./health/ConditionsByGender";
import ConditionsByResidence from "./health/ConditionsByResidence";

import Poverty from "./poverty/Poverty";
import PovertyByGender from "./poverty/PovertyByGender";

const sections = [
  {
    title: "Agriculture",
    topics: [
      CropsByHarvest,
      CropsByProduction,
      CropsAreaVsValue
    ]
  },
  {
    title: "Climate",
    topics: [
      RainfallBars
    ]
  },
  {
    title: "Health",
    topics: [
      Conditions,
      ConditionsByGender,
      ConditionsByResidence
    ]
  },
  {
    title: "Poverty",
    topics: [
      Poverty,
      [PovertyByGender, {povertyLevel: "ppp1"}],
      [PovertyByGender, {povertyLevel: "ppp2"}]
    ]
  }
];

sections.forEach(s => {
  s.slug = strip(s.title).toLowerCase();
});

class Profile extends Component {

  render() {

    const {id} = this.props.params;
    const {attrs, focus, stats} = this.props;
    const geos = attrs.geo.reduce((obj, d) => (obj[d.id] = d, obj), {});
    const attr = geos[id];
    const focusISO = focus.map(f => geos[f].iso3);

    return (
      <div className="profile">

        <div className="intro">

          <div className="splash" style={{backgroundImage: `url('/images/geo/${id}.jpg')`}}>
            <div className="gradient"></div>
          </div>

          <div className="header">
            <Viz type="Geomap" config={{
              ocean: "transparent",
              padding: 0,
              shapeConfig: {Path: {
                fill: d => d.properties.iso_a3 === attr.iso3 ? "white" : focusISO.includes(d.properties.iso_a3) ? "rgba(255, 255, 255, 0.35)" : "rgba(255, 255, 255, 0.1)",
                stroke: "rgba(255, 255, 255, 0.25)"
              }},
              tiles: false,
              topojson: "/topojson/continent.json",
              topojsonKey: "collection",
              zoom: false
            }} />
            <div className="meta">
              <div className="title">{ attr.name }</div>
              { stats.map(stat => <Stat key={ stat.key } label={ stat.label } value={ stat.attr ? attrs[stat.attr].find(d => d.id === stat.value).name : stat.value } />) }
            </div>
          </div>
          <div className="subnav">
            { sections.map(s =>
              <a className="sublink" href={ `#${s.slug}` } key={ s.slug }>
                <img className="icon" src={ `/images/sections/${s.slug}.svg` } />
                { s.title }
              </a>) }
          </div>
        </div>

        <div className="sections">

          {
            sections.map(s => <div className="section" key={ s.slug }>
              <h2><a name={ s.slug } href={ `#${ s.slug }`}>{ s.title }</a></h2>
              { s.topics.map((Comp, i) => {
                let params = {};
                if (Array.isArray(Comp)) {
                  [Comp, params] = Comp;
                }
                const defaultParams = {id, profile: attr, key: i, ...params};
                return React.createElement(Comp, defaultParams, null);
              }
            )}
            </div>)
          }

        </div>

      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.16910026421916285, 'fraction_numerical': 0.012237519121123627, 'mean_word_length': 2.053927813163482, 'pattern_counts': {'":': 0, '<': 62, '<?xml version=': 0, '>': 80, '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': '2855045', 'n_tokens_mistral': 2363, 'n_tokens_neox': 2278, 'n_words': 486}