X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/59100a72caedbc8f3c9872de1153bf3d4129122a..cc9e1b294ee50dbb25d68e89538ac1a7a3643396:/src/views/workflow-panel/workflow-graph.tsx diff --git a/src/views/workflow-panel/workflow-graph.tsx b/src/views/workflow-panel/workflow-graph.tsx index de290328..3f4aac2b 100644 --- a/src/views/workflow-panel/workflow-graph.tsx +++ b/src/views/workflow-panel/workflow-graph.tsx @@ -1,10 +1,14 @@ -import * as React from 'react'; -import { WorkflowResource } from "~/models/workflow"; +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import React from 'react'; +import { WorkflowResource } from "models/workflow"; import { WorkflowFactory } from "cwlts/models"; import * as yaml from 'js-yaml'; -import "~/lib/cwl-svg/assets/styles/themes/rabix-dark/theme.css"; -import "~/lib/cwl-svg/plugins/port-drag/theme.dark.css"; -import "~/lib/cwl-svg/plugins/selection/theme.dark.css"; +import "lib/cwl-svg/assets/styles/themes/rabix-dark/theme.css"; +import "lib/cwl-svg/plugins/port-drag/theme.dark.css"; +import "lib/cwl-svg/plugins/selection/theme.dark.css"; import { SelectionPlugin, SVGArrangePlugin, @@ -12,7 +16,7 @@ import { SVGNodeMovePlugin, SVGPortDragPlugin, Workflow, ZoomPlugin -} from "~/lib/cwl-svg"; +} from "lib/cwl-svg"; interface WorkflowGraphProps { workflow: WorkflowResource; @@ -20,7 +24,7 @@ interface WorkflowGraphProps { export class WorkflowGraph extends React.Component { private svgRoot: React.RefObject = React.createRef(); - componentDidMount(): void { + setGraph() { const graphs = yaml.safeLoad(this.props.workflow.definition, { json: true }); let workflowGraph = graphs; @@ -37,7 +41,7 @@ export class WorkflowGraph extends React.Component { new SVGArrangePlugin(), new SVGEdgeHoverPlugin(), new SVGNodeMovePlugin({ - movementSpeed: 10 + movementSpeed: 2 }), new SVGPortDragPlugin(), new SelectionPlugin(), @@ -47,6 +51,14 @@ export class WorkflowGraph extends React.Component { workflow.draw(); } + componentDidMount() { + this.setGraph(); + } + + componentDidUpdate() { + this.setGraph(); + } + render() { return