From db69e5a792bf5d1f5d1af265d9fac0924c6de322 Mon Sep 17 00:00:00 2001 From: Goutte Date: Mon, 1 Oct 2018 17:48:02 +0200 Subject: [PATCH] Continue implementing THE GREAT REFACTOR to try to decrease the CPU load of Catalogs. --- web/static/js/main.js | 123 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------- web/view/home.html.jinja2 | 2 +- 2 files changed, 74 insertions(+), 51 deletions(-) diff --git a/web/static/js/main.js b/web/static/js/main.js index 6972b7a..ffb8824 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -1,11 +1,37 @@ -// Generated by LiveScript 1.5.0 +// ES6 +// +// + +/** + * + * All the javascript code for canvases is in this file, + * and inline scripts in templates, such as in `home.html.jinja2` contain the + * DOM listeners (the UI stuff, not the business logic, which is here). + * + * Note: We use Promises and ES6. + * + * D3.js + * ----- + * + * You also WILL NEED d3js v4 documentation : https://d3js.org/ + * We're using a custom build of 4.9.1, one line changed, see d3-custom.js + * Event bubbling cannot trigger two rects unless we make an event dispatcher, + * and d3's brush is stopping propagation, as it should by default. + * + * + * Code is weird, with ref$ + * ------------------------ + * + * Lots of machine-generated micro-optimizations. Most are unconsequential. + * The complex exporting pattern is ~ technical debt. Simplify it if you can. + */ + (function () { let Target; - let SpaceWeather; + // let SpaceWeather; let TimeSeries; let Orbits; - const out$ = typeof exports != 'undefined' && exports || this; - console.debug(out$); + const global = typeof exports !== 'undefined' && exports || this; const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5)); Target = ((() => { // Target.displayName = 'Target'; @@ -20,11 +46,11 @@ return Target; })()); - out$.SpaceWeather = SpaceWeather = ((() => { + + + global.SpaceWeather = ((() => { // "The main app, instanciated from an inline script.\nIt defaults to an interval starting two months ago, and ending in a month.\n(both at midnight)"; // SpaceWeather.displayName = 'SpaceWeather'; - // let API_TIME_FORMAT; - // let INPUT_TIME_FORMAT; // const prototype = SpaceWeather.prototype; // const constructor = SpaceWeather; const API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss"; @@ -32,21 +58,19 @@ class SpaceWeather { constructor(configuration) { - let configs; - let res$; - let k; - const this$ = this; + const that = this; this.configuration = configuration; - console.info("©2017\n _ _ _ _ ____\n | | | | ___| (_) ___ | _ \\ _ __ ___ _ __ __ _\n | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` |\n | _ | __/ | | (_) | __/| | | (_) | |_) | (_| |\n |_| |_|\\___|_|_|\\___/|_|_ |_|_ \\___/| .__/ \\__,_|\n | |__ _ _ / ___| _ \\| _ \\| _ \\_|\n | '_ \\| | | | | | | | | | |_) | |_) |\n | |_) | |_| | | |___| |_| | __/| __/\n |_.__/ \\__, | \\____|____/|_| |_|\n |___/\n\nThe full source of this website is available at :\nhttps://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE"); + this.parameters = {}; this.targets = {}; - res$ = []; - for (k in this.configuration.targets) { - res$.push(this.configuration.targets[k]); + console.info("©2017\n _ _ _ _ ____\n | | | | ___| (_) ___ | _ \\ _ __ ___ _ __ __ _\n | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` |\n | _ | __/ | | (_) | __/| | | (_) | |_) | (_| |\n |_| |_|\\___|_|_|\\___/|_|_ |_|_ \\___/| .__/ \\__,_|\n | |__ _ _ / ___| _ \\| _ \\| _ \\_|\n | '_ \\| | | | | | | | | | |_) | |_) |\n | |_) | |_| | | |___| |_| | __/| __/\n |_.__/ \\__, | \\____|____/|_| |_|\n |___/\n\nThe full source of this website is available at :\nhttps://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE"); + + let targets_configs = []; + for (let k in this.configuration.targets) { + targets_configs.push(this.configuration.targets[k]); } - configs = res$; - configs.forEach(target_config => this$.addTarget(new Target(target_config.slug, target_config.name, target_config))); - this.parameters = {}; - this.configuration['parameters'].forEach(p => this$.parameters[p['id']] = p); + targets_configs.forEach(tc => that.addTarget(new Target(tc.slug, tc.name, tc))); + + this.configuration['parameters'].forEach(p => that.parameters[p['id']] = p); this.orbits = null; this.time_series = []; } @@ -218,7 +242,7 @@ } loadData(target_slug, started_at, stopped_at) { - "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; + // "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; let sw; sw = this; return new Promise((resolve, reject) => { @@ -268,7 +292,7 @@ } loadAndCreatePlots(started_at, stopped_at) { - "started_at: moment(.js) datetime object\nstopped_at: moment(.js) datetime object"; + // "started_at: moment(.js) datetime object\nstopped_at: moment(.js) datetime object"; let targets; let res$; let k; @@ -406,6 +430,7 @@ results$.push(p); } } + return results$; } @@ -420,6 +445,7 @@ return ts.show(); } }); + return this; } @@ -433,6 +459,7 @@ return ts.hide(); } }); + return this; } @@ -516,6 +543,7 @@ this.time_series.forEach(ts => ts.resetZoom()); this.orbits.resetZoom(); this.setStartAndStop(this.started_at, this.stopped_at); + return this; } @@ -525,6 +553,7 @@ this.current_stopped_at = stopped_at; $("#started_at").val(started_at.format(INPUT_TIME_FORMAT)); $("#stopped_at").val(stopped_at.format(INPUT_TIME_FORMAT)); + return this; } } @@ -535,17 +564,16 @@ ///////////////////////////////////////////////////////////////////////////// //// TIME SERIES //////////////////////////////////////////////////////////// - out$.TimeSeries = TimeSeries = ((() => { + global.TimeSeries = TimeSeries = ((() => { const RATIO = GOLDEN_RATIO ** 4; class TimeSeries { constructor(parameter, title, target, data, visible, container, options) { - let now; - let res$; - let i$; - let ref$; - let len$; - let d; + this.onBrushEnd = this.onBrushEnd.bind(this); + this.onDoubleClick = this.onDoubleClick.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseOver = this.onMouseOver.bind(this); + this.onMouseMove = this.onMouseMove.bind(this); this.parameter = parameter; this.title = title; this.target = target; @@ -553,20 +581,17 @@ this.visible = visible; this.container = container; this.options = options || {}; - this.onBrushEnd = bind$(this, 'onBrushEnd', this.prototype); - this.onDoubleClick = bind$(this, 'onDoubleClick', this.prototype); - this.onMouseOut = bind$(this, 'onMouseOut', this.prototype); - this.onMouseOver = bind$(this, 'onMouseOver', this.prototype); - this.onMouseMove = bind$(this, 'onMouseMove', this.prototype); - now = moment(); - res$ = []; - for (i$ = 0, len$ = (ref$ = this.data).length; i$ < len$; ++i$) { - d = ref$[i$]; + let now = moment(); + const dataLength = this.data.length; + const predictiveData = []; + let d; + for (let i = 0; i < dataLength; ++i) { + d = this.data[i]; if (moment(d.x) >= now) { - res$.push(d); + predictiveData.push(d); } } - this.predictiveData = res$; + this.predictiveData = predictiveData; this.init(); } @@ -957,7 +982,6 @@ let d; let xx; let yy; - let mirrored; let dx; let transform; i = this.bisectDate(this.data, x0, 1); @@ -970,7 +994,7 @@ d = x0 - d0.x > d1.x - x0 ? d1 : d0; xx = this.xScale(d.x); yy = this.yScale(d.y); - mirrored = this.plotWidth != null && xx > this.plotWidth / 2; + const mirrored = this.plotWidth != null && xx > this.plotWidth / 2; dx = 8; if (mirrored) { dx = -1 * dx; @@ -990,7 +1014,12 @@ TimeSeries.prototype.timeFormat = d3.utcFormat("%Y-%m-%d %H:%M"); return TimeSeries; })()); - out$.Orbits = Orbits = ((() => { + + + /////////////////////////////////////////////////////////////////////////// + //// ORBITS PLOT ////////////////////////////////////////////////////////// + + global.Orbits = Orbits = ((() => { // "View of the solar system from above, with orbits segments for selected time\ninterval, from real data."; // Orbits.displayName = 'Orbits'; // const prototype = Orbits.prototype; @@ -1041,11 +1070,11 @@ } initOrbiter(slug, config, data) { + const thisOrbit = this; let orbit_ellipse; let orbiter; let orbit_line; let orbit_section; - const this$ = this; this.data[slug] = data; this.orbiters[slug] = config; if (data.length) { @@ -1060,7 +1089,7 @@ orbit_ellipse = this.plotWrapper.append("svg:ellipse").classed('orbit orbit_ellipse', true); orbiter = this.plotWrapper.append("svg:image").attr('xlink:href', config['img']).attr('width', '32px').attr('height', '32px'); orbiter.append('svg:title').text(config.name); - orbit_line = d3.line().x(d => this$.xScale(d.y)).y(d => this$.yScale(d.x)); + orbit_line = d3.line().x(d => thisOrbit.xScale(d.y)).y(d => thisOrbit.yScale(d.x)); orbit_section = this.plotWrapper.append('path').datum(data).classed('orbit orbit_section', true); this.orbitersElements[slug] = { orbiter, @@ -1316,10 +1345,4 @@ Orbits.prototype.bisectDate = d3.bisector(d => d.t).left; return Orbits; })()); - - function bind$(obj, key, target) { - return function () { - return (target || obj)[key].apply(obj, arguments) - }; - } }).call(this); diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index 25bed1b..df3b0f1 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -607,7 +607,7 @@ - +