<commit_before><style type="text/css">
		#chart-collection .link
		{
			stroke: #ccc;
		}

		#chart-collection .nodetext {
			#pointer-events: none;
			font: 10px Serif;
			font-style:italic;
		}

		/*Central node shown in ellipse*/
		#chart-collection .mainnode{
			font: 15px sans-serif;
			fill:"black";
			border-width: 1px;
			font-weight:bold;
			border-color: gray;
		}

		/*Connector element that connects two nodes*/
		#chart-collection .relnode {
			font: 10px sans-serif;			
			fill:#404040;
		}

		/*Peripheral nodes to main node*/
		#chart-collection .node {
			border-width: 1px;
			border-color: gray;
			fill:#154534;
			font: 12px sans-serif;
		}

		/*body {
			background-color: white;
			display:block;
		}
		*/

		/* Div containing SVG area*/
		#chart-collection {
			display: block;
			padding-top: 1%;
			height: 87%;
			float: left;
			width: -webkit-calc(75%); width:-o-calc(75%); width: -moz-calc(75%); width: calc(77%);
			display: block;
		}

		#view-collection-graph svg {
			margin-left: 1%;
		}

		#view-collection-graph .graph-info-panel {
			background-color:#F2F2F2; 
			width:20%; height:100%; 
			display:inline-block; float:left;
		}

		#view-collection-graph .graph-info-panel div:first-child {
			height:90%;
		}

		#view-collection-graph .button {	background-color: #008759;	}
		#view-collection-graph .button:hover {	background-color: #00ba7b	;	}

		/* New CSS for Filter container 	*/
            .sidebar
            {
                position: absolute;
                z-index: 2;
                background-color: #FFF;
                padding: 10px;
                margin: 5px;
                border: 1px solid #6895b4;
                min-height: 3px;
                min-width: 8px;
            }
            .item-group
            {
            	margin-bottom: 5px;
            }
            .item-group .item-label
            {
            	width: 90px;
            	text-align: right;
            	font-family: Arial,sans-serif;
            	font-size: 14px;
            	font-weight: bold;
            	position: relative;
            	min-height: 1px;
            	margin-top: 5px;
            	display: inline;
            	padding-right: 5px;
            	font-size: .90em;
            }
            .checkbox-interaction-group
            {
            	margin-left: 10px;
            	margin-top: 5px;
            	clear: both;
            }
            .checkbox-container label
            {
            	display: inline;
            	margin-bottom: 
            }
            .checkbox-container
            {
            	display: block;
            }

	</style>
	<body>

		<!-- This is panel on LHS of graph -->
		<div class="graph-info-panel">
			<div>
			<!-- Title of current page -->
				<h3 class="text-center">{{node.name}}</h3>
			<!-- CheckBox Container -->
				<div class="sidebar">
					<div class="item-group">
						<label class="item-label">1. Use Shift+Click to Stick the Node.</label><br>
						<label class="item-label">   Double Click to remove Sticky Node.</label>
					</div>
					<div class="item-group">
						<label class="item-label">2. Use Ctrl+Click to Expand/Collaps the Node.</label>
					</div>
					<!-- <div class="item-group">
						<label class="item-label">3. Filter</label>
    	            	<div id="filterContainer" class="filterContainer checkbox-interaction-group"></div>
    	            </div> -->
                </div>
			</div>
		<!-- Download Button -->
			<input type="button" class="button expand" value="Save as SVG" onclick='collectiong_download("{{node.name}}");' />
		</div>

	<!-- Div containing svg area -->
		<div id="chart-collection"></div>
			<script type="text/javascript">

			var graphHeight = ($(window).height()*0.87), // Getting 87% of window height 
				graphWidth  = ($(window).width()*0.77);	 // Getting 77% of window width 

			var collectiong_objectid = "{{node.pk}}";				// _id of current viewing page
			var flag=false;								// flag used for shift+click (Fixing position of node)
			var tempc_mainnode

// -------------------Start collectiong_init()---------------------
			function collectiong_init(a,b)
			{
				collectiong_nodes_by_id = _.reduce(a, function(acc, n) 
				{
					acc[n._id] = n;
					return acc;
				}, {});

				collectiong_all_edges = new Array();
		    	//collectiong_all_edges contains all the links between the nodes
		   		collectiong_all_edges =_(b).chain().map(function(e)
		    	{
		    		if ((e.from).slice(-2) != "_r")
		    		{
		    			e.source = collectiong_nodes_by_id[e.from];
		    			temp_mainnode = e.source;
		    		}
		    		else
		    		{
		    			e.source = temp_mainnode;
		    		}

		    		if ((e.to).slice(-2) != "_r")
		    		{
		    			e.target = collectiong_nodes_by_id[e.to];
		    		}
		    		else
		    		{
		    			e.target = temp_mainnode;
		    		}
					//e.type = collectiong_nodes_by_id[e.type]
					return e;
				}).filter(function(e)
				{
					return collectiong_nodes_by_id[e.from] && collectiong_nodes_by_id[e.to]&& e.type!="prior_node" && e.to.slice(-2) != "_n"
				}).value();  
			}
// -------------------End Of collectiong_init()---------------------

