objectapp/templates/objectapp/skeleton.html

{% load gstudio_tags i18n  %}
{% get_tags as nodetype_tags %}
{% load adminmedia  grp_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			.link {
				stroke: #ccc;
			}
			.nodetext {
				pointer-events: none;
				font: 10px sans-serif;
			}
			.mainnode{
				font: 10px sans-serif;
			        fill:"red";
				border-width: 1px;
				border-color: gray;

			}
			.relnode {
				font: 10px sans-serif;
			           fill:#000;
			}
			.node {
				border-width: 1px;
				border-color: gray;
			        fill:"green";
				font: 10px sans-serif;

			}
			body {
				background-color: white;
			}
			#chart {
				height: 90%;
				margin: 0 auto;
				width: 90%;
				display: block;
			}
			svg {
				margin-left: 10%;
				margin-right: 10%;
				display: block;
				position: absolute;
			}

		</style>
		<!-- the header lines from grappelli -->
		{% block blockbots %}
		<meta name="robots" content="NONE,NOARCHIVE" />
		{% endblock %} <!-- STYLESHEETS -->
		{% block stylesheets %}
		<link href="{% admin_media_prefix %}css/base.css" rel="stylesheet" type="text/css" />
		{% if LANGUAGE_BIDI %}
		<link href="{% block stylesheet_rtl %}{% admin_media_prefix %}css/rtl.css{% endblock %}" rel="stylesheet" type="text/css" />
		{% endif %}
		<link href="{% admin_media_prefix %}jquery/ui/css/custom-theme/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" media="screen" title="no title" charset="utf-8" />
		<link href="{% admin_media_prefix %}css/jquery-ui-grappelli-extensions.css" rel="stylesheet" type="text/css" />
		{% endblock %} <!-- EXTRASTYLES -->
		{% block extrastyle %}{% endblock %} <!-- JAVASCRIPTS -->
		{% block javascripts %}
		<script type="text/javascript">
			// GLOBALS
			var grappelli = {},
			// TODO: klemens: drop ADMIN_URL
			ADMIN_URL = "{% url admin:index %}",
			MODEL_URL_ARRAY = {% get_content_types %}, DATE_FORMAT = "{% get_date_format %}", TIME_FORMAT = "{% get_time_format %}", DATETIME_FORMAT = "{% get_datetime_format %}";
		</script>
		<!-- jQuery, jQuery-UI -->
		<script src="{% admin_media_prefix %}jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}jquery/ui/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>
		<!-- Grappelli Main JS -->
		<script src="{% admin_media_prefix %}js/grappelli/grappelli.js" type="text/javascript"></script>
		<!-- Grappelli jQuery Plugins, Widgets -->
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_collapsible.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_collapsible_group.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_timepicker.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_fk.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_m2m.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_generic.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_fk.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_m2m.js" type="text/javascript"></script>
		<script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_generic.js" type="text/javascript"></script>

		<!--
    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.tabs.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.position.min.js"></script>

    <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery.ui.timepicker.js"></script>

	<script src="{{STATIC_URL}}gstudio/js/gstudio.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    -->


		<!-- EXTRAHEAD -->
		{% block extrahead %}{% endblock %}

		{% endblock %} <!-- the header lines from gstudio -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="cache-control" content="public" />
		<meta name="robots" content="follow, all" />
		<meta name="language" content="{{ LANGUAGE_CODE }}" />
		<meta name="description" content="{% block meta-description %}Demonstration of the Gstudio Blog application.{% endblock %}" />
		<meta name="keywords" content="{% block meta-keywords %}django, blog, gstudio, {{ nodetype_tags|join:", "}}{% endblock %}" />
		<meta name="author" content="gnowgi" />
		{% block meta %}{% endblock %}
		<link rel="pingback" href="/xmlrpc/" />
		<link rel="shortcut icon" href="{{ STATIC_URL }}gstudio/img/favicon.ico" />
		<link rel="home" href="{% url gstudio_nodetype_archive_index %}" />

		<!-- <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/grappelli_skin_default.css" />
		<link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/screen_gstudio.css" />
		-->
		<link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/screen.css" />

		<link rel="stylesheet" type="text/css" media="print" href="{{ STATIC_URL }}gstudio/css/print.css" />
		<!--[if lt IE 8]>
		<link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/ie.css" />
		<![endif]-->
		{% block link %}{% endblock %}
		{% block script %}{% endblock %} <title>Gnowledge Studio - {% block title %}{% endblock %}</title>
	</head>
	<body id="gstudio">
		<div class="body" >
			<div class="content">
				<!--
				<div id="relation_type" class="ui-buttonset">
				<span>Relation type:</span>
				<input checked="checked" value="follows" type="radio" id="follows" name="radio" class="ui-helper-hidden-accessible"><label for="follows" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="false" role="button" aria-disabled="false"><span class="ui-button-text">Followers</span></label>
				<input value="mentions" type="radio" id="mentions" name="radio" class="ui-helper-hidden-accessible"><label for="mentions" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">Mentions</span></label>
				<input value="hashtags" type="radio" id="hashtags" name="radio"/><label for="hashtags">Shared interests</label>
				</div>
				-->
				<div id="chart">
					<svg width="960" height="700" style="opacity: 1; ">
				</div>
				<script type="text/javascript" src="/static/gstudio/js/jquery.min.js" ></script>
				<script type="text/javascript" src="/static/gstudio/js/jquery-ui.js" ></script>
				<script type="text/javascript" src="/static/gstudio/js/underscore.js" ></script>
				<script type="text/javascript" src="/static/gstudio/js/d3.js"></script>
				<script type="text/javascript" src="/static/gstudio/js/d3.layout.js"></script>
				<script type="text/javascript" src="/static/gstudio/js/d3.geom.js"></script>
				<!-- <script type="text/javascript" src="/static/gstudio/js/force.js"></script>

				Javascript for Object type force graph
				-->
   <script type="text/javascript" >

    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: '/gstudio/graphs/graph_json/{{ object.id }}',
    //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;
        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 authors = _(json.authors).chain().map(function(e) {
        e.source = nodes_by_id[e.from];
        e.target = nodes_by_id[e.to];
        e.type = 'authors';
        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) {
        e.source = nodes_by_id[e.from];
        e.target = nodes_by_id[e.to];
        e.type = 'type_of';
        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();

      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();
      
      
      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 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();
      

	nodes_by_id[{{ object.id }}].x = w/2.0;
	nodes_by_id[{{ object.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,authors,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)
              .friction(0.7)
              .gravity(0.7)
              .linkDistance(15)
              .nodes([])
              .links([])
              .size([w, h])
              .start();

      function update(edges){
        // for each func
        _.each(nodes_by_id, function(n){n.added = false});
        // reduce the nodes list to have only those nodes for a given rel.
      nodes = _.reduce(edges, function(acc, e) {
          if(nodes_by_id[e.from] && !nodes_by_id[e.from].added){
            nodes_by_id[e.from].added = true;
            acc.push(nodes_by_id[e.from]);
          }
          if(nodes_by_id[e.to] && !nodes_by_id[e.to].added){
            nodes_by_id[e.to].added = true;
            acc.push(nodes_by_id[e.to]);
          }       
          return acc;
        }, []);
        
        force.nodes(nodes);
        force.links(edges);
        force.start();

        link = d3.select("#chart g.edges").selectAll("line.link")
                .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) {
                  return Math.sqrt(d.value);
                } */ )
                .attr("x1", function(d) {
                  return d.source.x;
                })
		
                .attr("y1", function(d) {
                  return d.source.y;
                })
                .attr("x2", function(d) {
                  return d.target.x;
                })
                .attr("y2", function(d) {
                  return d.target.y;
                })
                .attr("text", function(d) {
                  return d.type;
                })

	      .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:g")
              .attr("class", function(d) {  if (d._id=={{ object.id }}) return "mainnode"; else if (isNaN(d._id)) return "relnode"; else return "node"; })
	      .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=={{ object.id }}) return 8; else if (isNaN(d._id)) return 1; else return 7; })
                        .style("fill", function color(d) { if (d._id=={{ object.id }}) return "red"; else if (isNaN(d._id)) return "white" ; else return "green";});

			
		new_g.append("svg:text")
			.attr("class","nodetext")
                        .attr("dy", 20)
	                .attr("dx", 25)
                        .attr("text-anchor",function text(d) { if (isNaN(d._id)) return "middle" ; else return "left"}) 

                        .text(function(d) {
                          return d.screen_name;
                        });  
             
			
                node.exit().remove();
        
	
        force.on("tick", function() {

          var x_center = $("#chart").width() / 2;
          var y_center = $("#chart").height() / 2;

          link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

          node.attr("transform", function(d) { return "translate(" + (d.x-16) + "," + (d.y-16) + ")"; });

        });
      }
      
	update(all_edges);
      vis.style("opacity", 1e-6)
              .transition()
              .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)});
});


</script>
			</div>
		</div>
		<div>
			{% include "gstudio/_header.html" %}
			<div id="breadcrumbs" class="span-24 last">
				/ {% block breadcrumbs %}{% endblock %}
			</div>
			<div id="body" class="span-24 last">
				<div id="content" class="hfeed span-16 border">
					{% block content %} <h3>The content block need to be overrided!</h3>
					{% endblock %}
				</div>
				<div id="sidebar">
				  {% block sidebar %}
				  {% endblock %}
				</div>
				
				<div id="footer" class="span-24 last">
					<p>
						<a rel="license"
						href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative
						Commons License" style="border-width:0"	src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png"/></a> All material is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a> unless mentioned otherwise.
						<br/>
						Powered	by <a href="http://www.djangoproject.com">Django</a>
						and <a href="http://github.com/gnowgi/django-gstudio">Gstudio
						{{ GSTUDIO_VERSION }}</a>.
					</p>
				</div>
			
	</body>
</html>