Continue implementing THE GREAT REFACTOR to try to decrease the CPU load of Catalogs.

Goutte
1 parent 8d4f8bc2
Showing 2 changed files with 74 additions and 51 deletions Show diff stats
web/static/js/main.js
web/view/home.html.jinja2
-// 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);
@@ -607,7 +607,7 @@
 <script type="application/javascript" src="{{ static('js/vendor/d3-custom.js') }}"></script>
 <script type="application/javascript" src="{{ static('js/vendor/moment.min.js') }}"></script>
 <script type="application/javascript" src="{{ static('js/vendor/samp.js') }}"></script>
-<script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
+<script type="application/javascript" src="{{ static('js/main.js') }}"></script>
 <script type="application/javascript">
  
 var configuration = {