mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Merge pull request #2329 from carlfeberhard/remove.graphview
Visualizations: remove graphview
This commit is contained in:
Martin Cech
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
|
||||
<visualization name="Graphview">
|
||||
<data_sources>
|
||||
<data_source>
|
||||
<model_class>HistoryDatasetAssociation</model_class>
|
||||
<test type="has_dataprovider" test_attr="datatype">node-edge</test>
|
||||
<to_param param_attr="id">dataset_id</to_param>
|
||||
</data_source>
|
||||
<data_source>
|
||||
<model_class>HistoryDatasetAssociation</model_class>
|
||||
<test type="isinstance" test_attr="datatype" result_type="datatype">graph.Rdf</test>
|
||||
<to_param param_attr="id">dataset_id</to_param>
|
||||
</data_source>
|
||||
</data_sources>
|
||||
<params>
|
||||
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
|
||||
</params>
|
||||
<entry_point entry_point_type="mako">graphview.mako</entry_point>
|
||||
</visualization>
|
||||
@@ -1,70 +0,0 @@
|
||||
svg {
|
||||
border: 1px solid lightgrey;
|
||||
background-color: #FFF;
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
svg:not(.active):not(.ctrl) {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
path.link {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
svg:not(.active):not(.ctrl) path.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
path.link.selected {
|
||||
stroke-dasharray: 10,2;
|
||||
}
|
||||
|
||||
path.link.dragline {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
path.link.hidden {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
circle.node {
|
||||
stroke-width: 1.0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
circle.node.reflexive {
|
||||
stroke: #000 !important;
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
text.id {
|
||||
text-anchor: middle;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.tooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
font: 12px sans-serif;
|
||||
background: lightsteelblue;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
function get_firstChild(n) {
|
||||
y=n.firstChild;
|
||||
while (y && y.nodeType!=1) {
|
||||
y=y.nextSibling;
|
||||
}
|
||||
return y;
|
||||
}
|
||||
|
||||
function get_nextSibling(n) {
|
||||
y=n.nextSibling;
|
||||
while (y) {
|
||||
if (y.nodeType==1) {
|
||||
return y;
|
||||
}
|
||||
y=y.nextSibling;
|
||||
}
|
||||
return y;
|
||||
}
|
||||
|
||||
function parse_xgmml_attr(elm) {
|
||||
out = {};
|
||||
var c = get_firstChild(elm);
|
||||
while (c) {
|
||||
if (c.nodeName == "att") {
|
||||
if (c.attributes['type'].value == "string") {
|
||||
out[c.attributes['name'].value] = c.attributes['value'].value;
|
||||
}
|
||||
}
|
||||
c = get_nextSibling(c);
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function parse_xgmml(root, add_node, add_edge) {
|
||||
graph=root.getElementsByTagName("graph")[0];
|
||||
elm = get_firstChild(graph);
|
||||
while (elm) {
|
||||
if (elm.nodeName == "node") {
|
||||
var attr = parse_xgmml_attr(elm);
|
||||
add_node( elm.attributes['id'].value, elm.attributes['label'].value, attr );
|
||||
}
|
||||
if (elm.nodeName == "edge") {
|
||||
var attr = parse_xgmml_attr(elm);
|
||||
add_edge( elm.attributes['source'].value, elm.attributes['target'].value, attr );
|
||||
}
|
||||
|
||||
elm = get_nextSibling(elm);
|
||||
}
|
||||
}
|
||||
|
||||
function parse_sif(data, add_node, add_edge) {
|
||||
var lines = data.split("\n")
|
||||
for (var i in lines) {
|
||||
var tmp = lines[i].split("\t");
|
||||
if (tmp.length == 3) {
|
||||
add_edge(tmp[0], tmp[2], {type:tmp[1]});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
jQuery.fn.graphViewer = function(config) {
|
||||
|
||||
var svg, colors;
|
||||
var nodes = [],
|
||||
links = [];
|
||||
|
||||
var height = config.height;
|
||||
var width = config.width;
|
||||
|
||||
|
||||
colors = d3.scale.category10();
|
||||
|
||||
this.each(function() {
|
||||
svg = d3.select(this)
|
||||
.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height);
|
||||
}
|
||||
);
|
||||
|
||||
var tooltip_div = d3.select("#tooltip").attr("class", "tooltip").style("opacity", 0);;
|
||||
|
||||
this.add_node = function(node_id, node_label, attr) {
|
||||
nodes.push( {id: node_id, label:node_label, attr:attr} );
|
||||
}
|
||||
|
||||
this.add_edge = function(src_id, dst_id, attr) {
|
||||
var src, target;
|
||||
for (var i in nodes) {
|
||||
if (nodes[i].id == src_id) {
|
||||
src = nodes[i];
|
||||
}
|
||||
if (nodes[i].id == dst_id) {
|
||||
target = nodes[i];
|
||||
}
|
||||
}
|
||||
if (typeof src==="undefined") {
|
||||
i = nodes.length
|
||||
nodes.push( {id:src_id, label:src_id, attr:{}} )
|
||||
src = nodes[i]
|
||||
}
|
||||
if (typeof target==="undefined") {
|
||||
i = nodes.length
|
||||
nodes.push( {id:dst_id, label:dst_id, attr:{}} )
|
||||
target = nodes[i]
|
||||
}
|
||||
if (src && target) {
|
||||
links.push( {source: src, target: target, left: false, right: true } );
|
||||
}
|
||||
}
|
||||
|
||||
this.render = function() {
|
||||
var path = svg.append('svg:g').selectAll('path'),
|
||||
circle = svg.append('svg:g').selectAll('g');
|
||||
|
||||
|
||||
circle = circle.data(nodes, function(d) { return d.id; });
|
||||
var g = circle.enter().append('svg:g');
|
||||
|
||||
circle.on('mouseover', function(d) {
|
||||
tooltip_div.transition()
|
||||
.duration(200)
|
||||
.style("opacity", .9);
|
||||
tooltip_div.html( "<div>" + d.label + "</div><div>" + d.attr.type + "</div>" ).style("left", (d3.event.pageX + 40) + "px")
|
||||
.style("top", (d3.event.pageY - 35) + "px");
|
||||
})
|
||||
.on("mouseout", function(d) {
|
||||
tooltip_div.transition()
|
||||
.duration(500)
|
||||
.style("opacity", 0);
|
||||
});
|
||||
|
||||
path = path.data(links);
|
||||
|
||||
|
||||
function tick() {
|
||||
path.attr('d', function(d) {
|
||||
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
|
||||
});
|
||||
circle.attr('transform', function(d) {
|
||||
return 'translate(' + d.x + ',' + d.y + ')';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
g.append('svg:circle')
|
||||
.attr('class', 'node')
|
||||
.attr('r', 8)
|
||||
.style('stroke', 'black')
|
||||
.attr('fill', function(d) {
|
||||
return colors(d['attr']['type'])
|
||||
});
|
||||
|
||||
path.enter().append('svg:path')
|
||||
.attr('class', 'link')
|
||||
|
||||
|
||||
// init D3 force layout
|
||||
var force = d3.layout.force()
|
||||
.nodes(nodes)
|
||||
.links(links)
|
||||
.size([width, height])
|
||||
.linkDistance(25)
|
||||
.charge(-50)
|
||||
.on('tick', tick)
|
||||
circle.call(force.drag)
|
||||
force.start()
|
||||
|
||||
}
|
||||
|
||||
return this
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,77 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>${hda.name} | ${visualization_name}</title>
|
||||
|
||||
## ----------------------------------------------------------------------------
|
||||
<link type="text/css" rel="Stylesheet" media="screen" href="/static/style/base.css">
|
||||
<link type="text/css" rel="Stylesheet" media="screen" href="/plugins/visualizations/graphview/static/graphview.css">
|
||||
|
||||
## ----------------------------------------------------------------------------
|
||||
<script type="text/javascript" src="/static/scripts/libs/jquery/jquery.js"></script>
|
||||
<script type="text/javascript" src="/static/scripts/libs/jquery/jquery.migrate.js"></script>
|
||||
<script type="text/javascript" src="/static/scripts/libs/d3.js"></script>
|
||||
|
||||
<script type="text/javascript" src="/plugins/visualizations/graphview/static/graphview.js"></script>
|
||||
<script type="text/javascript" src="/plugins/visualizations/graphview/static/jquery.rdfquery.core.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
## ----------------------------------------------------------------------------
|
||||
<body>
|
||||
%if not embedded:
|
||||
## dataset info: only show if on own page
|
||||
<div id="chart-header" class="header">
|
||||
<h2 class="title">Graph View of of '${hda.name}'</h2>
|
||||
<div id="tooltip"></div>
|
||||
<p class="subtitle">${hda.info}</p>
|
||||
</div>
|
||||
%endif
|
||||
|
||||
<div id="graphview" class="graph-view-div"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
var hdaId = '${trans.security.encode_id( hda.id )}',
|
||||
hdaExt = '${hda.ext}',
|
||||
ajaxUrl = "${h.url_for( controller='/datasets', action='index')}/" + hdaId + "/display?to_ext=" + hdaExt,
|
||||
|
||||
gv = $("#graphview").graphViewer({height:900, width:900});
|
||||
|
||||
%if hda.ext == 'xgmml':
|
||||
$.ajax( ajaxUrl, {
|
||||
success: function(xmlDoc) {
|
||||
parse_xgmml(xmlDoc, gv.add_node, gv.add_edge);
|
||||
gv.render();
|
||||
},
|
||||
dataType : "xml"
|
||||
});
|
||||
|
||||
%elif hda.ext == 'sif':
|
||||
$.ajax( ajaxUrl, {
|
||||
success: function(txtDoc) {
|
||||
parse_sif(txtDoc, gv.add_node, gv.add_edge);
|
||||
gv.render();
|
||||
},
|
||||
dataType : "text"
|
||||
});
|
||||
|
||||
%elif hda.ext == 'rdf':
|
||||
$.ajax( ajaxUrl, {
|
||||
success: function(xmlDoc) {
|
||||
var rdf = $.rdf().load(xmlDoc, {});
|
||||
rdf.where('?s ?p ?o').
|
||||
each(function(){
|
||||
gv.add_edge(this.s.value._string, this.o.value._string, {"type" : this.p.value._string})
|
||||
});
|
||||
gv.render();
|
||||
},
|
||||
dataType : "xml"
|
||||
});
|
||||
%endif
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user