Commit 2c0e15153f2cebc32b2adf1ff9e37f46d72c82a3
1 parent
d9453685
Exists in
master
and in
2 other branches
Refactor loading and removal of plots for the start and stop dates.
Showing
2 changed files
with
111 additions
and
65 deletions
Show diff stats
web/static/js/swapp.js
... | ... | @@ -9,14 +9,15 @@ |
9 | 9 | this.slug = slug; |
10 | 10 | this.name = name; |
11 | 11 | this.config = config; |
12 | - this.active = true; | |
12 | + this.active = this.config.active; | |
13 | 13 | } |
14 | 14 | return Target; |
15 | 15 | }()); |
16 | 16 | out$.SpaceWeather = SpaceWeather = (function(){ |
17 | 17 | "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)"; |
18 | 18 | SpaceWeather.displayName = 'SpaceWeather'; |
19 | - var timeSeries, prototype = SpaceWeather.prototype, constructor = SpaceWeather; | |
19 | + var API_TIME_FORMAT, timeSeries, prototype = SpaceWeather.prototype, constructor = SpaceWeather; | |
20 | + API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss"; | |
20 | 21 | function SpaceWeather(configuration){ |
21 | 22 | var configs, res$, k, this$ = this; |
22 | 23 | this.configuration = configuration; |
... | ... | @@ -37,35 +38,14 @@ |
37 | 38 | } |
38 | 39 | SpaceWeather.prototype.init = function(){ |
39 | 40 | "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)"; |
40 | - var active_targets, res$, k, started_at, stopped_at, this$ = this; | |
41 | - res$ = []; | |
42 | - for (k in this.targets) { | |
43 | - if (this.targets[k].config.active) { | |
44 | - res$.push(this.targets[k]); | |
45 | - } | |
46 | - } | |
47 | - active_targets = res$; | |
41 | + var started_at, stopped_at, this$ = this; | |
48 | 42 | this.orbits = new Orbits(this.configuration.orbits_container, this.configuration); |
49 | 43 | this.started_at = moment().subtract(1, 'years').hours(0).minutes(0).seconds(0); |
50 | 44 | this.stopped_at = moment().add(7, 'days').hours(0).minutes(0).seconds(0); |
51 | - started_at = this.started_at.format("YYYY-MM-DDTHH:mm:ss"); | |
52 | - stopped_at = this.stopped_at.format("YYYY-MM-DDTHH:mm:ss"); | |
45 | + started_at = this.started_at.format(API_TIME_FORMAT); | |
46 | + stopped_at = this.stopped_at.format(API_TIME_FORMAT); | |
53 | 47 | console.info("Setting time interval from " + started_at + " to " + stopped_at + "…"); |
54 | - active_targets.forEach(function(target){ | |
55 | - var targetButton; | |
56 | - console.info("Loading CSV data of " + target.name + "…"); | |
57 | - targetButton = $(".orbiters_filters .target." + target.slug); | |
58 | - targetButton.addClass('loading'); | |
59 | - return this$.loadData(target.slug, started_at, stopped_at).then(function(data){ | |
60 | - console.info("Loaded CSV data of " + target.name + "."); | |
61 | - this$.createTimeSeries(target, data); | |
62 | - this$.orbits.initOrbiter(target.slug, target.config, data['hci']); | |
63 | - targetButton.removeClass('loading'); | |
64 | - return this$.hideLoader(); | |
65 | - }, function(error){ | |
66 | - return console.error('Failed to load CSV data.', error); | |
67 | - }); | |
68 | - }); | |
48 | + this.loadAndCreatePlots(started_at, stopped_at); | |
69 | 49 | return window.addEventListener('resize', function(){ |
70 | 50 | return this$.resize(); |
71 | 51 | }); |
... | ... | @@ -82,14 +62,6 @@ |
82 | 62 | this.targets[target.slug] = target; |
83 | 63 | return this; |
84 | 64 | }; |
85 | - SpaceWeather.prototype.enableAllTargets = function(){ | |
86 | - var slug, ref$, target; | |
87 | - for (slug in ref$ = this.targets) { | |
88 | - target = ref$[slug]; | |
89 | - showTarget(slug); | |
90 | - } | |
91 | - return this; | |
92 | - }; | |
93 | 65 | SpaceWeather.prototype.enableTarget = function(target_slug){ |
94 | 66 | var this$ = this; |
95 | 67 | timeSeries.forEach(function(ts){ |
... | ... | @@ -118,14 +90,17 @@ |
118 | 90 | return ts.resize(); |
119 | 91 | }); |
120 | 92 | }; |
93 | + SpaceWeather.prototype.showLoader = function(){ | |
94 | + return $("#plots_loader").show(); | |
95 | + }; | |
121 | 96 | SpaceWeather.prototype.hideLoader = function(){ |
122 | 97 | return $("#plots_loader").hide(); |
123 | 98 | }; |
124 | 99 | SpaceWeather.prototype.loadData = function(target_slug, started_at, stopped_at){ |
125 | 100 | "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; |
126 | - var sw, promise; | |
101 | + var sw; | |
127 | 102 | sw = this; |
128 | - promise = new Promise(function(resolve, reject){ | |
103 | + return new Promise(function(resolve, reject){ | |
129 | 104 | var url; |
130 | 105 | url = sw.buildDataUrlForTarget(target_slug, started_at, stopped_at); |
131 | 106 | return d3.csv(url, function(csv){ |
... | ... | @@ -159,7 +134,42 @@ |
159 | 134 | return resolve(data); |
160 | 135 | }); |
161 | 136 | }); |
162 | - return promise; | |
137 | + }; | |
138 | + SpaceWeather.prototype.loadAndCreatePlots = function(started_at, stopped_at){ | |
139 | + var active_targets, res$, k, this$ = this; | |
140 | + this.showLoader(); | |
141 | + res$ = []; | |
142 | + for (k in this.targets) { | |
143 | + if (this.targets[k].active) { | |
144 | + res$.push(this.targets[k]); | |
145 | + } | |
146 | + } | |
147 | + active_targets = res$; | |
148 | + return active_targets.forEach(function(target){ | |
149 | + var targetButton; | |
150 | + console.info("Loading CSV data of " + target.name + "…"); | |
151 | + targetButton = $(".orbiters_filters .target." + target.slug); | |
152 | + targetButton.addClass('loading'); | |
153 | + return this$.loadData(target.slug, started_at, stopped_at).then(function(data){ | |
154 | + console.info("Loaded CSV data of " + target.name + "."); | |
155 | + this$.createTimeSeries(target, data); | |
156 | + this$.orbits.initOrbiter(target.slug, target.config, data['hci']); | |
157 | + targetButton.removeClass('loading'); | |
158 | + return this$.hideLoader(); | |
159 | + }, function(error){ | |
160 | + return console.error("Failed loading CSV data of " + target.name + ".", error); | |
161 | + }); | |
162 | + }); | |
163 | + }; | |
164 | + SpaceWeather.prototype.clearPlots = function(){ | |
165 | + var timeSeries; | |
166 | + this.orbits.clear(); | |
167 | + timeSeries.forEach(function(ts){ | |
168 | + return ts.clear(); | |
169 | + }); | |
170 | + this.orbits = null; | |
171 | + timeSeries = []; | |
172 | + return this; | |
163 | 173 | }; |
164 | 174 | timeSeries = []; |
165 | 175 | SpaceWeather.prototype.createTimeSeries = function(target, data){ |
... | ... | @@ -268,7 +278,10 @@ |
268 | 278 | } |
269 | 279 | }); |
270 | 280 | this.orbits.resizeDomain(started_at, stopped_at); |
281 | + return; | |
271 | 282 | } |
283 | + this.clearPlots(); | |
284 | + return this.loadAndCreatePlots(started_at, stopped_at); | |
272 | 285 | }; |
273 | 286 | SpaceWeather.prototype.resetZoom = function(){ |
274 | 287 | timeSeries.forEach(function(ts){ |
... | ... | @@ -385,6 +398,10 @@ |
385 | 398 | } |
386 | 399 | return this; |
387 | 400 | }; |
401 | + TimeSeries.prototype.clear = function(){ | |
402 | + $(this.svg.node()).remove(); | |
403 | + return this.visible = false; | |
404 | + }; | |
388 | 405 | TimeSeries.prototype.show = function(){ |
389 | 406 | $(this.svg.node()).show(); |
390 | 407 | return this.visible = true; |
... | ... | @@ -584,6 +601,9 @@ |
584 | 601 | $(this.svg.node()).show(); |
585 | 602 | return this; |
586 | 603 | }; |
604 | + Orbits.prototype.clear = function(){ | |
605 | + return $(this.svg.node()).remove(); | |
606 | + }; | |
587 | 607 | Orbits.prototype.resize = function(){ |
588 | 608 | var width, height, slug, ref$, config; |
589 | 609 | width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right); | ... | ... |
web/static/js/swapp.ls
... | ... | @@ -24,7 +24,7 @@ const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5)) # Between 0 and 1 (0.618...) |
24 | 24 | |
25 | 25 | class Target |
26 | 26 | (@slug, @name, @config) -> |
27 | - @active = true # by default, all targets are active at first | |
27 | + @active = @config.active | |
28 | 28 | |
29 | 29 | ############################################################################### |
30 | 30 | |
... | ... | @@ -35,6 +35,8 @@ export class SpaceWeather |
35 | 35 | (both at midnight) |
36 | 36 | """ |
37 | 37 | |
38 | + API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss" | |
39 | + | |
38 | 40 | (@configuration) -> |
39 | 41 | console.info """ |
40 | 42 | _ _ _ _ ____ |
... | ... | @@ -67,29 +69,15 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE |
67 | 69 | This ain't in the constructor because it might return a Promise later on. |
68 | 70 | (for the loader, for example) |
69 | 71 | """ |
70 | - active_targets = [ @targets[k] for k of @targets when @targets[k].config.active ] | |
71 | 72 | @orbits = new Orbits(@configuration.orbits_container, @configuration) |
72 | - # Set the h/m/s to zero so that files are cached per whole days | |
73 | + # Default time interval is from one year ago to one week ahead. | |
74 | + # We set the h/m/s to zero to benefit from a daily cache. | |
73 | 75 | @started_at = moment().subtract(1, 'years').hours(0).minutes(0).seconds(0) |
74 | 76 | @stopped_at = moment().add(7, 'days').hours(0).minutes(0).seconds(0) |
75 | - started_at = @started_at.format("YYYY-MM-DDTHH:mm:ss") | |
76 | - stopped_at = @stopped_at.format("YYYY-MM-DDTHH:mm:ss") | |
77 | + started_at = @started_at.format(API_TIME_FORMAT) | |
78 | + stopped_at = @stopped_at.format(API_TIME_FORMAT) | |
77 | 79 | console.info "Setting time interval from #{started_at} to #{stopped_at}…" |
78 | - active_targets.forEach((target) ~> | |
79 | - console.info "Loading CSV data of #{target.name}…" | |
80 | - targetButton = $(".orbiters_filters .target.#{target.slug}") | |
81 | - targetButton.addClass('loading') | |
82 | - @loadData(target.slug, started_at, stopped_at).then( | |
83 | - (data) ~> | |
84 | - console.info "Loaded CSV data of #{target.name}." | |
85 | - @createTimeSeries(target, data) | |
86 | - @orbits.initOrbiter(target.slug, target.config, data['hci']) | |
87 | - targetButton.removeClass('loading') | |
88 | - @hideLoader() | |
89 | - , | |
90 | - (error) -> console.error('Failed to load CSV data.', error) | |
91 | - ) | |
92 | - ) | |
80 | + @loadAndCreatePlots(started_at, stopped_at) | |
93 | 81 | window.addEventListener 'resize', ~> @resize() |
94 | 82 | |
95 | 83 | buildDataUrlForTarget: (target_slug, started_at, stopped_at) -> |
... | ... | @@ -103,10 +91,10 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE |
103 | 91 | @targets[target.slug] = target |
104 | 92 | this |
105 | 93 | |
106 | - enableAllTargets: -> | |
107 | - for slug, target of @targets | |
108 | - showTarget(slug) | |
109 | - this | |
94 | +# enableAllTargets: -> | |
95 | +# for slug, target of @targets | |
96 | +# enableTarget(slug) | |
97 | +# this | |
110 | 98 | |
111 | 99 | enableTarget: (target_slug) -> |
112 | 100 | 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 |
122 | 110 | @orbits?.resize(); |
123 | 111 | timeSeries.forEach((ts) -> ts.resize()) |
124 | 112 | |
113 | + showLoader: -> | |
114 | + $("\#plots_loader").show(); | |
115 | + | |
125 | 116 | hideLoader: -> |
126 | 117 | $("\#plots_loader").hide(); |
127 | 118 | |
... | ... | @@ -131,7 +122,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE |
131 | 122 | and return it in a Promise. |
132 | 123 | """ |
133 | 124 | sw = this |
134 | - promise = new Promise((resolve, reject) -> | |
125 | + new Promise((resolve, reject) -> | |
135 | 126 | url = sw.buildDataUrlForTarget(target_slug, started_at, stopped_at) |
136 | 127 | d3.csv(url, (csv) -> |
137 | 128 | timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z') |
... | ... | @@ -151,7 +142,32 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE |
151 | 142 | resolve(data) |
152 | 143 | ) |
153 | 144 | ) |
154 | - promise | |
145 | + | |
146 | + loadAndCreatePlots: (started_at, stopped_at) -> | |
147 | + @showLoader() | |
148 | + active_targets = [@targets[k] for k of @targets when @targets[k].active] | |
149 | + active_targets.forEach((target) ~> | |
150 | + console.info "Loading CSV data of #{target.name}…" | |
151 | + targetButton = $(".orbiters_filters .target.#{target.slug}") | |
152 | + targetButton.addClass('loading') | |
153 | + @loadData(target.slug, started_at, stopped_at).then( | |
154 | + (data) ~> | |
155 | + console.info "Loaded CSV data of #{target.name}." | |
156 | + @createTimeSeries(target, data) | |
157 | + @orbits.initOrbiter(target.slug, target.config, data['hci']) | |
158 | + targetButton.removeClass('loading') | |
159 | + @hideLoader() | |
160 | + , | |
161 | + (error) -> console.error("Failed loading CSV data of #{target.name}.", error) | |
162 | + ) | |
163 | + ) | |
164 | + | |
165 | + clearPlots: -> | |
166 | + @orbits.clear() | |
167 | + timeSeries.forEach((ts) -> ts.clear()) | |
168 | + @orbits = null | |
169 | + timeSeries = [] # do we de-reference all existing TimeSeries ? #memleak? | |
170 | + this | |
155 | 171 | |
156 | 172 | timeSeries = [] # deprecated (was for scoping) ; use @property with ~> |
157 | 173 | createTimeSeries: (target, data) -> |
... | ... | @@ -217,7 +233,10 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE |
217 | 233 | @orbits.resizeDomain started_at, stopped_at |
218 | 234 | return |
219 | 235 | |
220 | - # todo: fetch new data and remake the plots | |
236 | + # fetch new data and remake the plots | |
237 | + @clearPlots() | |
238 | + @loadAndCreatePlots(started_at, stopped_at) | |
239 | + | |
221 | 240 | |
222 | 241 | resetZoom: -> |
223 | 242 | timeSeries.forEach((ts) -> ts.resetZoom()) |
... | ... | @@ -408,6 +427,10 @@ export class TimeSeries |
408 | 427 | unless @visible then @hide() |
409 | 428 | this |
410 | 429 | |
430 | + clear: -> | |
431 | + $(@svg.node()).remove() | |
432 | + @visible = false | |
433 | + | |
411 | 434 | show: -> |
412 | 435 | $(@svg.node()).show() |
413 | 436 | @visible = true |
... | ... | @@ -607,6 +630,9 @@ export class Orbits |
607 | 630 | |
608 | 631 | this |
609 | 632 | |
633 | + clear: -> | |
634 | + $(@svg.node()).remove() | |
635 | + | |
610 | 636 | resize: -> |
611 | 637 | width = Math.ceil($(@container).width() - @margin.left - @margin.right) |
612 | 638 | height = Math.ceil(1.0 * width) | ... | ... |