Needlessly Postulating Minds
Miss any of our Open RFC calls?Watch the recordings here! »

cwl-svg

2.1.6 • Public • Published

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

Keywords

none

Install

npm i cwl-svg

DownloadsWeekly Downloads

457

Version

2.1.6

License

Apache-2.0

Unpacked Size

8.93 MB

Total Files

199

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar