Merge pull request #1195 from kedar2a/mongokit-graph

Made zoomable-collapsible-graph as default for themes-topic

5 files changed, 1139 insertions, 502 deletions

diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
new file mode 100644
index 0000000..ff7f674
--- /dev/null
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/hierarchy_tree.html
@@ -0,0 +1,619 @@
+{% load i18n %}
+{% load cache %}
+
+{% load ndf_tags %}
+{% get_group_name groupid as group_name_tag %}
+
+<style>
+
+  	#app-set-item li { padding:0.5em }
+
+	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
+        content: "\f07b";
+    }
+    .jqtree-tree i {
+        margin-right: 4px;
+    }
+</style>
+
+
+<script type="text/javascript">
+
+  	// $(document).ready(function() {
+  	function plotHierarchyTree() {
+		// Funtion for loading tree for showing collection list left side panel
+		doc();
+
+		// Function for manipulating tree when user visits to page directly via browser url
+		{% if selected %} TreeTillNode(); {% endif %}
+    }
+    // });
+
+
+  	function TreeTillNode () {
+
+		// This gives the last hierarchy node id from browser url.
+		var url = "{{selected}}";
+
+		var tree_build = $(".themes").not(".jqtree-loading");
+		var node = tree_build.tree('getNodeById', url);
+		tree_build.tree('openNode', node);
+
+		// Javascript function to be used for checking objects in specific time of interval
+		setTimeout(function(){
+
+		// console.log($(".themes"))
+		if( ($(".themes").length > 0) ) { TreeTillNode() }
+		}, 100 );
+    }
+
+
+	function doc() {
+		
+		var $tree = $('.themes');
+		var user = "{{user.is_authenticated}}";
+		var unfold = "{{unfold}}";
+
+		if(unfold == "true"){
+			unfold = true
+		}
+		else{
+			unfold = false
+		}
+
+		$tree.tree({
+			autoOpen: unfold,
+
+    		onCreateLi: function(node, $li) {
+					
+				if (node.node_type == "Topic"){
+					$li.find('.jqtree-title').before('&nbsp <span class="fi-page"></span> &nbsp;');				        	
+				}
+				else{
+					$li.find('.jqtree-title').before('&nbsp <span class="fi-folder" style="color:orange"></span> &nbsp;');				        		
+				}
+    			   
+				if (node.node_type == "Topic"){        					
+					$li.find('.jqtree-element').append(
+
+            				'&nbsp;&nbsp;<a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' 
+        			);	            			
+				}
+				else{
+					if (user == "True"){
+
+    					$li.find('.jqtree-element').append(
+        					{% user_access_policy groupid request.user as user_access %}
+        					{% if user_access == "allow" %}
+
+                				'&nbsp;&nbsp;<a href="/{{groupid}}/topics/'+node.id+'/"> <i class="fi-pencil edit"></i></a> &nbsp;&nbsp; <a id='+node.id+' class="objectsCheckbox"> <input type="checkbox"> </a>' 
+                			
+                			{% endif %}
+        				);
+					}
+				}
+    		}
+		});
+		
+		// bind 'tree.click' event
+		$tree.bind(
+		    'tree.click',
+		    function(event) {
+		        // The clicked node is 'event.node'
+		        var node = event.node;
+
+		        var parent_arr = [];
+	            var parent_node = node;
+	            parent_arr.push(node.id);
+
+	            // Bellow code manipulates the parent hierarchy of clicked node in a tree
+	            while (parent_node) {
+	                if (parent_node.name !== undefined){           
+	                  $tree.tree('openNode', parent_node);
+	                  parent_node = parent_node.parent;
+	                  if (parent_node.name !== undefined){
+	                    parent_arr.push(parent_node.id);                                          
+	                  }
+	                }
+	                else{
+	                  break;
+	                }
+	            }
+	            var nav_list = parent_arr.reverse();
+		        // alert(nav_list);
+
+		        // If its topic node i.e no children of this node then show the detail view for topic
+		  		if( node.children[0] == null ){
+
+		  			if (node.node_type == "Topic"){
+		  				location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+"";
+		  			}
+			        
+		  		}
+		  		
+		    }
+		);
+
+		$tree.bind(
+		    'tree.contextmenu',
+		    function(event) {
+		        // The clicked node is 'event.node'
+		        var node = event.node;
+		        {% user_access_policy groupid request.user as user_access %}
+        		{% if user_access == "allow" %}
+			        var msg = confirm("Do you want to delete this topic ?");
+			        if (msg == true) {
+
+			        	$.ajax({
+			            	url: "{% url 'delete_themes' groupid %}",
+			             	type: 'POST',
+			             	data:{
+			             		deleteobj: node.id,
+			             		csrfmiddlewaretoken: '{{ csrf_token }}'
+			             	},
+			             	success: function(result){
+			             		alert("Topic "+node.name+" deleted successfully");
+			             		location.reload(true);
+			             	},
+			             	
+			            });
+
+					}
+				{% endif %} 
+
+		    }
+		);
+                 
+
+	};
+
+
+	// method to handle hover on topics
+	function showTopicStats(){
+      // Javascript function to be used for checking objects in specific time of interval
+      setTimeout(function(){
+      	//  On hover of topic node manipulate resources only once
+
+		$(".jqtree-title.jqtree_common").hover( function(){
+
+			topic_id = $(this).siblings("a").attr("id");
+			// var topic_name = $(this).siblings("a").attr("name");
+			var data_info = $(this).attr("data-info");
+			var hover_context = this;
+			if ( ! data_info && topic_id ){
+				$(".topic_stats").css("display", "none");
+
+				$.ajax({
+	            	url: "{% url 'get_topic_contents' groupid %}",
+	             	type: 'POST',
+	             	data:{
+	             		node_id: topic_id,
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(data){
+	             		
+	             		count = display_top_res(data)
+
+	             		if (data != "{}"){
+
+	             			$(".topic_stats").html(count);
+	             			$(hover_context).attr("data-info", data)
+
+	             			$(".topic_stats").css("display", "block");
+	             			
+	             		}
+	             		else{
+	             			$(hover_context).attr("data-info", data);	             			
+	             		}
+
+	             	},
+	             	
+	            });
+
+
+			}
+			else{ 
+				
+				if (topic_id){
+					var data = $(this).attr("data-info");
+					count = display_top_res(data)
+					$(".topic_stats").html(count);
+	     			$(".topic_stats").css("display", "block");
+				}
+
+			}
+		});
+		
+        // console.log($(".jqtree-element.jqtree_common"))
+        if( ($(".jqtree-title.jqtree_common").length <= 0) ) { 
+        	showTopicStats() 
+        }
+
+      }, 1000 );
+	}
+
+
+	function display_top_res(data){
+		data_obj = JSON.parse(data);
+ 		count = ""
+
+ 		if (data != "{}"){
+ 			var k = Object.keys(data_obj); // To get the keys from incomming data
+
+ 			for (var m = 0; m < k.length; m++) { 
+ 				var key = k[m];  
+ 				var len = data_obj[key].length;  // length of list as a value of key
+ 				// alert(key+": "+len);
+ 				count += key+": "+len+"<br/>";
+ 			} 			
+
+ 		}
+ 		else{
+ 			count += "No Resources !<br/>";
+ 		}
+
+ 		return count
+
+	}
+
+	showTopicStats();
+
+	    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
+    		setTimeout(function(){
+		      }, 1000);
+
+			alert($(this).siblings("a").attr("id"));
+		});
+
+		$("#add_theme_item").click(function() {
+			      $.ajax({
+		        type: "POST",
+		        url: "{% url 'add_theme_item' groupid %}",
+		        datatype: "html",
+		        data:{
+		          context_theme: "{{node.pk}}",
+		          name: $(".name_id").val(),
+		          csrfmiddlewaretoken: '{{ csrf_token }}'
+		        },
+		        success: function(data) {
+
+		          var item = $(".name_id").val();
+
+		          if ($.trim(data) === "failure") {
+		            alert("Theme item "+ item +" already available, Please choose different name");
+		          }
+
+		          if ($.trim(data) === "success") {
+		            location.reload(true);
+		          }
+
+		          $(".name_id").val("");
+		        }
+		      });
+
+		});
+
+		// script for fold themes_cards hierarchy
+		$(".fold").click(function() {
+			$(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}";
+			});
+		});
+
+		// script for unfold themes hierarchy
+	    $(".unfold").click(function() {
+	    	$(function() {
+	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?unfold=true";	
+	    	});
+	    });	
+
+	    $(".tree_browser").click(function() {
+			$(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}";
+			});
+		});
+
+	    // script for delete themes
+	    $(document).on('click',".button.deleteObjects",function(){
+	    	var selectedobject = $(".objectsCheckbox input:checked")
+
+	    	if(selectedobject.length > 0)
+	    	{
+           		$('#myModal').foundation('reveal', 'open');
+
+           		var i = 0;
+             	var str = "";  
+	            $.map(selectedobject,function(each){
+	                if(i == 0)
+	                {
+	                	str = str.concat(each.parentElement.id)
+	                }
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+	                
+	                i= i+1
+	            })
+
+           		$.ajax({
+		            url: "{% url 'delete_themes' groupid %}",
+		            type: 'POST',
+		            data:{
+		            	context_theme: "{{node.pk}}",
+		            	deleteobjects: str,
+		            	csrfmiddlewaretoken: '{{ csrf_token }}'
+		            },
+             		success: function(result){
+
+             			$("#deletion_results").html("");
+                        for(var obj in result)
+                        {
+	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
+                        }
+
+             		},
+             	});
+
+           	}
+           	else
+           	{
+        		alert("select object to delete")
+        	}
+
+	    });
+
+		// Script for delete themes after confirm delete.
+		$(document).on('click',".button.confirmDeleteObjects",function(){
+	        var selectedobject = $(".objectsCheckbox input:checked")
+
+	        if(selectedobject.length > 0)
+	        {
+	            var i = 0;
+	            var str = "";  
+
+	            $.map(selectedobject,function(each){
+	            	if(i == 0)
+	            	{
+	            		str = str.concat(each.parentElement.id)
+	            	}
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+
+	                i= i+1
+	            });
+
+	            $.ajax({
+	            	url: "{% url 'delete_themes' groupid %}",
+	             	type: 'POST',
+	             	data:{
+		            	context_theme: "{{node.pk}}",
+	             		deleteobjects: str,
+	             		confirm:"yes",
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(result){
+	             		alert("Themes deleted successfully");
+	             		$('#myModal').foundation('reveal', 'close');
+	             		location.reload(true);
+	             	},
+	             	
+	            });
+	             
+	        }
+	        else{
+	        alert("select object to delete")
+	        }
+
+		});
+
+		// Script for selecting all objects 
+		$(document).on('click',".checkedAll",function(){
+			if($(this).is(":checked")==true)
+			{
+				$('.objectsCheckbox input').prop( "checked", true );
+			}
+			else
+			{
+				$('.objectsCheckbox input').prop( "checked", false );
+			}
+		});
+
+		// Script for cancel option for deleting themes
+		$(document).on('click',".button.cancelDeleteObjects",function(){
+             $('#myModal').foundation('reveal', 'close');
+		});
+
+
+    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
+    		setTimeout(function(){
+		      }, 1000);
+
+			alert($(this).siblings("a").attr("id"));
+		});
+
+		// Script for selecting all objects 
+		$(document).on('click',".checkedAll",function(){
+			if($(this).is(":checked")==true)
+			{
+				$('.objectsCheckbox input').prop( "checked", true );
+			}
+			else
+			{
+				$('.objectsCheckbox input').prop( "checked", false );
+			}
+		});
+
+		// Script for cancel option for deleting themes
+		$(document).on('click',".button.cancelDeleteObjects",function(){
+             $('#myModal').foundation('reveal', 'close');
+		});
+
+	    // script for delete themes
+	    $(document).on('click',".button.deleteObjects",function(){
+	    	var selectedobject = $(".objectsCheckbox input:checked")
+
+	    	if(selectedobject.length > 0)
+	    	{
+           		$('#myModal').foundation('reveal', 'open');
+
+           		var i = 0;
+             	var str = "";  
+	            $.map(selectedobject,function(each){
+	                if(i == 0)
+	                {
+	                	str = str.concat(each.parentElement.id)
+	                }
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+	                
+	                i= i+1
+	            })
+
+           		$.ajax({
+		            url: "{% url 'delete_themes' groupid %}",
+		            type: 'POST',
+		            data:{
+		            	context_theme: "{{node.pk}}",
+		            	deleteobjects: str,
+		            	csrfmiddlewaretoken: '{{ csrf_token }}'
+		            },
+             		success: function(result){
+
+             			$("#deletion_results").html("");
+                        for(var obj in result)
+                        {
+	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
+                        }
+
+             		},
+             	});
+
+           	}
+           	else
+           	{
+        		alert("select object to delete")
+        	}
+
+	    });
+
+
+		// Script for delete themes after confirm delete.
+		$(document).on('click',".button.confirmDeleteObjects",function(){
+	        var selectedobject = $(".objectsCheckbox input:checked")
+
+	        if(selectedobject.length > 0)
+	        {
+	            var i = 0;
+	            var str = "";  
+
+	            $.map(selectedobject,function(each){
+	            	if(i == 0)
+	            	{
+	            		str = str.concat(each.parentElement.id)
+	            	}
+	                else 
+	                {
+	                	str = str.concat(","+each.parentElement.id)
+	                }
+
+	                i= i+1
+	            });
+
+	            $.ajax({
+	            	url: "{% url 'delete_themes' groupid %}",
+	             	type: 'POST',
+	             	data:{
+		            	context_theme: "{{node.pk}}",
+	             		deleteobjects: str,
+	             		confirm:"yes",
+	             		csrfmiddlewaretoken: '{{ csrf_token }}'
+	             	},
+	             	success: function(result){
+	             		alert("Themes deleted successfully");
+	             		$('#myModal').foundation('reveal', 'close');
+	             		location.reload(true);
+	             	},
+	             	
+	            });
+	             
+	        }
+	        else{
+	        alert("select object to delete")
+	        }
+
+		});
+
+
+  </script>
+
+
+	{% if themes_hierarchy %}  <!-- bool -->
+
+		<h2> {{node.name}}</h2> 
+		<div class="row">
+		<div class="large-4 columns">
+
+			{% if user_access == "allow" %}
+
+	          <a class="button tiny" data-reveal-id="view_add_page" title="Add Theme Item">
+	            +&nbsp;Add Theme Item
+	          </a>
+
+	          <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
+
+	              <h3>Add New Theme Item:</h3>
+	              <!-- To enter name of theme item -->
+	              <div>
+	                <input class="name_id" name="name" type="text" placeholder="Enter name...">
+	              </div>   <br/>           
+
+	              <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
+
+	              <a class="close-reveal-modal">&#215;</a>
+
+	          </div>          
+	        {% endif %}
+	    </div>
+
+        <div class="large-4 columns">
+
+			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Tree Browser" %} </b></a> &nbsp;&nbsp;&nbsp;
+			<ul id="hover1" class="f-dropdown" data-dropdown-content>
+				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
+				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
+			</ul> 
+			
+			<a class="collapsible_tree" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Collapsible Tree" %} </b></a>
+
+		</div>
+
+		<div class="large-4 columns">
+		{% if user.is_authenticated %}
+    		{% if user_access == "allow" %}
+    		
+    			<input class="button tiny deleteObjects right" type="button" value="Delete">
+    			<span class="right"><input class="checkedAll" type="checkbox"> Select All &nbsp;&nbsp;</span>
+
+    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
+        
+			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
+			        
+			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
+			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
+			        <div id="deletion_results"></div>
+			        <a class="close-reveal-modal">&#215;</a>
+
+		      	</div>		
+
+    		{% endif %}
+		{% endif %}
+		</div>
+		</div>
+		<hr/>
+
+	{% endif %}
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/node_ajax_view.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/node_ajax_view.html
index 6f61ec2..bb3d0a0 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/node_ajax_view.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/node_ajax_view.html
@@ -1663,7 +1663,7 @@ ul#navigation li a.last {
 
     {% if topic %}
     
-      location.href = "{% url 'theme_page' group_name_tag theme_id %}?selected="+clicked_node+"";
+      location.href = "{% url 'theme_page' group_name_tag theme_id %}?tree=hierarchical&selected="+clicked_node+"";
 
     {% else %}
 
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
index 280f231..d1aaf1d 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme.html
@@ -7,52 +7,47 @@
 
 {% get_group_name groupid as group_name_tag %}
 
-
 {% block title %} {{ title }} {% endblock %}
 
 {% block head %}  
 
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+	<!-- Scripts required for D3 graph -->
+	<script type="text/javascript" src="/static/ndf/bower_components/d3/d3.min.js"></script>
+	<script type="text/javascript" src="/static/ndf/bower_components/underscore/underscore.js"></script>
+	<script sync="text/javascript" src="/static/ndf/bower_components/FileSaver/FileSaver.js" ></script>
 
-  <!-- Scripts required for D3 graph -->
-  <script type="text/javascript" src="/static/ndf/bower_components/d3/d3.min.js"></script> <!-- checked -->
-  <script type="text/javascript" src="/static/ndf/bower_components/underscore/underscore.js"></script> <!-- checked -->
-  <script sync="text/javascript" src="/static/ndf/bower_components/FileSaver/FileSaver.js" ></script> <!-- checked -->
+	<link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> 
+	<script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script>
 