// -------------------Start collectiong_fgraph()--------------------
			function collectiong_fgraph() 
			{	
				collectiong_neighbour_node	= new Array();
	    		collectiong_clicked_node	= new Array();
			    collectiong_prev_node		= new Array();

			    collectiong_neighbour_node	= collectiong_neighbour_node.concat(collectiong_objectid);  
    
				$.getJSON("{% url 'get_graph_json' groupid %}?id=" + collectiong_objectid, function (json1)
				{
					collectiong_metadata  = json1.node_metadata;
					collectiong_relations = json1.relations;

					collectiong_init(collectiong_metadata,collectiong_relations);
					// createFilter(collectiong_metadata,collectiong_relations);
					collectiong_load(collectiong_objectid);
				}); // --END of getJSON()
			}
// -----------------End of collectiong_fgraph()-------------------

// -------------------Start collectiong_load()--------------------
			function collectiong_load(key)
			{
				var w = graphWidth,
					h = graphHeight,
					fill = d3.scale.category20();

				var vis = d3.select("#chart-collection")
							.append("svg:svg")
							.attr("id", "collectiong_amazingViz")
							.attr("height", h)
							.attr("width", w)
							.attr("xmlns", "http://www.w3.org/2000/svg")
							.attr("version", "1.1");

			// Definition of marker
                vis.append("svg:marker")
    		             .attr("id", "collectiong_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"); 

			// Adding white color rectangle to background of graph 
				vis.append("rect")
					.attr("height", "100%")
					.attr("width", "100%")
					.style("fill", "white");

				vis.append("svg:g").attr("class", "edges");

				vis.append("svg:g").attr("class", "nodes");

				collectiong_nodes_by_id[key].x = w/2.0;
				collectiong_nodes_by_id[key].y = h/2.0;       

			// Defining properties of graph
				var force = d3.layout.force()
							.linkStrength(1)
							.charge(-5000)
							.friction(0.7)
							.gravity(0.5)
							.linkDistance(70)
							.nodes([])
							.links([])
							.size([w, h])
							.start();

				var drag = force.drag();

		// -------------------Start update()-----------------------
				function update(edges)
				{
			    	// for each func
				    _.each(collectiong_nodes_by_id, function(n){n.added = false});

			    	// reduce the nodes list to have only those nodes for a given rel.
				    var nodes = _.reduce(edges, function(acc, e) 
				    {
				    	if(collectiong_nodes_by_id[e.from] && !collectiong_nodes_by_id[e.from].added)
				    	{
				        	collectiong_nodes_by_id[e.from].added = true;
			    	    	acc.push(collectiong_nodes_by_id[e.from]);
			    	    }
				        if(collectiong_nodes_by_id[e.to] && !collectiong_nodes_by_id[e.to].added)
				        {
				        	collectiong_nodes_by_id[e.to].added = true;
				        	acc.push(collectiong_nodes_by_id[e.to]);
				        }
				        return acc;
				    }, []);

				    force.nodes(nodes);
				    force.links(edges);
				    force.start();

				    var link = d3.select("#chart-collection g.edges")
				    		 .selectAll("line.link")
				    		 .select(this.collectiong_arrowhead)
				    	     .data(edges, function(e){return e.from + "-" + e.to + "-" + e.type});	

				    link.enter().append("svg:line")
				        // .attr("class", "link")
    	            	.style("stroke-width", 2 )
    	            	.style("stroke", "#ccc")
		                .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; })
		                .attr("marker-end", "url(#collectiong_arrowhead)");

	                var node = d3.select("#chart-collection g.nodes")
	                			 .selectAll("g.node")
	                			 .data(nodes);

	                var new_g = node.enter().append("svg:a")
	                				.attr("id",function(d){return d._id})
	                				.attr("class", function(d){

                						// var e=(d._id).charAt(0);

	                					if (d._id==key) return "mainnode";
    	            					// else if (e=="-") return "nodetext";
        	        					else if ((d._id).slice(-2) == "_r") return "relnode"; //logic to give class to relation node (pending)
            	    					else if (d.refType == "Relation")return "node"; 
            	    				})
            	    				
                					//.attr("xlink:href", function(d){ if(d.refType == 'relation') return d.url})
                					.call(drag);

                	
                // $("#chart-collection").bind('click',function(event) {
                	// if(event.ctrlKey==1){

	                $(window).bind('keydown',function(event) 
	                {
	                	if(event.keyCode==17)
	                	{
	                		new_g.on("click",function(d)
	                		{
	                			if( d.expanded=="true" && d._id!=collectiong_objectid )
	                			{
	                				$.ajax(
	                					{	
	                						async:false,
											url:"{% url 'get_graph_json' groupid %}?id=" + d._id,
											datatype:'json',
											success:function (json2)
											{
												json2 = JSON.parse(json2);
	                							new_metadata = json2.node_metadata;
	                							// _.filter(new_metadata, function(e){if(e._id>0){
	                							_.filter(new_metadata, function(e)
	                								{
	                									if(e._id)
	                									{
	                										collectiong_clicked_node = collectiong_clicked_node.concat(e._id) ;
	                									}
	                								});

	                							index = _.indexOf(collectiong_neighbour_node , d._id);

	                							collectiong_prev_node = collectiong_neighbour_node.slice(0,index);
	                							collectiong_neighbour_node = _.difference(collectiong_neighbour_node,collectiong_clicked_node) ;
	                							collectiong_neighbour_node= collectiong_neighbour_node.concat(collectiong_prev_node);
	                							collectiong_neighbour_node = _.uniq(collectiong_neighbour_node);
	                						}
	                					});

									collectiong_metadata = []
									collectiong_relations = []
									metadata1 = []
									relations1 = []

									for(i=0;i<(collectiong_neighbour_node.length);i++)
									{
										d3.select("#collectiong_amazingViz").remove();
										g = collectiong_neighbour_node[i]

										$.ajax(
											{
												async:false,
												url:"{% url 'get_graph_json' groupid %}?id=" + g,
												datatype:'json',
												success:function (json2)
												{
													json2 = JSON.parse(json2);

													new_metadata	= json2.node_metadata;
													new_relations	= json2.relations;

													collectiong_metadata	= _.union(new_metadata,collectiong_metadata);
													collectiong_relations	= _.union(new_relations,collectiong_relations);
													collectiong_relations	= collectiong_check_Relationtype(collectiong_metadata,collectiong_relations);
												}
											});
									}

                          			_.each(collectiong_metadata, function(m)
                          			{
                          				for(i=0;i<collectiong_neighbour_node.length;i++)
                          				{
                          					if(m._id == collectiong_neighbour_node[i])
                          					{	m.expanded	=	"true";		}
                          					else
                          					{	m.expanded	=	"false";	}
                          				}
                          			});

                          			collectiong_init(collectiong_metadata,collectiong_relations);
                          			collectiong_load(collectiong_objectid) ;
                          		} // --END if
                          		// else if(d._id>0 && d._id!= collectiong_objectid)
                          		else if(d._id!= collectiong_objectid)
                          		{
                          			collectiong_neighbour_node =collectiong_neighbour_node.concat(d._id);

                          			d3.select("#collectiong_amazingViz").remove();

                          			$.ajax(
                          				{
                          					async:false,
                          					url:"{% url 'get_graph_json' groupid %}?id=" + d._id ,
		                          			datatype:'json',
		                          			success:function (json2)
		                          			{
		                          				json2 = JSON.parse(json2);

		                          				new_metadata	=	json2.node_metadata;
		                          				new_relations	=	json2.relations;

		                          				collectiong_metadata	=	_.union(new_metadata,collectiong_metadata);
		                          				collectiong_relations	=	_.union(new_relations,collectiong_relations);
		                          				collectiong_relations	=	collectiong_check_Relationtype(collectiong_metadata,collectiong_relations);

		                          				_.each(collectiong_metadata, function(m)
		                          				{
		                          					for(i=0;i<collectiong_neighbour_node.length;i++)
		                          					{
		                          						if(m._id == collectiong_neighbour_node[i])
		                          							m.expanded = "true";
		                          					}
		                          				});
		                          			}
                          				});

                					collectiong_init(collectiong_metadata,collectiong_relations);
                					collectiong_load(collectiong_objectid);
                				}
                			});
						}
					//press shift key + drag to fix the position of node according to user choice.
						if(event.keyCode==16)
						{
							flag = true;
							new_g.on("click",collectiong_ondrag);
						}
					});


					new_g.filter(function(d){ return (d._id).slice(-2) =="_n"; })
						.append("svg:rect")
                		.attr("x", function(d) {var ttx=d.screen_name ;  return (-ttx.length*2/1.75)} )
                		.attr("y", 10)	
                		.attr("width", function(d) {var ttx=d.screen_name ;  return (ttx.length+22+40)})
                		.attr("height", 20)
                		.call(drag)
                		.style("fill-opacity", ".1")
                		.style("stroke", "lightgray")
                		.style("stroke-width","1px");

                	new_g.filter(function(d) { if(d.refType=="GSystem" || d.refType=="Relation") return true ;}).append("svg:ellipse")
                		.attr("cx", 25)                
                		.attr("cy", 20)
                		.call(drag)
                		.attr("rx",function(d) {var ttx=d.screen_name; return(ttx.length/2 +"em")})
                		.attr("ry",15)
                		.style("fill-opacity", function(d) {if (d.refType=="Relation") return 0.2; else if(d.refType=="GSystem") return 0.7;})
                	// .style("stroke", "#666")
                	// .style("stroke-width", "1.5px")
                		.style("fill", function(d) {if (d.refType=="Relation") return "#008759"; else if(d.refType=="GSystem") return "#008759"; else return "none"})
                		.on("dblclick",collectiong_dblclick);


                	var text1 = new_g.append("svg:text")
                				 .attr("class",function(d) {
                				 	if (d._id==key) return "mainnode";
                				 	// else if (e=="-") return "nodetext";
                				 	else if ( d._id.search("_r") > 0) return "relnode";
                				 	else if ( d.refType == "Relation" ) return "node";
                				 })
                				 .attr("y", 20)
                				 .attr("x", 25)
                				 .attr("dy", ".35em")
                				 .attr("text-anchor","middle")
                				 .on("drag",drag)
                				 .text(function(d){  if((d._id).slice(-2) != "_r")
                				 					 {	return d.screen_name; }
                				 					}	)
                				 .style("font", function(d){

            	    					nodeFont = d._id==key?"bold 15px sans-serif":(d.refType=="Relation"||(d._id).slice(-2)=="_n")?"normal 12px serif":"normal 10px sans-serif";
            	    					return nodeFont;
            	    				})
                				 .style("fill", function(d){
                				 	if(d.refType=="GSystem"){ return "black" }
                				 	if(d.refType=="Relation" || (d._id).slice(-2)=="_n"){ return "#00432c" }
                				 	else if((d._id).slice(-2)=="_r")
                				 		{ return "#404040"}
                				 })
                				 .on("dblclick", collectiong_dblclick)
                				 .attr("class","nodeText");

                		// 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(drag)
                		// .style("fill-opacity", ".1")
                		// .style("stroke", "#000")
                		// .style("stroke-width","1px"  );


                	node.exit().remove();

                	force.on("tick", function()
                	{
                		var x_center = $("#chart-collection").width() / 2;
                		var y_center = $("#chart-collection").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-20) + "," + (d.y-20) + ")"; });
                	});
                }
        //---------------END of update()---------------

                update(collectiong_all_edges);

                vis.style("opacity", 1e-6)
                	.transition()
                	.duration(1000)
                	.style("opacity", 1);
            }
