pipeline-builder-demo/src/app/right-editor/code-editor/code-editor.component.ts

Pipeline Builder

import { Component, OnInit } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as Pipeline from 'pipeline-builder';

import {PipelineDataService} from '../../pipeline-data.service';


@Component({
  selector: 'pb-code-editor',
  templateUrl: 'code-editor.component.html',
  styleUrls: ['code-editor.component.scss']
})
export class CodeEditorComponent implements OnInit {
  codeText: string;
  wasRunned: boolean;
  errors: string[];
  editorCodeOptions: any;
  private diagram: Pipeline.IVisualizer;

  constructor(private _pipelineDataService: PipelineDataService) {
    this.wasRunned = false;
  }

  ngOnInit() {
    this.editorCodeOptions = {
      lineWrapping: false,
      lineNumbers: true,
      mode: 'wdlmode',
      matchBrackets: true,
      theme: 'icecoder'
    };
    this.diagram = this._pipelineDataService.getDiagram();
    this.updateCode();
  }

  updateCode = () => {
    this.codeText = this._pipelineDataService.workflow ? Pipeline.generate(this._pipelineDataService.workflow): '';
  };

  downloadWdlFile = () => {
    let blob = new Blob([this.codeText]);
    FileSaver.saveAs(blob, `wdl-src${Date.now()}.wdl`);
  };

  callApi = () => {
    let parseResult = Pipeline.parse(this.codeText);

    if(parseResult.status) {
      this._pipelineDataService.workflow = parseResult.model[0];
      this.diagram.attachTo(this._pipelineDataService.workflow);
      this.errors = [];
    } else {
      this.errors = [parseResult.message];
    }
    this.wasRunned = true;
  };

}