got radial view working

This commit is contained in:
Connor Turland 2014-08-11 18:57:34 -04:00
parent f4cbd9b25d
commit bbc50d1305
13 changed files with 177 additions and 100 deletions

View file

@ -1,7 +1,7 @@
Metamaps.Backbone = {};
Metamaps.Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'map', 'topics', 'synapses', 'mappings', 'mappers'],
blacklist: ['created_at', 'updated_at', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist);
},
@ -12,18 +12,45 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
getUser: function () {
return Metamaps.Mapper.get(this.get('user_id'));
},
fetchContained: function () {
var bb = Metamaps.Backbone;
var start = function (data) {
this.set('mappers', new bb.MapperCollection(data.mappers));
this.set('topics', new bb.TopicCollection(data.topics));
this.set('synapses', new bb.SynapseCollection(data.synapses));
this.set('mappings', new bb.MappingCollection(data.mappings));
}
$.ajax({
url: "/maps/" + this.id + "/contains",
success: start,
async: false
});
},
getTopics: function () {
if (!this.get('topics')) {
this.fetch({async: false});
this.fetchContained();
}
return this.get('topics');
},
getSynapses: function () {
if (!this.get('synapses')) {
this.fetch({async: false});
this.fetchContained();
}
return this.get('synapses');
},
getMappings: function () {
if (!this.get('mappings')) {
this.fetchContained();
}
return this.get('mappings');
},
getMappers: function () {
if (!this.get('mappers')) {
this.fetchContained();
}
return this.get('mappers');
},
attrForCards: function () {
var obj = {
id: this.id,

View file

@ -544,8 +544,7 @@ Metamaps.GlobalUI.Search = {
self.close(0, true);
var win;
if (dataset == "topics") {
win = window.open('/topics/' + datum.id, '_blank');
win.focus();
Metamaps.Router.topics(datum.id);
} else if (dataset == "maps") {
Metamaps.Router.maps(datum.id);
} else if (dataset == "mappers") {

View file

@ -56,6 +56,7 @@
Metamaps.Famous.viz.hide();
Metamaps.Active.Map = null;
Metamaps.Active.Topic = null;
setTimeout(function(){
Metamaps.Router.navigate("");
@ -93,6 +94,7 @@
Metamaps.Famous.viz.hide();
Metamaps.Active.Map = null;
Metamaps.Active.Topic = null;
setTimeout(function(){
Metamaps.Router.navigate("/explore/" + section);
@ -119,11 +121,40 @@
Metamaps.JIT.centerMap();
}
Metamaps.Famous.viz.show();
Metamaps.Active.Topic = null;
Metamaps.GlobalUI.Search.unlock();
Metamaps.GlobalUI.Search.close(0, true);
Metamaps.Map.launch(id);
},
topics: function (id) {
document.title = 'Topic ' + id + ' | Metamaps';
Metamaps.currentSection = "topic";
Metamaps.currentPage = id;
$('.wrapper').removeClass('homePage explorePage');
$('.wrapper').addClass('mapPage');
Metamaps.Famous.yield.hide();
$('.mapsWrapper').fadeOut(300);
Metamaps.Famous.explore.hide();
// clear the visualization, if there was one, before showing its div again
if (Metamaps.Visualize.mGraph) {
Metamaps.Visualize.mGraph.graph.empty();
Metamaps.Visualize.mGraph.plot();
Metamaps.JIT.centerMap();
}
Metamaps.Famous.viz.show();
Metamaps.Active.Map = null;
Metamaps.GlobalUI.Search.unlock();
Metamaps.GlobalUI.Search.close(0, true);
Metamaps.Topic.launch(id);
}
});

View file

@ -177,12 +177,7 @@ Metamaps.Backbone.init = function () {
self.TopicCollection = Backbone.Collection.extend({
model: self.Topic,
url: '/topics',
comparator: function (a, b) {
a = a.get('name').toLowerCase();
b = b.get('name').toLowerCase();
return a > b ? 1 : a < b ? -1 : 0;
}
url: '/topics'
});
self.Synapse = Backbone.Model.extend({
@ -1189,7 +1184,7 @@ Metamaps.Visualize = {
render: function () {
var self = Metamaps.Visualize, RGraphSettings, FDSettings;
if (self.type == "RGraph" && !self.mGraph) {
if (self.type == "RGraph" && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
@ -1197,13 +1192,13 @@ Metamaps.Visualize = {
$jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
RGraphSettings.width = $(document).width();
RgraphSettings.height = $(document).height();
RGraphSettings.height = $(document).height();
RGraphSettings.background = Metamaps.JIT.RGraph.background;
RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance;
self.mGraph = new $jit.RGraph(RGraphSettings);
} else if (self.type == "ForceDirected" && !self.mGraph) {
} else if (self.type == "ForceDirected" && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
@ -1228,11 +1223,18 @@ Metamaps.Visualize = {
// load JSON data, if it's not empty
if (!self.loadLater) {
//load JSON data.
self.mGraph.loadJSON(Metamaps.JIT.vizData);
var rootIndex = 0;
if (Metamaps.Active.Topic) {
var node = _.find(Metamaps.JIT.vizData, function(node){
return node.id === Metamaps.Active.Topic.id;
});
rootIndex = _.indexOf(Metamaps.JIT.vizData, node);
}
self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex);
//compute positions and plot.
self.computePositions();
if (self.type == "RGraph") {
self.mGraph.animate(Metamaps.JIT.RGraph.animate);
self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
} else if (self.type == "ForceDirected") {
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
} else if (self.type == "ForceDirected3D") {
@ -1243,10 +1245,14 @@ Metamaps.Visualize = {
// update the url now that the map is ready
setTimeout(function(){
var m = Metamaps.Active.Map;
var t = Metamaps.Active.Topic;
if (m && window.location.pathname !== "/maps/" + m.id) {
Metamaps.Router.navigate("/maps/" + m.id);
}
else if (t && window.location.pathname !== "/topics/" + t.id) {
Metamaps.Router.navigate("/topics/" + t.id);
}
}, 800);
}
@ -2433,7 +2439,32 @@ Metamaps.Topic = {
}
}
},
launch: function (id) {
var bb = Metamaps.Backbone;
var start = function (data) {
Metamaps.Active.Topic = new bb.Topic(data.topic);
Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives));
Metamaps.Synapses = new bb.SynapseCollection(data.synapses);
// build and render the visualization
Metamaps.Visualize.type = "RGraph";
Metamaps.JIT.prepareVizData();
// update filters
Metamaps.Filter.reset();
Metamaps.Filter.initializeFilterData(); // this sets all the visible filters to true
// these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes();
Metamaps.Filter.checkSynapses();
Metamaps.Filter.checkMappers();
}
$.ajax({
url: "/topics/" + id + "/network.json",
success: start
});
},
/*
*
*
@ -2747,6 +2778,7 @@ Metamaps.Map = {
Metamaps.Mappings = new bb.MappingCollection(data.mappings);
// build and render the visualization
Metamaps.Visualize.type = "ForceDirected";
Metamaps.JIT.prepareVizData();
// update filters
@ -2760,7 +2792,7 @@ Metamaps.Map = {
}
$.ajax({
url: "/maps/" + id + ".json",
url: "/maps/" + id + "/contains.json",
success: start
});
},

View file

@ -26,6 +26,10 @@
display:none;
}
#toast {
display: none;
}
/*.animations {
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;

View file

@ -76,6 +76,29 @@ class MapsController < ApplicationController
redirect_to root_url and return
end
respond_to do |format|
format.html {
@allmappers = @map.contributors
@alltopics = @map.topics # should limit to topics visible to user
@allsynapses = @map.synapses # should also be limited
@allmappings = @map.mappings
respond_with(@allmappers, @allmappings, @allsynapses, @alltopics, @map)
}
format.json { render json: @map }
end
end
# GET maps/:id/contains
def contains
@current = current_user
@map = Map.find(params[:id]).authorize_to_show(@current)
if not @map
redirect_to root_url and return
end
@allmappers = @map.contributors
@alltopics = @map.topics # should limit to topics visible to user
@allsynapses = @map.synapses # should also be limited
@ -89,11 +112,11 @@ class MapsController < ApplicationController
@json['mappers'] = @allmappers
respond_to do |format|
format.html { respond_with(@allmappers, @allmappings, @allsynapses, @alltopics, @map, @user) }
format.json { render json: @json }
end
end
# GET maps/:id/embed
def embed
@current = current_user

View file

@ -32,13 +32,36 @@ class TopicsController < ApplicationController
redirect_to root_url and return
end
@alltopics = [@topic] + @topic.relatives # should limit to topics visible to user
respond_to do |format|
format.html {
@alltopics = [@topic] + @topic.relatives # should limit to topics visible to user
@allsynapses = @topic.synapses # should also be limited
respond_with(@allsynapses, @alltopics, @topic)
}
format.json { render json: @topic }
end
end
# GET topics/:id/network
def network
@current = current_user
@topic = Topic.find(params[:id]).authorize_to_show(@current)
if not @topic
redirect_to root_url and return
end
@alltopics = @topic.relatives # should limit to topics visible to user
@allsynapses = @topic.synapses # should also be limited
@allmetacodes = Metacode.all
@json = Hash.new()
@json['topic'] = @topic
@json['relatives'] = @alltopics
@json['synapses'] = @allsynapses
respond_to do |format|
format.html { respond_with(@allmetacodes, @allsynapses, @alltopics, @topic, @user) }
format.json { render json: @topic }
format.json { render json: @json }
end
end

View file

@ -42,10 +42,7 @@
<body>
<% if notice %>
<p class="notice metamaps"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert metamaps"><%= alert %></p>
<p id="toast"><%= notice %></p>
<% end %>
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>

View file

@ -1,32 +0,0 @@
<%#
# @file
# Shows a map as a card.
# Any list of maps uses this rendering.
#%>
<figure class="map <%= first ? "current" : "" %>">
<a href="/maps/<%= map.id %>">
<div>
<div class="mapCard">
<span class="title">
<%= map.name %>
</span>
<div class="links">
<div class="linkItem contributor">
<%= pluralize(map.contributors.count, 'contributor') %>
</div>
<div class="linkItem mapPerm <%= map.mk_permission %>"><%= map.permission.capitalize %></div>
<div class="clearfloat"></div>
</div>
<div class="desc">
<%= map.desc %>
</div>
<div class="mapContains">
<span class="topicCount"><%= pluralize(map.topics.count, 'topic') %></span>
<span class="synapseCount"><%= pluralize(map.synapses.count, 'synapse') %></span>
</div>
</div>
</div>
</a>
</figure>

View file

@ -5,14 +5,13 @@
#%>
<% content_for :title, @map.name + " | Metamaps" %>
<script>
Metamaps.currentSection = "map";
Metamaps.currentPage = <%= @map.id.to_s %>;
Metamaps.Active.Map = <%= @map.to_json.html_safe %>;
Metamaps.Mappers = <%= @allmappers.to_json.html_safe %>;
Metamaps.Metacodes = <%= @allmetacodes.to_json.html_safe %>;
Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;
Metamaps.Visualize.type = "ForceDirected";
</script>

View file

@ -15,48 +15,11 @@
#%>
<% content_for :title, @topic.name + " | Metamaps" %>
<% if authenticated? %>
<div class="sidebarFork">
<div class="sidebarForkIcon">
</div>
<div class="sidebarForkBox"></div>
</div>
<% end %>
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
<div class="sidebarFilterIcon"></div>
<div class="sidebarFilterBox">
<h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
<div class="clearfloat"></div>
<%= render :partial => 'shared/filterbymetacode' %>
</div>
</div>
<div class="index">
<div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
<span class="mapInfo"></span>
<div class="clearfloat"></div>
</div>
<div class="relatives" id="container">
<div id="center-container">
<div id="infovis"></div>
</div>
<div class="showcard" id="showcard"></div>
</div>
<div class="clearfloat"></div>
<% if authenticated? %>
<%= render :partial => 'topics/new' %>
<%= render :partial => 'synapses/new' %>
<%= render :partial => 'shared/metacodeoptions' %>
<% end %>
<script>
Metamaps.currentSection = "topic";
Metamaps.currentPage = <%= @topic.id.to_s %>;
Metamaps.Active.Topic = <%= @topic.to_json.html_safe %>;
Metamaps.Metacodes = <%= @allmetacodes.to_json.html_safe %>;
Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
Metamaps.Mappings = null;
Metamaps.Visualize.type = "RGraph";
</script>

View file

@ -18,6 +18,7 @@ Metamaps::Application.routes.draw do
resources :topics, except: [:index, :new, :edit] do
get :autocomplete_topic, :on => :collection
end
match 'topics/:id/network', to: 'topics#network', via: :get, as: :network
match 'explore/active', to: 'maps#index', via: :get, as: :activemaps
match 'explore/featured', to: 'maps#index', via: :get, as: :featuredmaps
@ -27,6 +28,7 @@ Metamaps::Application.routes.draw do
match 'maps/topics/:id', to: 'maps#index', via: :get, as: :topicmaps
resources :maps, except: [:new, :edit]
match 'maps/:id/embed', to: 'maps#embed', via: :get, as: :embed
match 'maps/:id/contains', to: 'maps#contains', via: :get, as: :contains
devise_for :users, :controllers => { :registrations => "registrations" }, :path_names => { :sign_in => 'login', :sign_out => 'logout' }
devise_scope :user do

View file

@ -31,7 +31,7 @@ define(function(require, exports, module) {
Metamaps.JIT.prepareVizData();
f.viz.surf.removeListener('deploy',prepare);
};
if (Metamaps.currentSection === "map") {
if (Metamaps.currentSection === "map" || Metamaps.currentSection === "topic") {
f.viz.surf.on('deploy', prepare);
}
f.viz.mod = new Modifier({
@ -71,6 +71,7 @@ define(function(require, exports, module) {
f.yield.surf.removeListener('deploy',loadYield);
};
if (!(Metamaps.currentSection === "map" ||
Metamaps.currentSection === "topic" ||
Metamaps.currentSection === "explore" ||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
f.yield.surf.on('deploy', loadYield);
@ -169,6 +170,14 @@ define(function(require, exports, module) {
content: '',
classes: ['toast']
});
initialToast = function () {
var message = document.getElementById('toast') ? document.getElementById('toast').innerHTML : false;
if (message) {
Metamaps.GlobalUI.notifyUser(message);
f.toast.surf.deploy(f.toast.surf._currTarget);
}
};
f.toast.surf.on('deploy', initialToast);
f.toast.mod = new Modifier({
origin: [0, 1],
opacity: 0,