-  <link href="/static/ndf/bower_components/jqtree/jqtree.css" rel="stylesheet"> 
-  <script src="/static/ndf/bower_components/jqtree/tree.jquery.js"></script> <!-- checked -->
-  
-  <script type="text/javascript">
+<!-- 	<script type="text/javascript">
 
   	$(document).ready(function() {
 
+		// Funtion for loading tree for showing collection list left side panel
+		doc();
 
-      // Funtion for loading tree for showing collection list left side panel
-      doc();
+		// Function for manipulating tree when user visits to page directly via browser url
+		{% if selected %} TreeTillNode(); {% endif %}
+    });
 
-      // Function for manipulating tree when user visits to page directly via browser url
-      {% if selected %}
-      	TreeTillNode();
-      {% endif %}
 
+  	function TreeTillNode () {
 
-    });
+		// This gives the last hierarchy node id from browser url.
+		var url = "{{selected}}";
 
+		var tree_build = $(".themes").not(".jqtree-loading");
+		var node = tree_build.tree('getNodeById', url);
+		tree_build.tree('openNode', node);
 
-  	function TreeTillNode () {
-      // This gives the last hierarchy node id from browser url.
-      var url = "{{selected}}";
+		// Javascript function to be used for checking objects in specific time of interval
+		setTimeout(function(){
 
-	  var tree_build = $(".themes").not(".jqtree-loading");
-  	  var node = tree_build.tree('getNodeById', url);
-  	  tree_build.tree('openNode', node);
-      
-      // Javascript function to be used for checking objects in specific time of interval
-      setTimeout(function(){
-        // console.log($(".themes"))
-        if( ($(".themes").length > 0) ) { TreeTillNode() }
-      }, 100 );
-    
+		// console.log($(".themes"))
+		if( ($(".themes").length > 0) ) { TreeTillNode() }
+		}, 100 );
     }
 
 
@@ -80,16 +75,12 @@
 				else{
 					$li.find('.jqtree-title').before('&nbsp <span class="fi-folder" style="color:orange"></span> &nbsp;');				        		
 				}
-
     			   
 				if (node.node_type == "Topic"){        					
-
 					$li.find('.jqtree-element').append(
 
             				'&nbsp;&nbsp;<a id='+node.id+' name='+node.name+' class="topic" href="/{{groupid}}/topics/'+node.id+'/"> </a>' 
-
         			);	            			
-
 				}
 				else{
 					if (user == "True"){
@@ -103,12 +94,8 @@
                 			{% endif %}
         				);
 					}
-
 				}
-    					
-
     		}
-
 		});
 		
 		// bind 'tree.click' event
@@ -143,7 +130,6 @@
 
 		  			if (node.node_type == "Topic"){
 		  				location.href = "/{{group_name_tag}}/topic_details/"+node.id+"?nav_li="+nav_list+"";
-
 		  			}
 			        
 		  		}
@@ -239,8 +225,6 @@
 				}
 
 			}
-
-
 		});
 		
         // console.log($(".jqtree-element.jqtree_common"))
@@ -278,9 +262,9 @@
 	showTopicStats();
 
   </script>
-
+ -->
   <style>
-
+/*
   	#app-set-item li { padding:0.5em }
 
 	.jqtree-closed > .jqtree-element i.icon-folder-open:before {
@@ -289,7 +273,7 @@
     .jqtree-tree i {
         margin-right: 4px;
     }
-    /* for reingold tilford tree */
+*/    /* for reingold tilford tree */
 /*
 	.node {
 	  cursor: pointer;
@@ -313,26 +297,31 @@
 	*/
 	/* for reingold tilford tree -- end */
 