//---------------END of collectiong_load()---------------

//----------------- Sticky Feature Code -----------------
			function collectiong_dblclick(d)
            {
            	//double click to remove the fix posiotion of node.
            	d3.select(this).classed("fixed", d.fixed = false);
            }
            function collectiong_ondrag(d)
            {
            	//Check if flag is true then it will fix the position for node.
               	//But without shift + click node will not fix.
               	if (flag)
               	{
               		d3.select(this).classed("fixed",d.fixed=true);
               	}
               	else
               	{
               		d3.select(this).classed("fixed",d.fixed=false);
               	}

               	if (flag)
               	{
               		flag = false;	
               	}
            }
//--------------- END of Sticky Feature Code ---------------

//--------------- Graph filtration Code --------------------
			// createFilter() to create check box's
// 			// createFilter() to create check box's
//                 function createFilter(node_meta,rel)
//                 {
//                 	var relations_a = new Array();
//                 	var i = 0;
//                 	d3.selectAll("div")
//                 	  .data(rel)
//                 	  .each(function(d)
//                 	  {
//                 	  	relations_a[i] = d;
//                 	  	i++;
//                 	  })

//                 	var temp_rel = new Array();

//                 	d3.select(".filterContainer")
//                 	  .selectAll("div")
//                 	  .data(node_meta)
//                 	  .enter()
//                 	  .append("div")
//                 	  .attr("class","checkbox-container")
//                 	  .append("label")
//                 	  .each(function (d)
//                 	  {
//                 	  	if(d._id.slice(-2) == "_r" && d.screen_name!="prior_node" && d.screen_name!="collection_set")
//                 	  	{
//                 	  	// Create checkbox for each data
// 	                	  	d3.select(this)
// 	                	  	  .append("input")
// 	                	  	  .attr("type","checkbox")
// 	                	  	  .attr("id",function(d){return "chk_"+d._id;})
// 	                	  	  .attr("checked",true)

