flowviz/client/src/component/postTool/command.js

A framework which provides seamless integration with other phylogenetic tools and frameworks, while allowing workflow scheduling and execution, through the Apache Airflow workflow system.

import * as React from "react";
import SettingsAccordion from "./settingsAccordion";
import { Stack, TextField } from "@mui/material";
import TextFieldMultiInput from "./textFieldMultiInput";
import TextFieldWithTooltip from "../common/textFieldWithTooltip";

function Command({ data = {}, index = 0, onParentUpdate = () => {} }) {
  const command = data;
  const onGroupCommandsUpdate = onParentUpdate;

  const onPropUpdate = (event, prop) => {
    const value = event.target.value;
    let c = command;
    c[prop] = value;
    onGroupCommandsUpdate(index, c);
  };

  const onPropCollectionUpdate = (collection, prop) => {
    let c = command;
    c[prop] = collection;
    onGroupCommandsUpdate(index, c);
  };

  return (
    <SettingsAccordion>
      <Stack sx={{ m: 2 }}>
        <TextFieldWithTooltip
          id="commandName"
          name="commandName"
          label="Name"
          defaultValue={command.name}
          onChange={(event) => onPropUpdate(event, "name")}
          tooltip={"The name of the command"}
        />
        <TextFieldMultiInput
          name="invocation"
          label="Invocation"
          data={command.invocation}
          onParentUpdate={(collection) =>
            onPropCollectionUpdate(collection, "invocation")
          }
          tooltip={"The invocation of the command"}
        />
        <TextFieldMultiInput
          name="allowedValues"
          label="Values"
          data={command.values}
          onParentUpdate={(collection) =>
            onPropCollectionUpdate(collection, "values")
          }
          tooltip={"The allowed values which can proceed the command"}
        />
        <TextFieldMultiInput
          name="allowedCommands"
          label="Allowed sub-commands"
          data={command.subCommands}
          onParentUpdate={(collection) =>
            onPropCollectionUpdate(collection, "subCommands")
          }
          tooltip={
            "The allowed commands that can be invoked after this command"
          }
        />
        <TextFieldMultiInput
          name="allowedCommandSets"
          label="Allowed sub-command sets"
          data={command.subCommandSets}
          onParentUpdate={(collection) =>
            onPropCollectionUpdate(collection, "subCommandSets")
          }
          tooltip={
            "The allowed commands groups that can be invoked after this command"
          }
        />
      </Stack>
    </SettingsAccordion>
  );
}

export default Command;