Refactor loading and removal of plots for the start and stop dates.

Goutte
1 parent d9453685
Showing 2 changed files with 111 additions and 65 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
@@ -9,14 +9,15 @@
       this.slug = slug;
       this.name = name;
       this.config = config;
-      this.active = true;
+      this.active = this.config.active;
     }
     return Target;
   }());
   out$.SpaceWeather = SpaceWeather = (function(){
     "The main app, instanciated from an inline script.\nIt defaults to an interval starting a year ago, and ending in seven days.\n(both at midnight)";
     SpaceWeather.displayName = 'SpaceWeather';
-    var timeSeries, prototype = SpaceWeather.prototype, constructor = SpaceWeather;
+    var API_TIME_FORMAT, timeSeries, prototype = SpaceWeather.prototype, constructor = SpaceWeather;
+    API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";
     function SpaceWeather(configuration){
       var configs, res$, k, this$ = this;
       this.configuration = configuration;
@@ -37,35 +38,14 @@
     }
     SpaceWeather.prototype.init = function(){
       "This is called by the inline bootstrap javascript code.\nThis ain't in the constructor because it might return a Promise later on.\n(for the loader, for example)";
-      var active_targets, res$, k, started_at, stopped_at, this$ = this;
-      res$ = [];
-      for (k in this.targets) {
-        if (this.targets[k].config.active) {
-          res$.push(this.targets[k]);
-        }
-      }
-      active_targets = res$;
+      var started_at, stopped_at, this$ = this;
       this.orbits = new Orbits(this.configuration.orbits_container, this.configuration);
       this.started_at = moment().subtract(1, 'years').hours(0).minutes(0).seconds(0);
       this.stopped_at = moment().add(7, 'days').hours(0).minutes(0).seconds(0);
-      started_at = this.started_at.format("YYYY-MM-DDTHH:mm:ss");
-      stopped_at = this.stopped_at.format("YYYY-MM-DDTHH:mm:ss");
+      started_at = this.started_at.format(API_TIME_FORMAT);
+      stopped_at = this.stopped_at.format(API_TIME_FORMAT);
       console.info("Setting time interval from " + started_at + " to " + stopped_at + "…");
-      active_targets.forEach(function(target){
-        var targetButton;
-        console.info("Loading CSV data of " + target.name + "…");
-        targetButton = $(".orbiters_filters .target." + target.slug);
-        targetButton.addClass('loading');
-        return this$.loadData(target.slug, started_at, stopped_at).then(function(data){
-          console.info("Loaded CSV data of " + target.name + ".");
-          this$.createTimeSeries(target, data);
-          this$.orbits.initOrbiter(target.slug, target.config, data['hci']);
-          targetButton.removeClass('loading');
-          return this$.hideLoader();
-        }, function(error){
-          return console.error('Failed to load CSV data.', error);
-        });
-      });
+      this.loadAndCreatePlots(started_at, stopped_at);
       return window.addEventListener('resize', function(){
         return this$.resize();
       });
@@ -82,14 +62,6 @@
       this.targets[target.slug] = target;
       return this;
     };
-    SpaceWeather.prototype.enableAllTargets = function(){
-      var slug, ref$, target;
-      for (slug in ref$ = this.targets) {
-        target = ref$[slug];
-        showTarget(slug);
-      }
-      return this;
-    };
     SpaceWeather.prototype.enableTarget = function(target_slug){
       var this$ = this;
       timeSeries.forEach(function(ts){
@@ -118,14 +90,17 @@
         return ts.resize();
       });
     };
+    SpaceWeather.prototype.showLoader = function(){
+      return $("#plots_loader").show();
+    };
     SpaceWeather.prototype.hideLoader = function(){
       return $("#plots_loader").hide();
     };
     SpaceWeather.prototype.loadData = function(target_slug, started_at, stopped_at){
       "Load the data as CSV for the specified target and interval,\nand return it in a Promise.";
-      var sw, promise;
+      var sw;
       sw = this;
-      promise = new Promise(function(resolve, reject){
+      return new Promise(function(resolve, reject){
         var url;
         url = sw.buildDataUrlForTarget(target_slug, started_at, stopped_at);
         return d3.csv(url, function(csv){
@@ -159,7 +134,42 @@
           return resolve(data);
         });
       });
-      return promise;
+    };
+    SpaceWeather.prototype.loadAndCreatePlots = function(started_at, stopped_at){
+      var active_targets, res$, k, this$ = this;
+      this.showLoader();
+      res$ = [];
+      for (k in this.targets) {
+        if (this.targets[k].active) {
+          res$.push(this.targets[k]);
+        }
+      }
+      active_targets = res$;
+      return active_targets.forEach(function(target){
+        var targetButton;
+        console.info("Loading CSV data of " + target.name + "…");
+        targetButton = $(".orbiters_filters .target." + target.slug);
+        targetButton.addClass('loading');
+        return this$.loadData(target.slug, started_at, stopped_at).then(function(data){
+          console.info("Loaded CSV data of " + target.name + ".");
+          this$.createTimeSeries(target, data);
+          this$.orbits.initOrbiter(target.slug, target.config, data['hci']);
+          targetButton.removeClass('loading');
+          return this$.hideLoader();
+        }, function(error){
+          return console.error("Failed loading CSV data of " + target.name + ".", error);
+        });
+      });
+    };
+    SpaceWeather.prototype.clearPlots = function(){
+      var timeSeries;
+      this.orbits.clear();
+      timeSeries.forEach(function(ts){
+        return ts.clear();
+      });
+      this.orbits = null;
+      timeSeries = [];
+      return this;
     };
     timeSeries = [];
     SpaceWeather.prototype.createTimeSeries = function(target, data){
@@ -268,7 +278,10 @@
           }
         });
         this.orbits.resizeDomain(started_at, stopped_at);
+        return;
       }
+      this.clearPlots();
+      return this.loadAndCreatePlots(started_at, stopped_at);
     };
     SpaceWeather.prototype.resetZoom = function(){
       timeSeries.forEach(function(ts){
@@ -385,6 +398,10 @@
       }
       return this;
     };
+    TimeSeries.prototype.clear = function(){
+      $(this.svg.node()).remove();
+      return this.visible = false;
+    };
     TimeSeries.prototype.show = function(){
       $(this.svg.node()).show();
       return this.visible = true;
@@ -584,6 +601,9 @@
       $(this.svg.node()).show();
       return this;
     };
+    Orbits.prototype.clear = function(){
+      return $(this.svg.node()).remove();
+    };
     Orbits.prototype.resize = function(){
       var width, height, slug, ref$, config;
       width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right);
@@ -24,7 +24,7 @@ const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5))  # Between 0 and 1 (0.618...)
 class Target
   (@slug, @name, @config) ->
-    @active = true  # by default, all targets are active at first
+    @active = @config.active
 ###############################################################################
@@ -35,6 +35,8 @@ export class SpaceWeather
   (both at midnight)
   """
+  API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss"
+
   (@configuration) ->
     console.info """
   _   _      _ _       ____
@@ -67,29 +69,15 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     This ain't in the constructor because it might return a Promise later on.
     (for the loader, for example)
     """
-    active_targets = [ @targets[k] for k of @targets when @targets[k].config.active ]
     @orbits = new Orbits(@configuration.orbits_container, @configuration)
-    # Set the h/m/s to zero so that files are cached per whole days
+    # Default time interval is from one year ago to one week ahead.
+    # We set the h/m/s to zero to benefit from a daily cache.
     @started_at = moment().subtract(1, 'years').hours(0).minutes(0).seconds(0)
     @stopped_at = moment().add(7, 'days').hours(0).minutes(0).seconds(0)
-    started_at = @started_at.format("YYYY-MM-DDTHH:mm:ss")
-    stopped_at = @stopped_at.format("YYYY-MM-DDTHH:mm:ss")
+    started_at = @started_at.format(API_TIME_FORMAT)
+    stopped_at = @stopped_at.format(API_TIME_FORMAT)
     console.info "Setting time interval from #{started_at} to #{stopped_at}…"
-    active_targets.forEach((target) ~>
-      console.info "Loading CSV data of #{target.name}…"
-      targetButton = $(".orbiters_filters .target.#{target.slug}")
-      targetButton.addClass('loading')
-      @loadData(target.slug, started_at, stopped_at).then(
-        (data) ~>
-          console.info "Loaded CSV data of #{target.name}."
-          @createTimeSeries(target, data)
-          @orbits.initOrbiter(target.slug, target.config, data['hci'])
-          targetButton.removeClass('loading')
-          @hideLoader()
-        ,
-        (error) -> console.error('Failed to load CSV data.', error)
-      )
-    )
+    @loadAndCreatePlots(started_at, stopped_at)
     window.addEventListener 'resize', ~> @resize()
   buildDataUrlForTarget: (target_slug, started_at, stopped_at) ->
@@ -103,10 +91,10 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     @targets[target.slug] = target
     this
-  enableAllTargets: ->
-    for slug, target of @targets
-      showTarget(slug)
-    this
+#  enableAllTargets: ->
+#    for slug, target of @targets
+#      enableTarget(slug)
+#    this
   enableTarget: (target_slug) ->
     timeSeries.forEach((ts) ~> ts.show() if ts.target.slug == target_slug && @parameters[ts.parameter].active)
@@ -122,6 +110,9 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     @orbits?.resize();
     timeSeries.forEach((ts) -> ts.resize())
+  showLoader: ->
+    $("\#plots_loader").show();
+
   hideLoader: ->
     $("\#plots_loader").hide();
@@ -131,7 +122,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     and return it in a Promise.
     """
     sw = this
-    promise = new Promise((resolve, reject) ->
+    new Promise((resolve, reject) ->
       url = sw.buildDataUrlForTarget(target_slug, started_at, stopped_at)
       d3.csv(url, (csv) ->
         timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z')
@@ -151,7 +142,32 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
         resolve(data)
       )
     )
-    promise
+
+  loadAndCreatePlots: (started_at, stopped_at) ->
+    @showLoader()
+    active_targets = [@targets[k] for k of @targets when @targets[k].active]
+    active_targets.forEach((target) ~>
+      console.info "Loading CSV data of #{target.name}…"
+      targetButton = $(".orbiters_filters .target.#{target.slug}")
+      targetButton.addClass('loading')
+      @loadData(target.slug, started_at, stopped_at).then(
+        (data) ~>
+          console.info "Loaded CSV data of #{target.name}."
+          @createTimeSeries(target, data)
+          @orbits.initOrbiter(target.slug, target.config, data['hci'])
+          targetButton.removeClass('loading')
+          @hideLoader()
+        ,
+        (error) -> console.error("Failed loading CSV data of #{target.name}.", error)
+      )
+    )
+
+  clearPlots: ->
+    @orbits.clear()
+    timeSeries.forEach((ts) -> ts.clear())
+    @orbits = null
+    timeSeries = []  # do we de-reference all existing TimeSeries ? #memleak?
+    this
   timeSeries = []  # deprecated (was for scoping) ; use @property with ~>
   createTimeSeries: (target, data) ->
@@ -217,7 +233,10 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
       @orbits.resizeDomain started_at, stopped_at
       return
-    # todo: fetch new data and remake the plots
+    # fetch new data and remake the plots
+    @clearPlots()
+    @loadAndCreatePlots(started_at, stopped_at)
+
   resetZoom: ->
     timeSeries.forEach((ts) -> ts.resetZoom())
@@ -408,6 +427,10 @@ export class TimeSeries
     unless @visible then @hide()
     this
+  clear: ->
+    $(@svg.node()).remove()
+    @visible = false
+
   show: ->
     $(@svg.node()).show()
     @visible = true
@@ -607,6 +630,9 @@ export class Orbits
     this
+  clear: ->
+    $(@svg.node()).remove()
+
   resize: ->
     width = Math.ceil($(@container).width() - @margin.left - @margin.right)
     height = Math.ceil(1.0 * width)