Skip to content
A library for generating an interactive SVG visualization of CWL workflows
Branch: master
Clone or download
Latest commit dc74b89 Apr 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cwl-samples Updated demo and publish script. Mar 1, 2017
docs/images Updated docs with more gifs, version bump Apr 19, 2017
src Adding missing closing box bracket that causes issues in some browsers Apr 9, 2019
.DS_Store Merge master into drag-scroll Apr 28, 2017
.gitignore prepare for v1.0.0 Nov 9, 2017
.npmignore add npmignore Dec 22, 2017
.travis.yml turn off travis email notifications Feb 5, 2018
CONTRIBUTING.md Create CONTRIBUTING.md Jun 4, 2018
LICENSE Initial commit Feb 12, 2017
README.md add travis status to readme Feb 5, 2018
cwl-svg.iml do execution properly Nov 7, 2017
index.html
index.ts export svg dumper properly Apr 19, 2018
package-lock.json 2.1.1 Apr 19, 2018
package.json Bump version 2.1.4 Apr 9, 2019
protractor.config.js add more tests and multitest build Oct 6, 2017
tsconfig.base.json add deletion plugin Oct 31, 2017
tsconfig.json integration with cottontail, wip Oct 12, 2017
tsconfig.test.json add test procedure Oct 5, 2017
webpack.config.js fix listener leaks and bugs Oct 17, 2017
yarn.lock change color of faded nodes Jan 9, 2018

README.md

CWL-SVG

Build Status

CWL-SVG is a Typescript library for visualization of Common Workflow Language workflows

Installation

npm install cwl-svg

Standalone Demo

git clone https://github.com/rabix/cwl-svg
cd cwl-svg
npm install
npm start
// Point browser to http://localhost:8080

Integration

<html>
<head>
    <style>
        #svg {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>

<body>

<!-- You need to add “cwl-workflow” class to the SVG root for cwl-svg rendering -->
<svg id="svg" class="cwl-workflow"></svg>

<!-- Add compiled scripts, however they get compiled -->
<script src="dist/bundle.js"></script>

</body>
</html>
// Content of src/demo.ts

// Dark theme
import "./assets/styles/themes/rabix-dark/theme";
import "./plugins/port-drag/theme.dark.scss";
import "./plugins/selection/theme.dark.scss";

// Light theme
// import "./assets/styles/theme";
// import "./plugins/port-drag/theme.scss";
// import "./plugins/selection/theme.scss";

import {WorkflowFactory}    from "cwlts/models";
import {Workflow}           from "./graph/workflow";
import {SVGArrangePlugin}   from "./plugins/arrange/arrange";
import {SVGNodeMovePlugin}  from "./plugins/node-move/node-move";
import {SVGPortDragPlugin}  from "./plugins/port-drag/port-drag";
import {SelectionPlugin}    from "./plugins/selection/selection";
import {SVGEdgeHoverPlugin} from "./plugins/edge-hover/edge-hover";
import {ZoomPlugin}         from "./plugins/zoom/zoom";

const sample = require(__dirname + "/../cwl-samples/rna-seq-alignment.json");

const wf = WorkflowFactory.from(sample);

const svgRoot = document.getElementById("svg") as any;

const workflow = new Workflow({
    model: wf,
    svgRoot: svgRoot,
    plugins: [
        new SVGArrangePlugin(),
        new SVGEdgeHoverPlugin(),
        new SVGNodeMovePlugin({
            movementSpeed: 10
        }),
        new SVGPortDragPlugin(),
        new SelectionPlugin(),
        new ZoomPlugin(),
    ]
});

// workflow.getPlugin(SVGArrangePlugin).arrange();
window["wf"] = workflow;

Preview

Overview

Arranged and scaled BCBio workflow

Selection

Selection and Highlighting

Movement

Movement

Connection

Connecting Nodesd

You can’t perform that action at this time.