Skip to content

rabix/cwl-svg

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 9, 2017 12:02
December 22, 2017 18:17
January 17, 2023 10:07
February 12, 2017 01:27
November 7, 2017 19:57
April 19, 2018 14:31
January 17, 2023 10:07
January 17, 2023 10:07
October 31, 2017 16:25
October 5, 2017 19:25
January 9, 2018 12:39

CWL-SVG

CircleCI npm version

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

Citation

CWL-SVG: an open-source workflow visualization library for the 
Common Workflow Language. Seven Bridges/Rabix (2017)  
Available from https://github.com/rabix/cwl-svg

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