diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index ff8587f..520f57a 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -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; diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 169b91c..6b81d7c 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -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 -- libgit2 0.21.2