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

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