https://github.com/rabix/cwl-svg
A library for generating an interactive SVG visualization of CWL workflows
https://github.com/rabix/cwl-svg
bioinformatics cwl svg visualization workflow
Last synced: about 2 months ago
JSON representation
A library for generating an interactive SVG visualization of CWL workflows
- Host: GitHub
- URL: https://github.com/rabix/cwl-svg
- Owner: rabix
- License: apache-2.0
- Created: 2017-02-23T13:48:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-08-15T09:48:36.000Z (over 1 year ago)
- Last Synced: 2025-09-13T00:08:37.672Z (6 months ago)
- Topics: bioinformatics, cwl, svg, visualization, workflow
- Language: TypeScript
- Size: 10.9 MB
- Stars: 79
- Watchers: 9
- Forks: 18
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# CWL-SVG
[](https://circleci.com/gh/rabix/cwl-svg)
[](https://www.npmjs.com/package/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
#svg {
width: 100%;
height: 100%;
position: absolute;
}
```
```typescript
// 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
### Selection
### Movement
### Connection
