got filtering on canvas working

app/assets/javascripts/Jit/filters.js

@@ -45,9 +45,9 @@ function hideCategory(category, duration) {
     if (duration == null) duration = 500;
 	Mconsole.graph.eachNode( function (n) {
 		if (n.getData('itemcatname') == category) {
-			n.setData('alpha', 0, 'end');
+			n.setData('alpha', 0.4, 'end');
 			n.eachAdjacency(function(adj) {  
-			adj.setData('alpha', 0, 'end');  
+			adj.setData('alpha', 0.4, 'end');  
 		  	});	
 		}	
 	});
@@ -75,12 +75,27 @@ function showCategory(category, duration) {
 	});	
 }
 
+
+
+
+// Define the Find/Filters possibilities
+
+var findTopics = ['name','metacode', 'mapper (by name)', 'map (by name)']
+var findSynapses = ['topics (by name)', 'directionality', 'mapper (by name)', 'map (by name)']
+var findMaps = ['name', 'topic (by name)', 'mapper (by name)', 'synapse (by topics)']
+var findMappers = ['name', 'topic (by name)', 'map (by name)', 'synapse (by topics)']
+
+
+
+
+
+// These functions toggle ALL nodes and synapses on the page
 function hideAll(duration) {
     if (duration == null) duration = 500;
 	Mconsole.graph.eachNode( function (n) {
-		  n.setData('alpha', 0, 'end');
+		  n.setData('alpha', 0.4, 'end');
 		  n.eachAdjacency(function(adj) {  
-		  adj.setData('alpha', 0, 'end');  
+		  adj.setData('alpha', 0.4, 'end');  
 		  });	
 	});
 	Mconsole.fx.animate({  
@@ -89,7 +104,6 @@ function hideAll(duration) {
 		duration: duration  
 	}); 	
 }
-
 function showAll(duration) {
     if (duration == null) duration = 500;
 	Mconsole.graph.eachNode( function (n) {
@@ -106,22 +120,91 @@ function showAll(duration) {
 }
 
 
- $(document).ready(function() {
+
+
+/// Traverse the Graph and only show the searched for nodes
+
+function onCanvasSearch(name,mapID,mapperID) {
+
+	Mconsole.graph.eachNode( function (n) {
+		  if (name != null) {
+		     if (n.name.indexOf(name) !== -1) {
+				 n.setData('alpha', 1, 'end');
+				 n.eachAdjacency(function(adj) {  
+				   adj.setData('alpha', 0.4, 'end');  
+				 });
+		     }
+			 else {
+				 n.setData('alpha', 0.4, 'end');
+				 n.eachAdjacency(function(adj) {  
+				   adj.setData('alpha', 0.4, 'end');  
+				 }); 
+			 }
+		  }
+		  else if (mapID != null) {
+		     if (n.getData('inmaps').indexOf(parseInt(mapID)) !== -1) {
+				 n.setData('alpha', 1, 'end');
+				 n.eachAdjacency(function(adj) {  
+				   adj.setData('alpha', 0.4, 'end');  
+				 });
+		     }
+			 else {
+				 n.setData('alpha', 0.4, 'end');
+				 n.eachAdjacency(function(adj) {  
+				   adj.setData('alpha', 0.4, 'end');  
+				 }); 
+			 }
+		  }
+		  else if (mapperID != null) {
+		     if (n.getData('userid').toString() == mapperID) {
+			    n.setData('alpha', 1, 'end');
+		        n.eachAdjacency(function(adj) {  
+		           adj.setData('alpha', 0.4, 'end');  
+		        });
+			 }
+			 else {
+				 n.setData('alpha', 0.4, 'end');
+				 n.eachAdjacency(function(adj) {  
+				   adj.setData('alpha', 0.4, 'end');  
+				 }); 
+			 }
+		  }
+	});
+	Mconsole.fx.animate({  
+		modes: ['node-property:alpha',  
+				'edge-property:alpha'],  
+		duration: 500  
+	});	
+}
+
+
+
+
+
+
+////
+////
+////
+//// Define all the dynamic interactions for the FIND/FILTER using Jquery
+
+$(document).ready(function() {
    
+   // this sets up the initial opening of the find box
    $('.sideOption').bind('click',function(){
 	  $('.sideOption').animate({
-		width: '250px',
+		width: '305px',
 		height: '76px'
 	  }, 700, function() {
-		$('#by_name_input').focus();
+		$('#topic_by_name_input').focus();
 	  });
-	  $('#closeFind').css('display','block');
+	  $('#closeFind, #findWhere').css('display','block');
 	  $('.sideOption').unbind('click');
 	  $('.sideOption').css('cursor','default');
    });
    
+   // this sets up the closing of the find box, and the toggling between open and closed.
    $('#closeFind').click(function(){
-	   $('#closeFind').css('display','none');
+	   $('#closeFind, #findWhere').css('display','none');
 	   $('.sideOption').css('cursor','pointer');
 	   $('.sideOption').animate({
 		width: '45px',
@@ -130,34 +213,59 @@ function showAll(duration) {
 		    $('.sideOption').bind('click',function(){
 				  firstVal = $('.sideOption option[value="name"]').attr('selected');
 				  secondVal = $('.sideOption option[value="metacode"]').attr('selected');
-				  if ( firstVal === 'selected') {
+				  thirdVal = $('.sideOption option[value="map (by name)"]').attr('selected');
+				  fourthVal = $('.sideOption option[value="mapper (by name)"]').attr('selected');
+				  if ( firstVal === 'selected' || thirdVal === 'selected' || fourthVal === 'selected' ) {
 					  $('.sideOption').animate({
-						width: '250px',
+						width: '305px',
-						height: '76px'
+					    height: '76px'
-					  }, 700, function() {
+					  }, 300, function() {
-						$('#by_name_input').focus();
+						$('#topic_by_name_input').focus();
 					  });
 				  } else if ( secondVal === 'selected') {
 					  $('.sideOption').animate({
 						width: '380px',
 						height: '463px'
-					  }, 700, function() {
+					  }, 300, function() {
 						// Animation complete.
 					  });
+				  } else if ( thirdVal === 'selected' ) {
+					  $('.sideOption').animate({
+						width: '305px',
+					    height: '76px'
+					  }, 300, function() {
+						$('#map_by_name_input').focus();
+					  });
+				  } else if ( fourthVal === 'selected' ) {
+					  $('.sideOption').animate({
+						width: '305px',
+					    height: '76px'
+					  }, 300, function() {
+						$('#mapper_by_name_input').focus();
+					  });
 				  }
-				  $('#closeFind').css('display','block');
+				  $('#closeFind, #findWhere').css('display','block');
 				  $('.sideOption').unbind('click');
 				  $('.sideOption').css('cursor','default');
 			   });
 	  });
    });
    
+   // this is where interactions within the find box begin
+   //
+   $("#topic_by_name_input").keyup(function() {
+          var topicName = $(this).val();
+          onCanvasSearch(topicName,null,null);
+   });
+			
    $('.sideOption .select_content').change(function() {
 	      firstVal = $(this).children("option[value='topics']").attr('selected');
 		  secondVal = $(this).children("option[value='maps']").attr('selected');
 		  thirdVal = $(this).children("option[value='mappers']").attr('selected');
 		  if ( firstVal == 'selected') {
 			  $('.sideOption .select_type').children("option[value='metacode']").removeAttr('disabled');
+			  $('.sideOption .select_type').children("option[value='map (by name)']").removeAttr('disabled');
+			  $('.sideOption .select_type').children("option[value='mapper (by name)']").removeAttr('disabled');
 			  $('.find').css('display','none');
 			  $('.find_topic_by_name').css('display','block');
 			  $('#topic_by_name_input').focus();
@@ -167,13 +275,15 @@ function showAll(duration) {
 			  if ( $(".sideOption .select_type").val() != "name") { 
 			  	$(".sideOption .select_type").val('name');
 			    $('.sideOption').animate({
-					width: '250px',
+					width: '305px',
 					height: '76px'
-				  }, 700, function() {
+				  }, 300, function() {
 					// Animation complete.
 				  });
 			  }
 			  $('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
+			  $('.sideOption .select_type').children("option[value='map (by name)']").attr('disabled','disabled');
+			  $('.sideOption .select_type').children("option[value='mapper (by name)']").attr('disabled','disabled');
 			  $('.find').css('display','none');
 			  $('.find_map_by_name').css('display','block');
 			  $('#map_by_name_input').focus();
@@ -181,6 +291,8 @@ function showAll(duration) {
 		  else if ( thirdVal == 'selected' ) {
 			  $(".sideOption .select_type").val('name');
 			  $('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
+			  $('.sideOption .select_type').children("option[value='map (by name)']").attr('disabled','disabled');
+			  $('.sideOption .select_type').children("option[value='mapper (by name)']").attr('disabled','disabled');
 			  $('.find').css('display','none');
 			  $('.find_mapper_by_name').css('display','block');
 			  $('#mapper_by_name_input').focus();
@@ -190,31 +302,54 @@ function showAll(duration) {
    $('.sideOption .select_type').change(function() {
 	      firstVal = $(this).children("option[value='name']").attr('selected');
 		  secondVal = $(this).children("option[value='metacode']").attr('selected');
+		  thirdVal = $(this).children("option[value='map (by name)']").attr('selected');
+		  fourthVal = $(this).children("option[value='mapper (by name)']").attr('selected');
 		  if ( firstVal === 'selected') {
-			  $('.find_topic_by_metacode').fadeOut('fast', function() {
+			  $('.find').fadeOut('fast', function() {
 				  showAll();
 				  $('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
 				  for (var catVis in categoryVisible) {
 					  categoryVisible[catVis] = true;
 				  }
 				  $('.sideOption').animate({
-					width: '250px',
+					width: '305px',
 					height: '76px'
-				  }, 700, function() {
+				  }, 300, function() {
-					// Animation complete.
+					$('.find_topic_by_name').css('display','block');
+					$('#topic_by_name_input').focus();
 				  });
-				  $('.find_topic_by_name').fadeIn('fast');  
 			  });
 		  }
 		  else if ( secondVal === 'selected' ) {
-			  $('.find_topic_by_name').fadeOut('fast', function() {
+			  $('.find').fadeOut('fast', function() {
 				  $('.sideOption').animate({
 					width: '380px',
 					height: '463px'
-				  }, 700, function() {
+				  }, 300, function() {
-					// Animation complete.
+					$('.find_topic_by_metacode').fadeIn('fast');
-				  });
+				  }); 
-				  $('.find_topic_by_metacode').fadeIn('fast');  
+			  });
+		  }
+		  else if ( thirdVal === 'selected' ) {
+			  $('.find').fadeOut('fast', function() {
+				  $('.sideOption').animate({
+					width: '305px',
+					height: '76px'
+				  }, 300, function() {
+					$('.find_map_by_name').css('display','block'); 
+					$('#map_by_name_input').focus();
+				  });  
+			  });
+		  }
+		  else if ( fourthVal === 'selected' ) {
+			  $('.find').fadeOut('fast', function() {
+				  $('.sideOption').animate({
+					width: '305px',
+					height: '76px'
+				  }, 300, function() {
+					$('.find_mapper_by_name').css('display','block'); 
+					$('#mapper_by_name_input').focus();
+				  });  
 			  });
 		  }
 	});
@@ -232,23 +367,43 @@ function showAll(duration) {
     });
 	
 	$('.find_map_by_name #map_by_name_input').bind('railsAutocomplete.select', function(event, data){
-      /* Do something here */
+          firstVal = $('.sideOption .select_content').children("option[value='topics']").attr('selected');
-      if (data.item.id != undefined) {
+		  secondVal = $('.sideOption .select_content').children("option[value='maps']").attr('selected');
-        window.open("/maps/" + data.item.id)
+		  thirdVal = $('.sideOption .select_content').children("option[value='mappers']").attr('selected');
-      }
+		  if ( firstVal == 'selected') {
-      $('.find_map_by_name #map_by_name_input').val('');
+			 onCanvasSearch(null,data.item.id,null);
-    });
+		  }
+		  else if ( secondVal == 'selected' ) {
+			 if (data.item.id != undefined) {
+                window.open("/maps/" + data.item.id);
+             }
+             $('.find_map_by_name #map_by_name_input').val('');
+		  }
+		  else if ( thirdVal == 'selected' ) {
+
+		  }
+	});
     
     $('.find_map_by_name').bind('submit', function(event, data){
       event.preventDefault();
     });
 	
 	$('.find_mapper_by_name #mapper_by_name_input').bind('railsAutocomplete.select', function(event, data){
-      /* Do something here */
+          firstVal = $('.sideOption .select_content').children("option[value='topics']").attr('selected');
-      if (data.item.id != undefined) {
+		  secondVal = $('.sideOption .select_content').children("option[value='maps']").attr('selected');
-        window.open("/users/" + data.item.id)
+		  thirdVal = $('.sideOption .select_content').children("option[value='mappers']").attr('selected');
-      }
+		  if ( firstVal == 'selected') {
-      $('.find_mapper_by_name #mapper_by_name_input').val('');
+			 onCanvasSearch(null,null,data.item.id.toString());
+		  }
+		  else if ( secondVal == 'selected' ) {
+			 
+		  }
+		  else if ( thirdVal == 'selected' ) {
+			 if (data.item.id != undefined) {
+                window.open("/users/" + data.item.id);
+             }
+             $('.find_mapper_by_name #mapper_by_name_input').val('');
+		  }
     });
     
     $('.find_mapper_by_name').bind('submit', function(event, data){
@@ -299,24 +454,24 @@ function showAll(duration) {
 				  switchVisible(category);
 			}
 			// this means that we are on a card view
-			else {	
+			//else {	
-			  if (categoryVisible[category] == true) {
+//			  if (categoryVisible[category] == true) {
-				  if (category.split(' ').length == 1) {
+//				  if (category.split(' ').length == 1) {
-					$('#cards .' + category).fadeOut('slow');
+//					$('#cards .' + category).fadeOut('slow');
-				  }
+//				  }
-				  else {
+//				  else {
-					  $('#cards .' + category.split(' ')[0]).fadeOut('slow');
+//					  $('#cards .' + category.split(' ')[0]).fadeOut('slow');
-				  }
+//				  }
-			  }
+//			  }
-			  else if (categoryVisible[category] == false) {
+//			  else if (categoryVisible[category] == false) {
-				  if (category.split(' ').length == 1) {
+//				  if (category.split(' ').length == 1) {
-					$('#cards .' + category).fadeIn('slow');
+//					$('#cards .' + category).fadeIn('slow');
-				  }
+//				  }
-				  else {
+//				  else {
-					  $('#cards .' + category.split(' ')[0]).fadeIn('slow');
+//					  $('#cards .' + category.split(' ')[0]).fadeIn('slow');
-				  }
+//				  }
-			  }
+//			  }
-			}
+//			}
 					// toggle the image and the boolean array value
 			if (categoryVisible[category] == true) {
 				$(this).addClass('toggledOff');

app/assets/stylesheets/application.css

@@ -394,6 +394,18 @@ input[type="submit"] {
   cursor:pointer;
 }
 
+#findWhere {
+  position:fixed;
+  top:25%;
+  left:40px;
+  display:none;
+  margin-top:-20px;
+}
+
+.findWhereField, #findWhere input, #findWhere p {
+  float:left; 
+}
+
 .sideOption select,
 .sideOption span {
   float:left;
@@ -414,7 +426,7 @@ input[type="submit"] {
 
 .find_topic_by_name input, .find_map_by_name input, .find_mapper_by_name input { 
 	margin:10px 0 0 0;
-	width: 207px;
+	width: 270px;
 	border-radius: 10px;
 	height: 20px;
 	padding: 0 10px;

app/controllers/main_controller.rb

@@ -11,7 +11,8 @@ class MainController < ApplicationController
     @current = current_user
     
     if authenticated? 
-      @items = Item.all.first.self_as_json.html_safe
+      @synapses = Synapse.visibleToUser(@current, nil)
+	    @items = synapses_as_json(@current, @synapses).html_safe
      
       respond_to do |format|
         format.html { respond_with(@current) }

app/helpers/items_helper.rb

@@ -60,10 +60,16 @@ module ItemsHelper
 				json.data @synapsedata
 		  end
 		  
+      @inmaps = Array.new
+      item.maps.each do |map|
+        @inmaps.push(map.id)
+      end
+      
 		  @itemdata = Hash.new
 		  @itemdata['$desc'] = item.desc
 		  @itemdata['$link'] = item.link
 		  @itemdata['$itemcatname'] = item.item_category.name
+      @itemdata['$inmaps'] = @inmaps
 		  @itemdata['$userid'] = item.user.id
 		  @itemdata['$username'] = item.user.name
 		  json.data @itemdata
@@ -99,10 +105,16 @@ module ItemsHelper
 				json.data @synapsedata
 		  end
 		  
+		  @inmaps = Array.new
+      item.maps.each do |map|
+        @inmaps.push(map.id)
+      end
+      
 		  @itemdata = Hash.new
 		  @itemdata['$desc'] = item.desc
 		  @itemdata['$link'] = item.link
 		  @itemdata['$itemcatname'] = item.item_category.name
+      @itemdata['$inmaps'] = @inmaps
 		  @itemdata['$userid'] = item.user.id
 		  @itemdata['$username'] = item.user.name
 		  

app/models/item.rb

@@ -36,11 +36,16 @@ belongs_to :item_category
   
   def self_as_json
     Jbuilder.encode do |json|
-		  
+		  @inmaps = Array.new
+      self.maps.each do |map|
+        @inmaps.push(map.id)
+      end
+      
 		  @itemdata = Hash.new
 		  @itemdata['$desc'] = self.desc
 		  @itemdata['$link'] = self.link
 		  @itemdata['$itemcatname'] = self.item_category.name
+      @itemdata['$inmaps'] = @inmaps
 		  @itemdata['$userid'] = self.user.id
 		  @itemdata['$username'] = self.user.name
 		  json.data @itemdata
@@ -72,10 +77,16 @@ belongs_to :item_category
 					json.data @synapsedata
 			  end
 			  
-			  @itemdata = Hash.new
+			  @inmaps = Array.new
-			  @itemdata['$desc'] = item.desc
+        item.maps.each do |map|
-			  @itemdata['$link'] = item.link
+          @inmaps.push(map.id)
-			  @itemdata['$itemcatname'] = item.item_category.name
+        end
+        
+        @itemdata = Hash.new
+        @itemdata['$desc'] = item.desc
+        @itemdata['$link'] = item.link
+        @itemdata['$itemcatname'] = item.item_category.name
+        @itemdata['$inmaps'] = @inmaps
 			  @itemdata['$userid'] = item.user.id
 			  @itemdata['$username'] = item.user.name
 			  json.data @itemdata
@@ -84,15 +95,21 @@ belongs_to :item_category
 		  end
 		elsif @items.count == 1
 		    json.array!(@items) do |item|
-			  @itemdata = Hash.new
+          @inmaps = Array.new
-			  @itemdata['$desc'] = item.desc
+          item.maps.each do |map|
-			  @itemdata['$link'] = item.link
+            @inmaps.push(map.id)
-			  @itemdata['$itemcatname'] = item.item_category.name
+          end
-			  @itemdata['$userid'] = item.user.id
+          
-			  @itemdata['$username'] = item.user.name
+          @itemdata = Hash.new
-			  json.data @itemdata
+          @itemdata['$desc'] = item.desc
-			  json.id item.id
+          @itemdata['$link'] = item.link
-			  json.name item.name
+          @itemdata['$itemcatname'] = item.item_category.name
+          @itemdata['$inmaps'] = @inmaps
+          @itemdata['$userid'] = item.user.id
+          @itemdata['$username'] = item.user.name
+          json.data @itemdata
+          json.id item.id
+          json.name item.name
 		    end
 		end
     end

app/models/map.rb

@@ -39,10 +39,16 @@ end
 				json.data @synapsedata
 		  end
 		  
+		  @inmaps = Array.new
+      item.maps.each do |map|
+        @inmaps.push(map.id)
+      end
+      
 		  @itemdata = Hash.new
 		  @itemdata['$desc'] = item.desc
 		  @itemdata['$link'] = item.link
 		  @itemdata['$itemcatname'] = item.item_category.name
+      @itemdata['$inmaps'] = @inmaps
 		  @itemdata['$userid'] = item.user.id
 		  @itemdata['$username'] = item.user.name
 		  @mapping = Mapping.find_by_item_id_and_map_id(item.id,self.id)

app/models/synapse.rb

@@ -46,12 +46,18 @@ has_many :maps, :through => :mappings
 				json.data @synapsedata
 		  end
 		  
+		  @inmaps = Array.new
+      item.maps.each do |map|
+        @inmaps.push(map.id)
+      end
+      
 		  @itemdata = Hash.new
 		  @itemdata['$desc'] = item.desc
 		  @itemdata['$link'] = item.link
 		  @itemdata['$itemcatname'] = item.item_category.name
-		  @itemdata['$userid'] = self.user.id
+      @itemdata['$inmaps'] = @inmaps
-		  @itemdata['$username'] = self.user.name
+		  @itemdata['$userid'] = item.user.id
+		  @itemdata['$username'] = item.user.name
 		  json.data @itemdata
 		  json.id item.id
 		  json.name item.name

app/views/main/console.html.erb

@@ -63,6 +63,10 @@
 <% end %>
 
 <span id="closeFind">close</span>
+<form id="findWhere">
+  <span class="findWhereField"><input type="checkbox"  name="onCanvas" value="1" checked="checked"><p>On my Canvas</p></span>
+  <span class="findWhereField"><input type="checkbox" name="inCommons" value="0"><p>In the Commons</p></span>
+</form>
 <div class="sideOption" id="sideOptionFind">
   <span class="find_key">Find...</span>
   <select class="select_content">
@@ -73,8 +77,10 @@
   </select>
   <span class="spacer">by</span>
   <select class="select_type">
-    <option value="name" selected="selected">Name</option>
+    <option value="name" selected="selected">name</option>
-    <option value="metacode">Metacode</option>
+    <option value="metacode">metacode</option>
+    <option value="map (by name)">map (by name)</option>
+    <option value="mapper (by name)">mapper (by name)</option>
   </select>
   <div class="clearfloat"></div>
   <%= form_for Item.new, :html => { :class => "find_topic_by_name find find_topic", :id => "find_topic_by_name" } do |f| %>