<commit_before>import React from "react";
import Form from "antd/es/form";
import { Button, Col, Row, Select } from "antd";
import { IconEdit } from "../../components/icons/Icons";
import ParametersModal from "./components/ParametersModal";
import { useLaunchDispatch, useLaunchState } from "./launch-context";

export function SavedParameters({ form }) {
  const { savedPipelineParameters, parameterSet } = useLaunchState();
  const { dispatchUseSavedParameterSet } = useLaunchDispatch();
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    form.setFieldsValue({ parameterSet: parameterSet.id });
  }, [form, parameterSet]);

  return (
    <>
      <Form.Item label={i18n("SavedParameters.title")}>
        <Row gutter={8}>
          <Col span={20}>
            <Form.Item name="parameterSet">
              <Select
                value={parameterSet.id}
                onChange={dispatchUseSavedParameterSet}
              >
                {savedPipelineParameters.map((set) => (
                  <Select.Option key={set.label} value={set.id}>
                    {set.label}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Button icon={<IconEdit />} onClick={() => setVisible(true)} />
          </Col>
        </Row>
      </Form.Item>
      <ParametersModal visible={visible} closeModal={() => setVisible(false)} />
    </>
  );<commit_msg>:construction: cleaned up spacing a little more on the saved parameters select<commit_after>import React from "react";
import Form from "antd/es/form";
import { Button, Select } from "antd";
import { IconEdit } from "../../components/icons/Icons";
import ParametersModal from "./components/ParametersModal";
import { useLaunchDispatch, useLaunchState } from "./launch-context";
import { SPACE_XS } from "../../styles/spacing";

export function SavedParameters({ form }) {
  const { savedPipelineParameters, parameterSet } = useLaunchState();
  const { dispatchUseSavedParameterSet } = useLaunchDispatch();
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    form.setFieldsValue({ parameterSet: parameterSet.id });
  }, [form, parameterSet]);

  return (
    <>
      <Form.Item label={i18n("SavedParameters.title")}>
        <div style={{ display: "flex" }}>
          <div style={{ flexGrow: 1, marginRight: SPACE_XS }}>
            <Form.Item name="parameterSet">
              <Select
                value={parameterSet.id}
                onChange={dispatchUseSavedParameterSet}
              >
                {savedPipelineParameters.map((set) => (
                  <Select.Option key={set.label} value={set.id}>
                    {set.label}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </div>
          <div>
            <Button icon={<IconEdit />} onClick={() => setVisible(true)} />
          </div>
        </div>
      </Form.Item>
      <ParametersModal visible={visible} closeModal={() => setVisible(false)} />
    </>
  );
{'fraction_non_alphanumeric': 0.15004778591908252, 'fraction_numerical': 0.002867155144950621, 'mean_word_length': 2.3192389006342493, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, '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': '5999018', 'n_tokens_mistral': 861, 'n_tokens_neox': 843, 'n_words': 184}