| # |
| # 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. |
| # |
| |
| ## sankey diagram : http://bl.ocks.org/d3noob/5028304 |
| ## concur. matrix : https://bost.ocks.org/mike/miserables/ |
| |
| # for every type of activity call draw_provenance |
| $(document).ready -> |
| $('#diagramType li a').click -> |
| draw_provenance($(this).text()) |
| return |
| |
| @isEnabled = false #is the mouse wheel scroll disabled or enabled |
| |
| $('#enableZooming').click -> |
| |
| isEnabled = undefined |
| |
| if $("#enableZooming span").html() == 'Enable Zooming' |
| isEnabled = true |
| $("#enableZooming span").html('Disable Zooming') |
| else |
| isEnabled = false |
| $("#enableZooming span").html('Enable Zooming') |
| |
| disableMidMouse(isEnabled) |
| |
| return |
| |
| @disableMidMouse = (status) -> |
| # enable/disable middle mouse button scrolling |
| wheelEnable = (event) -> |
| event.preventDefault() |
| event.returnValue = true |
| return |
| |
| wheelDisable = (event) -> |
| event.preventDefault() |
| event.returnValue = false |
| return |
| |
| setisEnabled(status) |
| |
| if window.addEventListener |
| if status |
| window.addEventListener('DOMMouseScroll', wheelDisable, false) |
| window.onmousewheel = document.onmousewheel = wheelDisable |
| else |
| window.addEventListener('DOMMouseScroll', wheelEnable, false) |
| window.onmousewheel = document.onmousewheel = wheelEnable |
| |
| return |
| |
| # distingush between single click and double click |
| # see http://bl.ocks.org/couchand/6394506 |
| @clickCancel = -> |
| event = d3.dispatch('click', 'dblclick') |
| |
| cc = (selection) -> |
| down = undefined |
| tolerance = 5 |
| last = undefined |
| wait = null |
| # euclidean distance |
| |
| dist = (a, b) -> |
| Math.sqrt (a[0] - (b[0])) ** 2, (a[1] - (b[1])) ** 2 |
| |
| selection.on('mousedown', -> |
| down = d3.mouse(document.body) |
| last = +new Date |
| return |
| ) |
| selection.on('mouseup', -> |
| if dist(down, d3.mouse(document.body)) > tolerance |
| return |
| else |
| if wait |
| window.clearTimeout wait |
| wait = null |
| event.dblclick d3.event |
| else |
| wait = window.setTimeout(((e) -> |
| -> |
| event.click e |
| wait = null |
| return |
| )(d3.event), 300) |
| return |
| ) |
| return |
| d3.rebind(cc, event, 'on') |
| |
| # Here start diagrams func |
| |
| @glob_width = 0 |
| @dashLine = '\n---------------------------------------------------------------\n' |
| @graph = {} |
| @tempgraph = {} |
| |
| # set the width |
| @setGLWidth =(reqWidth) -> |
| @glob_width = reqWidth |
| return |
| |
| @setisEnabled =(status) -> |
| @isEnabled = status |
| return |
| |
| |
| # set a color for a node |
| @getColorHex =(source) -> |
| color = d3.scale.category20() |
| colorType = undefined |
| switch source |
| when 'Workflow Run' then colorType = '#0eff7f' |
| when 'Process Run' then colorType = '#258fda' |
| when 'Artifact' then colorType = '#ff7f0e' |
| when 'Dictionary' then colorType = '#7f0eff' |
| else colorType = color(stringTextForColor.replace(RegExp(' .*'), '')) |
| colorType |
| |
| @getColorTransitionTypeHex =(value) -> |
| |
| color = d3.scale.category20() |
| colorType = undefined |
| switch value |
| when 11 then colorType = '#004d24' # wfprov:wasPartOfWorkflow |
| when 12 then colorType = '#c3e221' # this case should not exist |
| when 13 then colorType = '#009947' # wfprov:usedInputArtifact |
| when 14 then colorType = '#003318' # ----- // ------Dictionary |
| when 21 then colorType = '#258fda' # wasPartOfWorkflow |
| when 23 then colorType = '#7cbce9' # usedInputArtifact |
| when 24 then colorType = '#12476d' # usedInputDictionary |
| when 31 then colorType = '#ffc999' # wasoutputFromWf |
| when 32 then colorType = '#ff7f0e' # wasOutputFromProcess |
| when 34 then colorType = '#663000' # insertInList |
| when 41 then colorType = '#bb80ff' # output from wf |
| when 42 then colorType = '#7f0eff' #outputFromProcess |
| when 43 then colorType = '#3c0080' #split |
| when 44 then colorType = '#990000' # insert into another funct |
| else '#c3e221' |
| |
| @createGroupType =(type) -> |
| group = -1 |
| switch type |
| when 'Workflow Run' then group = 1 |
| when 'Process Run' then group = 2 |
| when 'Artifact' then group = 3 |
| when 'Dictionary' then group = 4 |
| else group = 0 |
| group |
| |
| # limit a string to maxChar |
| @shortenString =(temp, maxChar) -> |
| if temp.length > maxChar |
| temp = temp.substring(0, maxChar) + '..' |
| temp |
| |
| # limit a string to 32 chars : "{15 chars}..{15 chars}" |
| @shortenStringNoMiddle =(temp) -> |
| if temp.length > 32 |
| temp = temp.substring(0, 15) + '..' + temp.substring(temp.length - 15, temp.length) |
| temp |
| |
| @getTimes =(d) -> |
| startTime = new Date() |
| endTime = new Date() |
| nodeTime = 0 |
| if(d.hasOwnProperty("startedAtTime")) |
| startTime = new Date(d.startedAtTime) |
| endTime = new Date(d.endedAtTime) |
| nodeTime = 1 |
| |
| elapsedTime = endTime - startTime |
| |
| date_format_iso =(date) -> |
| date.toISOString().replace( /[T]/g, ' ').slice(0, -1) |
| |
| hms =(ms) -> |
| date = new Date(ms); |
| str = ''; |
| if date.getUTCDate()-1 > 0 |
| str += date.getUTCDate()-1 + " days, "; |
| if date.getUTCHours > 0 |
| str += date.getUTCHours() + " hours, "; |
| if date.getUTCMinutes() > 0 |
| str += date.getUTCMinutes() + " minutes, "; |
| if date.getUTCSeconds() > 0 |
| str += date.getUTCSeconds() + " seconds, "; |
| str += date.getUTCMilliseconds() + " millis"; |
| str |
| |
| if nodeTime == 1 |
| 'Start Time: ' + date_format_iso(startTime) + '\nEnd Time: ' + date_format_iso(endTime) + '\nElapsed Time: ' + hms(elapsedTime) |
| else |
| '' |
| |
| # create function that to split the text into multiple lines for the svg-text |
| # cannot find something like this online |
| @wrap = (text) -> |
| text.each -> |
| text = d3.select(this) |
| labels = text.text().split("\\n") |
| text.text(null) |
| |
| line = [] |
| |
| lineNumber = 1 |
| if(labels.length != 0) |
| lineNumber = (-1) * (Math.floor(labels.length / 2) - 1) |
| |
| lineHeight = 1.1 |
| for temp in labels |
| temp = temp.substring(temp.lastIndexOf(' ')) |
| text.append('tspan').attr('x', text.attr('x')).attr('y', text.attr('y')).attr('dy', lineNumber * lineHeight + 'em' ).text(temp).filter((d) -> |
| d.x < glob_width / 5 |
| ).attr('x', "22") |
| lineNumber++ |
| |
| return |
| return |
| # create function that to split the text into multiple lines for the svg-text |
| # cannot find something like this online |
| @wrapNoNewLine = (text) -> |
| text.each -> |
| text = d3.select(this) |
| labels = text.text().split("\\n") |
| text.text(null) |
| |
| line = [] |
| |
| lineNumber = 1 |
| if(labels.length != 0) |
| lineNumber = (-1) * (Math.floor(labels.length / 2) - 1) |
| |
| lineHeight = 0.15 |
| final = '' |
| for temp in labels |
| final += temp.substring(temp.lastIndexOf(' ')) + ', ' |
| |
| final = final[0...-2] |
| text.append('tspan').attr('x', text.attr('x')).attr('y', text.attr('y')).attr('dy', lineHeight + 'em' ).text(final).filter((d) -> |
| d.x < glob_width / 5 |
| ).attr('x', "22") |
| |
| return |
| return |
| |
| |
| # some local functions for zooming in/out and for walking around |
| @zoomed = -> |
| if isEnabled |
| d3.select('g#zoomContainer').attr 'transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')' |
| else |
| null |
| return |
| |
| @draw = -> |
| d3.json $('#data_bundle').attr('data-url'), (error, data) -> |
| @tempgraph = $.extend(true, {}, data) |
| |
| if(Object.keys(tempgraph).length) |
| hasBeenDrawn = draw_workflow(hasBeenDrawn) |
| draw_provenance() |
| |
| return |
| return |
| |
| @clone = (obj) -> |
| return obj if obj is null or typeof (obj) isnt "object" |
| temp = new obj.constructor() |
| for key of obj |
| temp[key] = clone(obj[key]) |
| temp |
| |
| @draw_workflow =(draw) -> |
| data = clone(@tempgraph.workflow) |
| if !draw? |
| width = 960 |
| height = 650 |
| opacity = 0.7 |
| |
| color = d3.scale.category20() |
| |
| $('canvas#canvasWF').attr |
| 'width': (width + 150) |
| 'height': (width) |
| |
| svgContainer = d3.select('svg#graphContainer').attr('width', width+150).attr('height', width).append('g').attr('transform', (d) -> |
| "translate("+ (width) + ", 0) rotate (90)" |
| ) |
| |
| verticalSankey = d3.vertical_sankey().nodeWidth(25).nodePadding(20).size([width-128, height]) |
| |
| path = verticalSankey.link() |
| |
| verticalSankey.nodes(data.nodes).links(data.links).layout(32) |
| |
| link = svgContainer.append('g').selectAll('.link').data(data.links).enter().append('path').attr('class', 'link').attr('d', path).style('stroke-width', (d) -> |
| Math.max 1, d.dy |
| ).style('stroke', (d) -> |
| d.source.color = color(d.source.name.replace(RegExp(' .*'), '')) |
| ).sort((a, b) -> |
| b.dx - (a.dx) |
| ) |
| |
| link.attr('opacity', opacity) |
| |
| link.append('title').text((d) -> |
| d.source.name + '\n→\n' + d.target.name |
| ) |
| |
| node = svgContainer.append('g').selectAll('.node').data(data.nodes).enter().append('g').attr('class', 'node').attr('transform', (d) -> |
| 'translate(' + d.x + ',' + d.y + ')' |
| ) |
| |
| node.append('rect').attr('width', verticalSankey.nodeWidth()).attr('height', (d) -> |
| Math.abs d.dy |
| ).style('fill', (d) -> |
| d.color = color(d.name.replace(RegExp(' .*'), '')) |
| ).style('stroke', (d) -> |
| d3.rgb(d.color).darker 2 |
| ) |
| |
| node.append('text').attr('text-anchor', 'middle').attr('y', (d) -> |
| 12 |
| ).attr('x', (d) -> |
| d.dy/-2 |
| ).attr('dy', '.35em').attr('transform', (d) -> |
| "translate("+ 0 + ", 0) rotate (270)" |
| ).text((d) -> |
| shortenName =(d) -> |
| |
| # convert the text to pixels |
| canvas = document.createElement('canvas') |
| ctx = canvas.getContext("2d") |
| ctx.font = "14px Source Sans Pro" |
| textPX = ctx.measureText(d.name).width |
| |
| if textPX > d.dy |
| d.name.substring(0, 9) + '..' + d.name.substring(d.name.length - 9, d.name.length) |
| else |
| d.name |
| |
| shortenName(d) |
| |
| ).filter (d) -> |
| d.x < width / 2 |
| |
| return true |
| |
| @draw_provenance =(diagramType) -> |
| # if diagramType is undefined or null, as default assign the current active |
| # else clear the svg for the diagram |
| if !diagramType? |
| diagramType = $('#diagramType li.active a').text() |
| else |
| d3.select('svg#provContainer').selectAll("*").remove() |
| d3.select('svg#provContainer').remove() |
| d3.select('#mapContainer').append('svg').attr('id','provContainer') |
| |
| @graph = clone(@tempgraph) |
| if(diagramType == 'Sankey') |
| draw_sankey() |
| else if(diagramType == 'Co-occurrence') |
| draw_miserables() |
| |
| |
| return |
| |
| |
| @draw_miserables = -> |
| width = 1580 |
| height = 750 |
| |
| # compute a better width and height for the container |
| nodesCount = Object.keys(graph.provenance.nodes).length |
| linksCount = Object.keys(graph.provenance.links).length |
| |
| if nodesCount > 0 or linksCount > 0 |
| ratioN = 1.0 * nodesCount * 10 |
| width = width + 25 |
| height = width |
| divider = 3 |
| setGLWidth(width) |
| |
| $('canvas#canvasPROV').attr |
| 'width': width |
| 'height': height |
| |
| |
| x = d3.scale.ordinal().rangeBands([ |
| 0 |
| (5600 / divider) |
| ]) |
| z = d3.scale.linear().domain([ |
| 0 |
| 4 |
| ]).clamp(true) |
| |
| color = d3.scale.category20() |
| |
| svg = d3.select('svg#provContainer').attr('width', width+602).attr('height', height+535).append('g').attr('transform', 'translate(350,277)') |
| |
| # build a [source, target] matrix |
| matrix = [] |
| nodes = graph.provenance.nodes |
| n = nodes.length |
| |
| row = (row) -> |
| cell = d3.select(this).selectAll('.cell').data(row.filter((d) -> |
| d.z + Math.floor(Math.random() * 10) |
| )).enter().append('rect').attr('class', 'cell').attr('x', (d) -> |
| x d.x |
| ).attr('width', x.rangeBand()).attr('height', x.rangeBand()).style('fill-opacity', (d) -> |
| z d.z |
| ).style('fill', (d) -> |
| console.log(d.x + " .. " + d.y) |
| if d.x == d.y |
| "#123456" |
| else |
| transition = createGroupType(nodes[d.x].type) * 10 + createGroupType(nodes[d.y].type) |
| getColorTransitionTypeHex(transition) |
| ).append('title').text((d) -> |
| str = nodes[d.x].type + ' → ' + nodes[d.y].type |
| str += dashLine + 'Source: ' + nodes[d.x].name |
| |
| if createGroupType(nodes[d.x].type) == 2 # if process |
| str += '\n\n' + getTimes(nodes[d.x]) |
| else if createGroupType(nodes[d.x].type) > 2 # if artifact or dictionary |
| if nodes[d.x].content? |
| str += '\n\n' + shortenString(nodes[d.x].content, 500) |
| |
| str += dashLine + 'Target: ' + nodes[d.y].name |
| if createGroupType(nodes[d.y].type) == 2 # if process |
| str += '\n\n' + getTimes(nodes[d.y]) |
| else if createGroupType(nodes[d.y].type) > 2 # if artifact or dictionary |
| if nodes[d.y].content? |
| str += '\n\n' + shortenString(nodes[d.y].content, 500) |
| |
| str |
| ).on('mouseover', mouseover).on('mouseout', mouseout) |
| return |
| |
| mouseover = (p) -> |
| d3.selectAll('.row text').classed('active', (d, i) -> |
| i == p.y |
| ) |
| d3.selectAll('.column text').classed('active', (d, i) -> |
| i == p.x |
| ) |
| return |
| |
| mouseout = -> |
| d3.selectAll('text').classed('active', false) |
| return |
| |
| order = (value) -> |
| x.domain orders[value] |
| t = svg.transition().duration(1500) |
| t.selectAll('.row').delay((d, i) -> |
| x(i) * 4 |
| ).attr('transform', (d, i) -> |
| 'translate(0,' + x(i) + ')' |
| ).selectAll('.cell').delay((d) -> |
| x(d.x) * 4 |
| ).attr 'x', (d) -> |
| x d.x |
| t.selectAll('.column').delay((d, i) -> |
| x(i) * 4 |
| ).attr 'transform', (d, i) -> |
| 'translate(' + x(i) + ')rotate(-90)' |
| return |
| |
| |
| |
| # Compute index per node. |
| nodes.forEach (node, i) -> |
| node.index = i |
| node.count = 0 |
| matrix[i] = d3.range(n).map((j) -> |
| { |
| x: j |
| y: i |
| z: 0 |
| } |
| ) |
| return |
| |
| # Add the legend |
| |
| legendCategories = { "category":[{"name":"Workflow Run -wasPartOfWorkflow- Workflow Run", "transition":"11"}, |
| {"name":"Workflow Run -usedInput- Artifact", "transition":"13"}, |
| {"name":"Workflow Run -usedInput- Dictionary", "transition":"14"}, |
| {"name":"Process Run -wasPartOfWorkflow- Workflow Run", "transition":"21"}, |
| {"name":"Process Run -usedInput- Artifact", "transition":"23"}, |
| {"name":"Process Run -usedInput- Dictionary", "transition":"24"}, |
| {"name":"Artifact -wasOutputFrom- Workflow Run", "transition":"31"}, |
| {"name":"Artifact -wasOutputFrom- Process Run", "transition":"32"}, |
| {"name":"Artifact -isIntegratedIn- Dictionary", "transition":"34"}, |
| {"name":"Dictionary -wasOutputFrom- Artifact", "transition":"41"}, |
| {"name":"Dictionary -wasOutputFrom- Artifact", "transition":"42"}, |
| {"name":"Dictionary -hasMember- Artifact", "transition":"43"}, |
| {"name":"Dictionary -isSplit/PushedInto- Dictionary", "transition":"44"}]} |
| |
| legend = svg.append('g').attr('class', 'legend').attr('x', 0).attr('y', 0).selectAll('.category').data(legendCategories.category).enter().append('g').attr('class', 'category') |
| |
| legendConfig = |
| rectWidth: 20 |
| rectHeight: 14 |
| xOffset: -350 |
| yOffset: -275 |
| xOffsetText: 26 |
| yOffsetText: -10 |
| lineHeight: 10 |
| wordApart: 20 |
| |
| legendConfig.yOffsetText += 20 |
| legendConfig.xOffsetText += legendConfig.xOffset |
| |
| legend.append('rect').attr('y', (d, i) -> |
| legendConfig.yOffset + i * legendConfig.wordApart |
| ).attr('x', legendConfig.xOffset).attr('height', legendConfig.rectHeight).attr('width', legendConfig.rectWidth).style('fill', (d) -> |
| getColorTransitionTypeHex(parseInt(d.transition)) |
| ).style('stroke', '#000000') |
| |
| legend.append('text').attr('y', (d, i) -> |
| legendConfig.yOffset + i * legendConfig.wordApart + legendConfig.yOffsetText |
| ).attr('x', legendConfig.xOffsetText).text((d) -> |
| d.name |
| ) |
| |
| # Convert links to matrix; count character occurrences. |
| graph.provenance.links.forEach (link) -> |
| matrix[link.source][link.target].z = createGroupType(nodes[link.source].type) * 10 + createGroupType(nodes[link.target].type) |
| nodes[link.source].count += link.value |
| nodes[link.target].count += link.value |
| return |
| |
| # Precompute the orders. |
| orders = |
| name: d3.range(n).sort((a, b) -> |
| d3.ascending nodes[a].name, nodes[b].name |
| ) |
| count: d3.range(n).sort((a, b) -> |
| nodes[b].count - (nodes[a].count) |
| ) |
| type: d3.range(n).sort((a, b) -> |
| createGroupType(nodes[b].type) - createGroupType(nodes[a].type) |
| ) |
| |
| # The default sort order. |
| x.domain orders.name |
| |
| #svg.append('rect').attr('class', 'misbackground').attr('width', width/divider).attr('height', height/divider) |
| |
| row = svg.selectAll('.row').data(matrix).enter().append('g').attr('class', 'row').attr('transform', (d, i) -> |
| 'translate(0,' + x(i) + ')' |
| ).each(row) |
| |
| row.append('line').attr('x2', 5600/divider) |
| |
| row.append('text').attr('x', -6).attr('y', x.rangeBand() / 2).attr('dy', '.32em').attr('text-anchor', 'end').text((d, i) -> |
| if nodes[i].hasOwnProperty("label") |
| nodes[i].label |
| else |
| shortenStringNoMiddle(nodes[i].name) |
| ).call(wrapNoNewLine) |
| |
| column = svg.selectAll('.column').data(matrix).enter().append('g').attr('class', 'column').attr('transform', (d, i) -> |
| 'translate(' + x(i) + ')rotate(-90)' |
| ) |
| |
| column.append('line').attr('x1', 5600/divider * (-1)) |
| |
| column.append('text').attr('x', 6).attr('y', x.rangeBand() / 2).attr('dy', '.32em').attr('text-anchor', 'start').text((d, i) -> |
| if nodes[i].hasOwnProperty("label") |
| nodes[i].label |
| else |
| shortenStringNoMiddle(nodes[i].name) |
| ).call(wrapNoNewLine) |
| |
| d3.select('#order').on 'change', -> |
| # clearTimeout timeout |
| order @value |
| return |
| |
| return |
| |
| |
| @draw_sankey = -> |
| width = 950 |
| height = 750 |
| lowOpacity = 0.3 |
| hoverOpacity = 0.7 |
| highOpacity = 0.9 |
| |
| # zoom the d3 |
| zoom = d3.behavior.zoom().scaleExtent([ |
| 0.5 |
| 10 |
| ]).on('zoom', zoomed) |
| |
| # load the svg#sankeyContainer |
| # set the width and height attributes |
| # append a function g that has a tranform process defined by translation |
| svgContainer = d3.select('svg#provContainer') |
| |
| # define the sankey object |
| # set the node width to 15 |
| # set the node padding to 10 |
| sankey = d3.sankey().nodeWidth(20).nodePadding(10) |
| |
| # request the sankey path of current sankey |
| path = sankey.reversibleLink() |
| |
| # load data to work with |
| |
| # compute a better width and height for the container |
| nodesCount = Object.keys(graph.provenance.nodes).length |
| linksCount = Object.keys(graph.provenance.links).length |
| |
| if nodesCount > 0 or linksCount > 0 |
| ratioLN = linksCount / nodesCount * 100 |
| width = width + Math.floor( ratioLN * 3 ) |
| height = height + Math.floor( ratioLN ) |
| setGLWidth(width) |
| |
| $('canvas#canvasPROV').attr |
| 'width': width |
| 'height': height |
| |
| svgContainer.attr('width', width+125).attr('height', height+150).append('g') |
| |
| rect = svgContainer.append('rect').attr('width', width).attr('height', height).style('fill', 'none').style('pointer-events', 'all') |
| |
| sankey = sankey.size([width, height]) |
| |
| |
| svg = svgContainer.append('g').attr("id", "zoomContainer").attr('transform', 'translate(0,' + 75 + ')') |
| |
| svgContainer.call(zoom).on("dblclick.zoom", null).on("click.zoom", null).on("mousedown.zoom", null) |
| |
| # set the nodes |
| # set the links |
| # set the layout |
| sankey.nodes(graph.provenance.nodes).links(graph.provenance.links) |
| sankey.layout(32) |
| |
| legendCategories = { "category":[{"type":"Workflow Run"},{"type":"Process Run"}, {"type":"Artifact"}, {"type":"Dictionary"}] } |
| legend = svgContainer.append('g').attr('class', 'legend').attr('x', 0).attr('y', 0).selectAll('.category').data(legendCategories.category).enter().append('g').attr('class', 'category') |
| |
| legendConfig = |
| rectWidth: 20 |
| rectHeight: 14 |
| xOffset: 625 |
| yOffset: 30 |
| xOffsetText: 5 |
| yOffsetText: 11 |
| lineHeight: 10 |
| wordApart: 125 |
| |
| legendConfig.xOffsetText += 20 |
| legendConfig.yOffsetText += legendConfig.yOffset |
| |
| legend.append('rect').attr('x', (d, i) -> |
| legendConfig.xOffset + i * legendConfig.wordApart |
| ) |
| .attr('y', legendConfig.yOffset).attr('height', legendConfig.rectHeight).attr('width', legendConfig.rectWidth).style('fill', (d) -> |
| getColorHex(d.type) |
| ).style('stroke', (d) -> |
| d3.rgb(d.color).darker 1 |
| ) |
| |
| legend.append('text').attr('x', (d, i) -> |
| legendConfig.xOffset + i * legendConfig.wordApart + legendConfig.xOffsetText |
| ).attr('y', legendConfig.yOffsetText).text((d) -> |
| d.type |
| ) |
| |
| |
| # select all the links from the json-data and append them to the Sankey obj in alphabetical order |
| link = svg.append('g').selectAll('.link').data(graph.provenance.links).enter().append('g').attr('class', 'link').attr('id', (d,i) -> |
| d.id = i |
| "link-" + i |
| ).sort((a, b) -> |
| b.dy - (a.dy)) |
| |
| p0 = link.append("path").attr("d", path(0)) |
| p1 = link.append("path").attr("d", path(1)) |
| p2 = link.append("path").attr("d", path(2)) |
| |
| link.attr('fill', (d) -> |
| getColorHex(d.source.type) |
| ).attr('opacity', lowOpacity).on('mouseover', (d) -> |
| if parseFloat(d3.select(this).style('opacity')) != highOpacity |
| d3.select(this).style('opacity', hoverOpacity) |
| ).on('mouseout', (d) -> |
| if parseFloat(d3.select(this).style('opacity')) != highOpacity |
| d3.select(this).style('opacity', lowOpacity) |
| ) |
| |
| # set the text for the edges |
| link.append('title').text (d) -> |
| dash = '\n-----------------------------------------------------------\n' |
| startText = d.source.type + ' → ' + d.target.type + dash + 'Source:\nURI: ' + d.source.name |
| endText = 'Target:\nURI: ' + d.target.name |
| startText + dash + endText |
| |
| # create the function to drag the node |
| dragmove = (d) -> |
| # uncomment the following to disable x movement (and comment the next line ) |
| #d3.select(this).attr('transform', 'translate(' + d.x + ',' + (d.y = Math.max(0, Math.min(height - (d.dy), d3.event.y))) + ')') |
| d3.select(this).attr('transform', 'translate(' + (d.x = Math.max(0, Math.min(width - (d.dx), d3.event.x))) + ',' + (d.y = Math.max(0, Math.min(height - (d.dy), d3.event.y))) + ')') |
| sankey.relayout() |
| p0.attr("d", path(1)) |
| p1.attr("d", path(0)) |
| p2.attr("d", path(2)) |
| return |
| |
| |
| # select all the nodes from the json-data and append them to the Sankey obj |
| # add behavior : dragmove |
| node = svg.append('g').selectAll('.node').data(graph.provenance.nodes).enter().append('g').attr('class', 'node').attr('transform', (d) -> |
| yValue = Math.min(d.y, height) |
| 'translate(' + d.x + ',' + yValue + ')' |
| ).call(d3.behavior.drag().origin((d) -> |
| d |
| ).on('dragstart', -> |
| @parentNode.appendChild this |
| return |
| ).on('drag', dragmove)) |
| |
| # choose the form of the node : filled rectangle |
| # set the height of the rectangle to d.dy |
| # set the width of the rectangle to nodeWidth? |
| # set the style to be filled with default color |
| node.append('rect').attr('height', (d) -> |
| Math.max 10, d.dy |
| ).attr('data-clicked', '0').attr('width', sankey.nodeWidth()).style('fill', (d) -> |
| getColorHex(d.type) |
| ).style('stroke', (d) -> |
| d3.rgb(d.color).darker 1 |
| ).append('title').text((d) -> |
| |
| returnedStr = d.type + dashLine |
| returnedStr += 'URI: ' + d.name + dashLine |
| returnedStr += d.label.split("\\n").join("\n") |
| |
| if(d.type == "Process Run") |
| returnedStr += dashLine + getTimes(d) |
| else if(d.type == "Artifact" || d.type == "Dictionary" && d.content) |
| returnedStr += dashLine + "Content :\n" + shortenString(d.content, 500) |
| |
| returnedStr |
| ) |
| |
| #modify the link opacity to the given opacity |
| click_highlight_path_color = (id, opacity) -> |
| d3.select('#link-' + id).style('opacity', opacity) |
| |
| click_highlight_path = (node, i) -> |
| # check if the user wants to drag or to click the node |
| # if he wants to drag then the following will be true |
| if (d3.event.defaultPrevented) |
| return |
| |
| remainingNodes = [] |
| nextNodes = [] |
| stroke_opacity = 0 |
| |
| # if a node has been clicked and then mark it as unclick if clicked again |
| if d3.select(this).attr('data-clicked') == '1' |
| d3.select(this).attr('data-clicked', '0') |
| stroke_opacity = lowOpacity |
| else |
| d3.select(this).attr('data-clicked', '1') |
| stroke_opacity = highOpacity |
| |
| # remember all visited nodes and the path |
| # traverse will be a JSON array |
| traverse = [ |
| { |
| linkType: 'sourceLinks' |
| nodeType: 'target' |
| } |
| { |
| linkType: 'targetLinks' |
| nodeType: 'source' |
| } |
| ] |
| |
| # for each object inside traverse |
| traverse.forEach (step) -> |
| # for each (outgoing,incoming) link |
| node[step.linkType].forEach (link) -> |
| remainingNodes.push(link[step.nodeType]) |
| click_highlight_path_color(link.id, stroke_opacity) |
| return |
| |
| while remainingNodes.length |
| nextNodes = [] |
| remainingNodes.forEach (node) -> |
| node[step.linkType].forEach (link) -> |
| nextNodes.push(link[step.nodeType]) |
| click_highlight_path_color(link.id, stroke_opacity) |
| return |
| return |
| remainingNodes = nextNodes |
| return |
| return |
| |
| |
| cc = clickCancel() |
| |
| # show the whole path on single click on nodes |
| # the function highlight_node_links uses Breadth First Search alghorithm to find the reachable nodes |
| # add remove the outgoing edges from current node on dblclick |
| node.call(cc).on('click', click_highlight_path).on('dblclick', (d)-> |
| if (d3.event.defaultPrevented) |
| return |
| svg.selectAll('.link').filter((l) -> |
| l.source == d |
| ).attr('display', -> |
| if d3.select(this).attr('display') == 'none' |
| 'inline' |
| else |
| 'none' |
| ) |
| return |
| ) |
| |
| # set the text of the nodes |
| # set their position |
| # set their font |
| # set the anchor of the text |
| node.append('text').attr('x', (d) -> |
| d.dx/2 - 12 |
| ).attr('y', (d) -> |
| d.dy/2 - 10 |
| ).attr('text-anchor', 'end') |
| .text((d) -> |
| if d.hasOwnProperty("label") |
| d.label |
| else |
| shortenStringNoMiddle(d.name) |
| ).call(wrap).filter((d) -> |
| d.x < width / 5 |
| ).attr('x', "22").attr('text-anchor', 'start') |
| |
| # select all the nodes from the json-data and append them to the Sankey obj |
| # add behavior : dragmove |
| |
| return |
| |
| |
| #http://techslides.com/save-svg-as-an-image |
| d3.select('#saveWF').on('click', -> |
| html = d3.select('svg#graphContainer').attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg').node().parentNode.innerHTML |
| imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(html))) |
| img = '<img src="' + imgsrc + '">' |
| |
| canvas = document.querySelector('canvas#canvasWF') |
| context = canvas.getContext("2d") |
| image = new Image |
| image.src = imgsrc |
| |
| image.onload = -> |
| context.drawImage(image, 0, 0) |
| canvasdata = canvas.toDataURL('image/png') |
| pngimg = '<img src="' + canvasdata + '">' |
| |
| now = new Date |
| differential = now.getDate() + "_" + now.getMonth() + "_" + now.getFullYear() + "_" + now.getHours() + "_" + now.getMinutes() + "_" + now.getSeconds() |
| |
| a = document.createElement('a') |
| a.download = 'workflow_' + differential + '.png' |
| a.href = canvasdata |
| a.click() |
| return |
| |
| return |
| ) |
| |
| d3.select('#savePROV').on('click', -> |
| html = d3.select('svg#provContainer').attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg').node().parentNode.innerHTML |
| imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(html))) |
| img = '<img src="' + imgsrc + '">' |
| |
| canvas = document.querySelector('canvas#canvasPROV') |
| context = canvas.getContext("2d") |
| image = new Image |
| image.src = imgsrc |
| |
| image.onload = -> |
| context.drawImage(image, 0, 0) |
| canvasdata = canvas.toDataURL('image/png') |
| pngimg = '<img src="' + canvasdata + '">' |
| |
| now = new Date |
| differential = now.getDate() + "_" + now.getMonth() + "_" + now.getFullYear() + "_" + now.getHours() + "_" + now.getMinutes() + "_" + now.getSeconds() |
| |
| |
| a = document.createElement('a') |
| a.download = 'provenance_' + differential + '.png' |
| a.href = canvasdata |
| a.click() |
| return |
| |
| return |
| ) |
