You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@taverna.apache.org by al...@apache.org on 2015/08/24 13:42:09 UTC
[43/50] [abbrv] incubator-taverna-databundle-viewer git commit:
Update d3 visualization, styles
Update d3 visualization, styles
Project: http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/commit/3b808681
Tree: http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/tree/3b808681
Diff: http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/diff/3b808681
Branch: refs/heads/master
Commit: 3b808681fb65373de59023bb99f0c7c757862430
Parents: 86fee27
Author: Denis Karyakin <sa...@gmail.com>
Authored: Wed Aug 19 23:19:16 2015 +0300
Committer: Denis Karyakin <sa...@gmail.com>
Committed: Wed Aug 19 23:19:16 2015 +0300
----------------------------------------------------------------------
app/assets/javascripts/data_bundle.coffee | 87 +++++++++++++------------
app/assets/stylesheets/data_bundle.scss | 28 +++++---
app/controllers/data_bundles_controller.rb | 4 ++
app/views/data_bundles/show.html.slim | 3 +-
app/views/data_bundles/show.json.jbuilder | 2 -
5 files changed, 72 insertions(+), 52 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/blob/3b808681/app/assets/javascripts/data_bundle.coffee
----------------------------------------------------------------------
diff --git a/app/assets/javascripts/data_bundle.coffee b/app/assets/javascripts/data_bundle.coffee
index a53168b..c45201a 100644
--- a/app/assets/javascripts/data_bundle.coffee
+++ b/app/assets/javascripts/data_bundle.coffee
@@ -17,48 +17,55 @@
# 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 + ')')
+ if $('svg#graphContainer').length > 0
+ d3.json $('#data_bundle').attr('data-url'), (error, links) ->
+ tick = ->
+ path.attr 'd', (d) ->
+ dx = d.target.x - (d.source.x)
+ dy = d.target.y - (d.source.y)
+ dr = Math.sqrt(dx * dx + dy * dy)
+ 'M' + d.source.x + ',' + d.source.y + 'A' + dr + ',' + dr + ' 0 0,1 ' + d.target.x + ',' + d.target.y
+ node.attr 'transform', (d) ->
+ 'translate(' + d.x + ',' + d.y + ')'
+ return
- d3.json $('#data_bundle').attr('data-url'), (error, json) ->
- if error
- throw error
+ nodes = {}
+ links.forEach (link) ->
+ link.source = nodes[link.source] or (nodes[link.source] =
+ name: link.source, file_content: link.file_content)
+ link.target = nodes[link.target] or (nodes[link.target] =
+ name: link.target, file_content: link.file_content)
+ link.value = +link.value
+ return
- 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")
+ width = 960
+ height = 900
- 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
+ force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([width, height])
+ .linkDistance(100).charge(-500).on('tick', tick).start()
+ svgContainer = d3.select('svg#graphContainer').attr('width', width).attr('height', height)
+ # build the arrow.
+ svgContainer.append('svg:defs').selectAll('marker').data(['end']).enter().append('svg:marker').attr('id', String)
+ .attr('viewBox', '0 -5 10 10').attr('refX', 15).attr('refY', -1.5).attr('markerWidth', 6)
+ .attr('markerHeight', 6).attr('orient', 'auto').append('svg:path').attr 'd', 'M0,-5L10,0L0,5'
+ # add the links and the arrows
+ path = svgContainer.append('svg:g').selectAll('path').data(force.links()).enter().append('svg:path')
+ .attr('class', 'link').attr('marker-end', 'url(#end)')
+ # define the nodes
+ node = svgContainer.selectAll('.node').data(force.nodes()).enter().append('g').attr('class', 'node')
+ .attr('id', (d) -> d.name).call(force.drag)
+ # add the nodes
+ node.append('circle').attr('r', 5)
+ # add the text
+ node.append('text').attr('x', 12).attr('dy', '.35em').text (d) ->
+ d.name
+ node.append('text').attr('class', 'file_content').attr('visibility', 'hidden').text (d) ->
+ return d.file_content
-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)
+ node.on 'click', (d) ->
+ rect = svgContainer.append('rect').transition().duration(500).attr('width', 250)
+ .attr('height', 300).attr('x', 10).attr('y', 10).style('fill', 'white').attr('stroke', 'black')
+ text = svgContainer.append('text').text(d.file_content)
+ .attr('x', 50).attr('y', 150).attr('fill', 'black')
+ return
http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/blob/3b808681/app/assets/stylesheets/data_bundle.scss
----------------------------------------------------------------------
diff --git a/app/assets/stylesheets/data_bundle.scss b/app/assets/stylesheets/data_bundle.scss
index 09a3663..719f309 100644
--- a/app/assets/stylesheets/data_bundle.scss
+++ b/app/assets/stylesheets/data_bundle.scss
@@ -18,18 +18,28 @@
*/
svg {
- .name {
- font-weight: bold;
+ path.link {
+ fill: none;
+ stroke: #666;
+ stroke-width: 1.5px;
}
- .about {
- fill: #777;
- font-size: smaller;
+ circle {
+ fill: #ccc;
+ stroke: #fff;
+ stroke-width: 1.5px;
}
- .link {
- fill: none;
- stroke: #000;
- shape-rendering: crispEdges;
+ text {
+ fill: #000;
+ font: 10px sans-serif;
+ pointer-events: none;
+ }
+
+ rect {
+ fill: #585858;
+ }
+ .fill_text {
+ fill: red !important;
}
}
http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/blob/3b808681/app/controllers/data_bundles_controller.rb
----------------------------------------------------------------------
diff --git a/app/controllers/data_bundles_controller.rb b/app/controllers/data_bundles_controller.rb
index 42800f1..a1939d1 100644
--- a/app/controllers/data_bundles_controller.rb
+++ b/app/controllers/data_bundles_controller.rb
@@ -32,6 +32,10 @@ class DataBundlesController < ApplicationController
# GET /data_bundles/1.json
def show
@data_bundle = @data_bundle.decorate
+ respond_to do |format|
+ format.html
+ format.json { render json: @data_bundle.to_json }
+ end
end
# GET /data_bundles/1/edit
http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/blob/3b808681/app/views/data_bundles/show.html.slim
----------------------------------------------------------------------
diff --git a/app/views/data_bundles/show.html.slim b/app/views/data_bundles/show.html.slim
index 41bcdaf..218479c 100644
--- a/app/views/data_bundles/show.html.slim
+++ b/app/views/data_bundles/show.html.slim
@@ -2,6 +2,7 @@ section.content-header
h1
= "DataBundle #{@data_bundle.name}"
section.content
+ = link_to '<- Back', data_bundles_path
.box.box-default
.box-body
table.table.table-bordered
@@ -27,4 +28,4 @@ section.content
td
= @data_bundle.workflow.annotations.semantic_annotation
svg#graphContainer
- = link_to 'Back', data_bundles_path
+#data_bundle data-url=data_bundle_url(@data_bundle, format: :json)
http://git-wip-us.apache.org/repos/asf/incubator-taverna-databundle-viewer/blob/3b808681/app/views/data_bundles/show.json.jbuilder
----------------------------------------------------------------------
diff --git a/app/views/data_bundles/show.json.jbuilder b/app/views/data_bundles/show.json.jbuilder
deleted file mode 100644
index 711eb5b..0000000
--- a/app/views/data_bundles/show.json.jbuilder
+++ /dev/null
@@ -1,2 +0,0 @@
-json.name "INPUTS"
-json.inputs @data_bundle.inputs