// 	                	  	d3.select(this)
// 	                	  	  .append("span")
// 	                	  	  .text(function(d){return d.screen_name;});
// 	                	}

// 	                	d3.select(this)
// 	                	  .on("click",function(d)
// 	                	  {
// 	                	  	for(i=0;i<relations_a.length;i++)
// 	                	  	{
// 	                	  		if(d._id == relations_a[i].from)
// 	                	  		{
// 	                	  			temp_rel.push(relations_a[i].to);
// 	                	  		}
// 	                	  	}
// 	                	  	filterGraph(d,temp_rel);
// 	                	  	while(temp_rel.length>0)
// 	                	  	{
// 	                	  		temp_rel.pop();
// 	                	  	}
// 	                	  })	
//                 	  });
//                 }
//             // Method to filter graph
//                 function filterGraph(Id,Id_rel)
//                 {
//                	// To hide or show the text
//                 	$("text").text(function(d)
//                 			  {
//                 				if($(this).text() == Id.screen_name)
//                 				{
//                 					$(this).toggle();
//                 				}
//                 			  });

//                	// To hide or show the links
//                 	$("line[text|='"+Id.screen_name+"']").toggle();

//                 // To hide or show the node's
//                 	for(var i=0;i<Id_rel.length;i++)
//                 	{
//                 		$("a[id|='"+Id_rel[i]+"']").toggle();
//                 	}
// 				}
//--------------- END of Graph filtration Code ----------------

                function collectiong_check_Relationtype(metadata,relations)
                {
                	_.each(metadata,function(d)
                	{
                		if (d.refType=="Relationtype")
                		{
                			var a = d.inverse;
                			if (d.flag==1)
                			{
                				relations= _.reject(relations,function(e){ return e.type == a; });
                			}
                			else if (d.flag==0)
                			{
                				relations= _.reject(relations,function(e){ return e.type == d.screen_name });
                			}
                		}
                	});
                	return relations;
                }

                $(collectiong_fgraph());

