wba/frontend/src/js/page/wb-launch-workflow-page.js

import { h, Component, createRef } from 'preact';
import WBNavbarCommon from 'wb-navbar-common';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import WBToolboxDialog from 'wb-toolbox-dialog';
import WBBrowseDialog from 'wb-browse-dialog';
import makeArvadosRequest from 'make-arvados-request';
import linkState from 'linkstate';

function createInputsTemplate(workflow) {
  const g = JSON.parse(workflow.definition)['$graph'];
  const main = g.find(it => (it.id === '#main'));
  let res = '';
  main.inputs.map(it => {
    let id = it.id.split('/');
    id = id[id.length - 1];
    if (it.label) res += '    // ' + it.label + '\n';
    if (it.doc) res += '    // ' + it.doc + '\n';
    res += '    // Type: ' + ((typeof(it.type) === 'string') ?
      it.type : JSON.stringify(it.type)) + '\n\n';
    res += '    \'' + id + '\': \'\',\n\n';
    //res += '    // ' + ' '.repeat(id.length) + '^^^^\n\n';
  });
  /* let res = main.inputs.map(it => { it.value = null; return it; });
  res = JSON.stringify(res, null, 2);
  res = res.split('\n');
  res = res.map((ln, i) => (i == 0 ? ln : '  ' + ln));
  res = res.join('\n'); */
  return res;
}

function uuidsToCwlObjects(spec) {
  if (typeof(spec) === 'string') {
    if (/^[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}/.exec(spec)) {
      return {
        'class': 'Directory',
        'location': 'keep:' + spec
      };
    } else if (/^[a-f0-9]{32}\+[0-9]+/.exec(spec)) {
      return {
        'class': 'Directory',
        'location': 'keep:' + spec
      };
    } else {
      return spec;
    }
  } else if (typeof(spec) === 'object') {
    const res = (spec instanceof Array) ? [] : {};
    Object.keys(spec).map(k => (res[k] = uuidsToCwlObjects(spec[k])));
    return res;

  } else {
    return spec;
  }
}

class WBLaunchWorkflowPage extends Component {
  constructor(...args) {
    super(...args);
    this.state.browseDialogId = uuid.v4();
    this.state.insertDialogId = uuid.v4();
    this.state.insertManyDialogId = uuid.v4();
    this.state.realBrowseDialogId = uuid.v4();
    this.inputsTextArea = createRef();
  }

  componentDidMount() {
    let { app, workflowUuid } = this.props;
    let { arvHost, arvToken } = app.state;

    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/workflows/' + workflowUuid);
    prom = prom.then(xhr => this.setState({
      'workflow': xhr.response,
      'defaultProcessName': xhr.response.name + ' ' + (new Date().toISOString()),
      'defaultProcessDescription': xhr.response.description,
      'inputsFunctionText': '(() => {\n  return {\n' +
        createInputsTemplate(xhr.response) +
        '  };\n})()'
    }));
  }

  render({ app, workflowUuid },
    { workflow, projectUuid, processName, processDescription,
    defaultProcessName, defaultProcessDescription,
    inputsFunctionText, browseDialogId,
    insertDialogId, insertManyDialogId,
    realBrowseDialogId, inputsPreview }) {

    return (
      <div>
        <WBNavbarCommon app={ app } />

        <WBToolboxDialog app={ app } id={ browseDialogId }
          items={ app.state.toolboxItems } onAccepted={ value =>
            this.setState({ 'projectUuid': value }) } />

        <WBToolboxDialog app={ app } id={ insertDialogId }
          items={ app.state.toolboxItems }
          onAccepted={ value => {
            const t = this.inputsTextArea.current;
            const start = t.selectionStart;
            const end = t.selectionEnd;
            this.setState({
              'inputsFunctionText': t.value.substr(0, start) + value +
                t.value.substr(end)
            });
          } } />

        <WBToolboxDialog app={ app } id={ insertManyDialogId }
          items={ app.state.toolboxItems } selectMany={ true }
          onAccepted={ values => alert(values) } />

        <WBBrowseDialog app={ app } id={ realBrowseDialogId } />

        { workflow ?
          (<form class="container-fluid">
            <h1>Launch Workflow</h1>

            <div class="form-group">
              <label>Workflow</label>
              <WBArvadosCrumbs app={ app } uuid={ workflowUuid } />
            </div>

            <div class="form-group">
              <label for="projectUuid">Project UUID</label>

              <div>
                { projectUuid ? (
                  <WBArvadosCrumbs app={ app } uuid={ projectUuid } />
                ) : null }

                <div class="input-group mb-3">
                  <input type="text" class="form-control" id="projectUuid"
                    placeholder="Enter Project UUID" aria-label="Project UUID"
                    aria-describedby="button-addon2" value={ projectUuid }
                    onChange={ linkState(this, 'projectUuid') } />
                  <div class="input-group-append">
                    <button class="btn btn-primary" type="button"
                      id="button-addon2" onclick={ e => { e.preventDefault();
                        $('#' + browseDialogId).modal(); } }>Browse</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="createSubproject" />
              <label class="form-check-label" for="createSubproject">Create subproject</label>
            </div>

            <div class="form-group">
              <label for="processName">Process Name</label>
              <input type="text" class="form-control" id="processName"
                placeholder={ defaultProcessName } value={ processName }
                onChange={ linkState(this, 'processName') }/>
            </div>

            <div class="form-group">
              <label for="processDescription">Process Description</label>
              <input type="text" class="form-control" id="processDescription"
                placeholder={ defaultProcessDescription } value={ processDescription }
                onChange={ linkState(this, 'processDescription') } />
            </div>

            <div class="form-group">
              <label for="inputs">Inputs</label>
              <div>
                <div class="mb-2">
                  <button class="btn btn-primary mr-2" onclick={ e => {
                    e.preventDefault();
                    $('#' + insertDialogId).modal();
                  } }>Insert</button>

                  <button class="btn btn-primary mr-2" onclick={ e => {
                    e.preventDefault();
                    $('#' + insertManyDialogId).modal();
                  } }>Insert Many</button>

                  <button class="btn btn-primary mr-2" onclick={ e => {
                    e.preventDefault();
                    $('#' + realBrowseDialogId).modal();
                  } }>Insert Browse</button>
                </div>

                <textarea class="form-control" ref={ this.inputsTextArea } id="inputs"
                  style="font-family: monospace;" rows="20"
                  value={ inputsFunctionText }
                  onChange={ linkState(this, 'inputsFunctionText') }></textarea>

                <div class="my-2">
                  <button class="btn btn-primary" onclick={ e => {
                    e.preventDefault();
                    try {
                      let inputsVal = eval(inputsFunctionText);
                      inputsVal = uuidsToCwlObjects(inputsVal);
                      this.setState({ 'inputsPreview': JSON.stringify(inputsVal, null, 2) });
                    } catch (exc) {
                      this.setState({ 'inputsPreview': exc });
                    }
                  } }>Preview</button>
                </div>

                <textarea class="form-control" readonly="readonly"
                  style="font-family: monospace;" rows="10"
                  value={ inputsPreview }></textarea>
              </div>

            </div>
          </form>) : <div>Loading...</div> }
      </div>
    );
  }
}

export default WBLaunchWorkflowPage;