added ability to hide topics from canvas, remove topics from map, and delete topics, all from the graph.

app/assets/javascripts/Jit/graphsettings.js

@@ -532,7 +532,6 @@ function onCreateLabelHandler(domElement, node) {
   var html = '                                                                \
     <div class="CardOnGraph"                                                  \
          id="topic_$_id_$">                                                   \
-      <a href="#" class="close-link">close</a>                                \
       <p class="type best_in_place best_in_place_metacode"                    \
          data-url="/topics/$_id_$"                                            \
          data-object="topic"                                                  \
@@ -541,6 +540,7 @@ function onCreateLabelHandler(domElement, node) {
          data-type="select">$_metacode_$</p>                                  \
       <img alt="$_metacode_$"                                                 \
            class="icon"                                                       \
+		   title="Click to hide card"                                         \
            height="50"                                                        \
            width="50"                                                         \
            src="$_imgsrc_$" />                                                \
@@ -553,7 +553,7 @@ function onCreateLabelHandler(domElement, node) {
                 data-type="input">$_name_$</span>                             \
           <a href="/topics/$_id_$" class="topic-go-arrow" target="_blank">    \
             <img class="topic-go-arrow"                                       \
-                 title="Go to the topic page"                                 \
+                 title="Explore Topic"                                        \
                  src="/assets/go-arrow.png" />                                \
           </a>                                                                \
           <div class="clearfloat"></div>                                      \
@@ -570,7 +570,7 @@ function onCreateLabelHandler(domElement, node) {
                 data-attribute="desc"                                         \
                 data-type="textarea">$_desc_$</span>                          \
         </div>                                                                \
-      </div>                                                                  \
+      </div>                                                                  \
       <a href="$_link_$" class="link" target="_blank">                        \
         <span class="best_in_place best_in_place_link"                        \
               data-url="/topics/$_id_$"                                       \
@@ -629,10 +629,10 @@ function onCreateLabelHandler(domElement, node) {
   domElement.appendChild(showCard);
 
   // add some events to the label
-  $(showCard).find('a.close-link').click(function(){
+  $(showCard).find('img.icon').click(function(){
     delete node.selected;
     node.setData('dim', 25, 'current');
-    node.eachAdjacency(function (adj) {
+    /*node.eachAdjacency(function (adj) {
       adj.setDataset('end', {
         lineWidth: 2,
         color: '#222222'
@@ -642,7 +642,7 @@ function onCreateLabelHandler(domElement, node) {
     Mconsole.fx.animate({
       modes: ['edge-property:lineWidth:color'],
       duration: 500
-    });
+    });*/
     $('.showcard.topic_' + node.id).fadeOut('fast', function(){
       $('.name').css('display','block');
       Mconsole.plot();
@@ -655,15 +655,59 @@ function onCreateLabelHandler(domElement, node) {
   var nameContainer = document.createElement('span'),
     style = nameContainer.style;
   nameContainer.className = 'name topic_' + node.id;
-  nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
+  var littleHTML = '                                                    \
+		 <div class="label">$_name_$</div>                              \
+		 <div class="nodeOptions">';
+  if (mapid == null) {
+	  littleHTML += '                                                   \
+		   <span class="removeFromCanvas"                               \
+				 onclick="removeFromCanvas($_id_$)"                     \
+				 title="Click to remove topic from canvas">              \
+		   </span>';
+  }
+  else if (mapid != null && userid != null) {
+	  littleHTML += '                                               \
+	  <a href="/mappings/$_mapid_$/$_id_$/removefrommap"            \
+		  title="Click to remove topic from map"                    \
+		  class="removeFromMap"                                               \
+		  data-method="get"                                         \
+		  data-remote="true"                                        \
+		  rel="nofollow">                                           \
+	  </a>';
+  }
+  if (userid != null) {
+	  littleHTML += '                                               \
+	  <a href="/topics/$_id_$"                                      \
+		  title="Click to delete this topic"                        \
+		  class="deleteTopic"                                               \
+		  data-confirm="Delete this topic and all synapses linking to it?"  \
+		  data-method="delete"                                      \
+		  data-remote="true"                                        \
+		  rel="nofollow">                                           \
+	  </a>';
+  }
+  littleHTML += '</div>';
+  littleHTML = littleHTML.replace(/\$_id_\$/g, node.id);
+  littleHTML = littleHTML.replace(/\$_mapid_\$/g, mapid);
+  littleHTML = littleHTML.replace(/\$_name_\$/g, node.name);
+  nameContainer.innerHTML = littleHTML;
   domElement.appendChild(nameContainer);
   style.fontSize = "0.9em";
   style.color = "#222222";
 
   // add some events to the label
-  nameContainer.onclick = function(){
+  $(nameContainer).find('.label').click(function(){
     selectNodeOnClickHandler(node)
+  });
+  
+  nameContainer.onmouseover = function(){
+    $('.name.topic_' + node.id + ' .nodeOptions').css('display','block');
   }
+  
+  nameContainer.onmouseout = function(){
+    $('.name.topic_' + node.id + ' .nodeOptions').css('display','none');
+  }
+  
 
   //bind callbacks
   $(showCard).find('.type.best_in_place').bind("ajax:success", function() {

app/assets/javascripts/application.js

@@ -21,7 +21,7 @@
 // other options are 'graph'
 var viewMode = "list";
 
-var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null, metacodeIMGinit = false, findOpen = false, analyzeOpen = false, organizeOpen = false, goRealtime = false;
+var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null, metacodeIMGinit = false, findOpen = false, analyzeOpen = false, organizeOpen = false, goRealtime = false, mapid = null;
 
  $(document).ready(function() {
  
@@ -54,7 +54,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
           if (! sliding1) { 
             sliding1 = true; 
 			if (userid != null) {
-              $('.footer .menu').css('border','1px solid #000');
               $('.footer .menu').animate({
 				height: '252px'
 			  }, 300, function() {
@@ -78,7 +77,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
 					height: '0px'
 				  }, 300, function() {
 					sliding1 = false;
-          $('.footer .menu').css('border','none');
 				  });
 			  } 
 		  },800); 
@@ -125,6 +123,23 @@ function saveToMap() {
   $('#new_map').fadeIn('fast');
 }
 
+
+// this is for hiding one topic from your canvas
+function removeFromCanvas(topic_id) {
+  var node = Mconsole.graph.getNode(topic_id);
+  node.setData('alpha', 0, 'end');  
+  node.eachAdjacency(function(adj) {  
+	adj.setData('alpha', 0, 'end');  
+  });  
+  Mconsole.fx.animate({  
+	modes: ['node-property:alpha',  
+			'edge-property:alpha'],  
+	duration: 1000  
+  });
+  Mconsole.graph.removeNode(topic_id);
+  Mconsole.labels.disposeLabel(topic_id);
+}
+
 function addMetacode() {
 	// code from http://www.professorcloud.com/mainsite/carousel-integration.htm
   //mouseWheel:true,

app/assets/stylesheets/topics.css.scss

@@ -1,58 +1,97 @@
-// Place all the styles related to the Topics controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-.topic { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
-
-.close-link,
-.topic .delete {
-position: absolute;
-top: -14px;
-left: 0px;
-background: none;
-border: 0;
-color: white;
-border: none;
-font-size: 14px;
-margin: 0;
-padding: 0;
-cursor:pointer;
-}
-
-.topic .scroll { display:block; height:283px; }
-
-.topic .type {position: absolute;
-color: white;
-top: -22px;
-right: 0;
-font-weight: bold;
-font-size: 20px;
-line-height: 24px;}
-
-.topic .icon { position:absolute; top:135px; left:-25px; }
-
-.topic .title { font-size:22px; line-height:25px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
-
-.topic .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
-.topic .desc h3 { font-style:normal; margin-top:5px; }
-
-.topic .link { position:absolute; width:170px; top:295px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-.best_in_place_name {
-  max-width:130px;
-  float:left;
-}
-
-.best_in_place_name input{
-  max-width:130px;
-}
-
-.topic-go-arrow {
-  width: 1em;
-  height: 1em;
-  float: right;
-}
-
-.gray {
-  color: #999999;
-}
+// Place all the styles related to the Topics controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+.nodeOptions {
+  display:none;
+  position: absolute;
+  top: -5px;
+  right: -17px;
+}
+
+.onCanvas .removeFromMap {
+  display:none !important;
+}
+
+.onMap .removeFromCanvas {
+  display:none !important;
+}
+
+.unauthenticated .deleteTopic {
+  display:none !important;
+}
+
+.removeFromCanvas {
+  display: block;
+  width: 17px;
+  height: 16px;
+  background: url('removeFromCanvas.png') no-repeat 2px 0;
+}
+
+.removeFromMap {
+  display: block;
+  width: 17px;
+  height: 16px;
+  background: url('removeFromMap.png') no-repeat 2px 0;
+}
+
+.deleteTopic {
+  display: block;
+  width: 17px;
+  height: 16px;
+  background: url('delete.png') no-repeat 2px 0;
+}
+
+.topic { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
+
+.topic .delete {
+position: absolute;
+top: -14px;
+left: 0px;
+background: none;
+border: 0;
+color: white;
+border: none;
+font-size: 14px;
+margin: 0;
+padding: 0;
+cursor:pointer;
+}
+
+.topic .scroll { display:block; height:283px; }
+
+.topic .type {position: absolute;
+color: white;
+top: -22px;
+right: 0;
+font-weight: bold;
+font-size: 20px;
+line-height: 24px;}
+
+.topic .icon { position:absolute; top:135px; left:-25px; }
+
+.topic .title { font-size:22px; line-height:25px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
+
+.topic .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
+.topic .desc h3 { font-style:normal; margin-top:5px; }
+
+.topic .link { position:absolute; width:170px; top:295px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.best_in_place_name {
+  max-width:130px;
+  float:left;
+}
+
+.best_in_place_name input{
+  max-width:130px;
+}
+
+.topic-go-arrow {
+  width: 25px;
+  height: 25px;
+  float: right;
+}
+
+.gray {
+  color: #999999;
+}

app/controllers/maps_controller.rb

@@ -107,14 +107,6 @@ class MapsController < ApplicationController
 	  @map.attributes = params[:map]
 	  @map.save
 	
-	  if params[:outtopics]
-		  @outtopics = params[:outtopics]
-		  @outtopics.each do |topic|
-			  @mapping = Mapping.where("map_id = ? AND topic_id = ?", @map.id, topic).first
-			  @mapping.delete
-		  end
-	  end
-	
     respond_with(@user, location: map_path(@map)) do |format|
     end
   end

app/controllers/topics_controller.rb

@@ -129,7 +129,32 @@ class TopicsController < ApplicationController
 #    respond_with(@user, location: topic_url(@topic)) do |format|
 #    end
   end
-
+  
+  # GET mappings/:map_id/:topic_id/removefrommap
+  def removefrommap
+	  @current = current_user
+	  @mapping = Mapping.find_by_topic_id_and_map_id(params[:topic_id],params[:map_id])
+	  
+    @map = Map.find(params[:map_id])
+    @topic = Topic.find(params[:topic_id])
+    @mappings = @map.mappings.select{|m| 
+      if m.category == "Synapse"
+        m.synapse.topic1 == @topic || m.synapse.topic2 == @topic 
+      else
+        false
+      end
+    }
+    @mappings.each do |m|
+      m.delete
+    end
+    
+    @mapping.delete
+      
+	  respond_to do |format|
+      format.js
+    end
+  end
+  
   # DELETE topics/:id
   def destroy
 	  @current = current_user

app/views/main/console.html.erb

@@ -1,27 +1,27 @@
-  <div class="headertop">
-    <% if authenticated? %><button onclick="saveToMap();">Save to Map</button><% end %>
-    <button onclick='clearCanvas();'>Clear Canvas</button>
-  </div>
-  <div class="clearfloat"></div>
-  <div class="maps" id="container">
-    <div id="center-container">
-      <div id="infovis"></div>    
-    </div>
-  </div>
-  <div class="clearfloat"></div>
-  <% if authenticated? %>
-    <%= render :partial => 'topics/new' %>
-    <%= render :partial => 'synapses/new' %>
-    <%= render :partial => 'maps/new' %>
-  <% end %>
-  <script>
-	//if (json.length > 0) {
-		$(document).ready(function() {
-			initialize("chaotic", true);
-		});	
-	//}
-</script>
-
-<%= render :partial => 'find' %>
-<%= render :partial => 'analyze' %>
+  <div class="headertop">
+    <% if authenticated? %><button onclick="saveToMap();">Save to Map</button><% end %>
+    <button onclick='clearCanvas();'>Clear Canvas</button>
+  </div>
+  <div class="clearfloat"></div>
+  <div class="maps onCanvas" id="container">
+    <div id="center-container">
+      <div id="infovis"></div>    
+    </div>
+  </div>
+  <div class="clearfloat"></div>
+  <% if authenticated? %>
+    <%= render :partial => 'topics/new' %>
+    <%= render :partial => 'synapses/new' %>
+    <%= render :partial => 'maps/new' %>
+  <% end %>
+  <script>
+	//if (json.length > 0) {
+		$(document).ready(function() {
+			initialize("chaotic", true);
+		});	
+	//}
+</script>
+
+<%= render :partial => 'find' %>
+<%= render :partial => 'analyze' %>
 <%= render :partial => 'organize' %>

app/views/maps/edit.html.erb

@@ -4,8 +4,6 @@
   <%= form.text_field :name %>
   <label for="map_desc">Description</label>
   <%= form.text_area :desc, class: "description", :rows => 5 %>
-  <label for="outtopics">Remove Topics From Map</label>
-  <%= select_tag "outtopics", options_from_collection_for_select(@outtopics, "id", "name"), { :multiple => true } %>
   <label for="map_perm">Permission</label>
   <%= form.select :permission, options_for_select(['commons', 'public', 'private'], @map.permission) %>
   <%= form.submit "Update", class: "update" %>

app/views/maps/show.html.erb

@@ -22,15 +22,31 @@
 </div>
 <div class="clearfloat nodemargin"></div>
 
-<div class="maps" id="container">
+<div class="maps onMap" id="container">
   <div id="center-container">
     <div id="infovis"></div>    
   </div>
-  <div id="showcard">
-  </div>
 </div>
 <div class="clearfloat"></div>
 
+<% if authenticated? %>
+  <%= render :partial => 'newtopic' %>
+  <%= render :partial => 'newsynapse' %>
+<% end %>
+<%= form_for @map, :url => realtime_path(@map), :method => "GET", :html => { :id => "MapRealtime"}, remote: true do |form| %>
+  <%= form.hidden_field :time, :value => Time.now.to_i %>
+  <%= form.hidden_field :ids, :value => 0 %>
+<% end %>
+<script>
+  var dragged = 0;
+  mapid = <%= @map.id %>;
+  var int = setInterval(function(){
+      if (goRealtime) {
+        $('#MapRealtime').submit();
+      }
+    },4000);
+</script>
+
 <script>
   viewMode = "graph";
 	json = <%= @mapjson %>;
@@ -48,21 +64,4 @@
 				initialize("chaotic", true);
 		});
 	}
-</script>
-
-<% if authenticated? %>
-  <%= render :partial => 'newtopic' %>
-  <%= render :partial => 'newsynapse' %>
-<% end %>
-<%= form_for @map, :url => realtime_path(@map), :method => "GET", :html => { :id => "MapRealtime"}, remote: true do |form| %>
-  <%= form.hidden_field :time, :value => Time.now.to_i %>
-  <%= form.hidden_field :ids, :value => 0 %>
-<% end %>
-<script>
-  var dragged = 0;
-  var int = setInterval(function(){
-      if (goRealtime) {
-        $('#MapRealtime').submit();
-      }
-    },4000);
 </script>

app/views/topics/destroy.js.erb

@@ -1 +1,17 @@
-$('#<%= dom_id(@topic) %>').fadeOut('slow');
+if (Mconsole != null) {
+  var node = Mconsole.graph.getNode(<%= @topic.id %>);
+  node.setData('alpha', 0, 'end');  
+  node.eachAdjacency(function(adj) {  
+	adj.setData('alpha', 0, 'end');  
+  });  
+  Mconsole.fx.animate({  
+	modes: ['node-property:alpha',  
+			'edge-property:alpha'],  
+	duration: 1000  
+  });
+  Mconsole.graph.removeNode(<%= @topic.id %>);
+  Mconsole.labels.disposeLabel(<%= @topic.id %>);
+}
+else {
+  $('#<%= dom_id(@topic) %>').fadeOut('slow');
+}

app/views/topics/removefrommap.js.erb

@@ -0,0 +1,14 @@
+if (Mconsole != null) {
+  var node = Mconsole.graph.getNode(<%= @mapping.topic_id %>);
+  node.setData('alpha', 0, 'end');  
+  node.eachAdjacency(function(adj) {  
+	adj.setData('alpha', 0, 'end');  
+  });  
+  Mconsole.fx.animate({  
+	modes: ['node-property:alpha',  
+			'edge-property:alpha'],  
+	duration: 1000  
+  });
+  Mconsole.graph.removeNode(<%= @mapping.topic_id %>);
+  Mconsole.labels.disposeLabel(<%= @mapping.topic_id %>);
+}

config/routes.rb

@@ -10,6 +10,7 @@ ISSAD::Application.routes.draw do
   
   match 'maps/:id/savelayout', to: 'maps#savelayout', via: :put, as: :savelayout
   match 'maps/:id/realtime', to: 'maps#realtime', via: :get, as: :realtime
+  match 'mappings/:map_id/:topic_id/removefrommap', to: 'topics#removefrommap', via: :get, as: :removefrommap
 
   resource :session