Create data_bundle coffee and scss files for visualize workflow run
diff --git a/app/assets/javascripts/application.coffee b/app/assets/javascripts/application.coffee
index a5d2a13..9d2ca6c 100644
--- a/app/assets/javascripts/application.coffee
+++ b/app/assets/javascripts/application.coffee
@@ -32,10 +32,13 @@
#= require bootstrap_theme/bootstrap/js/bootstrap.min
#= require bootstrap_theme/plugins/iCheck/icheck.min
#= require d3/d3.min
+#= require data_bundle
$ ->
$('input').iCheck
checkboxClass: 'icheckbox_square-blue'
radioClass: 'iradio_square-blue'
increaseArea: '20%'
+
+ draw_workflow()
return
diff --git a/app/assets/javascripts/data_bundle.coffee b/app/assets/javascripts/data_bundle.coffee
new file mode 100644
index 0000000..a53168b
--- /dev/null
+++ b/app/assets/javascripts/data_bundle.coffee
@@ -0,0 +1,64 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements. See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership. The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License. You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+margin =
+ top: 0
+ right: 320
+ bottom: 0
+ left: 0
+width = 960 - (margin.left) - (margin.right)
+height = 500 - (margin.top) - (margin.bottom)
+
+@draw_workflow = ->
+ tree = d3.layout.tree().separation((a, b) ->
+ if a.parent == b.parent then 1 else .5
+ ).children((d) ->
+ d.parents
+ ).size([
+ height
+ width
+ ])
+
+ svg = d3.select('#d3_visualization').append('svg').attr('width', width + margin.left + margin.right).attr('height',
+ height +
+ margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+
+ d3.json $('#data_bundle').attr('data-url'), (error, json) ->
+ if error
+ throw error
+
+ nodes = tree.nodes(json)
+ link = svg.selectAll('.link').data(tree.links(nodes)).enter().append('path').attr('class', 'link').attr('d', elbow)
+ node = svg.selectAll('.node').data(nodes).enter().append('g').attr('class', 'node').attr('transform', (d) ->
+ 'translate(' + d.y + ',' + d.x + ')')
+ node.append('text').attr('class', 'name').attr('x', 8).attr('y', -6).text (d) ->
+ d.name
+ node.append('svg:title').text((d) -> "Click for see template")
+
+ node.append('text').attr('x', 8).attr('y', 8).attr('dy', '.71em').attr('class', 'about lifespan')
+ .on "click", (d) ->
+ console.log("click on file name")
+ .html (d) ->
+ $.map(d.inputs, (val, i) ->
+ return val.file
+ ).join(', ')
+ return
+
+elbow = (d, i) ->
+ 'M' + d.source.y + ',' + d.source.x + 'H' + d.target.y + 'V' + d.target.x + (if d.target.children then '' else 'h' + margin.right)
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 751d68a..10c590a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,4 +33,5 @@
*= require bootstrap_theme/dist/css/AdminLTE.min
*= require bootstrap_theme/dist/css/skins/skin-blue.min
*= require bootstrap_theme/plugins/iCheck/all
+ *= require data_bundle
*/
diff --git a/app/assets/stylesheets/data_bundle.scss b/app/assets/stylesheets/data_bundle.scss
new file mode 100644
index 0000000..09a3663
--- /dev/null
+++ b/app/assets/stylesheets/data_bundle.scss
@@ -0,0 +1,35 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+svg {
+ .name {
+ font-weight: bold;
+ }
+
+ .about {
+ fill: #777;
+ font-size: smaller;
+ }
+
+ .link {
+ fill: none;
+ stroke: #000;
+ shape-rendering: crispEdges;
+ }
+}
