<commit_before>const {
  Spin,
  Icon,
  Button,
  Row,
  Col,
  Select,
  Card,
  Affix,
  Modal,
  Result
} = antd;
const { useState, useEffect, useCallback, useMemo } = React;

const INITIAL_DASHBOARD = 0;

const Dashboard = () => {
  const [dashboards, setDashboards] = useState([]);
  const [dashIndex, setDashIndex] = useState(INITIAL_DASHBOARD);

  const handleClick = useCallback(index => {
    setDashIndex(index);
  }, []);

  useEffect(() => {
    axios
      .get("http://localhost:5050/api/dashboard/")
      .then(response => setDashboards(response.data));
  }, []);

  if (!dashboards.length) return null;

  const { layout, plots } = dashboards[dashIndex];

  return (
    <div id="cea-dashboard-content" style={{ minHeight: "100%" }}>
      <div id="cea-dashboard-content-title" style={{ margin: 10 }}>
        <DashSelect setDashIndex={handleClick} dashboards={dashboards} />
      </div>
      <div id="cea-dashboard-layout">
        {layout === "row" ? (
          <RowLayout dashIndex={dashIndex} plots={plots} />
        ) : (
          <GridLayout dashIndex={dashIndex} plots={plots} />
        )}
      </div>
    </div>
  );
};

const DashSelect = ({ setDashIndex, dashboards }) => {
  const dashList = useMemo(
    () =>
      dashboards.map((dashboard, index) => (
        <option key={index} value={index}>
          {dashboard.name}
        </option>
      )),
    [dashboards]
  );

  return (
    <Affix offsetTop={30}>
      <Select
        defaultValue={INITIAL_DASHBOARD}
        style={{ width: 200 }}
        onChange={value => setDashIndex(value)}
      >
        {dashList}
      </Select>
    </Affix>
  );
};

const ModalAddPlot = ({ visible, setVisible }) => {
  const handleOk = e => {
    setVisible(false);
  };

  const handleCancel = e => {
    setVisible(false);
  };

  return (
    <Modal
      title="Add plot"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

const RowLayout = ({ dashIndex, plots }) => {
  if (!plots.length) return <h1>No plots found</h1>;
  const [modalAdd, setModelAdd] = useState(false);

  return (
    <React.Fragment>
      <ModalAddPlot visible={modalAdd} setVisible={setModelAdd} />
      {plots.map((data, index) => (
        <Row key={`${dashIndex}-${index}-${data.scenario}`}>
          <Col>
            <Plot index={index} dashIndex={dashIndex} data={data} />
          </Col>
        </Row>
      ))}
      <Affix offsetBottom={100}>
        <Button type="primary" style={{ float: "right" }} onClick={setModelAdd}>
          + Add plot
        </Button>
      </Affix>
    </React.Fragment>
  );
};

const GridLayout = ({ dashIndex, plots }) => {
  if (!plots.length) return <h1>No plots found</h1>;

  return (
    <React.Fragment>
      <div class="row display-flex">
        {plots.map((data, index) => (
          <div
            className="col-lg-4 col-md-12 col-sm-12 col-xs-12 plot-widget"
            key={`${dashIndex}-${index}-${data.scenario}`}
          >
            <Plot index={index} dashIndex={dashIndex} data={data} />
          </div>
        ))}
      </div>
    </React.Fragment>
  );
};
<commit_msg>Fix minor error with className<commit_after>const {
  Spin,
  Icon,
  Button,
  Row,
  Col,
  Select,
  Card,
  Affix,
  Modal,
  Result
} = antd;
const { useState, useEffect, useCallback, useMemo } = React;

const INITIAL_DASHBOARD = 0;

const Dashboard = () => {
  const [dashboards, setDashboards] = useState([]);
  const [dashIndex, setDashIndex] = useState(INITIAL_DASHBOARD);

  const handleClick = useCallback(index => {
    setDashIndex(index);
  }, []);

  useEffect(() => {
    axios
      .get("http://localhost:5050/api/dashboard/")
      .then(response => setDashboards(response.data));
  }, []);

  if (!dashboards.length) return null;

  const { layout, plots } = dashboards[dashIndex];

  return (
    <div id="cea-dashboard-content" style={{ minHeight: "100%" }}>
      <div id="cea-dashboard-content-title" style={{ margin: 10 }}>
        <DashSelect setDashIndex={handleClick} dashboards={dashboards} />
      </div>
      <div id="cea-dashboard-layout">
        {layout === "row" ? (
          <RowLayout dashIndex={dashIndex} plots={plots} />
        ) : (
          <GridLayout dashIndex={dashIndex} plots={plots} />
        )}
      </div>
    </div>
  );
};

const DashSelect = ({ setDashIndex, dashboards }) => {
  const dashList = useMemo(
    () =>
      dashboards.map((dashboard, index) => (
        <option key={index} value={index}>
          {dashboard.name}
        </option>
      )),
    [dashboards]
  );

  return (
    <Affix offsetTop={30}>
      <Select
        defaultValue={INITIAL_DASHBOARD}
        style={{ width: 200 }}
        onChange={value => setDashIndex(value)}
      >
        {dashList}
      </Select>
    </Affix>
  );
};

const ModalAddPlot = ({ visible, setVisible }) => {
  const handleOk = e => {
    setVisible(false);
  };

  const handleCancel = e => {
    setVisible(false);
  };

  return (
    <Modal
      title="Add plot"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

const RowLayout = ({ dashIndex, plots }) => {
  if (!plots.length) return <h1>No plots found</h1>;
  const [modalAdd, setModelAdd] = useState(false);

  return (
    <React.Fragment>
      <ModalAddPlot visible={modalAdd} setVisible={setModelAdd} />
      {plots.map((data, index) => (
        <Row key={`${dashIndex}-${index}-${data.scenario}`}>
          <Col>
            <Plot index={index} dashIndex={dashIndex} data={data} />
          </Col>
        </Row>
      ))}
      <Affix offsetBottom={100}>
        <Button type="primary" style={{ float: "right" }} onClick={setModelAdd}>
          + Add plot
        </Button>
      </Affix>
    </React.Fragment>
  );
};

const GridLayout = ({ dashIndex, plots }) => {
  if (!plots.length) return <h1>No plots found</h1>;

  return (
    <React.Fragment>
      <div className="row display-flex">
        {plots.map((data, index) => (
          <div
            className="col-lg-4 col-md-12 col-sm-12 col-xs-12 plot-widget"
            key={`${dashIndex}-${index}-${data.scenario}`}
          >
            <Plot index={index} dashIndex={dashIndex} data={data} />
          </div>
        ))}
      </div>
    </React.Fragment>
  );
};

{'fraction_non_alphanumeric': 0.17434775816278705, 'fraction_numerical': 0.009061084205592877, 'mean_word_length': 2.4144, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 117, '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': '3137438', 'n_tokens_mistral': 2189, 'n_tokens_neox': 2134, 'n_words': 402}