got radial view working
This commit is contained in:
parent
f4cbd9b25d
commit
bbc50d1305
13 changed files with 177 additions and 100 deletions
|
@ -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,
|
||||
|
|
|
@ -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") {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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
|
||||
});
|
||||
},
|
||||
|
|
|
@ -26,6 +26,10 @@
|
|||
display:none;
|
||||
}
|
||||
|
||||
#toast {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*.animations {
|
||||
-webkit-transition-duration: .5s;
|
||||
-moz-transition-duration: .5s;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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 %>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue