summaryrefslogtreecommitdiff
path: root/gstudio/templates/gstudio/display.html
diff options
context:
space:
mode:
Diffstat (limited to 'gstudio/templates/gstudio/display.html')
-rw-r--r--gstudio/templates/gstudio/display.html330
1 files changed, 106 insertions, 224 deletions
diff --git a/gstudio/templates/gstudio/display.html b/gstudio/templates/gstudio/display.html
index 751c8de3..90b5b271 100644
--- a/gstudio/templates/gstudio/display.html
+++ b/gstudio/templates/gstudio/display.html
@@ -153,206 +153,61 @@
Javascript for Object type force graph
-->
<script type="text/javascript" >
+function init(a,b)
+{
- var w = 700,
- h = 300,
- fill = d3.scale.category20();
-
- var vis = d3.select("#chart")
- .append("svg:svg")
- .attr("width", w)
- .attr("height", h);
-
- vis.append("svg:g").attr("class", "edges");
- vis.append("svg:g").attr("class", "nodes");
-
-$(function() {
- $.ajax({
- url: '/nodetypes/graphs/version_graph_json/{{ ssid }}',
- //crossDomain: true,
- dataType: 'json',
- success : function(json) {
-
- //var node = NID.objects.get(slug='{{ slug }}');
- var force;
-
- // this contains all the nodes as a dict with _id as the key
-
- var nodes_by_id = _.reduce(json.node_metadata, function(acc, n) {
- acc[n._id] = n;
+
+ nodes_by_id = _.reduce(a, function(acc, n) {
+ acc[n._id] = n;
return acc;
}, {});
- var member_of = _(json.member_of).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'member_of';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var contains_subtypes = _(json.contains_subtypes).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'contains_subtypes';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
- var contains_members = _(json.contains_members).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'contains_members';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var left_subjecttype_of = _(json.left_subjecttype_of).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'left_subjecttype_of';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var subjecttype_of = _(json.subjecttype_of).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'subjecttype_of';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
- var plural = _(json.plural).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'plural';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var altnames = _(json.altnames).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'altnames';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
- var content = _(json.content).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'content';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
- var contains_members = _(json.contains_members).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'contains_members';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
-
- var type_of = _(json.type_of).chain().map(function(e) {
+ all_edges=new Array();
+ //this contains all the links between the nodes
+ all_edges =_(b).chain().map(function(e) {
e.source = nodes_by_id[e.from];
e.target = nodes_by_id[e.to];
- e.type = 'type_of';
+ //`e.type = nodes_by_id[e.type]
return e;
}).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var right_subjecttype_of = _(json.right_subjecttype_of).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'right_subjecttype_of';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
- var follows_edges = _(json.is_followed_by).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'follows_edges';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
-
-
- var prior_nodes = _(json.prior_nodes).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'prior_node';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
+ return nodes_by_id[e.from] && nodes_by_id[e.to]&& e.type!="title" && e.type!="content" && e.type!="authors"
+ }).value();
+
+$(function fgraph() {
- var posterior_nodes = _(json.posterior_nodes).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'posterior_node';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
+$.getJSON('/nodetypes/graphs/version_graph_json/{{ ssid }}', function (json1) {
+ metadata=json1.node_metadata;
+ relations=json1.relations;
+
+ init(metadata,relations);
+ load({{ssid}}) });
- var mentions_edges = _(json.is_mentioned_by).chain().map(function(e) {
- e.source = nodes_by_id[e.from];
- e.target = nodes_by_id[e.to];
- e.type = 'mentions_edges';
- return e;
- }).filter(function(e){
- return nodes_by_id[e.from] && nodes_by_id[e.to]
- }).value();
-
+
+function load(key)
+{
+ var w = 700,
+ h = 500,
+ fill = d3.scale.category20();
+
+ var vis = d3.select("#chart")
+ .append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+ vis.append("svg:g").attr("class", "edges");
+ vis.append("svg:g").attr("class", "nodes");
+
- nodes_by_id[{{ nt.id }}].x = w/2.0;
- nodes_by_id[{{ nt.id }}].y = h/2.0;
+
+ nodes_by_id[{{nt.id}}].x = w/2.0;
+ nodes_by_id[{{nt.id}}].y = h/2.0;
- all_edges = new Array();
- all_edges = all_edges.concat(follows_edges, member_of, contains_members, contains_subtypes, mentions_edges, right_subjecttype_of, left_subjecttype_of, subjecttype_of, type_of,plural,altnames,contains_members,content, prior_nodes, posterior_nodes);
- /* all_edges.concat(follows_edges);
- all_edges.concat(member_of_metatype);
- all_edges.concat(contains_members);
- all_edges.concat(contains_subtypes);
- all_edges.concat(mentions_edges);
-
-
- document.getElementById('debugbox1').value= follows_edges; //member_of_metatype
- document.getElementById('debugbox2').value= mentions_edges;
- //document.getElementById('debugbox2').value= member_of_metatype;
- document.getElementById('debugbox3').value= all_edges;
- */
- var force = d3.layout.force()
- .linkStrength(0.5)
- .charge(-2000)
+ var force = d3.layout.force()
+ .linkStrength(0.3)
+ .charge(-5000)
.friction(0.7)
.gravity(0.7)
- .linkDistance(13)
+ .linkDistance(10)
.nodes([])
.links([])
.size([w, h])
@@ -378,9 +233,10 @@ $(function() {
force.links(edges);
force.start();
- link = d3.select("#chart g.edges").selectAll("line.link")
+ link = d3.select("#chart g.edges").selectAll("line.link").select(this.arrowhead)
.data(edges, function(e){return e.from + "-" + e.to + "-" + e.type});
+
link.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", 2 /* function(d) {
@@ -401,43 +257,80 @@ $(function() {
.attr("text", function(d) {
return d.type;
})
+ .attr("marker-end", "url(#arrowhead)");
- .append("a")
- .text(function(d) { return d.type; });
+
var node = d3.select("#chart g.nodes").selectAll("g.node").data(nodes);
- var new_g = node.enter().append("svg:a")
- .attr("class", function(d) { if (d._id=={{ nt.id }}) return "mainnode"; else if (isNaN(d._id)) return "relnode"; else if ((d._id)<0) return "nodetext"; else return "node"; })
- .attr("xlink:href",function(d){return d.url;})
- .call(force.drag);
-
-
-
-
- new_g.append("svg:circle")
- .attr("cx", function(d) { return d.x - w/2.0 + 15; })
- .attr("cy", function(d) { return d.y - h/2.0 + 15; })
- .attr("r", function(d) { if (d._id=={{ nt.id }}) return 8; else if (isNaN(d._id) || (d._id)<0) return 1; else return 7 })
- .style("fill", function color(d) { if (d._id=={{ nt.id }}) return "red"; else if (isNaN(d._id) || (d._id)<0) return "white" ; else return "green"});
+
-
- new_g.append("svg:text")
- .attr("class",function(d) { if (d._id=={{ nt.id }}) return "mainnode"; else if (isNaN(d._id)) return "relnode"; else if ((d._id)<0) return "nodetext"; else return "node"; })
- .attr("dy", 20)
- .attr("dx", 25)
- .attr("text-anchor",function text(d) { if (isNaN(d._id) || (d._id)<0) return "middle" ; else return "left"})
+var new_g = node.enter().append("svg:a")
+ .attr("class", function(d) { var e=(d._id).charAt(0); if (d._id=={{nt.id}}) return "mainnode"; else if (e=="-") return "nodetext"; else if (isNaN(d._id)) return "relnode" ; else return "node"; })
+
+ .call(force.drag);
-// .attr("style",function text(d) { if (isNaN(d._id)) return "font-size:9.00pt;fill:#333;" ; else return "font-size:9.00pt;fill:black;"})
+ new_g.append("svg:marker")
+ .attr("id", "arrowhead")
+ .attr("viewBox","0 0 10 10")
+ .attr("refX","20")
+ .attr("refY","5")
+ .attr("markerUnits","strokeWidth")
+ .attr("markerWidth","9")
+ .attr("markerHeight","5")
+ .attr("orient","auto")
+ .append("svg:path")
+ .attr("d","M 0 0 L 10 5 L 0 10 z")
+ .attr("fill", "#6D6666");
+
+
+
+ text1 = new_g.append("svg:text")
+ .attr("class",function(d) {var e=(d._id).charAt(0); if (d._id=={{nt.id}}) return "mainnode";else if (e=="-") return "nodetext"; else if (isNaN(d._id)) return "relnode"; else return "node"; })
+ .attr("y", 20)
+ .attr("x", 25)
+ .attr("dy", ".35em")
+ .attr("text-anchor","middle")
+
.text(function(d) {
return d.screen_name;
});
- node.exit().remove();
+ bbox = text1.node().getBBox();
+ console.log(bbox);
+
-
+ new_g.filter(function(d) { return (d._id).charAt(0)=="-"; }).append("svg:rect")
+ .attr("x",bbox.x-22)
+ .attr("y", bbox.y)
+ .attr("width", function(d) {var ttx=d.screen_name ; return (ttx.length+bbox.width+40)})
+ .attr("height", bbox.height)
+ .call(force.drag)
+ .style("fill-opacity", ".1")
+ .style("stroke", "#000")
+ .style("stroke-width","1px" );
+
+new_g.filter(function(d) { return (d._id)>0;}).append("svg:ellipse")
+ .attr("cx", bbox.x+25)
+ .attr("cy", bbox.y+13)
+ .call(force.drag)
+ .attr("rx",function(d) {var ttx=d.screen_name ; return (ttx.length + 40)})
+ .attr("ry",13)
+ .style("fill-opacity", ".2")
+ .style("stroke", "#666")
+ .style("stroke-width", "1.5px")
+ .style("fill", function(d) {if (d.refType=="Objecttype") return "blue"; else if(d.refType=="Gbobject") return "red"; else return "none"});
+
+
+
+
+
+ node.exit().remove();
+
+
+
force.on("tick", function() {
@@ -460,21 +353,10 @@ $(function() {
.duration(1000)
.style("opacity", 1);
- /* $('input#follows').change(function(){
- update(all_edges);
- });
- */
+
- /* $('input#mentions').change(function(){
- update(all_edges);
- }); */
- }
- });
-
-// $("#relation_type").buttonset();
-
-// $('input#mentions').change(function(){console.log(this)});
-// $('input#follows').change(function(){console.log(this)});
+
+ }
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-05 15:03:43 +0000