refresh on tumor type change corrected

remember tumor types selected
remember open views

app/scripts/router.js

@@ -105,18 +105,19 @@ define(["jquery", "underscore", "backbone", "bootstrap", "views/topbar_view",
 
  atlas: function () {
  var model = new MapFactory();
+ model.on("load", function(){
+ this.$el.html(view.render().el);
+ this.$el.fadeIn();
+ }, this);
+
  var view = new AtlasView({ "model": model });
 
- var _this = this;
  this.$el.fadeOut({
  "always": function() {
  model.fetch({
  "url": "configurations/atlas.json",
  "success": function () {
- _this.$el.html(view.render().el);
  model.trigger("load");
-
- _this.$el.fadeIn();
  }
  });
  }

app/scripts/templates/gs/atlas_map.hbs

@@ -1,5 +1,5 @@
 <div class="atlas-map" data-mapid="{{id}}" style="top: {{assignedPosition.top}}px; left: {{assignedPosition.left}}px; z-index: {{assignedZindex}}">
- <button type="button" class="close">&times;</button>
+ <button type="button" class="close" data-id="{{id}}">&times;</button>
  <ul class="nav nav-pills inline">
  <li>
  <h5><a href="#" onclick="return false;">{{label}}</a></h5>

app/scripts/templates/gs/tumor_types_container.hbs

@@ -1,4 +1,7 @@
 <h4>Tumor Types</h4>
+<div class="well">
+ <a class="btn btn-info btn-mini apply" href="#" onclick="return false;">Apply Selection Change</a>
+</div>
 <table class="table table-condensed table-bordered tumor-types-selector">
  <thead>
  <tr>

app/scripts/views/gs/atlas.js

@@ -32,6 +32,10 @@ define([
  var map_id = $(e.target).data("id");
  var map_template = this.model.get("map_templates").get(map_id);
  this.__append_atlasmap(map_template);
+
+ var openMaps = (localStorage.getItem("open-maps") || "").split(",");
+ openMaps.push(map_id);
+ localStorage.setItem("open-maps", _.unique(openMaps));
  },
  "click div.atlas-map": function (e) {
  this.$el.find(".list-container.collapse.in").collapse("hide");
@@ -110,9 +114,6 @@ define([
 
  __init_tumortypes_control: function() {
  this.tumorTypesControl = new TumorTypesControl({});
-
- var reloadFn = _.debounce(this.__reload_all_maps, 1000);
- this.tumorTypesControl.on("updated", reloadFn, this);
  this.$el.find(".tumor-types-container").html(this.tumorTypesControl.render().el);
  },
 
@@ -125,7 +126,15 @@ define([
  },
 
  __init_maps: function () {
- var maps = _.map(this.model.get("map_templates").values(), function(map_template) {
+ var open_maps = this.model.get("map_templates").values();
+
+ var remembered_open = _.compact((localStorage.getItem("open-maps") || "").split(","));
+
+ var maps = _.map(open_maps, function(map_template) {
+ if (!_.isEmpty(remembered_open)) {
+ map_template.set("isOpen", _.contains(remembered_open, map_template.get("id")));
+ }
+
  if (map_template.get("isOpen")) _.defer(this.__append_atlasmap, map_template);
 
  if (!map_template.get("disabled")) {
@@ -140,6 +149,9 @@ define([
  return map_template.toJSON();
  }, this);
 
+ var marked_open = _.where(maps, { "isOpen": true });
+ localStorage.setItem("open-maps", _.unique(_.pluck(marked_open, "id")));
+
  this.$el.find(".maps-list-container").html(MapsListContainerTpl({ "maps": _.sortBy(_.sortBy(maps, "label"), "order") }));
  },
 

app/scripts/views/gs/atlas_map.js

@@ -6,7 +6,11 @@ define([ "jquery", "underscore", "backbone", "hbs!templates/gs/atlas_map", "hbs!
  this.$(".download-links").empty();
  this.trigger("refresh", this);
  },
- "click .close": function() {
+ "click .close": function(e) {
+ var map_id = $(e.target).data("id");
+ var openMaps = (localStorage.getItem("open-maps") || "").split(",");
+ localStorage.setItem("open-maps", _.unique(_.without(openMaps, map_id)));
+
  this.$el.hide({ "always": this.__close });
  },
  "click .collect-me": function() {

app/scripts/views/gs/tumor_types_control.js

@@ -2,15 +2,26 @@ define(["jquery", "underscore", "backbone", "hbs!templates/gs/tumor_types_contai
  function ($, _, Backbone, Tpl) {
  return Backbone.View.extend({
 
+ events: {
+ "click a.apply": function() {
+ WebApp.Router.atlas();
+ }
+ },
+
  initialize: function () {
  _.bindAll(this, "mark_selected", "change_selected");
 
  this.tumor_types = _.sortBy(_.extend([], WebApp.Lookups.get("tumor_types").get("items")), "id");
  this.tumor_types_by_id = _.indexBy(this.tumor_types, "id");
 
- if (_.findWhere(this.tumor_types, { "isChecked": true })) _.first(this.tumor_types).isChecked = true;
+ var stored_tumor_types = (localStorage.getItem("selected-tumor-types") || "").split(",");
+ if (!_.isEmpty(_.compact(stored_tumor_types))) {
+ _.each(this.tumor_types, function(tumor_type) {
+ tumor_type.isChecked = _.contains(stored_tumor_types, tumor_type.id);
+ });
+ }
 
- // TODO : Remember in localStorage
+ localStorage.setItem("selected-tumor-types", _.where(this.tumor_types, { "isChecked": true }).join(","));
  },
 
  render: function () {
@@ -32,6 +43,7 @@ define(["jquery", "underscore", "backbone", "hbs!templates/gs/tumor_types_contai
  var id = $(checkbox).data("id");
  return this.tumor_types_by_id[id];
  }, this);
+ localStorage.setItem("selected-tumor-types", _.pluck(selected_tumor_types, "id").join(","));
  WebApp.UserPreferences.set("selected_tumor_types", selected_tumor_types);
  return selected_tumor_types;
  }