cwl-svg

A library for generating an interactive SVG visualization of CWL workflows

2.1.8
Source
npm

Version published: 4 years ago

Weekly downloads: 235; decreased by-50.73%

Maintainers: 5

Weekly downloads

Created: 8 years ago

Source

CWL-SVG

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

Connection

Connecting Nodesd

FAQs

What is cwl-svg?

Is cwl-svg popular?

Is cwl-svg well maintained?

Package last updated on 05 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install