refs #14463 Merge branch 'origin/14463-graph-tab-content'
[arvados-workbench2.git] / 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     setGraph() {
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: 2
41                 }),
42                 new SVGPortDragPlugin(),
43                 new SelectionPlugin(),
44                 new ZoomPlugin(),
45             ]
46         });
47         workflow.draw();
48     }
49
50     componentDidMount() {
51         this.setGraph();
52     }
53
54     componentDidUpdate() {
55         this.setGraph();
56     }
57
58     render() {
59         return <svg
60             ref={this.svgRoot}
61             className="cwl-workflow"
62             style={{
63                 width: '100%',
64                 height: '100%'
65             }}
66         />;
67     }
68 }