//--------------- Save the Graph ----------------
                function collectiong_download(filename) 
                {
				    // var el = document.createElement('a');
				    // el.setAttribute('href', 'data:image/svg+xml;,' + encodeURIComponent(svgdata));
				    // el.setAttribute('collectiong_download', filename);
				    // el.click();

				    var blob = new Blob([$("#chart-collection").html()], {type: "image/svg+xml"});
				    filename = filename.replace(/\ /g, '_');
				    filename += "_Collection_Graph.svg";
					saveAs(blob, filename);
				}
		</script>
	</body><commit_msg>Removed all other attributes from collection graph.<commit_after><style type="text/css">
		#chart-collection .link
		{
			stroke: #ccc;
		}

		#chart-collection .nodetext {
			#pointer-events: none;
			font: 10px Serif;
			font-style:italic;
		}

		/*Central node shown in ellipse*/
		#chart-collection .mainnode{
			font: 15px sans-serif;
			fill:"black";
			border-width: 1px;
			font-weight:bold;
			border-color: gray;
		}

		/*Connector element that connects two nodes*/
		#chart-collection .relnode {
			font: 10px sans-serif;			
			fill:#404040;
		}

		/*Peripheral nodes to main node*/
		#chart-collection .node {
			border-width: 1px;
			border-color: gray;
			fill:#154534;
			font: 12px sans-serif;
		}

		/*body {
			background-color: white;
			display:block;
		}
		*/

		/* Div containing SVG area*/
		#chart-collection {
			display: block;
			padding-top: 1%;
			height: 87%;
			float: left;
			width: -webkit-calc(75%); width:-o-calc(75%); width: -moz-calc(75%); width: calc(77%);
			display: block;
		}

		#view-collection-graph svg {
			margin-left: 1%;
		}

		#view-collection-graph .graph-info-panel {
			background-color:#F2F2F2; 
			width:20%; height:100%; 
			display:inline-block; float:left;
		}

		#view-collection-graph .graph-info-panel div:first-child {
			height:90%;
		}

		#view-collection-graph .button {	background-color: #008759;	}
		#view-collection-graph .button:hover {	background-color: #00ba7b	;	}

		/* New CSS for Filter container 	*/
            .sidebar
            {
                position: absolute;
                z-index: 2;
                background-color: #FFF;
                padding: 10px;
                margin: 5px;
                border: 1px solid #6895b4;
                min-height: 3px;
                min-width: 8px;
            }
            .item-group
            {
            	margin-bottom: 5px;
            }
            .item-group .item-label
            {
            	width: 90px;
            	text-align: right;
            	font-family: Arial,sans-serif;
            	font-size: 14px;
            	font-weight: bold;
            	position: relative;
            	min-height: 1px;
            	margin-top: 5px;
            	display: inline;
            	padding-right: 5px;
            	font-size: .90em;
            }
            .checkbox-interaction-group
            {
            	margin-left: 10px;
            	margin-top: 5px;
            	clear: both;
            }
            .checkbox-container label
            {
            	display: inline;
            	margin-bottom: 
            }
            .checkbox-container
            {
            	display: block;
            }

	</style>
	<body>

		<!-- This is panel on LHS of graph -->
		<div class="graph-info-panel">
			<div>
			<!-- Title of current page -->
				<h3 class="text-center">{{node.name}}</h3>
			<!-- CheckBox Container -->
				<div class="sidebar">
					<div class="item-group">
						<label class="item-label">1. Use Shift+Click to Stick the Node.</label><br>
						<label class="item-label">   Double Click to remove Sticky Node.</label>
					</div>
					<div class="item-group">
						<label class="item-label">2. Use Ctrl+Click to Expand/Collaps the Node.</label>
					</div>
					<!-- <div class="item-group">
						<label class="item-label">3. Filter</label>
    	            	<div id="filterContainer" class="filterContainer checkbox-interaction-group"></div>
    	            </div> -->
                </div>
			</div>
		<!-- Download Button -->
			<input type="button" class="button expand" value="Save as SVG" onclick='collectiong_download("{{node.name}}");' />
		</div>

	<!-- Div containing svg area -->
		<div id="chart-collection"></div>
			<script type="text/javascript">

			var graphHeight = ($(window).height()*0.87), // Getting 87% of window height 
				graphWidth  = ($(window).width()*0.77);	 // Getting 77% of window width 

			var collectiong_objectid = "{{node.pk}}";				// _id of current viewing page
			var flag=false;								// flag used for shift+click (Fixing position of node)
			var tempc_mainnode

// -------------------Start collectiong_init()---------------------
			function collectiong_init(a,b)
			{
				collectiong_nodes_by_id = _.reduce(a, function(acc, n) 
				{
					acc[n._id] = n;
					return acc;
				}, {});

				collectiong_all_edges = new Array();
		    	//collectiong_all_edges contains all the links between the nodes
		   		collectiong_all_edges =_(b).chain().map(function(e)
		    	{
		    		if ((e.from).slice(-2) != "_r")
		    		{
		    			e.source = collectiong_nodes_by_id[e.from];
		    			temp_mainnode = e.source;
		    		}
		    		else
		    		{
		    			e.source = temp_mainnode;
		    		}

		    		if ((e.to).slice(-2) != "_r")
		    		{
		    			e.target = collectiong_nodes_by_id[e.to];
		    		}
		    		else
		    		{
		    			e.target = temp_mainnode;
		    		}
					//e.type = collectiong_nodes_by_id[e.type]
					return e;
				}).filter(function(e)
				{
					if(e.type!="collection_set")
					{
						return collectiong_nodes_by_id[e.from] && collectiong_nodes_by_id[e.to] && e.to.slice(-2) != "_n";
					}
				}).value();  
			}
// -------------------End Of collectiong_init()---------------------

