src/views/workflow-panel/workflow-graph.tsx

   1 import * as React from 'react';
   2 import { WorkflowResource } from "~/models/workflow";
   3 import { WorkflowFactory } from "cwlts/models";
   4 import * as yaml from 'js-yaml';
   5 import "~/lib/cwl-svg/assets/styles/themes/rabix-dark/theme.css";
   6 import "~/lib/cwl-svg/plugins/port-drag/theme.dark.css";
   7 import "~/lib/cwl-svg/plugins/selection/theme.dark.css";
   8 import {
   9     SelectionPlugin,
  10     SVGArrangePlugin,
  11     SVGEdgeHoverPlugin,
  12     SVGNodeMovePlugin,
  13     SVGPortDragPlugin, Workflow,
  14     ZoomPlugin
  15 } from "~/lib/cwl-svg";
  16
  17 interface WorkflowGraphProps {
  18     workflow: WorkflowResource;
  19 }
  20 export class WorkflowGraph extends React.Component<WorkflowGraphProps, {}> {
  21     private svgRoot: React.RefObject<SVGSVGElement> = React.createRef();
  22
  23     componentDidMount(): void {
  24         const graphs = yaml.safeLoad(this.props.workflow.definition, { json: true });
  25
  26         let workflowGraph = graphs;
  27         if (graphs.$graph) {
  28           workflowGraph = graphs.$graph.find((g: any) => g.class === 'Workflow');
  29         }
  30
  31         const model = WorkflowFactory.from(workflowGraph);
  32
  33         const workflow = new Workflow({
  34             model,
  35             svgRoot: this.svgRoot.current!,
  36             plugins: [
  37                 new SVGArrangePlugin(),
  38                 new SVGEdgeHoverPlugin(),
  39                 new SVGNodeMovePlugin({
  40                     movementSpeed: 10
  41                 }),
  42                 new SVGPortDragPlugin(),
  43                 new SelectionPlugin(),
  44                 new ZoomPlugin(),
  45             ]
  46         });
  47         workflow.draw();
  48     }
  49
  50     render() {
  51         return <svg
  52             ref={this.svgRoot}
  53             className="cwl-workflow"
  54             style={{
  55                 width: '100%',
  56                 height: '100%'
  57             }}
  58         />;
  59     }
  60 }