-	.node {
+	/*.node {
     cursor: pointer;
-  }
-
+  }*/
+/*
   .node circle {
     fill: #fff;
     stroke: steelblue;
     stroke-width: 1.5px;
   }
-   
-  .node text {
+*/   
+  /*.node text {
     font-size:10px; 
     font-family:sans-serif;
-  }
-   
+  }*/
+/*   
   .link {
     fill: none;
     stroke: #ccc;
     stroke-width: 1.5px;
   }
+*/
+  #theme-drag-zoom-tree-container{
+  	border: medium dashed #D8BFD8;
+  	border-radius: 5px;
+  }
 
 /*  .templink {
     fill: none;
@@ -340,25 +329,39 @@
     stroke-width: 3px;
   }
 */
-  .ghostCircle.show{
+  /*.ghostCircle.show{
       display:block;
-  }
-
+  }*/
+/*
   .ghostCircle, .activeDrag .ghostCircle{
        display: none;
+  }*/
+
+  .download-graph{
+  	color: gray
+  }
+  .download-graph:hover {
+  	color: black;
+  	background-color: #e5e5e5;
+  	font-size: large;
+  	cursor: pointer;
+  	padding: 0.5em;
+  	transition: all 1s;
   }
 
   </style>
 {% endblock%}
 
 
-{% block shelf_content %}
-  {% if user.is_authenticated %}
-    {% include "ndf/shelf.html" %}
-  {% else %}
-  <h4>Please Login to create your shelf</h4>
-  {% endif %}  
-{% endblock %}
+{% comment %}
+	{% block shelf_content %}
+	  {% if user.is_authenticated %}
+	    {% include "ndf/shelf.html" %}
+	  {% else %}
+	  <h4>Please Login to create your shelf</h4>
+	  {% endif %}  
+	{% endblock %}
+{% endcomment %}
 
 {% block meta_content %}
 	<a  class="Tp" href="{% url 'topics' group_name_tag %}" title="Click to go to themes card view"><h2 class="subheader">{% trans "Themes" %}</h2></a>
@@ -372,7 +375,7 @@
 	<ul class="no-bullet" id="app-set-item"> 
 
 	    {% get_memberof_objects_count theme_GST_id groupid as count %}
-	  
+
 	      <li class="selected-app-set-item"> 
 	        <div>
 	  		  {% if user_access == "allow" %}
@@ -398,90 +401,30 @@
 
 
 {% block body_content %}
-{% user_access_policy groupid request.user as user_access %}
-	
-	<!-- This overlay is for displaying topic details from collapsible tree -->
-	<!-- <div id="collaps_topic_details" class="reveal-modal" style="height:500px;overflow:hidden;width:80%" data-reveal>  
-	  	<h3>Topic details comming soon !!!</h3>
-    	<a class="close-reveal-modal" >&#215;</a> 
-	</div> -->
-	<!-- End of overlay -->
-
-	{% if themes_hierarchy %}
-
-		<h2> {{node.name}}</h2> 
-		<div class="row">
-		<div class="large-4 columns">
-
-			{% if user_access == "allow" %}
-
-	          <a class="button tiny" data-reveal-id="view_add_page" title="Add Theme Item">
-	            +&nbsp;Add Theme Item
-	          </a>
-
-	          <div id="view_add_page" class="reveal-modal" data-reveal style="height:300px;"> 
-
-	              <h3>Add New Theme Item:</h3>
-	              <!-- To enter name of theme item -->
-	              <div>
-	                <input class="name_id" name="name" type="text" placeholder="Enter name...">
-	              </div>   <br/>           
-
-	              <input type="submit" id="add_theme_item" value="Save Theme Item" class="medium round button"/>
-
-	              <a class="close-reveal-modal">&#215;</a>
 
-	          </div>          
-	        {% endif %}
-	    </div>
-
-        <div class="large-4 columns">
+	{% user_access_policy groupid request.user as user_access %}
 
-			<a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:5000" class="tree_browser" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Tree Browser" %} </b></a> &nbsp;&nbsp;&nbsp;
-			<ul id="hover1" class="f-dropdown" data-dropdown-content>
-				<li><a class="fold"><i class="fi-plus"></i> {% trans "Fold" %} </a></li> 
-				<li><a class="unfold"><i class="fi-minus"></i> {% trans "Unfold" %} </a></li>  
-			</ul> 
-			
-			<a class="collapsible_tree" style="border: 2px solid #0eacb5; padding: 5px;"><b> {% trans "Collapsible Tree" %} </b></a>
 
-		</div>
+	{% if themes_hierarchy and node %}
 
-		<div class="large-4 columns">
-		{% if user.is_authenticated %}
-    		{% if user_access == "allow" %}
-    		
-    			<input class="button tiny deleteObjects right" type="button" value="Delete">
-    			<span class="right"><input class="checkedAll" type="checkbox"> Select All &nbsp;&nbsp;</span>
 
-    			<div id="myModal" class="reveal-modal" data-reveal style="height:500px;overflow:scroll;"> 
-        
-			        <h3>{% trans "Are you sure you want to delete? All of the related items for the following themes also will be deleted:" %}</h3> 
-			        
-			        <input class="button confirmDeleteObjects" type="button" value="Confirm">
-			        <input class="button cancelDeleteObjects" type="button" value="Cancel">
-			        <div id="deletion_results"></div>
-			        <a class="close-reveal-modal">&#215;</a>
+		{% cache 300 theme_tree node.pk request.LANGUAGE_CODE %}
 
-		      	</div>		
+			{% include "ndf/hierarchy_tree.html" %}
+			<div id="app-set-item" class="themes hide" data-url="{% url 'get_tree_hierarchy' groupid node.pk %}">
+			</div>
 
-    		{% endif %}
-		{% endif %}
-		</div>
-		</div>
-		<hr/>
-
-		{% if node %}
-			{% cache 300 theme_tree node.pk request.LANGUAGE_CODE %}
-			<!-- If "Theme" node -->
-			<div id="app-set-item" class="themes" data-url="{% url 'get_tree_hierarchy' groupid node.pk %}"></div>
-
-			<!-- testing -->
+			<div id="theme-drag-zoom-tree-container" class="hide">
+		    	<div id="theme-drag-zoom-tree"></div>
+		    	<div class="row">
+			    	<div class="small-6 small-centered text-center columns download-graph" onclick='downloadCollapsibleGraph("{{node.name}}");'>
+			    		Download "{{node.name}}" Collapsible Graph
+			    	</div>
+		    	</div>
+			</div>
 			{% include 'ndf/theme_drag_zoom_d3tree.html' %}
-			{% endcache %}
-			
-		{% endif %}
-
+		{% endcache %}
+		
 	{% endif %}
 
 	<!-- For displaying themes items -->
@@ -654,358 +597,315 @@
 	<script type="text/javascript">
 
 // ------ jqtree tree ------