// -------------------Start collectiong_fgraph()--------------------
			function collectiong_fgraph() 
			{	
				collectiong_neighbour_node	= new Array();
	    		collectiong_clicked_node	= new Array();
			    collectiong_prev_node		= new Array();

			    collectiong_neighbour_node	= collectiong_neighbour_node.concat(collectiong_objectid);  
    
				$.getJSON("{% url 'get_graph_json' groupid %}?id=" + collectiong_objectid, function (json1)
				{
					collectiong_metadata  = json1.node_metadata;
					collectiong_relations = json1.relations;

					collectiong_init(collectiong_metadata,collectiong_relations);
					// createFilter(collectiong_metadata,collectiong_relations);
					collectiong_load(collectiong_objectid);
				}); // --END of getJSON()
			}
// -----------------End of collectiong_fgraph()-------------------

// -------------------Start collectiong_load()--------------------
			function collectiong_load(key)
			{
				var w = graphWidth,
					h = graphHeight,
					fill = d3.scale.category20();

				var vis = d3.select("#chart-collection")
							.append("svg:svg")
							.attr("id", "collectiong_amazingViz")
							.attr("height", h)
							.attr("width", w)
							.attr("xmlns", "http://www.w3.org/2000/svg")
							.attr("version", "1.1");

			// Definition of marker
                vis.append("svg:marker")
    		             .attr("id", "collectiong_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"); 

			// Adding white color rectangle to background of graph 
				vis.append("rect")
					.attr("height", "100%")
					.attr("width", "100%")
					.style("fill", "white");

				vis.append("svg:g").attr("class", "edges");

				vis.append("svg:g").attr("class", "nodes");

				collectiong_nodes_by_id[key].x = w/2.0;
				collectiong_nodes_by_id[key].y = h/2.0;       

			// Defining properties of graph
				var force = d3.layout.force()
							.linkStrength(1)
							.charge(-5000)
							.friction(0.7)
							.gravity(0.5)
							.linkDistance(70)
							.nodes([])
							.links([])
							.size([w, h])
							.start();

				var drag = force.drag();

		// -------------------Start update()-----------------------
				function update(edges)
				{
			    	// for each func
				    _.each(collectiong_nodes_by_id, function(n){n.added = false});

			    	// reduce the nodes list to have only those nodes for a given rel.
				    var nodes = _.reduce(edges, function(acc, e) 
				    {
				    	if(collectiong_nodes_by_id[e.from] && !collectiong_nodes_by_id[e.from].added)
				    	{
				        	collectiong_nodes_by_id[e.from].added = true;
			    	    	acc.push(collectiong_nodes_by_id[e.from]);
			    	    }
				        if(collectiong_nodes_by_id[e.to] && !collectiong_nodes_by_id[e.to].added)
				        {
				        	collectiong_nodes_by_id[e.to].added = true;
				        	acc.push(collectiong_nodes_by_id[e.to]);
				        }
				        return acc;
				    }, []);

				    force.nodes(nodes);
				    force.links(edges);
				    force.start();

				    var link = d3.select("#chart-collection g.edges")
				    		 .selectAll("line.link")
				    		 .select(this.collectiong_arrowhead)
				    	     .data(edges, function(e){return e.from + "-" + e.to + "-" + e.type});	

				    link.enter().append("svg:line")
				        // .attr("class", "link")
    	            	.style("stroke-width", 2 )
    	            	.style("stroke", "#ccc")
		                .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; })
		                .attr("marker-end", "url(#collectiong_arrowhead)");

	                var node = d3.select("#chart-collection g.nodes")
	                			 .selectAll("g.node")
	                			 .data(nodes);

	                var new_g = node.enter().append("svg:a")
	                				.attr("id",function(d){return d._id})
	                				.attr("class", function(d){

                						// var e=(d._id).charAt(0);

	                					if (d._id==key) return "mainnode";
    	            					// else if (e=="-") return "nodetext";
        	        					else if ((d._id).slice(-2) == "_r") return "relnode"; //logic to give class to relation node (pending)
            	    					else if (d.refType == "Relation")return "node"; 
            	    				})
            	    				
                					//.attr("xlink:href", function(d){ if(d.refType == 'relation') return d.url})
                					.call(drag);

                	
                // $("#chart-collection").bind('click',function(event) {
                	// if(event.ctrlKey==1){

	                $(window).bind('keydown',function(event) 
	                {
	                	if(event.keyCode==17)
	                	{
	                		new_g.on("click",function(d)
	                		{
	                			if( d.expanded=="true" && d._id!=collectiong_objectid )
	                			{
	                				$.ajax(
	                					{	
	                						async:false,
											url:"{% url 'get_graph_json' groupid %}?id=" + d._id,
											datatype:'json',
											success:function (json2)
											{
												json2 = JSON.parse(json2);
	                							new_metadata = json2.node_metadata;
	                							// _.filter(new_metadata, function(e){if(e._id>0){
	                							_.filter(new_metadata, function(e)
	                								{
	                									if(e._id)
	                									{
	                										collectiong_clicked_node = collectiong_clicked_node.concat(e._id) ;
	                									}
	                								});

	                							index = _.indexOf(collectiong_neighbour_node , d._id);

	                							collectiong_prev_node = collectiong_neighbour_node.slice(0,index);
	                							collectiong_neighbour_node = _.difference(collectiong_neighbour_node,collectiong_clicked_node) ;
	                							collectiong_neighbour_node= collectiong_neighbour_node.concat(collectiong_prev_node);
	                							collectiong_neighbour_node = _.uniq(collectiong_neighbour_node);
	                						}
	                					});

									collectiong_metadata = []
									collectiong_relations = []
									metadata1 = []
									relations1 = []

									for(i=0;i<(collectiong_neighbour_node.length);i++)
									{
										d3.select("#collectiong_amazingViz").remove();
										g = collectiong_neighbour_node[i]

										$.ajax(
											{
												async:false,
												url:"{% url 'get_graph_json' groupid %}?id=" + g,
												datatype:'json',
												success:function (json2)
												{
													json2 = JSON.parse(json2);

													new_metadata	= json2.node_metadata;
													new_relations	= json2.relations;

													collectiong_metadata	= _.union(new_metadata,collectiong_metadata);
													collectiong_relations	= _.union(new_relations,collectiong_relations);
													collectiong_relations	= collectiong_check_Relationtype(collectiong_metadata,collectiong_relations);
												}
											});
									}

                          			_.each(collectiong_metadata, function(m)
                          			{
                          				for(i=0;i<collectiong_neighbour_node.length;i++)
                          				{
                          					if(m._id == collectiong_neighbour_node[i])
                          					{	m.expanded	=	"true";		}
                          					else
                          					{	m.expanded	=	"false";	}
                          				}
                          			});

                          			collectiong_init(collectiong_metadata,collectiong_relations);
                          			collectiong_load(collectiong_objectid) ;
                          		} // --END if
                          		// else if(d._id>0 && d._id!= collectiong_objectid)
                          		else if(d._id!= collectiong_objectid)
                          		{
                          			collectiong_neighbour_node =collectiong_neighbour_node.concat(d._id);

                          			d3.select("#collectiong_amazingViz").remove();

                          			$.ajax(
                          				{
                          					async:false,
                          					url:"{% url 'get_graph_json' groupid %}?id=" + d._id ,
		                          			datatype:'json',
		                          			success:function (json2)
		                          			{
		                          				json2 = JSON.parse(json2);

		                          				new_metadata	=	json2.node_metadata;
		                          				new_relations	=	json2.relations;

		                          				collectiong_metadata	=	_.union(new_metadata,collectiong_metadata);
		                          				collectiong_relations	=	_.union(new_relations,collectiong_relations);
		                          				collectiong_relations	=	collectiong_check_Relationtype(collectiong_metadata,collectiong_relations);

		                          				_.each(collectiong_metadata, function(m)
		                          				{
		                          					for(i=0;i<collectiong_neighbour_node.length;i++)
		                          					{
		                          						if(m._id == collectiong_neighbour_node[i])
		                          							m.expanded = "true";
		                          					}
		                          				});
		                          			}
                          				});

                					collectiong_init(collectiong_metadata,collectiong_relations);
                					collectiong_load(collectiong_objectid);
                				}
                			});
						}
					//press shift key + drag to fix the position of node according to user choice.
						if(event.keyCode==16)
						{
							flag = true;
							new_g.on("click",collectiong_ondrag);
						}
					});


					new_g.filter(function(d){ return (d._id).slice(-2) =="_n"; })
						.append("svg:rect")
                		.attr("x", function(d) {var ttx=d.screen_name ;  return (-ttx.length*2/1.75)} )
                		.attr("y", 10)	
                		.attr("width", function(d) {var ttx=d.screen_name ;  return (ttx.length+22+40)})
                		.attr("height", 20)
                		.call(drag)
                		.style("fill-opacity", ".1")
                		.style("stroke", "lightgray")
                		.style("stroke-width","1px");

                	new_g.filter(function(d) { if(d.refType=="GSystem" || d.refType=="Relation") return true ;}).append("svg:ellipse")
                		.attr("cx", 25)                
                		.attr("cy", 20)
                		.call(drag)
                		.attr("rx",function(d) {var ttx=d.screen_name; return(ttx.length/2 +"em")})
                		.attr("ry",15)
                		.style("fill-opacity", function(d) {if (d.refType=="Relation") return 0.2; else if(d.refType=="GSystem") return 0.7;})
                	// .style("stroke", "#666")
                	// .style("stroke-width", "1.5px")
                		.style("fill", function(d) {if (d.refType=="Relation") return "#008759"; else if(d.refType=="GSystem") return "#008759"; else return "none"})
                		.on("dblclick",collectiong_dblclick);


                	var text1 = new_g.append("svg:text")
                				 .attr("class",function(d) {
                				 	if (d._id==key) return "mainnode";
                				 	// else if (e=="-") return "nodetext";
                				 	else if ( d._id.search("_r") > 0) return "relnode";
                				 	else if ( d.refType == "Relation" ) return "node";
                				 })
                				 .attr("y", 20)
                				 .attr("x", 25)
                				 .attr("dy", ".35em")
                				 .attr("text-anchor","middle")
                				 .on("drag",drag)
                				 .text(function(d){  if((d._id).slice(-2) != "_r")
                				 					 {	return d.screen_name; }
                				 					}	)
                				 .style("font", function(d){

            	    					nodeFont = d._id==key?"bold 15px sans-serif":(d.refType=="Relation"||(d._id).slice(-2)=="_n")?"normal 12px serif":"normal 10px sans-serif";
            	    					return nodeFont;
            	    				})
                				 .style("fill", function(d){
                				 	if(d.refType=="GSystem"){ return "black" }
                				 	if(d.refType=="Relation" || (d._id).slice(-2)=="_n"){ return "#00432c" }
                				 	else if((d._id).slice(-2)=="_r")
                				 		{ return "#404040"}
                				 })
                				 .on("dblclick", collectiong_dblclick)
                				 .attr("class","nodeText");

                		// 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(drag)
                		// .style("fill-opacity", ".1")
                		// .style("stroke", "#000")
                		// .style("stroke-width","1px"  );


                	node.exit().remove();

                	force.on("tick", function()
                	{
                		var x_center = $("#chart-collection").width() / 2;
                		var y_center = $("#chart-collection").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-20) + "," + (d.y-20) + ")"; });
                	});
                }
        //---------------END of update()---------------

                update(collectiong_all_edges);

                vis.style("opacity", 1e-6)
                	.transition()
                	.duration(1000)
                	.style("opacity", 1);
            }
