From 2c0e15153f2cebc32b2adf1ff9e37f46d72c82a3 Mon Sep 17 00:00:00 2001 From: Goutte Date: Thu, 13 Jul 2017 15:18:34 +0200 Subject: [PATCH] Refactor loading and removal of plots for the start and stop dates. --- web/static/js/swapp.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------- web/static/js/swapp.ls | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------- 2 files changed, 111 insertions(+), 65 deletions(-) diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index b846ca0..b88023f 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -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); diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 55e43dc..4139030 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -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) -- libgit2 0.21.2