-    	$("document").on("hover", ".jqtree-title.jqtree_common", function(){
-    		setTimeout(function(){
-		      }, 1000);
+		// script for fold themes_cards hierarchy
 
-			alert($(this).siblings("a").attr("id"));
-		});
+    {% if node %}
+
+	    {% if tree == "hierarchical" %}
+	    	if({{unfold}})
+	    	{
+	    		$("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'});
+				$("#theme-drag-zoom-tree-container").addClass("hide")
+		    	$(".themes").removeClass("hide");
+		    	plotHierarchyTree(true);
+	    	}
+	    	else
+	    	{
+	    		$("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'});
+	    		$("#theme-drag-zoom-tree-container").addClass("hide")
+		    	$(".themes").removeClass("hide");
+		    	plotHierarchyTree(false);
+	    	}
+
+	    {% else %}
+	        
+			$(".themes").addClass("hide");
+
+    		{% if node %}
+
+    		$("article").block({message: '<h4>Building a graph... <br/>Please hold on...</h4>'});
+			    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+			    .done(function(){plotDragZoomTree(treeData);
+			    });
+
+		    {% endif %}
+
+			$("#theme-drag-zoom-tree-container").removeClass("hide");
+
+		{% endif %}
+
+    {% endif %}
 
-		$("#add_theme_item").click(function() {
-			      $.ajax({
-		        type: "POST",
-		        url: "{% url 'add_theme_item' groupid %}",
-		        datatype: "html",
-		        data:{
-		          context_theme: "{{node.pk}}",
-		          name: $(".name_id").val(),
-		          csrfmiddlewaretoken: '{{ csrf_token }}'
-		        },
-		        success: function(data) {
-
-		          var item = $(".name_id").val();
-
-		          if ($.trim(data) === "failure") {
-		            alert("Theme item "+ item +" already available, Please choose different name");
-		          }
-
-		          if ($.trim(data) === "success") {
-		            location.reload(true);
-		          }
-
-		          $(".name_id").val("");
-		        }
-		      });
 
-		});
 
-		// script for fold themes_cards hierarchy
 		$(".fold").click(function() {
-			$(function() {				
-				location.href = "{% url 'theme_page' group_name_tag app_id %}";
-			});
+
+			// $("#theme-drag-zoom-tree-container").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	    	// plotHierarchyTree(false);
+			// $(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical";
+			// });
 		});
 
 		// script for unfold themes hierarchy
 	    $(".unfold").click(function() {
-	    	$(function() {
-	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?unfold=true";	
-	    	});
+
+			// $("#theme-drag-zoom-tree-container").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	  //   	plotHierarchyTree(true);
+	    	// $(function() {
+	    		location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical&unfold=true";	
+	    	// });
 	    });	
 
 	    $(".tree_browser").click(function() {
-			$(function() {				
-				location.href = "{% url 'theme_page' group_name_tag app_id %}";
-			});
+
+			// $("#theme-drag-zoom-tree-container").addClass("hide")
+	  //   	$(".themes").removeClass("hide");
+	  //   	plotHierarchyTree()
+			// $(function() {				
+				location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=hierarchical";
+			// });
 		});
 
-	    // script for delete themes
-	    $(document).on('click',".button.deleteObjects",function(){
-	    	var selectedobject = $(".objectsCheckbox input:checked")
 
-	    	if(selectedobject.length > 0)
-	    	{
-           		$('#myModal').foundation('reveal', 'open');
-
-           		var i = 0;
-             	var str = "";  
-	            $.map(selectedobject,function(each){
-	                if(i == 0)
-	                {
-	                	str = str.concat(each.parentElement.id)
-	                }
-	                else 
-	                {
-	                	str = str.concat(","+each.parentElement.id)
-	                }
-	                
-	                i= i+1
-	            })
-
-           		$.ajax({
-		            url: "{% url 'delete_themes' groupid %}",
-		            type: 'POST',
-		            data:{
-		            	context_theme: "{{node.pk}}",
-		            	deleteobjects: str,
-		            	csrfmiddlewaretoken: '{{ csrf_token }}'
-		            },
-             		success: function(result){
-
-             			$("#deletion_results").html("");
-                        for(var obj in result)
-                        {
-	                  		var li = $("<ul><li><b>"+result[obj].title+"</b></li></ul>").appendTo($("#deletion_results"));
-                        }
-
-             		},
-             	});
-
-           	}
-           	else
-           	{
-        		alert("select object to delete")
-        	}
-
-	    });
-
-		// Script for delete themes after confirm delete.
-		$(document).on('click',".button.confirmDeleteObjects",function(){
-	        var selectedobject = $(".objectsCheckbox input:checked")
-
-	        if(selectedobject.length > 0)
-	        {
-	            var i = 0;
-	            var str = "";  
-
-	            $.map(selectedobject,function(each){
-	            	if(i == 0)
-	            	{
-	            		str = str.concat(each.parentElement.id)
-	            	}
-	                else 
-	                {
-	                	str = str.concat(","+each.parentElement.id)
-	                }
+	    $(".collapsible_tree").click(function() {
+			location.href = "{% url 'theme_page' group_name_tag app_id %}?tree=collapsible";
 
-	                i= i+1
-	            });
+			// $(".themes").addClass("hide");
 
-	            $.ajax({
-	            	url: "{% url 'delete_themes' groupid %}",
-	             	type: 'POST',
-	             	data:{
-		            	context_theme: "{{node.pk}}",
-	             		deleteobjects: str,
-	             		confirm:"yes",
-	             		csrfmiddlewaretoken: '{{ csrf_token }}'
-	             	},
-	             	success: function(result){
-	             		alert("Themes deleted successfully");
-	             		$('#myModal').foundation('reveal', 'close');
-	             		location.reload(true);
-	             	},
-	             	
-	            });
-	             
-	        }
-	        else{
-	        alert("select object to delete")
-	        }
+   //  		{% if node %}
 
-		});
+			//     $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+			//     .done(function(){plotDragZoomTree(treeData)});
 
-		// Script for selecting all objects 
-		$(document).on('click',".checkedAll",function(){
-			if($(this).is(":checked")==true)
-			{
-				$('.objectsCheckbox input').prop( "checked", true );
-			}
-			else
-			{
-				$('.objectsCheckbox input').prop( "checked", false );
-			}
+		 //    {% endif %}
+
+			// $("#theme-drag-zoom-tree-container").removeClass("hide")
 		});
 
-		// Script for cancel option for deleting themes
-		$(document).on('click',".button.cancelDeleteObjects",function(){
-             $('#myModal').foundation('reveal', 'close');
+		// 	$("#theme-drag-zoom-container").removeClass("hide");
+
+		// 	// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
+		// 	}	
+
+
+		$("#add_theme_item").click(function() {
+		    $.ajax({
+	        type: "POST",
+	        url: "{% url 'add_theme_item' groupid %}",
+	        datatype: "html",
+	        data:{
+	          context_theme: "{{node.pk}}",
+	          name: $(".name_id").val(),
+	          csrfmiddlewaretoken: '{{ csrf_token }}'
+	        },
+	        success: function(data) {
+
+	          var item = $(".name_id").val();
+
+	          if ($.trim(data) === "failure") {
+	            alert("Theme item "+ item +" already available, Please choose different name");
+	          }
+
+	          if ($.trim(data) === "success") {
+	            location.reload(true);
+	          }
+
+	          $(".name_id").val("");
+	        }
+	      });
+
 		});
+
 // ------END of jqtree tree ------
 
 // --- start of D3 collapsible tree ---
 
-	    treeData = ""
+	 //    treeData = ""
 
-	    $(".collapsible_tree").click(function() {
+	 //    $(".collapsible_tree").click(function() {
 
-	    	if(treeData.length != 0)
-	    	{
-				plotCollapsibleTree(treeData)	    			
-	    	}
-	    	else{
-	    		{% if node %}
-			    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
-			    .done(function(){plotCollapsibleTree(treeData)});
-			    {% endif %}
-	    	}
-		});
-		
-		function plotCollapsibleTree (treeData) {
-			$(".themes").html("");
+	 //    	if(treeData.length != 0)
+	 //    	{
+		// 		plotCollapsibleTree(treeData)	    			
+	 //    	}
+	 //    	else{
+	 //    		{% if node %}
 
-			var margin = {top: 20, right: 40, bottom: 20, left: 40},
-			    width = Math.max($(".themes").width(), 960) - margin.right - margin.left,
-			    height = Math.max($(".themes").height(), 800) - margin.top - margin.bottom;
-			    
-			var i = 0,
-			    duration = 750,
-			    root;
-
-			var tree = d3.layout.tree()
-			    .size([height, width]);
-
-			var diagonal = d3.svg.diagonal()
-			    .projection(function(d) { return [d.y, d.x]; });
-
-			var svg = d3.select(".themes").append("svg")
-			    .attr("width", width + margin.right + margin.left)
-			    .attr("height", height + margin.top + margin.bottom)
-			  	.append("g")
-			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-			{% if node %}
-				// d3.json("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(error, flare) {
-				  root = treeData;
-				  root.x0 = height / 2; // the point from where it starts it's animation.
-				  root.y0 = 0;
-
-				  function collapse(d) {
-				    if (d.children) {
-				      d._children = d.children;
-				      d._children.forEach(collapse);
-				      d.children = null;
-				    }
-				  }
-
-				  root.children.forEach(collapse);
-				  update(root);
-				// });
-			{% endif %}
-
-			// d3.select(self.frameElement).style("height", "800px");
-
-			function update(source) {
-
-			  // Compute the new tree layout.
-			  var nodes = tree.nodes(root).reverse(),
-			      links = tree.links(nodes);
-
-			  // Normalize for fixed-depth.
-			  nodes.forEach(function(d) { d.y = d.depth * 150;});
-
-			  // Update the nodes
-			  var node = svg.selectAll("g.node")
-			      .data(nodes, function(d) { return d.id || (d.id = ++i); });
-
-			  // Enter any new nodes at the parent's previous position.
-			  var nodeEnter = node.enter().append("g")
-			      .attr("class", "node")
-			      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
-			      .attr("title", function(d) { return d.name; })
-			      .on("click", click);
-
-			  nodeEnter.append("circle")
-			      .attr("r", 1e-6)
-			      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
-
-			  nodeEnter.append("text")
-			      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
-			      .attr("dy", "0.35em")
-			      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
-			      .text(function(d) { return d.name; })
-			      .style("fill-opacity", 1e-6);
-
-			  // Transition nodes to their new position.
-			  var nodeUpdate = node.transition()
-			      .duration(duration)
-			      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
-
-			  nodeUpdate.select("circle")
-			      .attr("r", 6.5)
-			      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
-
-			  nodeUpdate.select("text")
-			      .style("fill-opacity", 1);
-
-			  // Transition exiting nodes to the parent's new position.
-			  var nodeExit = node.exit().transition()
-			      .duration(duration)
-			      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
-			      .remove();
-
-			  nodeExit.select("circle")
-			      .attr("r", 1e-6);
-
-			  nodeExit.select("text")
-			      .style("fill-opacity", 1e-6);
-
-			  // Update the links
-			  var link = svg.selectAll("path.link")
-			      .data(links, function(d) { return d.target.id; });
-
-			  // Enter any new links at the parent's previous position.
-			  link.enter().insert("path", "g")
-			      .attr("class", "link")
-			      .attr("d", function(d) {
-			        var o = {x: source.x0, y: source.y0};
-			        return diagonal({source: o, target: o});
-			      });
-
-			  // Transition links to their new position.
-			  link.transition()
-			      .duration(duration)
-			      .attr("d", diagonal);
-
-			  // Transition exiting nodes to the parent's new position.
-			  link.exit().transition()
-			      .duration(duration)
-			      .attr("d", function(d) {
-			        var o = {x: source.x, y: source.y};
-			        return diagonal({source: o, target: o});
-			      })
-			      .remove();
-
-			  // Stash the old positions for transition.
-			  nodes.forEach(function(d) {
-			    d.x0 = d.x;
-			    d.y0 = d.y;
-			  });
-			}
+		// 		    $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;})
+		// 		    .done(function(){plotCollapsibleTree(treeData)});
 
-			// Toggle children on click.
-			function click(d) {
-			  if (d.children) {
-			    d._children = d.children;
-			    d.children = null;
-			        // console.log("non-leaf 1");
-			  } 
-			  else {
-			    if(d._children){
-			        d.children = d._children;
-			        d._children = null;
-			        // console.log("non-leaf 2");
-				}
-				else if (d.node_type == "Topic"){
-			        // console.log("Leaf!");
-			        var a = document.createElement('a');
-					a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+"");
-					// a.setAttribute('target', '_blank');
-					document.body.appendChild(a);
-					a.click();
-					a.remove();
-			        // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
-					// $('#collaps_topic_details').foundation('reveal', 'open');     
-			    }
-			  }
-			  update(d);
-			}
-
-			$("#theme-drag-zoom-container").removeClass("hide");
+		// 	    {% endif %}
+	 //    	}
+		// });
+		
+		// function plotCollapsibleTree (treeData) {
+		// 	$(".themes").html("");
 
-			// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
-			plotDragZoomTree(treeData);
-			}	
+		// 	var margin = {top: 20, right: 40, bottom: 20, left: 40},
+		// 	    width = Math.max($(".themes").width(), 960) - margin.right - margin.left,
+		// 	    height = Math.max($(".themes").height(), 800) - margin.top - margin.bottom;
+			    
+		// 	var i = 0,
+		// 	    duration = 750,
+		// 	    root;
+
+		// 	var tree = d3.layout.tree()
+		// 	    .size([height, width]);
+
+		// 	var diagonal = d3.svg.diagonal()
+		// 	    .projection(function(d) { return [d.y, d.x]; });
+
+		// 	var svg = d3.select(".themes").append("svg")
+		// 	    .attr("width", width + margin.right + margin.left)
+		// 	    .attr("height", height + margin.top + margin.bottom)
+		// 	  	.append("g")
+		// 	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+		// 	{% if node %}
+
+		// 		  root = treeData;
+		// 		  root.x0 = height / 2; // the point from where it starts it's animation.
+		// 		  root.y0 = 0;
+
+		// 		  function collapse(d) {
+		// 		    if (d.children) {
+		// 		      d._children = d.children;
+		// 		      d._children.forEach(collapse);
+		// 		      d.children = null;
+		// 		    }
+		// 		  }
+
+		// 		  root.children.forEach(collapse);
+		// 		  update(root);
+		// 		// });
+		// 	{% endif %}
+
+		// 	// d3.select(self.frameElement).style("height", "800px");
+
+		// 	function update(source) {
+
+		// 	  // Compute the new tree layout.
+		// 	  var nodes = tree.nodes(root).reverse(),
+		// 	      links = tree.links(nodes);
+
+		// 	  // Normalize for fixed-depth.
+		// 	  nodes.forEach(function(d) { d.y = d.depth * 150;});
+
+		// 	  // Update the nodes
+		// 	  var node = svg.selectAll("g.node")
+		// 	      .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+		// 	  // Enter any new nodes at the parent's previous position.
+		// 	  var nodeEnter = node.enter().append("g")
+		// 	      .attr("class", "node")
+		// 	      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
+		// 	      .attr("title", function(d) { return d.name; })
+		// 	      .on("click", click);
+
+		// 	  nodeEnter.append("circle")
+		// 	      .attr("r", 1e-6)
+		// 	      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
+
+		// 	  nodeEnter.append("text")
+		// 	      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+		// 	      .attr("dy", "0.35em")
+		// 	      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
+		// 	      .text(function(d) { return d.name; })
+		// 	      .style("fill-opacity", 1e-6);
+
+		// 	  // Transition nodes to their new position.
+		// 	  var nodeUpdate = node.transition()
+		// 	      .duration(duration)
+		// 	      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+		// 	  nodeUpdate.select("circle")
+		// 	      .attr("r", 6.5)
+		// 	      .style("fill", function(d) { return d._children ? "#10c1cb" : "#fff"; });
+
+		// 	  nodeUpdate.select("text")
+		// 	      .style("fill-opacity", 1);
+
+		// 	  // Transition exiting nodes to the parent's new position.
+		// 	  var nodeExit = node.exit().transition()
+		// 	      .duration(duration)
+		// 	      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
+		// 	      .remove();
+
+		// 	  nodeExit.select("circle")
+		// 	      .attr("r", 1e-6);
+
+		// 	  nodeExit.select("text")
+		// 	      .style("fill-opacity", 1e-6);
+
+		// 	  // Update the links
+		// 	  var link = svg.selectAll("path.link")
+		// 	      .data(links, function(d) { return d.target.id; });
+
+		// 	  // Enter any new links at the parent's previous position.
+		// 	  link.enter().insert("path", "g")
+		// 	      .attr("class", "link")
+		// 	      .attr("d", function(d) {
+		// 	        var o = {x: source.x0, y: source.y0};
+		// 	        return diagonal({source: o, target: o});
+		// 	      });
+
+		// 	  // Transition links to their new position.
+		// 	  link.transition()
+		// 	      .duration(duration)
+		// 	      .attr("d", diagonal);
+
+		// 	  // Transition exiting nodes to the parent's new position.
+		// 	  link.exit().transition()
+		// 	      .duration(duration)
+		// 	      .attr("d", function(d) {
+		// 	        var o = {x: source.x, y: source.y};
+		// 	        return diagonal({source: o, target: o});
+		// 	      })
+		// 	      .remove();
+
+		// 	  // Stash the old positions for transition.
+		// 	  nodes.forEach(function(d) {
+		// 	    d.x0 = d.x;
+		// 	    d.y0 = d.y;
+		// 	  });
+		// 	}
+
+		// 	// Toggle children on click.
+		// 	function click(d) {
+		// 	  if (d.children) {
+		// 	    d._children = d.children;
+		// 	    d.children = null;
+		// 	        // console.log("non-leaf 1");
+		// 	  } 
+		// 	  else {
+		// 	    if(d._children){
+		// 	        d.children = d._children;
+		// 	        d._children = null;
+		// 	        // console.log("non-leaf 2");
+		// 		}
+		// 		else if (d.node_type == "Topic"){
+		// 	        // console.log("Leaf!");
+		// 	        var a = document.createElement('a');
+		// 			a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+"");
+		// 			// a.setAttribute('target', '_blank');
+		// 			document.body.appendChild(a);
+		// 			a.click();
+		// 			a.remove();
+		// 	        // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
+		// 			// $('#collaps_topic_details').foundation('reveal', 'open');     
+		// 	    }
+		// 	  }
+		// 	  update(d);
+		// 	}
+
+		// 	$("#theme-drag-zoom-container").removeClass("hide");
+
+		// 	// calling function plotDragZoomTree defined in theme_drag_zoom_d3tree.html 
+		// 	plotDragZoomTree(treeData);
+		// 	}	
 
 // ---END of D3 collapsible tree
 
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
index 847bb78..a130c48 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html
@@ -1,23 +1,8 @@
-<div id="theme-drag-zoom-container" class="hide">
-        
-    <a href="#" data-reveal-id="theme-drag-zoom-tree">Show graph with zoom and drag functionality</a>
-
-    <div id="theme-drag-zoom-tree" class="reveal-modal xlarge" data-reveal>
-        <a class="close-reveal-modal">&#215;</a>
-    </div>
-
-</div>
-
 <script type="text/javascript">
-    
-    // treeData = ""
-    // $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;});
-
-    // d3.json("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(error, treeData) {
         
     function plotDragZoomTree(treeData) {
 
-    $("#theme-drag-zoom-tree").html("");
+    // $("#theme-drag-zoom-tree").html("");
 
     // Calculate total nodes, max label length
     var totalNodes = 0;
@@ -38,7 +23,7 @@
 
     // size of the diagram
     var viewerHeight = $(window).height() * 0.80;
-    var viewerWidth = $(document).width() * 0.90;
+    var viewerWidth = $(document).width() * 0.80;
 
  
     var tree = d3.layout.tree()
@@ -277,6 +262,25 @@
             d._children = null;
         }
     }
+
+    function getHierarchyIds(d) {
+        hierarchyIdsArr = [d.id];
+
+        while(d.parent)
+        {
+            hierarchyIdsArr.push(d.parent.id);
+            d = d.parent;
+        }
+        // currently treeData doesn't hold top-theme _id, 
+        // so by default it's 1 in that place. Replace 1 with top theme's _id: 
+        hierarchyIdsArr.pop(hierarchyIdsArr.indexOf(1));
+        // hierarchyIdsArr.push("{{node.pk}}");
+
+        hierarchyIdsArr.reverse();
+        // console.log(hierarchyIdsArr)
+
+        return hierarchyIdsArr
+    }
  
     var overCircle = function(d) {
         selectedNode = d;
@@ -322,7 +326,7 @@
         scale = zoomListener.scale();
         x = -source.y0;
         y = -source.x0;
-        x = x * scale + viewerWidth / 2;
+        x = x * scale + viewerWidth / 4;
         y = y * scale + viewerHeight / 2;
         d3.select('#theme-drag-zoom-tree g').transition()
             .duration(duration)
@@ -344,13 +348,47 @@
     }
  
     // Toggle children on click.
- 
-    function click(d) {
-        if (d3.event.defaultPrevented) return; // click suppressed
-        d = toggleChildren(d);
-        update(d);
-        centerNode(d);
-    }
+    
+            // Toggle children on click.
+            function click(d) {
+              if (d.children) {
+                d._children = d.children;
+                d.children = null;
+                console.log("non-leaf 1");
+              } 
+              else {
+                if(d._children){
+                    d.children = d._children;
+                    d._children = null;
+                    console.log("non-leaf 2");
+                }
+                else if (d.node_type == "Topic"){
+                    console.log("Leaf!");
+
+                    hierarchyIdsArr = getHierarchyIds(d);
+
+                    // alert("dddddd");
+                    // var a = document.createElement('a');
+                    // a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+"");
+                    // // a.setAttribute('target', '_blank');
+                    // document.body.appendChild(a);
+                    // a.click();
+                    // a.remove();
+                    location.href = "/{{group_name_tag}}/topic_details/" + d.id + 
+                                    "?nav_li=" + hierarchyIdsArr.toString() + "";
+                    // location.href = "/{{group_name_tag}}/topic_details/"+d.id+"";
+                    // $('#collaps_topic_details').foundation('reveal', 'open');     
+                }
+              }
+              update(d);
+            }
+
+    // function click(d) {
+    //     if (d3.event.defaultPrevented) return; // click suppressed
+    //     d = toggleChildren(d);
+    //     update(d);
+    //     centerNode(d);
+    // }
  
     function update(source) {
         // Compute the new height, function counts total children of root node and sets tree height accordingly.
@@ -397,14 +435,18 @@
             .attr("transform", function(d) {
                 return "translate(" + source.y0 + "," + source.x0 + ")";
             })
+            .attr("data-coll-node-id", function(d) {return d.id || (d.id = ++i); })
+            .style("cursor", "pointer")
             .on('click', click);
- 
+
         nodeEnter.append("circle")
             .attr('class', 'nodeCircle')
             .attr("r", 0)
             .style("fill", function(d) {
                 return d._children ? "lightsteelblue" : "#fff";
-            });
+            })
+            .style("stroke-width", "1.5px")
+            .style("stroke", "steelblue");
  
         nodeEnter.append("text")
             .attr("x", function(d) {
@@ -418,21 +460,23 @@
             .text(function(d) {
                 return d.name;
             })
-            .style("fill-opacity", 0);
+            .style("fill-opacity", 0)
+            .style("font-family", "sans-serif")
+            .style("font-size", "10px");
  
         // phantom node to give us mouseover in a radius around it
-        nodeEnter.append("circle")
-            .attr('class', 'ghostCircle')
-            .attr("r", 30)
-            .attr("opacity", 0.2) // change this to zero to hide the target area
-        .style("fill", "red")
-            .attr('pointer-events', 'mouseover')
-            .on("mouseover", function(node) {
-                overCircle(node);
-            })
-            .on("mouseout", function(node) {
-                outCircle(node);
-            });
+        // nodeEnter.append("circle")
+        //     .attr('class', 'ghostCircle')
+        //     .attr("r", 30)
+        //     .attr("opacity", 0.2) // change this to zero to hide the target area
+        // // .style("fill", "red")
+        //     .attr('pointer-events', 'mouseover')
+        //     .on("mouseover", function(node) {
+        //         overCircle(node);
+        //     })
+        //     .on("mouseout", function(node) {
+        //         outCircle(node);
+        //     });
  
         // Update the text to reflect whether node has children or not.
         node.select('text')
@@ -496,7 +540,10 @@
                     source: o,
                     target: o
                 });
-            });
+            })
+            .style("stroke", "#ccc")
+            .style("stroke-width", "1.5px")
+            .style("fill", "none");
  
         // Transition links to their new position.
         link.transition()