//---------------END of collectiong_load()---------------

//----------------- Sticky Feature Code -----------------
			function collectiong_dblclick(d)
            {
            	//double click to remove the fix posiotion of node.
            	d3.select(this).classed("fixed", d.fixed = false);
            }
            function collectiong_ondrag(d)
            {
            	//Check if flag is true then it will fix the position for node.
               	//But without shift + click node will not fix.
               	if (flag)
               	{
               		d3.select(this).classed("fixed",d.fixed=true);
               	}
               	else
               	{
               		d3.select(this).classed("fixed",d.fixed=false);
               	}

               	if (flag)
               	{
               		flag = false;	
               	}
            }
//--------------- END of Sticky Feature Code ---------------

//--------------- Graph filtration Code --------------------
			// createFilter() to create check box's
// 			// createFilter() to create check box's
//                 function createFilter(node_meta,rel)
//                 {
//                 	var relations_a = new Array();
//                 	var i = 0;
//                 	d3.selectAll("div")
//                 	  .data(rel)
//                 	  .each(function(d)
//                 	  {
//                 	  	relations_a[i] = d;
//                 	  	i++;
//                 	  })

//                 	var temp_rel = new Array();

//                 	d3.select(".filterContainer")
//                 	  .selectAll("div")
//                 	  .data(node_meta)
//                 	  .enter()
//                 	  .append("div")
//                 	  .attr("class","checkbox-container")
//                 	  .append("label")
//                 	  .each(function (d)
//                 	  {
//                 	  	if(d._id.slice(-2) == "_r" && d.screen_name!="prior_node" && d.screen_name!="collection_set")
//                 	  	{
//                 	  	// Create checkbox for each data
// 	                	  	d3.select(this)
// 	                	  	  .append("input")
// 	                	  	  .attr("type","checkbox")
// 	                	  	  .attr("id",function(d){return "chk_"+d._id;})
// 	                	  	  .attr("checked",true)

