|
| 1 | +<!-- |
| 2 | + ~ Copyright (c) 2013-2017, Centre for Genomic Regulation (CRG). |
| 3 | + ~ Copyright (c) 2013-2017, Paolo Di Tommaso and the respective authors. |
| 4 | + ~ |
| 5 | + ~ This file is part of 'Nextflow'. |
| 6 | + ~ |
| 7 | + ~ Nextflow is free software: you can redistribute it and/or modify |
| 8 | + ~ it under the terms of the GNU General Public License as published by |
| 9 | + ~ the Free Software Foundation, either version 3 of the License, or |
| 10 | + ~ (at your option) any later version. |
| 11 | + ~ |
| 12 | + ~ Nextflow is distributed in the hope that it will be useful, |
| 13 | + ~ but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 14 | + ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 15 | + ~ GNU General Public License for more details. |
| 16 | + ~ |
| 17 | + ~ You should have received a copy of the GNU General Public License |
| 18 | + ~ along with Nextflow. If not, see <http://www.gnu.org/licenses/>. |
| 19 | + --> |
| 20 | + |
| 21 | +<html> |
| 22 | + |
| 23 | + <head> |
| 24 | + <title>Nextflow Cytoscape.js with Dagre</title> |
| 25 | + |
| 26 | + <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> |
| 27 | + |
| 28 | + <script type="text/javascript"> |
| 29 | + var prot = (("https:" == document.location.protocol) ? "https://" : "http://"); |
| 30 | + document.write(unescape("%3Cscript src='" + prot + "code.jquery.com/jquery-2.0.3.min.js' type='text/javascript' %3E%3C/script%3E")); |
| 31 | + document.write(unescape("%3Cscript src='" + prot + "cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.12/cytoscape.min.js' type='text/javascript' %3E%3C/script%3E")); |
| 32 | + document.write(unescape("%3Cscript src='" + prot + "cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js' type='text/javascript' %3E%3C/script%3E")); |
| 33 | + document.write(unescape("%3Cscript src='" + prot + "cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js' type='text/javascript' %3E%3C/script%3E")); |
| 34 | + </script> |
| 35 | + |
| 36 | + <style> |
| 37 | + body { |
| 38 | + font-family: helvetica; |
| 39 | + font-size: 14px; |
| 40 | + } |
| 41 | + |
| 42 | + #cy { |
| 43 | + width: 100%; |
| 44 | + height: 100%; |
| 45 | + position: absolute; |
| 46 | + left: 0; |
| 47 | + top: 0; |
| 48 | + z-index: 999; |
| 49 | + } |
| 50 | + |
| 51 | + h1 { |
| 52 | + opacity: 0.5; |
| 53 | + font-size: 1em; |
| 54 | + } |
| 55 | + </style> |
| 56 | + |
| 57 | + <script> |
| 58 | + $(function(){ |
| 59 | + var cy = window.cy = cytoscape({ |
| 60 | + container: document.getElementById('cy'), |
| 61 | + boxSelectionEnabled: false, |
| 62 | + autounselectify: true, |
| 63 | + |
| 64 | + layout: { |
| 65 | + name: 'dagre' |
| 66 | + }, |
| 67 | + |
| 68 | + style: cytoscape.stylesheet() |
| 69 | + .selector( 'node') |
| 70 | + .css({ |
| 71 | + 'width': 10, |
| 72 | + 'height': 10, |
| 73 | + 'content': 'data(label)', |
| 74 | + 'text-valign': 'center', |
| 75 | + 'text-halign': 'center', |
| 76 | + 'text-opacity': 0.5, |
| 77 | + }) |
| 78 | + .selector('node.PROCESS') |
| 79 | + .css({ |
| 80 | + 'width': 100, |
| 81 | + 'height': 50, |
| 82 | + 'text-opacity': 0.9, |
| 83 | + 'background-color': '#009911' |
| 84 | + }) |
| 85 | + .selector('node.OPERATOR') |
| 86 | + .css({ |
| 87 | + 'background-color': '#11479e', |
| 88 | + 'text-halign': 'right', |
| 89 | + }) |
| 90 | + .selector('node.ORIGIN') |
| 91 | + .css({ |
| 92 | + 'background-color': '#999999', |
| 93 | + 'text-halign': 'right', |
| 94 | + }) |
| 95 | + .selector('node.TERMINATION') |
| 96 | + .css({ |
| 97 | + 'background-color': '#999999', |
| 98 | + 'text-halign': 'right', |
| 99 | + }) |
| 100 | + .selector('edge') |
| 101 | + .css({ |
| 102 | + 'content': 'data(label)', |
| 103 | + 'text-opacity': 0.5, |
| 104 | + 'width': 4, |
| 105 | + 'target-arrow-shape': 'triangle', |
| 106 | + 'line-color': '#9dbaea', |
| 107 | + 'target-arrow-color': '#9dbaea' |
| 108 | + }), |
| 109 | + |
| 110 | +elements: { |
| 111 | +nodes: [ |
| 112 | +{ data: { id: 'p0', label: 'Channel.fromPath'}, classes: 'ORIGIN' }, |
| 113 | +{ data: { id: 'p1', label: 'ifEmpty'}, classes: 'OPERATOR' }, |
| 114 | +{ data: { id: 'p2', label: 'map'}, classes: 'OPERATOR' }, |
| 115 | +{ data: { id: 'p3', label: 'Channel.fromPath'}, classes: 'ORIGIN' }, |
| 116 | +{ data: { id: 'p4', label: 'ifEmpty'}, classes: 'OPERATOR' }, |
| 117 | +{ data: { id: 'p5', label: 'map'}, classes: 'OPERATOR' }, |
| 118 | +{ data: { id: 'p6', label: 'phase'}, classes: 'OPERATOR' }, |
| 119 | +{ data: { id: 'p7', label: 'map'}, classes: 'OPERATOR' }, |
| 120 | +{ data: { id: 'p8', label: 'Channel.fromPath'}, classes: 'ORIGIN' }, |
| 121 | +{ data: { id: 'p9', label: 'ifEmpty'}, classes: 'OPERATOR' }, |
| 122 | +{ data: { id: 'p10', label: 'map'}, classes: 'OPERATOR' }, |
| 123 | +{ data: { id: 'p11', label: 'Channel.fromPath'}, classes: 'ORIGIN' }, |
| 124 | +{ data: { id: 'p12', label: 'ifEmpty'}, classes: 'OPERATOR' }, |
| 125 | +{ data: { id: 'p13', label: 'map'}, classes: 'OPERATOR' }, |
| 126 | +{ data: { id: 'p14', label: 'phase'}, classes: 'OPERATOR' }, |
| 127 | +{ data: { id: 'p15', label: 'map'}, classes: 'OPERATOR' }, |
| 128 | +{ data: { id: 'p16', label: 'phase'}, classes: 'OPERATOR' }, |
| 129 | +{ data: { id: 'p17', label: 'map'}, classes: 'OPERATOR' }, |
| 130 | +{ data: { id: 'p18', label: 'bed'}, classes: 'PROCESS' }, |
| 131 | +{ data: { id: 'p19', label: 'split_bed'}, classes: 'PROCESS' }, |
| 132 | +{ data: { id: 'p20', label: 'spread'}, classes: 'OPERATOR' }, |
| 133 | +{ data: { id: 'p21'}, classes: 'ORIGIN' }, |
| 134 | +{ data: { id: 'p22'}, classes: 'ORIGIN' }, |
| 135 | +{ data: { id: 'p23'}, classes: 'ORIGIN' }, |
| 136 | +{ data: { id: 'p24'}, classes: 'ORIGIN' }, |
| 137 | +{ data: { id: 'p25'}, classes: 'ORIGIN' }, |
| 138 | +{ data: { id: 'p26'}, classes: 'ORIGIN' }, |
| 139 | +{ data: { id: 'p27'}, classes: 'ORIGIN' }, |
| 140 | +{ data: { id: 'p28', label: 'mutect'}, classes: 'PROCESS' }, |
| 141 | +{ data: { id: 'p29', label: 'count'}, classes: 'OPERATOR' }, |
| 142 | +{ data: { id: 'p30'}, classes: 'NODE' }, |
| 143 | +{ data: { id: 'p31', label: 'groupTuple'}, classes: 'OPERATOR' }, |
| 144 | +{ data: { id: 'p32', label: 'groupTuple'}, classes: 'OPERATOR' }, |
| 145 | +{ data: { id: 'p33', label: 'mergeMuTectOutputs'}, classes: 'PROCESS' }, |
| 146 | +{ data: { id: 'p34'}, classes: 'NODE' }, |
| 147 | +{ data: { id: 'p35'}, classes: 'NODE' }, |
| 148 | +], |
| 149 | +edges: [ |
| 150 | +{ data: { source: 'p0', target: 'p1'} }, |
| 151 | +{ data: { source: 'p1', target: 'p2'} }, |
| 152 | +{ data: { source: 'p2', target: 'p6', label: 'tumor_bams' } }, |
| 153 | +{ data: { source: 'p3', target: 'p4'} }, |
| 154 | +{ data: { source: 'p4', target: 'p5'} }, |
| 155 | +{ data: { source: 'p5', target: 'p6', label: 'tumor_bais' } }, |
| 156 | +{ data: { source: 'p6', target: 'p7'} }, |
| 157 | +{ data: { source: 'p7', target: 'p16', label: 'tumor_bam_bai' } }, |
| 158 | +{ data: { source: 'p8', target: 'p9'} }, |
| 159 | +{ data: { source: 'p9', target: 'p10'} }, |
| 160 | +{ data: { source: 'p10', target: 'p14', label: 'normal_bams' } }, |
| 161 | +{ data: { source: 'p11', target: 'p12'} }, |
| 162 | +{ data: { source: 'p12', target: 'p13'} }, |
| 163 | +{ data: { source: 'p13', target: 'p14', label: 'normal_bais' } }, |
| 164 | +{ data: { source: 'p14', target: 'p15'} }, |
| 165 | +{ data: { source: 'p15', target: 'p16', label: 'normal_bam_bai' } }, |
| 166 | +{ data: { source: 'p16', target: 'p17'} }, |
| 167 | +{ data: { source: 'p17', target: 'p20', label: 'tn_bambai' } }, |
| 168 | +{ data: { source: 'p18', target: 'p19', label: 'outbed' } }, |
| 169 | +{ data: { source: 'p19', target: 'p20', label: 'split_bed' } }, |
| 170 | +{ data: { source: 'p19', target: 'p29', label: 'count_split_bed' } }, |
| 171 | +{ data: { source: 'p20', target: 'p28'} }, |
| 172 | +{ data: { source: 'p21', target: 'p28', label: 'mutect_version' } }, |
| 173 | +{ data: { source: 'p22', target: 'p28', label: 'dbsnp_option' } }, |
| 174 | +{ data: { source: 'p23', target: 'p28', label: 'cosmic_option' } }, |
| 175 | +{ data: { source: 'p24', target: 'p28', label: 'fasta_ref' } }, |
| 176 | +{ data: { source: 'p25', target: 'p28', label: 'fasta_ref_fai' } }, |
| 177 | +{ data: { source: 'p26', target: 'p28', label: 'fasta_ref_gzi' } }, |
| 178 | +{ data: { source: 'p27', target: 'p28', label: 'fasta_ref_dict' } }, |
| 179 | +{ data: { source: 'p28', target: 'p31', label: 'mutect_output1' } }, |
| 180 | +{ data: { source: 'p28', target: 'p32', label: 'mutect_output2' } }, |
| 181 | +{ data: { source: 'p29', target: 'p30'} }, |
| 182 | +{ data: { source: 'p31', target: 'p33'} }, |
| 183 | +{ data: { source: 'p32', target: 'p33'} }, |
| 184 | +{ data: { source: 'p33', target: 'p35', label: 'res1' } }, |
| 185 | +{ data: { source: 'p33', target: 'p34', label: 'res2' } }, |
| 186 | +], |
| 187 | +}, |
| 188 | + |
| 189 | + }); |
| 190 | + |
| 191 | + }); |
| 192 | + </script> |
| 193 | + </head> |
| 194 | + |
| 195 | + <body> |
| 196 | + <h1>Nextflow Cytoscape.js with Dagre</h1> |
| 197 | + <div id="cy"></div> |
| 198 | + </body> |
| 199 | + |
| 200 | +</html> |
0 commit comments