@@ -530,12 +577,82 @@
  
     // Define the root
     root = treeData;
+    aaa = root;
     root.x0 = viewerHeight / 2;
     root.y0 = 0;
  
     // Layout the tree initially and center on the root node.
+    // getData(root);
     root.children.forEach(collapse);
     update(root);
     centerNode(root);
+
+    // recursive function needed to get data for {{selected}} node
+    // result = ""
+    // function getData (d) {
+
+    //     console.log("{{selected}} : " + d.name + " : " + d.id);
+    //     if(d.id == "{{selected}}")
+    //     {
+    //         console.log("======================================================");
+    //         result = d
+    //     }
+        
+    //     if(d.children)
+    //     {
+    //         console.log(d.children)
+    //         d.children.forEach(function(i){
+    //             res = getData(i);
+    //             if (res)
+    //             {
+    //                 return res
+    //             }
+    //         })
+    //     }
+    //     else if(d._children)
+    //     {
+    //         console.log(d._children)
+    //         d._children.forEach(function(i){
+    //             res = getData(i);
+    //             if (res)
+    //             {
+    //                 return res
+    //             }
+    //         })
+    //     }
+    // }
+    // console.log(getData(root))
 }
+// alert("{{selected}}");
+//called with every property and it's value
+    
+
+    // selected = document.querySelector('[data-coll-node-id="{{selected}}"]');
+    // selectedNodeData = d3.select(selected).data();
+    // d = selectedNodeData[0];
+    // hierarchyIdsArr = getHierarchyIds(d);
+    // console.log(hierarchyIdsArr);
+
+    // while(d && d.parent)
+    // {
+    //     console.log("11")
+    //     click(d)
+    //     d = d.parent;
+    // }
+    // function expandHierarchy(d) {
+    //     console.log(d)
+
+    // }
+
+    // expandHierarchy(selectedNodeData[0]);
+
+    function downloadCollapsibleGraph(filename) 
+    {
+        var blob = new Blob([$("#theme-drag-zoom-tree").html()], {type: "image/svg+xml"});
+        filename = filename.replace(/\ /g, '-');
+        filename += "-Collapsible-Graph.svg";
+        saveAs(blob, filename);
+    }
+
+
 </script>
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/views/topics.py b/gnowsys-ndf/gnowsys_ndf/ndf/views/topics.py
index 2344f1f..6533647 100644
--- a/gnowsys-ndf/gnowsys_ndf/ndf/views/topics.py
+++ b/gnowsys-ndf/gnowsys_ndf/ndf/views/topics.py
@@ -91,6 +91,7 @@ def themes(request, group_id, app_id=None, app_set_id=None):
     nodes = ""
     unfold_tree = request.GET.get('unfold','')
     selected = request.GET.get('selected','')
+    tree = request.GET.get('tree','collapsible')
     unfold = "false"
 
     # topics_GST = node_collection.find_one({'_type': 'GSystemType', 'name': 'Topics'})
@@ -130,7 +131,7 @@ def themes(request, group_id, app_id=None, app_set_id=None):
 
     return render_to_response("ndf/theme.html",
                                {'theme_GST_id':theme_GST._id, 'themes_cards': themes_cards,
-                               'group_id': group_id,'groupid': group_id,'node': node,'shelf_list': shelf_list,'shelves': shelves,
+                               'group_id': group_id,'groupid': group_id,'node': node,'shelf_list': shelf_list,'shelves': shelves, 'tree': tree,
                                'nodes':nodes_dict,'app_id': app_id,'app_name': appName,"selected": selected,
                                'title': title,'themes_list_items': themes_list_items,
                                'themes_hierarchy': themes_hierarchy, 'unfold': unfold,