// 	                	  	d3.select(this)
// 	                	  	  .append("span")
// 	                	  	  .text(function(d){return d.screen_name;});
// 	                	}

// 	                	d3.select(this)
// 	                	  .on("click",function(d)
// 	                	  {
// 	                	  	for(i=0;i<relations_a.length;i++)
// 	                	  	{
// 	                	  		if(d._id == relations_a[i].from)
// 	                	  		{
// 	                	  			temp_rel.push(relations_a[i].to);
// 	                	  		}
// 	                	  	}
// 	                	  	filterGraph(d,temp_rel);
// 	                	  	while(temp_rel.length>0)
// 	                	  	{
// 	                	  		temp_rel.pop();
// 	                	  	}
// 	                	  })	
//                 	  });
//                 }
//             // Method to filter graph
//                 function filterGraph(Id,Id_rel)
//                 {
//                	// To hide or show the text
//                 	$("text").text(function(d)
//                 			  {
//                 				if($(this).text() == Id.screen_name)
//                 				{
//                 					$(this).toggle();
//                 				}
//                 			  });

//                	// To hide or show the links
//                 	$("line[text|='"+Id.screen_name+"']").toggle();

//                 // To hide or show the node's
//                 	for(var i=0;i<Id_rel.length;i++)
//                 	{
//                 		$("a[id|='"+Id_rel[i]+"']").toggle();
//                 	}
// 				}
//--------------- END of Graph filtration Code ----------------

                function collectiong_check_Relationtype(metadata,relations)
                {
                	_.each(metadata,function(d)
                	{
                		if (d.refType=="Relationtype")
                		{
                			var a = d.inverse;
                			if (d.flag==1)
                			{
                				relations= _.reject(relations,function(e){ return e.type == a; });
                			}
                			else if (d.flag==0)
                			{
                				relations= _.reject(relations,function(e){ return e.type == d.screen_name });
                			}
                		}
                	});
                	return relations;
                }

                $(collectiong_fgraph());

//--------------- Save the Graph ----------------
                function collectiong_download(filename) 
                {
				    // var el = document.createElement('a');
				    // el.setAttribute('href', 'data:image/svg+xml;,' + encodeURIComponent(svgdata));
				    // el.setAttribute('collectiong_download', filename);
				    // el.click();

				    var blob = new Blob([$("#chart-collection").html()], {type: "image/svg+xml"});
				    filename = filename.replace(/\ /g, '_');
				    filename += "_Collection_Graph.svg";
					saveAs(blob, filename);
				}
		</script>
	</body>
{'fraction_non_alphanumeric': 0.1559981874421262, 'fraction_numerical': 0.012175660500029552, 'mean_word_length': 1.219608186111597, 'pattern_counts': {'":': 4, '<': 93, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1563796', 'n_tokens_mistral': 18542, 'n_tokens_neox': 15027, 'n_words': 2371}