InputsForm.tsx

"use strict";

import * as yup from "yup";
import * as React from "react";
import { FormikProps } from "formik";

import {
  MetaParameters,
  MajorSection,
  LoadingElement,
  SectionHeaderList,
  ErrorCard
} from "./components";
import { ValidatingModal, RunModal, AuthModal, PreviewModal } from "./modal";
import { AccessStatus, Sects, InitialValues, Inputs, InputsDetail, Simulation } from "../types";
import API from "./API";

// need to require schema in model_parameters!
export const tbLabelSchema = yup.object().shape({
  year: yup.number(),
  MARS: yup.string(),
  idedtype: yup.string(),
  EIC: yup.string(),
  data_source: yup.string(),
  use_full_sample: yup.bool()
});

interface InputsFormProps {
  api: API;
  readOnly: boolean;
  accessStatus: AccessStatus;
  resetAccessStatus: () => void;
  setNotifyOnCompletion: (notify: boolean) => void;
  notifyOnCompletion: boolean;
  inputs: Inputs;
  defaultURL: string;
  simStatus: Simulation<any>["status"];

  resetInitialValues: (metaParameters: InputsDetail["meta_parameters"]) => void;
  resetting: boolean;

  formikProps: FormikProps<InitialValues>;
}

interface InputsProps {
  initialValues?: InitialValues;
  sects?: Sects;
  schema?: {
    adjustment: yup.Schema<any>;
    meta_parameters: yup.Schema<any>;
  };
  extend?: boolean;
  unknownParams?: Array<string>;
  initialServerErrors?: { [msect: string]: { errors: { [paramName: string]: any } } };
}

const InputsForm: React.FC<InputsFormProps & InputsProps> = props => {
  const [showModal, setShowModal] = React.useState(false);

  if (!props.inputs || props.resetting) {
    return <LoadingElement />;
  }
  let {
    accessStatus,
    setNotifyOnCompletion,
    notifyOnCompletion,
    inputs,
    resetInitialValues,
    schema,
    sects,
    extend,
    unknownParams,
    readOnly,
    simStatus
  } = props;
  let { meta_parameters, model_parameters, label_to_extend } = inputs;

  let hasUnknownParams = unknownParams.length > 0;
  let unknownParamsErrors: { [sect: string]: { errors: any } } = {
    "Unknown Parameters": { errors: {} }
  };
  if (hasUnknownParams) {
    for (const param of unknownParams) {
      unknownParamsErrors["Unknown Parameters"].errors[param] = "This parameter is no longer used.";
    }
  }

  let { isSubmitting, values, touched, handleSubmit, status } = props.formikProps;
  return (
    <div>
      {isSubmitting ? <ValidatingModal /> : <div />}
      {status && status.auth ? <AuthModal /> : <div />}
      <div className="row">
        <div className="col-sm-4">
          <ul className="list-unstyled components sticky-top scroll-y">
            <li>
              <MetaParameters
                meta_parameters={meta_parameters}
                values={values.meta_parameters}
                touched={touched}
                resetInitialValues={resetInitialValues}
                readOnly={props.readOnly}
              />
            </li>
            <li>
              <PreviewModal
                values={values}
                schema={yup.object().shape({
                  adjustment: schema.adjustment,
                  meta_parameters: schema.meta_parameters
                })}
                tbLabelSchema={tbLabelSchema}
                model_parameters={model_parameters}
                label_to_extend="year" // hard code until paramtools schema enforced
                extend={extend}
              />
            </li>
            <li>
              <SectionHeaderList sects={sects} />
            </li>
            <li>
              <RunModal
                action={simStatus === "STARTED" ? "Run" : "Fork and Run"}
                handleSubmit={handleSubmit}
                accessStatus={accessStatus}
                showModal={showModal}
                setShowModal={setShowModal}
                resetAccessStatus={props.resetAccessStatus}
                notify={notifyOnCompletion}
                setNotify={setNotifyOnCompletion}
              />
            </li>
          </ul>
        </div>
        <div className="col-sm-8">
          {status && status.status === "INVALID" && status.serverErrors ? (
            <ErrorCard
              errorMsg={
                <p>
                  Some fields have errors. These must be fixed before the simulation can be
                  submitted. You may re-visit this page a later time by entering the following link:{" "}
                  <a href={inputs.detail.gui_url}>{inputs.detail.gui_url}</a>
                </p>
              }
              errors={status.serverErrors}
              model_parameters={model_parameters}
            />
          ) : (
            <div />
          )}

          {hasUnknownParams ? (
            <ErrorCard
              errorMsg={
                <p>
                  {"One or more parameters have been renamed or " +
                    "removed since this simulation was run on " +
                    `${inputs.detail.sim.creation_date} with version ${inputs.detail.sim.model_version}. You may view the full simulation detail `}
                  <a href={inputs.detail.sim.api_url}>here.</a>
                </p>
              }
              errors={unknownParamsErrors}
              model_parameters={{}}
            />
          ) : (
            <div />
          )}

          {Object.entries(sects).map((msect_item, ix) => {
            // msect --> section_1: dict(dict) --> section_2: dict(dict)
            let msect = msect_item[0];
            let section_1_dict = msect_item[1];
            return (
              <MajorSection
                key={msect}
                msect={msect}
                section_1_dict={section_1_dict}
                meta_parameters={meta_parameters}
                model_parameters={model_parameters}
                values={values}
                extend={extend}
                readOnly={readOnly}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

const InputsMemoed = React.memo(InputsForm, (prevProps, nextProps) => {
  return (
    prevProps.simStatus === nextProps.simStatus &&
    prevProps.accessStatus === nextProps.accessStatus &&
    prevProps.formikProps === nextProps.formikProps
  );
});
export default InputsMemoed;