Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
genotoul-bioinfo
jflow
Commits
0bca5597
Commit
0bca5597
authored
Sep 17, 2014
by
Philippe Bardou
Browse files
Graph...
parent
bfae822e
Changes
4
Expand all
Hide whitespace changes
Inline
Side-by-side
docs/example1.html
View file @
0bca5597
...
...
@@ -147,7 +147,7 @@
<script
src=
"../src/js/jquery.fileupload.js"
></script>
<script
src=
"../src/js/jquery.fileupload-process.js"
></script>
<script
src=
"../src/js/jquery.fileupload-validate.js"
></script>
<script
src=
'../src/js/cytoscape.
min.
js'
type=
'text/javascript'
></script>
<script
src=
'../src/js/cytoscape.js'
type=
'text/javascript'
></script>
<script
src=
'../src/js/jflow-activewf.js'
type=
'text/javascript'
></script>
<script
src=
'../src/js/jflow-availablewf.js'
type=
'text/javascript'
></script>
...
...
docs/img/grid.png
0 → 100644
View file @
0bca5597
202 Bytes
src/js/cytoscape.js
0 → 100644
View file @
0bca5597
This diff is collapsed.
Click to expand it.
src/js/jflow-wfstatus.js
View file @
0bca5597
...
...
@@ -44,10 +44,16 @@
components
:
new
Array
()
};
for
(
var
i
in
data
.
components
)
{
var
failed
=
parseInt
(((
parseInt
(
data
.
components
[
i
].
aborted
)
+
parseInt
(
data
.
components
[
i
].
failed
))
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
)),
var
failed
=
0
,
completed
=
0
,
running
=
0
,
waiting
=
0
;
if
(
parseInt
(
data
.
components
[
i
].
total
)
!=
0
)
{
failed
=
parseInt
(((
parseInt
(
data
.
components
[
i
].
aborted
)
+
parseInt
(
data
.
components
[
i
].
failed
))
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
)),
completed
=
parseInt
((
parseInt
(
data
.
components
[
i
].
completed
)
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
)),
running
=
parseInt
((
parseInt
(
data
.
components
[
i
].
running
)
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
)),
waiting
=
parseInt
((
parseInt
(
data
.
components
[
i
].
waiting
)
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
));
running
=
parseInt
((
parseInt
(
data
.
components
[
i
].
running
)
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
)),
waiting
=
parseInt
((
parseInt
(
data
.
components
[
i
].
waiting
)
*
100
)
/
parseInt
(
data
.
components
[
i
].
total
));
}
workflow
.
components
.
push
({
name
:
data
.
components
[
i
].
name
,
elapsed_time
:
data
.
components
[
i
].
elapsed_time
,
...
...
@@ -78,7 +84,7 @@
success
:
function
(
data
)
{
$this
.
$element
.
find
(
"
#wfstatus_error_panel
"
).
hide
();
if
(
data
!=
null
)
{
$this
.
$element
.
find
(
"
#wfstatus_error_msg
"
).
text
(
data
[
"
msg
"
].
join
(
"
<br/>
"
)
);
$this
.
$element
.
find
(
"
#wfstatus_error_msg
"
).
html
(
data
[
"
msg
"
].
join
(
'
<br/>
'
)
);
$this
.
$element
.
find
(
"
#wfstatus_error_location
"
).
text
(
data
[
"
location
"
]
);
$this
.
$element
.
find
(
"
#wfstatus_error_panel
"
).
show
();
}
...
...
@@ -90,6 +96,7 @@
if
(
this
.
options
.
forceUsingWorkflow
)
{
var
workflow
=
this
.
reformatWorkflowJSON
(
this
.
options
.
forceUsingWorkflow
);
this
.
$element
.
html
(
""
);
$
.
tmpl
(
this
.
options
.
headTemplate
,
{
workflow
:
workflow
}).
appendTo
(
this
.
$element
);
$
.
tmpl
(
this
.
options
.
listTemplate
,
{
workflow
:
workflow
}).
appendTo
(
this
.
$element
);
// force for first display, then reload an update
this
.
options
.
forceUsingWorkflow
=
null
;
...
...
@@ -123,6 +130,7 @@
success
:
function
(
data
)
{
var
workflow
=
$this
.
reformatWorkflowJSON
(
data
);
$this
.
$element
.
html
(
""
);
$
.
tmpl
(
$this
.
options
.
headTemplate
,
{
workflow
:
workflow
}).
appendTo
(
$this
.
$element
);
$
.
tmpl
(
$this
.
options
.
listTemplate
,
{
workflow
:
workflow
}).
appendTo
(
$this
.
$element
);
$this
.
errorMessage
();
$
(
"
[id^=component_]
"
).
hover
(
function
(){
...
...
@@ -170,47 +178,75 @@
$this
.
$element
.
html
(
alert_message
);
},
success
:
function
(
data
)
{
console
.
log
(
data
)
// prepare the container
$this
.
$element
.
html
(
""
);
$this
.
$element
.
height
(
500
);
//$this.$element.width(200);
var
workflow
=
$this
.
reformatWorkflowJSON
(
data
);
$this
.
$element
.
html
(
""
);
$
.
tmpl
(
$this
.
options
.
headTemplate
,
{
workflow
:
workflow
}).
appendTo
(
$this
.
$element
);
$
.
tmpl
(
$this
.
options
.
graphTemplate
,
{
workflow
:
workflow
}).
appendTo
(
$this
.
$element
);
// prepare the data
var
nodes
=
new
Array
(),
var
nodes
=
new
Array
(),
edges
=
new
Array
();
for
(
var
i
in
data
.
components
)
{
nodes
.
push
({
data
:
{
id
:
data
.
components
[
i
].
name
,
name
:
data
.
components
[
i
].
name
}
});
var
err
=
0
,
wai
=
workflow
.
components
[
i
].
waiting
,
run
=
workflow
.
components
[
i
].
running
,
fai
=
workflow
.
components
[
i
].
failed
,
com
=
workflow
.
components
[
i
].
completed
;
if
((
wai
+
run
+
fai
+
com
)
==
0
)
{
err
=
100
;
}
nodes
.
push
({
data
:
{
id
:
data
.
components
[
i
].
name
,
name
:
data
.
components
[
i
].
name
,
err
:
err
,
wai
:
wai
,
run
:
run
,
fai
:
fai
,
com
:
com
}});
}
for
(
var
i
in
data
.
edges
)
{
if
(
data
.
edges
[
i
][
0
]
!=
null
&&
data
.
edges
[
i
][
1
]
!=
null
)
{
edges
.
push
({
data
:
{
source
:
data
.
edges
[
i
][
0
],
target
:
data
.
edges
[
i
][
1
]
}
});
}
}
$
this
.
$element
.
cytoscape
({
$
(
'
#cytoscape_panel
'
)
.
cytoscape
({
style
:
cytoscape
.
stylesheet
()
.
selector
(
'
node
'
)
.
css
({
'
content
'
:
'
data(name)
'
,
'
text-valign
'
:
'
center
'
,
'
color
'
:
'
white
'
,
'
text-outline-width
'
:
2
,
'
text-outline-color
'
:
'
#888
'
'
width
'
:
'
80px
'
,
'
height
'
:
'
80px
'
,
'
content
'
:
'
data(id)
'
,
'
pie-size
'
:
'
100%
'
,
'
pie-1-background-color
'
:
'
lightgrey
'
,
//Error
'
pie-1-background-size
'
:
'
mapData(err, 0, 100, 0, 100)
'
,
'
pie-2-background-color
'
:
'
#faa732
'
,
//Waiting
'
pie-2-background-size
'
:
'
mapData(wai, 0, 100, 0, 100)
'
,
'
pie-3-background-color
'
:
'
#0e90d2
'
,
//Running
'
pie-3-background-size
'
:
'
mapData(run, 0, 100, 0, 100)
'
,
'
pie-4-background-color
'
:
'
#dd514c
'
,
//Failed
'
pie-4-background-size
'
:
'
mapData(fai, 0, 100, 0, 100)
'
,
'
pie-5-background-color
'
:
'
#7fe175
'
,
//Completed
'
pie-5-background-size
'
:
'
mapData(com, 0, 100, 0, 100)
'
,
'
background-color
'
:
'
lightgrey
'
,
'
text-valign
'
:
'
bottom
'
,
'
color
'
:
'
black
'
,
'
font-family
'
:
'
"Trebuchet MS",Verdana,"Lucida Grande", Tahoma, Helvetica, sans-serif
'
,
'
border-opacity
'
:
1
,
'
border-width
'
:
'
0.05em
'
,
'
font-size
'
:
'
10px
'
})
.
selector
(
'
edge
'
)
.
css
({
'
target-arrow-shape
'
:
'
triangle
'
'
width
'
:
1
,
//'curve-style':'haysack',
//'target-arrow-shape': 'triangle',
'
opacity
'
:
0.5
})
.
selector
(
'
:selected
'
)
.
css
({
'
background-color
'
:
'
black
'
,
'
line-color
'
:
'
black
'
,
'
target-arrow-color
'
:
'
black
'
,
'
source-arrow-color
'
:
'
black
'
/*'border-width': 30,
'border-color': 'red',
'color': 'red'*/
})
.
selector
(
'
.faded
'
)
.
css
({
...
...
@@ -221,25 +257,19 @@
nodes
:
nodes
,
edges
:
edges
},
layout
:
{
name
:
'
grid
'
,
padding
:
10
padding
:
25
},
ready
:
function
(){
window
.
cy
=
this
;
cy
.
elements
().
unselectify
();
cy
.
on
(
'
tap
'
,
'
node
'
,
function
(
e
){
var
node
=
e
.
cyTarget
;
var
neighborhood
=
node
.
neighborhood
().
add
(
node
);
cy
.
elements
().
addClass
(
'
faded
'
);
neighborhood
.
removeClass
(
'
faded
'
);
});
cy
.
on
(
'
tap
'
,
function
(
e
){
if
(
e
.
cyTarget
===
cy
){
cy
.
elements
().
removeClass
(
'
faded
'
);
...
...
@@ -333,21 +363,22 @@
$
.
fn
.
wfstatus
.
defaults
=
{
serverURL
:
"
http://localhost:8080
"
,
headTemplate
:
[
'
<dl class="dl-horizontal">
'
,
'
<dt>Start</dt>
'
,
'
<dd>${workflow.start_time}</dd>
'
,
'
<dt>End</dt>
'
,
'
<dd>${workflow.end_time}</dd>
'
,
'
<dt>Elapsed time</dt>
'
,
'
<dd>${workflow.elapsed_time}</dd>
'
,
'
<br/>
'
,
'
<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">
'
,
'
<strong>Error message :</strong><br/>
'
,
'
<span id="wfstatus_error_msg"></span><br/>
'
,
'
<strong>Error location :</strong><br/>
'
,
'
<span id="wfstatus_error_location"></span>
'
,
'
</div>
'
,
'
</dl>
'
].
join
(
'
\n
'
),
listTemplate
:
[
'
<dl class="dl-horizontal">
'
,
'
<dt>Start</dt>
'
,
'
<dd>${workflow.start_time}</dd>
'
,
'
<dt>End</dt>
'
,
'
<dd>${workflow.end_time}</dd>
'
,
'
<dt>Elapsed time</dt>
'
,
'
<dd>${workflow.elapsed_time}</dd>
'
,
'
<br/>
'
,
'
<div id="wfstatus_error_panel" class="alert alert-error" style="display:none;">
'
,
'
<strong>Error message :</strong><br/>
'
,
'
<span id="wfstatus_error_msg"></span><br/>
'
,
'
<strong>Error location :</strong><br/>
'
,
'
<span id="wfstatus_error_location"></span>
'
,
'
</div>
'
,
'
<br/>
'
,
'
{{each(index, component) workflow.components}}
'
,
'
<div id="component_${component.name}"><p><dt>${component.name}</dt>
'
,
'
<dd>
'
,
...
...
@@ -360,9 +391,13 @@
'
</dd></p></div>
'
,
'
{{/each}}
'
,
'
</dl>
'
].
join
(
'
\n
'
),
graphTemplate
:
[
'
<div id="cytoscape_panel" style="background-image:url(img/grid.png);*/
'
,
'
background-color:#f9f9f9;margin-top:-20px;border:1px solid lightgrey;border-radius:5px;
'
,
'
width:515px;height:393px">
'
,
'
</div>
'
].
join
(
'
\n
'
),
workflowID
:
null
,
forceUsingWorkflow
:
null
,
display
:
"
list
"
display
:
"
graph
"
}
$
.
fn
.
wfstatus
.
Constructor
=
WFStatus
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment