// 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.

 */

(function () {

    const global = typeof exports !== 'undefined' && exports || this;

    const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5)); // 0.618…

    const RATIO = GOLDEN_RATIO ** 4; // Y/X aspect ratio of the time series

    class Target {
        constructor(slug, name, config) {

            this.slug = slug;
            this.name = name;
            this.config = config;
            this.active = this.config.active;

        }

    }

    // 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';

        // const prototype = SpaceWeather.prototype;
        // const constructor = SpaceWeather;

    const API_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";
    const INPUT_TIME_FORMAT = "YYYY-MM-DD";

    class SpaceWeather {

        /**
         * The main app, instantiated from an inline script.
         * It defaults to an interval starting two months ago,
         * and ending in a month. (both at midnight)
         * @param configuration
         */

        constructor(configuration) {
            const that = this;
            this.configuration = configuration;
            this.parameters = {};
            this.targets = {};

            console.info("©2017\n" +
                "  _   _      _ _       ____\n" +
                " | | | | ___| (_) ___ |  _ \\ _ __ ___  _ __   __ _\n" +
                " | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` |\n" +
                " |  _  |  __/ | | (_) |  __/| | | (_) | |_) | (_| |\n" +
                " |_| |_|\\___|_|_|\\___/|_|_  |_|_ \\___/| .__/ \\__,_|\n" +
                " | |__  _   _   / ___|  _ \\|  _ \\|  _ \\_|\n" +
                " | '_ \\| | | | | |   | | | | |_) | |_) |\n" +
                " | |_) | |_| | | |___| |_| |  __/|  __/\n" +
                " |_.__/ \\__, |  \\____|____/|_|   |_|\n" +
                "        |___/\n\n" +
                "The full source of this website is available at :\n" +
                "https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE");

            let targets_configs = [];
            for (let k in this.configuration.targets) {
                targets_configs.push(this.configuration.targets[k]);

            }

            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 = [];

            // Holds the downloaded data for each layer hash
            // layer hash => data (array of dict)
            this._image_preview_layers_data = {};
            // Holds the activation status for each layer hash
            // layer hash => activation status (bool)
            this._image_preview_layers_live = {};

        }

        /**
         * This is called by the inline bootstrap javascript code.
         * This ain't in the constructor because it might return a Promise later on.
         * (for the loader, for example)
         *
         * @param started_at string
         * @param stopped_at string
         */

        init(started_at, stopped_at) {

            const app = this;

            started_at = moment(started_at).utc().hours(0).minutes(0).seconds(0);
            stopped_at = moment(stopped_at).utc().hours(0).minutes(0).seconds(0);

            this.setStartAndStop(started_at, stopped_at);
            this.loadAndCreatePlots(started_at, stopped_at);

            window.addEventListener('resize', () => app.resize());

            return this;
        }

        buildDataUrlForTarget(target_slug, started_at, stopped_at) {
            let url;
            url = this.configuration['api']['data_for_interval'];
            url = url.replace('<target>', target_slug);
            url = url.replace('<started_at>', started_at);
            url = url.replace('<stopped_at>', stopped_at);

            return url;
        }

        buildDownloadUrl() {
            let ref$;
            let started_at;
            let stopped_at;

            let t;
            let url;
            ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];

            const targets = (function () {

                const results$ = [];

                for (t in this.targets) {
                    if (this.targets[t].active) {
                        results$.push(t);

                    }
                }
                return results$;

            }.call(this)).sort().join('-');

            // const targets = this.getEnabledTargetsNames().sort().join('-');

            url = this.configuration['api']['download'];
            url = url.replace('<targets>', targets);
            url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT));
            url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT));

            console.log(targets);

            return url;
        }

        buildSampUrl() {
            let ref$;
            let started_at;
            let stopped_at;
            let targets;
            let t;
            let parameters;
            let p;
            let url;
            ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];
            targets = (function () {
                const results$ = [];
                for (t in this.targets) {
                    if (this.targets[t].active) {
                        results$.push(t);

                    }

                }

                return results$;
            }.call(this)).sort().join('-');
            parameters = (function () {
                const results$ = [];
                for (p in this.parameters) {
                    if (this.parameters[p].active) {
                        results$.push(p);
                    }
                }
                return results$;
            }.call(this)).sort().join('-');
            url = this.configuration['api']['samp'];
            url = url.replace('<targets>', targets);
            url = url.replace('<params>', parameters);
            url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT));
            url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT));
            return url;
        }

        buildSampName() {
            let ref$;
            let started_at;
            let stopped_at;
            let targets;
            let t;
            ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];
            targets = (function () {
                let i$;

                let ref$;

                let len$;
                const results$ = [];
                for (i$ = 0, len$ = (ref$ = this.getEnabledTargets()).length; i$ < len$; ++i$) {
                    t = ref$[i$];
                    results$.push(t.name);
                }
                return results$;
            }.call(this)).sort().join(', ');
            return `Heliopropa for ${targets} from ${started_at.format(API_TIME_FORMAT)} to ${stopped_at.format(API_TIME_FORMAT)}.`;
        }

        addTarget(target) {
            this.targets[target.slug] = target;
            return this;
        }

        getEnabledTargets() {
            let slug;
            let ref$;
            let target;
            const results$ = [];
            for (slug in ref$ = this.targets) {
                target = ref$[slug];
                if (target.active) {
                    results$.push(target);

                }

            }

            return results$;
        }

        enableTarget(target_slug) {
            let ref$;
            const this$ = this;
            this.time_series.forEach(ts => {
                if (ts.target.slug === target_slug && this$.parameters[ts.parameter].active) {
                    return ts.show();

                }

            });
            this.targets[target_slug].active = true;

            // 'src_plot': return  at once if we are source
            if ( target_slug.includes('_src') ){
                return this;
            }
            // 'src_plot': else also enable orbit

            if ((ref$ = this.orbits) != null) {
                ref$.enableTarget(target_slug);

            }

            // 'src_plot': and enable corresponding '_src' slug if exists
            var src_slug = target_slug+'_src'
            if ( src_slug  in this.targets){
                this.enableTarget(src_slug)
            }

            return this;
        }

        disableTarget(target_slug) {
            let ref$;
            this.time_series.forEach(ts => {
                if (ts.target.slug === target_slug) {
                    return ts.hide();
                }
            });
            this.targets[target_slug].active = false;

            // 'src_plot': return  at once if we are source
            if ( target_slug.includes('_src') ){
                return this;
            }
            // 'src_plot': else also enable orbit

            if ((ref$ = this.orbits) != null) {
                ref$.disableTarget(target_slug);

            }

            // 'src_plot': and disable corresponding '_src' slug if exists
            var src_slug = target_slug+'_src'
            if ( src_slug  in this.targets){
                this.disableTarget(src_slug)
            }

            return this;
        }

        resize() {

            if (null != this.orbits) {
                this.orbits.resize();

            }

            this.time_series.forEach(ts => ts.resize());
            return this;
        }

        showLoader() {
            return $('#plots_loader').show();
        }

        hideLoader() {
            return $('#plots_loader').hide();
        }

        /**
         * Load the data as CSV for the specified target and interval,
         * and return it in a Promise.
         *
         * @param target_slug
         * @param started_at
         * @param stopped_at
         * @returns {Promise<any>}
         */

        loadData(target_slug, started_at, stopped_at) {

            let app = this;

            return new Promise((resolve, reject) => {

                let url = app.buildDataUrlForTarget(target_slug, started_at, stopped_at);

                return d3.csv(url, csv => {
                    let timeFormat;
                    let data;
                    console.debug(`Requested CSV for ${target_slug}…`, csv);
                    timeFormat = d3.utcParse('%Y-%m-%dT%H:%M:%S%Z');
                    data = {
                        'hee': []
                    };

                    app.configuration['parameters'].forEach(parameter => data[parameter['id']] = []);

                    if (!csv) {
                        reject('invalid');
                    }
                    if (!csv.length) {
                        reject('empty');
                    }
                    csv.forEach(d => {
                        let dtime;
                        dtime = timeFormat(d['time']);

                        app.configuration['parameters'].forEach(parameter => {

                            let id;
                            let val;
                            id = parameter['id'];
                            val = parseFloat(d[id]);
                            if (!isNaN(val)) {
                                return data[id].push({
                                    x: dtime,
                                    y: val

                                });
                            }
                        });

                        if (d['xhee'] && d['yhee']) {
                            return data['hee'].push({
                                t: dtime,
                                x: parseFloat(d['xhee']),
                                y: parseFloat(d['yhee'])
                            });
                        }

                    });

                    return resolve(data);

                });

            });
        }

        /**
         *
         * @param started_at moment(.js) datetime object
         * @param stopped_at moment(.js) datetime object
         * @returns {SpaceWeather}
         */

        loadAndCreatePlots(started_at, stopped_at) {

            let targets;
            let res$;
            let k;
            let handleTarget;
            const this$ = this;
            this.showLoader();
            this.started_at = started_at;
            this.stopped_at = stopped_at;
            this.orbits = new Orbits(this.configuration.orbits_container, this.configuration);
            started_at = started_at.format(API_TIME_FORMAT);
            stopped_at = stopped_at.format(API_TIME_FORMAT);
            res$ = [];
            for (k in this.targets) {
                res$.push(this.targets[k]);
            }
            targets = res$;
            targets.forEach(target => {
                let targetButton;
                targetButton = $(`.targets-filters .target.${target.slug}`);
                targetButton.addClass('loading');
                return targetButton.removeClass('failed error empty');
            });
            handleTarget = i => {
                let target;
                let targetButton;
                if (i >= targets.length) {
                    return;

                }

                target = targets[i];
                console.info(`Loading CSV data of ${target.name}…`);
                targetButton = $(`.targets-filters .target.${target.slug}`);
                return this$.loadData(target.slug, started_at, stopped_at).then(data => {
                    console.info(`Loaded CSV data of ${target.name}.`, data);
                    this$.createTimeSeries(target, data);
                    this$.orbits.initOrbiter(target.slug, target.config, data['hee']);
                    targetButton.removeClass('loading');
                    if (target.active) {

                        this$.hideLoader();

                    } else {
                        this$.disableTarget(target.slug);

                    }

                    return handleTarget(i + 1);
                }, error => {
                    let msg;
                    switch (error) {
                        case 'invalid':
                            console.error(`Failed loading CSV data of ${target.name}.`);
                            targetButton.addClass('error');
                            break;
                        case 'empty':
                            msg = `No data for ${target.name}\n during interval from \n${started_at} to ${stopped_at}.`;
                            console.warn(msg);
                            targetButton.addClass('empty');
                            break;

                    }

                    target.active = false;

                    targetButton.addClass('failed');
                    targetButton.removeClass('loading');
                    this$.hideLoader();
                    return handleTarget(i + 1);

                });

            };
            handleTarget(0);
            return this;
        }

        clearPlots() {
            this.orbits.clear();
            this.time_series.forEach(ts => ts.clear());
            this.orbits = null;
            this.time_series = [];
            return this;
        }

        createTimeSeries(target, data) {

            const app = this;

            this.configuration['parameters'].forEach(parameter => {
                let container;
                let id;
                let title;

                container = app.configuration['time_series_container'];

                id = parameter['id'];
                title = parameter['title'];
                if (!(id in data)) {
                    console.error(`No data for id '${id}'.`, data);
                }
                console.log(target['name'], id, data[id]);
                if (data[id].length) {

                    //console.log('-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+')
                    console.log(id, title, target, data[id], container)

                    return app.time_series.push(new TimeSeries(id, title, target, data[id], app.parameters[id].active, container, {
                        'started_at': app.started_at,
                        'stopped_at': app.stopped_at

                    }));

                }

            });

            this.time_series.forEach((ts, tsk) => {

                ts.options['onMouseOver'] = () => true;
                ts.options['onMouseOut'] = () => {

                    app.time_series.forEach(ts2 => ts2.hideCursor());

                    return true;
                };

                ts.options['onMouseMove'] = time => {
                    app.time_series.forEach(ts2 =>
                        ts2.moveCursor(time)
                    );
                    if (app.orbits != null) {
                        app.orbits.moveToDate(time);

                    }

                    ts.updateImagePreviewFromCursor(time);

                    return true;
                };

                ts.options['onBrushEnd'] = ((sta, sto) => {
                    //console.debug('Why is this true? bind() WTF', this === app);
                    app.resizeDomain(moment(sta), moment(sto), ts);

                    return true;

                }).bind(ts);

                ts.options['onDblClick'] = () => {

                    app.resetZoom(ts);
                    let zoom_controls_help = $("#zoom_controls_help");
                    if (zoom_controls_help) {
                        zoom_controls_help.remove();

                    }
                    return true;
                };
            });
            return this.time_series;
        }

        getEnabledParameters() {
            let i$;
            let ref$;
            let len$;
            let p;
            let slug;
            const results$ = [];
            for (i$ = 0, len$ = (ref$ = this.parameters).length; i$ < len$; ++i$) {
                p = i$;
                slug = ref$[i$];
                if (p.active) {
                    results$.push(p);
                }

            }

            return results$;
        }

        enableParameter(parameter_slug) {
            const this$ = this;
            if (!(parameter_slug in this.parameters)) {
                console.error(`Unknown parameter ${parameter_slug}.`);

            }

            this.parameters[parameter_slug].active = true;
            this.time_series.forEach(ts => {
                if (ts.parameter === parameter_slug && this$.targets[ts.target.slug].active) {
                    return ts.show();
                }
            });

            return this;
        }

        disableParameter(parameter_slug) {
            if (!(parameter_slug in this.parameters)) {
                console.error(`Unknown parameter ${parameter_slug}.`);

            }

            this.parameters[parameter_slug].active = false;
            this.time_series.forEach(ts => {
                if (ts.parameter === parameter_slug) {
                    return ts.hide();

                }

            });

            return this;
        }

        showCatalogLayer(catalog_slug) {
            this.time_series.forEach(ts => ts.showCatalogLayer(catalog_slug));
            return this;
        }

        hideCatalogLayer(catalog_slug) {
            this.time_series.forEach(ts => ts.hideCatalogLayer(catalog_slug));
            return this;
        }

        ///////////////////////////////////////////////////////////////////////

        hashImagePreviewLayer(target_slug, layer_slug) {
            return target_slug + "_" + layer_slug;
        }

        getImagePreviewData(target_slug, layer_slug) {
            const app = this; // not taking any risks with `this` binding.
            return new Promise((resolve, reject) => {
                const h = app.hashImagePreviewLayer(target_slug, layer_slug);
                if (h in this._image_preview_layers_data) {
                    resolve(app._image_preview_layers_data[h]);
                } else {

                    let url_route = target_slug + "_auroral_catalog.csv";

                    let url = app.configuration['api']['root'] + url_route;
                    //url += "/" + url_route; // Extra / yields havoc -- flask?
                    let d3csv = d3.csv(url, csv => {
                        console.info("Fetched image preview CSV data.", url, csv);
                        console.assert(app === this); // peace of mind
                        // Now's a good time to do some pre-process on the data
                        let data = csv.map(d => {
                            return {
                                time_min: moment(d.time_min),
                                time_max: moment(d.time_max),
                                thumbnail_url: d.thumbnail_url.trim(),
                                external_link: d.external_link.trim()
                            };
                        });
                        app._image_preview_layers_data[h] = data;
                        // … also a good place to build an index for example,
                        // since right now we're bisecting on each cursor move,
                        // and that's expensive. (Binary Search)
                        resolve(data);
                    });
                }
            });
        }

        isImagePreviewLayerShown(target_slug, layer_slug) {
            const h = this.hashImagePreviewLayer(target_slug, layer_slug);
            if (h in this._image_preview_layers_live) {
                return this._image_preview_layers_live[h];
            } else {
                return false;
            }
        }

        showImagePreviewLayer(target_slug, layer_slug) {
            const app = this;

            return new Promise((resolve, reject) => {
                if (this.isImagePreviewLayerShown(target_slug, layer_slug)) {
                    resolve(); // already shown
                }
                const h = this.hashImagePreviewLayer(target_slug, layer_slug);
                //console.log("showImagePreviewLayer", h);
                //console.log("_image_preview_layers_data", this._image_preview_layers_data);

                this._image_preview_layers_live[h] = true;

                const data_promise = this.getImagePreviewData(target_slug, layer_slug);
                data_promise.then((data) => {
                    //console.debug("getImagePreviewData OK !", data);
                    let ts_left_to_process = this.time_series.length;
                    this.time_series.forEach(ts => {
                        if (ts.target.slug === target_slug) {

                            ts.showImagePreviewLayer(layer_slug, data)
                                .then(
                                    () => {
                                        //ts_left_to_process--;
                                        //console.debug("showImagePreviewLayer promise ok!");
                                    },
                                    (err) => {
                                        //ts_left_to_process--;
                                        //console.error("showImagePreviewLayer promise failed.", err);
                                    }
                                )
                                .finally(() => {
                                    ts_left_to_process--;
                                    if (0 === ts_left_to_process) {
                                        //console.debug("showImagePreviewLayer resolve");
                                        resolve();
                                    }
                                });

                        } else {
                            ts_left_to_process--;
                        }
                    });
                }, (err) => {
                    console.error("getImagePreviewData promise failed.", err);
                    reject(err);
                });

            });
        }

        hideImagePreviewLayer(target_slug, layer_slug) {
            // perhaps make this promise-based as well?

            if ( ! this.isImagePreviewLayerShown(target_slug, layer_slug)) {
                return; // already hidden
            }

            const h = this.hashImagePreviewLayer(target_slug, layer_slug);

            this._image_preview_layers_live[h] = false;

            let ts;
            for (let key in this.time_series) {
                if ( ! this.time_series.hasOwnProperty(key)) continue;
                ts = this.time_series[key];
                if (ts.target.slug !== target_slug) continue;
                ts.hideImagePreviewLayer(layer_slug);
            }

            this.hideImagePreview();
        }

        hideImagePreview() {
            const box = jQuery('#time_series_cursor_morebox'); // sorry
            box.addClass('hidden');

        }

        getDomain() {
            if (this.current_started_at != null && this.current_stopped_at != null) {
                return [this.current_started_at, this.current_stopped_at];

            }

            return [this.started_at, this.stopped_at];
        }

        resizeDomain(started_at, stopped_at, starting_ts) {

            let max_stopped_at;
            let formatted_started_at;
            let formatted_stopped_at;

            if (stopped_at < started_at) {

                let tmp_at = started_at;
                started_at = stopped_at;
                stopped_at = tmp_at;

            }
            if (started_at === stopped_at) {

                alert("Please provide distinct start and stop dates.");

                return;
            }
            max_stopped_at = started_at.clone().add(2, 'years');
            if (stopped_at > max_stopped_at) {
                console.warn("The time interval was truncated because it was bigger than two years.");
                stopped_at = max_stopped_at;
            }
            this.setStartAndStop(started_at, stopped_at);
            formatted_started_at = started_at.format();
            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…`);

                let tsv = this.time_series.filter(ts => ts.visible);
                let tsv_length = tsv.length;
                let starting_ts_key = tsv.indexOf(starting_ts);
                if (starting_ts_key === -1) starting_ts_key = 0;

                const zoomedOnVisible = new Promise((resolve, reject) => {
                    console.log("Zoom on visible time series…");
                    const tsv_zoom_on_next = i => {

                        if (i >= tsv_length) {
                            resolve();
                            return;
                        }

                        let ts = tsv[(Math.ceil(i/2)*(i%2>0?1:-1)+starting_ts_key+tsv_length)%tsv_length];

                        ts.zoomIn(started_at, stopped_at)
                          .then(() => tsv_zoom_on_next(i + 1));
                    };

                    tsv_zoom_on_next(0);

                });
                zoomedOnVisible.then(() => {

                    console.log("Now zoom on invisible time series…");

                    this.time_series.forEach(ts => {
                        if (!ts.visible) {
                            ts.zoomIn(started_at, stopped_at);
                        }

                    });

                });
                this.orbits.resizeDomain(started_at, stopped_at);
            } else {
                console.info(`Resizing the temporal domain from ${formatted_started_at} to ${formatted_stopped_at} and fetching new data…`);
                console.warn("This might take a good while… Why not see what else we're up to on http://cdpp.eu while you're waiting?");
                this.clearPlots();
                this.loadAndCreatePlots(started_at, stopped_at);

            }

            return this;
        }

        resetZoom(starting_ts) {
            this.resizeDomain(this.started_at, this.stopped_at, starting_ts);

            return this;
        }

        setStartAndStop(started_at, stopped_at) {
            console.info(`Setting time interval from ${started_at} to ${stopped_at}…`);
            this.current_started_at = started_at;
            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;

        }

    }

    /////////////////////////////////////////////////////////////////////////////
    //// TIME SERIES ////////////////////////////////////////////////////////////

    class TimeSeries {
        constructor(parameter, title, target, data, visible, container, options) {
            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;
            this.data = data;
            this.visible = visible;
            this.container = container;
            this.options = options || {};
            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) {
                    predictiveData.push(d);

                }

            }

            this.predictiveData = predictiveData;

            this._image_preview_layers_live = {}; // layer_hash => is active? (bool)
            this._image_preview_layers_rect = {}; // layer_hash => rects (array)
            this._image_preview_layers_data = {}; // layer_hash => data (array) (/!. not a copy)
            // datum example:
            // {
            //   time_min: moment("2017-09-09 00:13:49.845227"),
            //   thumbnail_url: "http://voparis-srv.obspm.fr/vo/planeto/apis/dataset/Bastet/Saturn_-_2017_14_Feb-09_Sept/od9u21u4q_proc_small.jpg",
            //   time_max: moment("2017-09-09 00:58:50.044784"),
            //   external_link: "http://apis.obspm.fr/spip.php?page=observation&id=bas_8167"
            // }
            // Note that time_min and time_max are pre-processed
            // to moment.js instances already during creation.

            this.init();
        }

        toString() {
            return `${this.title} of ${this.target.name}`;
        }

        init() {

            let clipId;
            let i$;
            let len$;
            let line;
            let lineElement;
            let dx;
            const this$ = this;
            console.info(`Initializing plot of ${this}…`);
            this.margin = {
                top: 30,
                right: 20,
                bottom: 30,
                left: 80
            };

            let dimensions = this.recomputeDimensions();
            let width  = dimensions[0];
            let height = dimensions[1];

            this.xDataExtent = d3.extent(this.data, d => d.x);
            this.yDataExtent = d3.extent(this.data, d => d.y);
            if (this.options['started_at']) {
                this.xDataExtent[0] = this.options['started_at'];
            }
            if (this.options['stopped_at']) {
                this.xDataExtent[1] = this.options['stopped_at'];
            }

            this.xScale = d3.scaleUtc().domain(this.xDataExtent);

            this.yScale = d3.scaleLinear().domain(this.yDataExtent);

            // http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html

            const formatMillisecond = d3.utcFormat(".%L");
            const formatSecond = d3.utcFormat(":%S");
            const formatMinute = d3.utcFormat("%H:%M");
            const formatHour = d3.utcFormat("%H:%M");
            const formatDay = d3.utcFormat("%a %d");
            const formatWeek = d3.utcFormat("%b %d");
            const formatMonth = d3.utcFormat("%B");
            const formatYear = d3.utcFormat("%Y");

            const formatDoy = d3.utcFormat("%Y-%j");

            const formatDate= d3.utcFormat("%Y-%m-%d");

            const multiFormat = date => {

                if (date > d3.utcSecond(date)) {

                    return formatMillisecond(date);

                }

                if (date > d3.utcMinute(date)) {

                    return formatSecond(date);

                }

                if (date > d3.utcHour(date)) {

                    return formatMinute(date);
                }

                if (date > d3.utcDay(date)) {

                    return formatHour(date);
                }

                return formatDate(date);

                // if (date > d3.utcMonth(date)) {
                //     if (date > d3.utcWeek(date)) {
                //         return utcDay(date);
                //     } else {
                //         return utcWeek(date);
                //     }
                // }
                // if (date > d3.utcYear(date)) {
                //     return formatMonth(date);
                // }
                //
                // return formatYear(date);

            };

            this.xAxis = d3.axisBottom().tickFormat(multiFormat).ticks(7);
            this.yAxis = d3.axisLeft().ticks(10);
            this.svg = d3.select(this.container).append('svg');
            this.svg.attr("class", `${this.parameter} ${this.target.slug}`);
            this.line = d3.line().x(d => this$.xScale(d.x)).y(d => this$.yScale(d.y));
            this.plotWrapper = this.svg.append('g');
            this.plotWrapper.attr('transform', `translate(${this.margin.left},${this.margin.top})`);
            clipId = `ts-clip-${this.parameter}-${this.target.slug}`;
            this.clip = this.svg.append("defs").append("svg:clipPath").attr("id", clipId).append("svg:rect").attr("x", 0).attr("y", 0);
            this.pathWrapper = this.plotWrapper.append('g');
            this.pathWrapper.attr("clip-path", `url(#${clipId})`);
            this.path = this.pathWrapper.append('path').datum(this.data).classed('line', true);
            this.predictiveDataPath = this.pathWrapper.append('path').datum(this.predictiveData).classed('predictive-line', true);
            this.createCatalogLayers();
            this.horizontalLines = [];
            if (this.options['horizontalLines']) {

                for (i$ = 0, len$ = (dimensions = this.options['horizontalLines']).length; i$ < len$; ++i$) {
                    line = dimensions[i$];

                    lineElement = this.svg.append("line").attr("class", "line horitonal-line").style("stroke", "orange").style("stroke-dasharray", "3, 2");
                    this.horizontalLines.push({
                        'element': lineElement,
                        'config': line
                    });

                }

            }

            this.brush = this.plotWrapper.append("g").attr("class", "brush");
            this.plotWrapper.append('g').classed('x axis', true);
            this.plotWrapper.append('g').classed('y axis', true);
            this.yAxisText = this.plotWrapper.append("text").attr("transform", "rotate(-90)").attr("dy", "1em").style("text-anchor", "middle").text(this.title);

            // src_plot: If it is a source we want to plot then set small Y-Title
            let y_title=''
            if ( this.target.slug.includes('_src') ){
                y_title = this.target.name
            // src_plot: or just show normal Y-Title
            } else {
                y_title = this.target.name+" from "+$("input[name='input_slug']:checked").siblings(".mdl-radio__label").html();
            }

            this.yAxisTextTarget = this.plotWrapper.append("text").attr("transform", "rotate(-90)")
                                        .attr("dy", "1em").style("text-anchor", "middle")
                                        .style("font-style", "oblique").text(y_title);

            this.focus = this.plotWrapper.append('g').style("display", "none");
            this.cursorCircle = this.focus.append("circle").attr("class", "cursor-circle").attr("r", 3);
            dx = 8;
            this.cursorValueShadow = this.focus.append("text").attr("class", "cursor-text cursor-text-shadow").attr("dx", dx).attr("dy", "-.3em");
            this.cursorValue = this.focus.append("text").attr("class", "cursor-text cursor-value").attr("dx", dx).attr("dy", "-.3em");
            this.cursorDateShadow = this.focus.append("text").attr("class", "cursor-text cursor-text-shadow").attr("dx", dx).attr("dy", "1em");
            this.cursorDate = this.focus.append("text").attr("class", "cursor-text cursor-date").attr("dx", dx).attr("dy", "1em");
            this.brushFunction = d3.brushX().extent([[0, 0], [width, height]]).handleSize(0).on("end", this.onBrushEnd);
            this.brush.call(this.brushFunction);
            this.brushOverlay = this.svg.select(".brush .overlay");
            this.brushOverlay.on("mouseover.swapp", this.onMouseOver).on("mouseout.swapp", this.onMouseOut).on("mousemove.swapp", this.onMouseMove).on("dblclick.swapp", this.onDoubleClick);
            return this.resize();
        }

        recomputeDimensions() {
            let width;
            let height;
            width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right);
            height = Math.ceil(RATIO * width);
            this.plotWidth = width;
            this.plotHeight = height;
            return [width, height];
        }

        resize() {
            let ref$;
            let width;
            let height;
            let i$;
            let len$;
            let line;
            let lineValue;
            ref$ = this.recomputeDimensions(), width = ref$[0], height = ref$[1];
            console.debug(`Resizing ${this}: ${width} x ${height}…`);
            this.xScale.range([0, width]);
            this.yScale.range([height, 0]);
            this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom);
            this.clip.attr("width", width).attr("height", height);
            this.path.attr('d', this.line);
            this.predictiveDataPath.attr('d', this.line);
            for (i$ = 0, len$ = (ref$ = this.horizontalLines).length; i$ < len$; ++i$) {
                line = ref$[i$];
                lineValue = this.yScale(line['config']['value']) + this.margin.top;
                line['element'].attr("x1", this.margin.left).attr("y1", lineValue).attr("x2", this.margin.left + width).attr("y2", lineValue);
            }
            this.xAxis.scale(this.xScale);
            this.yAxis.scale(this.yScale);
            this.xAxis.ticks(Math.floor(width / 80.0));
            this.yAxis.ticks(Math.floor(height / 18.0));
            this.svg.select('.x.axis').attr('transform', `translate(0,${height})`).call(this.xAxis);
            this.svg.select('.y.axis').call(this.yAxis);
            this.yAxisText.attr("y", 20 - this.margin.left).attr("x", 0 - height / 2);
            this.yAxisTextTarget.attr("y", 0 - this.margin.left).attr("x", 0 - height / 2.0);
            this.resizeCatalogLayers();

            this.resizeImagePreviewLayers();

            if (!this.visible) {
                this.hide();
            }
            return this;
        }

        clear() {
            $(this.svg.node()).remove();
            return this.visible = false;
        }

        show() {
            $(this.svg.node()).show();
            return this.visible = true;
        }

        hide() {
            $(this.svg.node()).hide();
            return this.visible = false;
        }

        onMouseMove() {
            let x;
            x = this.xScale.invert(d3.mouse(this.brushOverlay.node())[0]);
            if (this.options.onMouseMove != null) {
                return this.options.onMouseMove(x);
            } else {
                return this.moveCursor(x);

            }

        }

        onMouseOver() {
            if (this.options.onMouseOver != null) {
                return this.options.onMouseOver();
            } else {
                return this.showCursor();

            }

        }

        onMouseOut() {
            if (this.options.onMouseOut != null) {
                return this.options.onMouseOut();
            } else {
                return this.hideCursor();

            }

        }

        onDoubleClick() {
            if (this.options.onDblClick != null) {
                return this.options.onDblClick();
            } else {
                return this.resetZoom();

            }

        }

        onBrushEnd() {

            let s = d3.event.selection;

            if (s) {

                let minmax = [s[0], s[1]].map(this.xScale.invert, this.xScale);

                this.brush.call(this.brushFunction.move, null);
                if (this.options.onBrushEnd != null) {

                    // same, the 'this' is still the old one
                    // return this.options.onBrushEnd.apply(this, [minmax[0], minmax[1]]);

                    return this.options.onBrushEnd(minmax[0], minmax[1]);

                } else {

                    return this.zoomIn(minmax[0], minmax[1]);

                }
            }

        }

        zoomIn(startDate, stopDate) {
            let ref$;
            let minDate;
            let maxDate;
            console.debug(`Zooming in ${this} from ${startDate} to ${stopDate}.`);
            ref$ = this.xDataExtent, minDate = ref$[0], maxDate = ref$[1];
            if (startDate < minDate) {
                startDate = minDate;

            }

            if (stopDate > maxDate) {
                stopDate = maxDate;
            }
            this.xScale.domain([startDate, stopDate]);
            this.yScale.domain(d3.extent(this.data, d => {

                let ref$;

                if (startDate <= (ref$ = d.x) && ref$ <= stopDate) {
                    return d.y;
                } else {
                    return 0;

                }

            }));
            return this.applyZoom();
        }

        applyZoom() {

            let duration = 0;

            duration = 0;
            if (this.visible) {
                duration = 750;
                console.debug(`Applying zoom to visible ${this}…`);

                let 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);
                this.predictiveDataPath.transition(t).attr('d', this.line);
            } else {
                console.debug(`Applying zoom to hidden ${this}…`);
                this.svg.select('.x.axis').call(this.xAxis);
                this.svg.select('.y.axis').call(this.yAxis);
                this.path.attr('d', this.line);
                this.predictiveDataPath.attr('d', this.line);
            }
            this.resizeCatalogLayers();

            this.resizeImagePreviewLayers();

            this.hideCursor();
            return new Promise((resolve, reject) => {
                if (0 === duration) {
                    return resolve();

                } else {

                    return setTimeout(() => resolve(), duration + 50);

                }

            });
        }

        createLayerRect(started_at, stopped_at, color) {
            // We're ignoring the parameters, since we're
            // doing the resize logic in resizeXXX()
            let layer_rect; // positioning is done in resize()
            layer_rect = this.pathWrapper.append("rect")
                .attr('y', 0)
                .attr('height', this.plotHeight) // => move to resize too?
                .attr('fill', color);
            //won't work, possibly because of our input catcher rect.
            //layer_rect.append('svg:title').text("!");
            return layer_rect;
        }

        createCatalogLayers() {
            let catalog_slug;
            let ref$;
            let layers;
            let i$;
            let len$;
            let layer;
            let started_at;
            let stopped_at;
            this.layers_rects = {};
            for (catalog_slug in ref$ = this.target.config.layers) {

                if ( ! (ref$.hasOwnProperty(catalog_slug))) continue; // oh, js

                layers = ref$[catalog_slug];
                this.layers_rects[catalog_slug] = [];
                for (i$ = 0, len$ = layers.length; i$ < len$; ++i$) {
                    layer = layers[i$];
                    started_at = moment(layer.start);
                    stopped_at = moment(layer.stop);

                    this.layers_rects[catalog_slug].push(this.createCatalogLayerRect(started_at, stopped_at));

                }

                this.hideCatalogLayer(catalog_slug);

            }

            return this;
        }

        createCatalogLayerRect(started_at, stopped_at) {
            return this.createLayerRect(started_at, stopped_at, '#FFFD64C2');

        }

        resizeCatalogLayers() {

            let animate = true; // move to param if needed
            // Perhaps make that transition part of the prototype instead?
            let t = this.svg.transition().duration(750);

            let catalog_slug;
            let ref$;
            let layers;

            let len$;
            let i;
            let layer;
            let started_at;
            let stopped_at;
            let width;
            for (catalog_slug in ref$ = this.target.config.layers) {

                if ( ! (ref$.hasOwnProperty(catalog_slug))) continue;

                layers = ref$[catalog_slug];

                for (i = 0, len$ = layers.length; i < len$; ++i) {
                    layer = layers[i];

                    started_at = moment(layer.start);
                    stopped_at = moment(layer.stop);
                    width = Math.max(2, this.xScale(stopped_at) - this.xScale(started_at));

                    if (animate) {
                        this.layers_rects[catalog_slug][i]
                            .transition(t)
                            .attr('x', this.xScale(started_at))
                            .attr('width', width);
                    } else {
                        this.layers_rects[catalog_slug][i]
                            .attr('x', this.xScale(started_at))
                            .attr('width', width);
                    }

                }

            }

            return this;
        }

        showCatalogLayer(catalog_slug) {

            let ref$;
            let len$;
            let i;
            let layer;

            for (i = 0, len$ = (ref$ = this.target.config.layers[catalog_slug]).length; i < len$; ++i) {
                layer = ref$[i];

                this.layers_rects[catalog_slug][i].style("display", null);
            }
            return this;
        }

        hideCatalogLayer(catalog_slug) {

            let ref$;
            let len$;
            let i;

            //let layer;
            for (i = 0, len$ = (ref$ = this.target.config.layers[catalog_slug]).length; i < len$; ++i) {
                //layer = ref$[i];

                this.layers_rects[catalog_slug][i].style("display", "none");
            }
            return this;
        }

        ///////////////////////////////////////////////////////////////////////

        hasImagePreviewLayer(layer_slug) {
            return layer_slug in this._image_preview_layers_data;
        }

        // createImagePreviewLayers(layer_slug, data) {
        //
        // }

        createImagePreviewLayer(layer_slug, data) {
            this._image_preview_layers_data[layer_slug] = data;
            this._image_preview_layers_rect[layer_slug] = [];
            this._image_preview_layers_live[layer_slug] = true;
            let datum;
            for (let key in data) {
                if (data.hasOwnProperty(key)) {
                    if ("columns" === key) continue;
                    // console.debug("datum", key, data[key]);
                    datum = data[key];
                    // { time_min: "2017-09-09 00:13:49.845227", thumbnail_url: "http://voparis-srv.obspm.fr/vo/planeto/apis/dataset/Bastet/Saturn_-_2017_14_Feb-09_Sept/od9u21u4q_proc_small.jpg", time_max: "2017-09-09 00:58:50.044784", external_link: "http://apis.obspm.fr/spip.php?page=observation&id=bas_8167" }
                    this._image_preview_layers_rect[layer_slug].push(
                        this.createImagePreviewLayerRect(
                            datum.time_min, datum.time_max
                        )
                    );
                }
            }
        }

        isImagePreviewLayerLive(layer_slug) {
            if (layer_slug in this._image_preview_layers_live) {
                return this._image_preview_layers_live[layer_slug];
            } else {
                return false;
            }
        }

        resizeImagePreviewLayers() {
            for (let layer_slug in this._image_preview_layers_live) {
                if (!(this._image_preview_layers_live.hasOwnProperty(layer_slug)))
                    continue;
                console.debug("Resize image layer", layer_slug);
                this.resizeImagePreviewLayer(layer_slug);
            }
        }

        resizeImagePreviewLayer(layer_slug) {
            if (! this.isImagePreviewLayerLive(layer_slug)) {
                return;
            }

            const rects = this._image_preview_layers_rect[layer_slug];
            if (! rects) {
                console.error(
                    "Tried to resize an image preview layer without rects.",
                    layer_slug, this
                );
                return;
            }

            const data = this._image_preview_layers_data[layer_slug];
            if (! data) {
                console.error(
                    "Tried to resize an image preview layer without data.",
                    layer_slug, this
                );
                return;
            }

            let animate = true;
            let t = this.svg.transition().duration(750);

            let width;
            let started_at;
            let stopped_at;
            //for (let [dkey, datum] of data) { // nope
            let datum;
            for (let dkey in data) {
                if ( ! data.hasOwnProperty(dkey)) continue;
                if ("columns" === dkey) continue;

                datum = data[dkey];

                // We assume that moment(moment(x)) == moment(x) (it's true)
                // Remove these moment() casts for some more perfs since we're
                // already casting to moment() in the data pre-process.
                started_at = moment(datum.time_min);
                stopped_at = moment(datum.time_max);

                //console.debug("Resize image layer rect", started_at, stopped_at);

                width = this.xScale(stopped_at) - this.xScale(started_at);
                // Under 2 pixels wide the rects appear glitchy
                width = Math.max(2, width);

                if (animate) {
                    rects[dkey]
                        .transition(t)
                        .attr('x', this.xScale(started_at))
                        .attr('width', width);
                } else {
                    rects[dkey]
                        .attr('x', this.xScale(started_at))
                        .attr('width', width);
                }

            }
        }

        static get COLOR_IMAGE_PREVIEW_LAYER() {
            return '#FF339942';
        }

        static get COLOR_IMAGE_PREVIEW_LAYER_ACTIVE() {
            return '#FF3399D2';
        }

        createImagePreviewLayerRect(started_at, stopped_at) {
            return this.createLayerRect(
                started_at, stopped_at, TimeSeries.COLOR_IMAGE_PREVIEW_LAYER
            );
        }

        highlightImagePreviewLayerRect(layer_slug, rect_key) {
            const rects = this._image_preview_layers_rect[layer_slug];
            if (! rects) {
                console.error(
                    "Tried to highlight an image preview layer without rects.",
                    layer_slug, this
                );
                return;
            }

            const rect_to_highlight = rects[rect_key];
            if (! rect_to_highlight) {
                console.error(
                    "Tried to highlight a non-existent rect.",
                    layer_slug, rect_key, this
                );
                return;
            }

            for (let rect of rects) {
                TimeSeries.setRectColor(
                    rect, TimeSeries.COLOR_IMAGE_PREVIEW_LAYER
                );
            }
            TimeSeries.setRectColor(
                rect_to_highlight, TimeSeries.COLOR_IMAGE_PREVIEW_LAYER_ACTIVE
            );

        }

        static setRectColor(rect, color) {
            rect.attr('fill', color);
        }

        showImagePreviewLayer(layer_slug, data) {
            return new Promise((resolve, reject) => {
                //console.log("showImagePreviewLayer Promise…");

                if (this._image_preview_layers_live[layer_slug]) {
                    console.warn("TS.showImagePreviewLayer: already shown.");
                    resolve(); // we're already shown
                }

                if ( ! this.hasImagePreviewLayer(layer_slug)) {
                    this.createImagePreviewLayer(layer_slug, data);
                }

                this._image_preview_layers_live[layer_slug] = true;

                this.resizeImagePreviewLayer(layer_slug);

                const rects = this._image_preview_layers_rect[layer_slug];
                if (! rects) {
                    console.error(
                        "Tried to show an image preview layer without rects.",
                        layer_slug, this
                    );
                    return;
                }

                for (let rect of rects) {
                    rect.style("display", null)
                }

                resolve();
            });
        }

        hideImagePreviewLayer(layer_slug) {
            // console.log(
            //     "TS.hideImagePreviewLayer()",
            //     this._image_preview_layers_live[layer_slug],
            //     this._image_preview_layers_live
            // );
            if ( ! this._image_preview_layers_live[layer_slug]) {
                console.warn("TS.hideImagePreviewLayer: already hidden.");
                return; // we're already hidden
            }
            this._image_preview_layers_live[layer_slug] = false;

            const rects = this._image_preview_layers_rect[layer_slug];
            //console.debug("RECTS", rects);

            if (! rects) {
                console.error(
                    "Tried to hide an image preview layer without rects.",
                    layer_slug, this
                );
                return;
            }


            for (let rect of rects) {
                rect.style("display", "none");
            }
        }

        showImagePreview(image_url, external_link, comment) {
            const box = jQuery('#time_series_cursor_morebox');
            const img = jQuery('#time_series_cursor_image');
            const cil = jQuery('#time_series_cursor_image_link');
            const cic = jQuery('#time_series_cursor_image_comment');
            const lnk = jQuery('#time_series_cursor_link');

            const previous_image_url = img.attr('src');
            if (image_url === previous_image_url) {
                return;
            }

            img.attr('src', image_url);
            lnk.attr('href', external_link);
            cic.html(comment);

            // Interesting ; using the regex in the prototype yields … fails
            // Race conditions are probably reunited, afaik.
            //const match = this.imageRegex.exec(image_url);
            // Let's compile our regex every time instead. Optimize later.
            const imageRegex = /(.+?)_small([.][a-zA-Z0-9]+)$/g;
            const match = imageRegex.exec(image_url);
            let image_link = "#";
            if (match) {
                //console.log("Matched image url!", match, image_url);
                image_link = match[1] + match[2]; // remove the `_small`
            } else {
                console.warn("Could not find bigger image for url:", image_url);
            }
            cil.attr('href', image_link);

            box.removeClass('hidden');
        }

        hideImagePreview() {
            const box = jQuery('#time_series_cursor_morebox');
            box.addClass('hidden');
        }

        updateImagePreviewFromCursor(x0) {
            let data = this._image_preview_layers_data;
            let i;
            let layer_slug;
            for (layer_slug in data) {
                if ( ! data.hasOwnProperty(layer_slug))
                    continue;
                if ( ! this.isImagePreviewLayerLive(layer_slug)) {
                    continue;
                }
                i = this.bisectIpod(data[layer_slug], x0, 1);
                //console.debug("Found i ", i, x0, data[layer_slug]);
                if (i == null) continue; // ignore errors and data out of range
                break;
            }
            if (i == null) {
                //console.debug("No live image preview found.");
                return;
            }

            let d0 = data[layer_slug][i - 1];
            let d1 = data[layer_slug][i];
            if (!d1 || !d0) {
                //this.hideImagePreview();
                return;
            }
            let d = x0 - d0.time_min > d1.time_min - x0 ? d1 : d0;

            //console.info("Cursor", x0, d0);

            this.highlightImagePreviewLayerRect(
                layer_slug, d === d0 ? i-1 : i
            );
            this.showImagePreview(
                d.thumbnail_url, d.external_link,
                "Integration: "+d.time_min.from(d.time_max, true)
            );
        }

        ///////////////////////////////////////////////////////////////////////

        showCursor() {
            return this.focus.style("display", null);
        }

        hideCursor() {
            return this.focus.style("display", "none");
        }

        moveCursor(x0) {

            let i = this.bisectDate(this.data, x0, 1);
            let d0 = this.data[i - 1];
            let d1 = this.data[i];

            if (!d1 || !d0) {
                this.hideCursor();
                return;
            }

            let d = x0 - d0.x > d1.x - x0 ? d1 : d0;
            let xx = this.xScale(d.x);
            let yy = this.yScale(d.y);

            const mirrored = this.plotWidth != null && xx > this.plotWidth / 2;

            let dx = 8;

            if (mirrored) {
                dx = -1 * dx;
            }

            const transform = `translate(${xx}, ${yy})`;
            this.cursorCircle
                .attr("transform", transform);
            this.cursorValue
                .text(d.y)
                .attr("transform", transform)
                .attr('text-anchor', mirrored ? 'end' : 'start')
                .attr("dx", dx);
            this.cursorValueShadow
                .text(d.y)
                .attr("transform", transform)
                .attr('text-anchor', mirrored ? 'end' : 'start')
                .attr("dx", dx);
            this.cursorDate
                .text(this.timeFormat(d.x))
                .attr("transform", transform)
                .attr('text-anchor', mirrored ? 'end' : 'start')
                .attr("dx", dx);
            this.cursorDateShadow
                .text(this.timeFormat(d.x))
                .attr("transform", transform)
                .attr('text-anchor', mirrored ? 'end' : 'start')
                .attr("dx", dx);

            this.showCursor();

            return this;

        }

    }

    // Don't use the prototype for a regex ; there are race conditions
    //TimeSeries.prototype.imageRegex = /(.+?)_small([.][a-zA-Z0-9]+)$/g;
    TimeSeries.prototype.bisectIpod = d3.bisector(d => d.time_min).left;

    TimeSeries.prototype.bisectDate = d3.bisector(d => d.x).left;
    TimeSeries.prototype.timeFormat = d3.utcFormat("%Y-%m-%d %H:%M");

    ///////////////////////////////////////////////////////////////////////////
    //// ORBITS PLOT //////////////////////////////////////////////////////////

    class Orbits {
        constructor(container, options) {
            this.container = container;
            this.options = options || {};
            console.log("Initializing plot of orbits…");
            this.margin = {
                top: 30,
                right: 20,
                bottom: 42,
                left: 60
            };
            this.data = {};
            this.orbiters = {};
            this.orbitersElements = {};
            this.orbitersExtrema = {};
            this.lastOrbiterData = {};
            this.xScale = d3.scaleLinear().domain([-1, 1]);
            this.yScale = d3.scaleLinear().domain([1, -1]);
            this.xAxis = d3.axisBottom().ticks(10);
            this.yAxis = d3.axisLeft().ticks(10);
            this.svg = d3.select(this.container).append('svg');
            this.plotWrapper = this.svg.append('g');
            this.plotWrapper.attr('transform', `translate(${this.margin.left},${this.margin.top})`);
            this.xAxisLine = this.plotWrapper.append('g').classed('x axis', true);
            this.yAxisLine = this.plotWrapper.append('g').classed('y axis', true);
            this.xAxisTitle = this.xAxisLine.append('text').attr('fill', '#000');
            this.xAxisTitle.style("text-anchor", "middle");
            this.xAxisTitle.append('tspan').text('Y');
            this.xAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '8px');
            this.xAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)');
            this.yAxisTitle = this.yAxisLine.append('text').attr('fill', '#000');
            this.yAxisTitle.style("text-anchor", "middle");
            this.yAxisTitle.append('tspan').text('X');
            this.yAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '8px');
            this.yAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)');
            this.yAxisTitle.attr('transform', 'rotate(-90)');
            this.sun = this.plotWrapper.append("svg:image").attr('xlink:href', this.options.sun.img).attr('width', '32px').attr('height', '32px');
            this.sun.append('svg:title').text("Sun");
            $(this.svg.node()).hide();
            this.resize();
        }

        initOrbiter(slug, config, data) {

            // 'src_plot': If it is a source then Dont draw orbit`
            if ( slug.includes('_src') ){
                return this;
            }

            const thisOrbit = this;
            let orbit_ellipse;
            let orbiter;
            let orbit_line;
            let orbit_section;
            this.data[slug] = data;
            this.orbiters[slug] = config;
            if (data.length) {
                console.info(`Initializing orbit of ${config.name}…`);
            } else {
                console.warn(`No orbit data for ${config.name}…`);
                return;
            }
            if (slug in this.orbitersElements) {
                throw new Error(`Second init of ${slug}.`);
            }
            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 => 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,
                orbit_ellipse,
                orbit_section,
                orbit_line
            };
            this.orbitersExtrema[slug] = d3.max(data, d => Math.max(Math.abs(d.x), Math.abs(d.y)));
            $(this.svg.node()).show();
            if (config.active) {
                this.enableTarget(slug);
            } else {
                this.disableTarget(slug);
            }
            return this;
        }

        enableTarget(slug) {
            this.orbiters[slug].enabled = true;
            return this.showOrbiter(slug);
        }

        disableTarget(slug) {
            this.orbiters[slug].enabled = false;
            return this.hideOrbiter(slug);
        }

        showOrbiter(slug, doResize=true) {

            if (!this.data[slug].length) {
                return;

            }

            if (!this.orbiters[slug].enabled) {
                return;

            }

            this.orbiters[slug].hidden = false;
            this.orbitersElements[slug].orbiter.style("display", null);
            this.orbitersElements[slug].orbit_ellipse.style("display", null);
            this.orbitersElements[slug].orbit_section.style("display", null);

            if (doResize) this.resize(true);

            return this;

        }

        hideOrbiter(slug) {
            if (!this.data[slug].length) {
                return;

            }

            this.orbiters[slug].hidden = true;
            this.orbitersElements[slug].orbiter.style("display", "none");
            this.orbitersElements[slug].orbit_ellipse.style("display", "none");
            this.orbitersElements[slug].orbit_section.style("display", "none");
            return this.resize(true);
        }

        clear() {
            return $(this.svg.node()).remove();
        }

        resize(animate, extremum) {
            let s;
            let o;
            let slug;
            let ref$;
            let config;
            let t;
            let t1;
            animate == null && (animate = false);
            extremum == null && (extremum = null);
            const width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right);
            const height = width; // it's a square

            console.debug(`Resizing orbits : ${width} × ${height}… (animated: ${animate})`);

            if (extremum === null) {
                extremum = 1.1 * d3.max((function () {
                    let ref$;
                    const results$ = [];
                    for (s in ref$ = this.orbiters) {
                        o = ref$[s];
                        if (!o.hidden) {
                            results$.push(this.orbitersExtrema[s]);

                        }

                    }
                    return results$;
                }.call(this)));
            }
            this.xScale = d3.scaleLinear().domain([-1 * extremum, extremum]);
            this.yScale = d3.scaleLinear().domain([extremum, -1 * extremum]);
            this.xScale.range([0, width]);
            this.yScale.range([height, 0]);
            this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom);
            this.sun.attr("x", width / 2.0 - 16).attr("y", height / 2.0 - 16);
            for (slug in ref$ = this.orbiters) {
                config = ref$[slug];
                this.resizeOrbiter(slug, config, width, height, animate);
            }
            this.xAxis.scale(this.xScale);
            this.yAxis.scale(this.yScale);
            this.svg.select('.x.axis').attr('transform', `translate(0,${height})`);
            if (animate) {
                t = this.svg.transition().duration(750);

                this.svg.select('.x.axis').transition(t).call(this.xAxis);
                this.svg.select('.y.axis').transition(t).call(this.yAxis);
            } else {
                this.svg.select('.x.axis').call(this.xAxis);
                this.svg.select('.y.axis').call(this.yAxis);

            }

            this.xAxisTitle.attr("x", width / 2.0).attr("y", 37);
            this.yAxisTitle.attr("x", -1 * height / 2.0).attr("y", -30);

            return this;
        }

        resizeOrbiter(slug, config, width, height, animate) {
            let data;
            let tt;
            let el;
            let orbit_section;
            let t;
            let a;
            let b;
            let c;
            let cx;
            let cy;
            let orbit_ellipse;
            animate == null && (animate = false);
            data = this.data[slug];
            if (!data.length) {
                return;
            }
            console.debug(`Resizing orbit of ${slug}…`);
            tt = this.svg.transition().duration(750);
            el = this.orbitersElements[slug];
            orbit_section = el['orbit_section'];
            if (animate) {
                t = this.svg.transition().duration(750);
                orbit_section = orbit_section.transition(tt);
            }
            orbit_section.attr('d', el['orbit_line']);
            a = config['orbit']['a'];
            b = config['orbit']['b'];
            c = Math.sqrt(a * a - b * b);

            cx = width / 2.0 - c;
            cy = height / 2.0;

            orbit_ellipse = el['orbit_ellipse'];
            if (animate) {
                t = this.svg.transition().duration(750);
                orbit_ellipse = orbit_ellipse.transition(t);
            }
            orbit_ellipse.attr('cx', cx).attr('cy', cy).attr('rx', this.xScale(a) - this.xScale(0)).attr('ry', this.yScale(b) - this.yScale(0));
            this.repositionOrbiter(slug, null, true);
            return this;
        }

        zoomToTarget(slug) {
            return this.resize(true, 1.1 * this.orbitersExtrema[slug]);
        }

        repositionOrbiter(slug, datum, animate) {
            let data;
            let el;
            let t;
            animate == null && (animate = false);
            data = this.data[slug];
            if (!data.length) {
                return;
            }
            datum == null && (datum = this.lastOrbiterData[slug]);
            datum == null && (datum = data[data.length - 1]);
            this.lastOrbiterData[slug] = datum;
            el = this.orbitersElements[slug]['orbiter'];
            if (animate) {
                t = this.svg.transition().duration(750);
                el = el.transition(t);
            }
            el.attr('x', this.xScale(datum.y) - 16);
            el.attr('y', this.yScale(datum.x) - 16);
            return this;
        }

        moveToDate(t) {
            let slug;
            let ref$;
            let el;
            let data;
            let i;
            let d0;
            let d1;
            let d;
            if (!t) {
                console.warn("Trying to move to an undefined date !");
            }
            for (slug in ref$ = this.orbitersElements) {
                el = ref$[slug];

                data = this.data[slug];

                i = this.bisectDate(data, t, 1);
                d0 = data[i - 1];
                d1 = data[i];
                if (!(d1 && d0)) {
                    continue;

                }

                d = t - d0.t > d1.t - t ? d1 : d0;
                this.repositionOrbiter(slug, d);

            }

            return this;
        }

        resizeDomain(started_at, stopped_at) {

            let config;
            let el;
            let data;

            for (let slug in this.orbiters) {
                config = this.orbiters[slug];

                el = this.orbitersElements[slug];
                data = this.data[slug].filter(onlyDataInRange);

                if ( ! data.length) {

                    this.hideOrbiter(slug);
                    continue;

                }

                el['orbit_section'].datum(data);
                el['orbit_section'].attr('d', el['orbit_line']);

                this.showOrbiter(slug, false);

            }

            this.resize(true);

            return this;

            function onlyDataInRange(d) {
                return started_at <= d.t && d.t <= stopped_at;

            }

        }

        // resetZoom() {
        //     let slug;
        //     let ref$;
        //     let config;
        //     let el;
        //     const results$ = [];
        //     for (slug in ref$ = this.orbiters) {
        //         config = ref$[slug];
        //         el = this.orbitersElements[slug];
        //         if (!this.data[slug].length) {
        //             this.hideOrbiter(slug);
        //             continue;
        //         }
        //         el['orbit_section'].datum(this.data[slug]);
        //         el['orbit_section'].attr('d', el['orbit_line']);
        //         results$.push(this.showOrbiter(slug));
        //     }
        //     return results$;
        // }

    }

    Orbits.prototype.bisectDate = d3.bisector(d => d.t).left;

    ///////////////////////////////////////////////////////////////////////////

    global.SpaceWeather = SpaceWeather;
    global.TimeSeries = TimeSeries;
    global.Orbits = Orbits;

}).call(this);