cwl-svg
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.10 • Public • Published

    CWL-SVG

    Build Status

    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

    Keywords

    none

    Install

    npm i cwl-svg

    DownloadsWeekly Downloads

    309

    Version

    2.1.10

    License

    Apache-2.0

    Unpacked Size

    8.93 MB

    Total Files

    200

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar