Try even more fixes to balance the catalog layer's CPU load.

Goutte
1 parent 5a7474a9
Showing 2 changed files with 74 additions and 16 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
@@ -401,7 +401,7 @@
       return [this.started_at, this.stopped_at];
     };
     SpaceWeather.prototype.resizeDomain = function(started_at, stopped_at){
-      var ref$, max_stopped_at, formatted_started_at, formatted_stopped_at;
+      var ref$, max_stopped_at, formatted_started_at, formatted_stopped_at, tsv, tsv_cursor, tsv_length, zoomedOnVisible;
       if (stopped_at < started_at) {
         ref$ = [stopped_at, started_at], started_at = ref$[0], stopped_at = ref$[1];
       }
@@ -419,15 +419,32 @@
       formatted_stopped_at = stopped_at.format();
       if ((this.started_at <= started_at && started_at <= this.stopped_at) && (this.started_at <= stopped_at && stopped_at <= this.stopped_at)) {
         console.info("Resizing the temporal domain from " + formatted_started_at + " to " + formatted_stopped_at + " without fetching new data…");
-        this.time_series.forEach(function(ts){
-          if (!ts.visible) {
-            return ts.zoomIn(started_at, stopped_at);
-          }
+        tsv = this.time_series.filter(function(ts){
+          return ts.visible;
         });
-        this.time_series.forEach(function(ts){
-          if (ts.visible) {
-            return ts.zoomIn(started_at, stopped_at);
-          }
+        tsv_cursor = 0;
+        tsv_length = tsv.length;
+        zoomedOnVisible = new Promise(function(resolve, reject){
+          var tsv_zoom_on_next;
+          tsv_zoom_on_next = function(i){
+            var ts;
+            if (i >= tsv_length) {
+              resolve();
+              return;
+            }
+            ts = tsv[i];
+            return ts.zoomIn(started_at, stopped_at).then(function(){
+              return tsv_zoom_on_next(i + 1);
+            });
+          };
+          return tsv_zoom_on_next(0);
+        });
+        zoomedOnVisible.then(function(){
+          return this.time_series.forEach(function(ts){
+            if (!ts.visible) {
+              return ts.zoomIn(started_at, stopped_at);
+            }
+          });
         });
         this.orbits.resizeDomain(started_at, stopped_at);
       } else {
@@ -713,10 +730,12 @@
       return this.applyZoom();
     };
     TimeSeries.prototype.applyZoom = function(){
-      var t;
+      var duration, t;
+      duration = 0;
       if (this.visible) {
+        duration = 750;
         console.debug("Applying zoom to visible " + this + "…");
-        t = this.svg.transition().duration(750);
+        t = this.svg.transition().duration(duration);
         this.svg.select('.x.axis').transition(t).call(this.xAxis);
         this.svg.select('.y.axis').transition(t).call(this.yAxis);
         this.path.transition(t).attr('d', this.line);
@@ -729,7 +748,16 @@
         this.predictiveDataPath.attr('d', this.line);
       }
       this.resizeCatalogLayers();
-      return this.hideCursor();
+      this.hideCursor();
+      return new Promise(function(resolve, reject){
+        if (0 === duration) {
+          return resolve();
+        } else {
+          return setTimeout(function(){
+            return resolve();
+          }, duration + 50);
+        }
+      });
     };
     TimeSeries.prototype.createCatalogLayers = function(){
       var catalog_slug, ref$, layers, i$, len$, layer, started_at, stopped_at;
@@ -324,8 +324,29 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
       console.info "Resizing the temporal domain from #{formatted_started_at} to #{formatted_stopped_at} without fetching new data…"
       # We first resize the hidden time series and only afterwards we resize
       # the visible ones, for a smoother transition.
-      @time_series.forEach((ts) -> if not ts.visible then ts.zoomIn(started_at, stopped_at))
-      @time_series.forEach((ts) -> if     ts.visible then ts.zoomIn(started_at, stopped_at))
+      #@time_series.forEach((ts) -> if not ts.visible then ts.zoomIn(started_at, stopped_at))
+
+      tsv = @time_series.filter((ts) -> ts.visible)
+      tsv_cursor = 0
+      tsv_length = tsv.length
+      zoomedOnVisible = new Promise((resolve, reject) ->
+
+        tsv_zoom_on_next = (i) ->
+          if i >= tsv_length
+            resolve()
+            return
+          ts = tsv[i]
+          ts.zoomIn(started_at, stopped_at)
+            .then(-> tsv_zoom_on_next(i+1))
+        tsv_zoom_on_next(0)
+
+      )
+
+      zoomedOnVisible.then(->
+        @time_series.forEach((ts) -> if not ts.visible then ts.zoomIn(started_at, stopped_at))
+      )
+
+#      @time_series.forEach((ts) -> if     ts.visible then ts.zoomIn(started_at, stopped_at))
       @orbits.resizeDomain started_at, stopped_at
     else
 #      @is_invalid = false
@@ -639,9 +660,11 @@ export class TimeSeries
     @applyZoom()
  
   applyZoom: ->
+    duration = 0
     if @visible
+      duration = 750
       console.debug("Applying zoom to visible #{@}…")
-      t = @svg.transition().duration(750)
+      t = @svg.transition().duration(duration)
       @svg.select('.x.axis').transition(t).call(@xAxis)
       @svg.select('.y.axis').transition(t).call(@yAxis)
       @path.transition(t).attr('d', @line)
@@ -654,6 +677,13 @@ export class TimeSeries
       @predictiveDataPath.attr('d', @line)
     @resizeCatalogLayers()
     @hideCursor()
+    new Promise((resolve, reject) ->
+        if 0 == duration
+            resolve()
+        else
+            setTimeout((-> resolve()), duration+50)
+    )
+
  
   createCatalogLayers: ->
     @layers_rects = {}
@@ -676,7 +706,7 @@ export class TimeSeries
                              .attr('y', 0)
                              .attr('height', @plotHeight)
                              .attr('fill', '#FFFD64C2')
-    # Not triggered, mouse events are captured before they reach this rect
+    # ↓ Not triggered, mouse events are captured before they reach this rect
     #layer_rect.append('svg:title').text("I AM TEXT")
     layer_rect