From 03452084e45f51e656a5cba778fc291e94f9756b Mon Sep 17 00:00:00 2001 From: Goutte Date: Fri, 5 Oct 2018 17:14:14 +0200 Subject: [PATCH] Make time series' resizing more fluid. --- web/static/js/main.js | 99 ++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------- web/view/home.html.jinja2 | 6 +++--- 2 files changed, 49 insertions(+), 56 deletions(-) diff --git a/web/static/js/main.js b/web/static/js/main.js index 1af4ca1..67384e0 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -361,12 +361,12 @@ } createTimeSeries(target, data) { - const this$ = this; + const app = this; this.configuration['parameters'].forEach(parameter => { let container; let id; let title; - container = this$.configuration['time_series_container']; + container = app.configuration['time_series_container']; id = parameter['id']; title = parameter['title']; if (!(id in data)) { @@ -374,33 +374,36 @@ } console.log(target['name'], id, data[id]); if (data[id].length) { - return this$.time_series.push(new TimeSeries(id, title, target, data[id], this$.parameters[id].active, container, { - 'started_at': this$.started_at, - 'stopped_at': this$.stopped_at + 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 => { + this.time_series.forEach((ts, tsk) => { ts.options['onMouseOver'] = () => true; ts.options['onMouseOut'] = () => { - this$.time_series.forEach(ts2 => ts2.hideCursor()); + app.time_series.forEach(ts2 => ts2.hideCursor()); return true; }; ts.options['onMouseMove'] = t => { let ref$; - this$.time_series.forEach(ts2 => ts2.moveCursor(t)); - if ((ref$ = this$.orbits) != null) { + app.time_series.forEach(ts2 => ts2.moveCursor(t)); + if ((ref$ = app.orbits) != null) { ref$.moveToDate(t); } return true; }; - ts.options['onBrushEnd'] = (sta, sto) => { - this$.resizeDomain(moment(sta), moment(sto)); + + 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); + return ts.options['onDblClick'] = () => { let ref$; - this$.resetZoom(); + app.resetZoom(); if ((ref$ = $("#zoom_controls_help")) != null) { ref$.remove(); } @@ -474,14 +477,11 @@ return [this.started_at, this.stopped_at]; } - resizeDomain(started_at, stopped_at) { + resizeDomain(started_at, stopped_at, starting_ts) { let ref$; let max_stopped_at; let formatted_started_at; let formatted_stopped_at; - let tsv; - let tsv_cursor; - let tsv_length; let zoomedOnVisible; if (stopped_at < started_at) { ref$ = [stopped_at, started_at], started_at = ref$[0], stopped_at = ref$[1]; @@ -501,8 +501,10 @@ 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…`); - tsv = this.time_series.filter(ts => ts.visible); - tsv_length = tsv.length; + 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; zoomedOnVisible = new Promise((resolve, reject) => { let tsv_zoom_on_next; tsv_zoom_on_next = i => { @@ -511,7 +513,7 @@ resolve(); return; } - ts = tsv[i]; + ts = tsv[(i+starting_ts_key)%tsv_length]; ts.zoomIn(started_at, stopped_at) .then(() => tsv_zoom_on_next(i + 1)); }; @@ -535,10 +537,7 @@ } resetZoom() { - this.time_series.forEach(ts => ts.resetZoom()); - this.orbits.resetZoom(); - this.setStartAndStop(this.started_at, this.stopped_at); - + this.resizeDomain(this.started_at, this.stopped_at); return this; } @@ -805,13 +804,13 @@ } onBrushEnd() { - let s; - let minmax; - s = d3.event.selection; + let s = d3.event.selection; if (s) { - minmax = [s[0], s[1]].map(this.xScale.invert, this.xScale); + 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]); @@ -843,12 +842,6 @@ return this.applyZoom(); } - resetZoom() { - this.xScale.domain(this.xDataExtent); - this.yScale.domain(this.yDataExtent); - return this.applyZoom(); - } - applyZoom() { let duration; let t; @@ -1304,25 +1297,25 @@ } } - 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$; - } + // 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; diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index df3b0f1..e1d44d1 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -803,9 +803,9 @@ jQuery().ready(function($){ }); }; - // Update the document about the presence of any SAMP hub every 10 sec. + // Update the document about the presence of any SAMP hub every 7 sec. var connector = new samp.Connector("Sender"); - connector.onHubAvailability(onHubAvailability, 5000); + connector.onHubAvailability(onHubAvailability, 7000); window.onunload = function () { connector.unregister(); }; @@ -817,7 +817,7 @@ jQuery().ready(function($){ // pitfall : connector.connection is ALWAYS undefined here if ( ! isConnected) { // so we use a bool flag instead alert("We do not detect any connected SAMP hub.\n" + - "Wait some more, or try refreshing this page?"); + "Wait some more, or try refreshing this page?"); return; } var name = sw.buildSampName(); -- libgit2 0.21.2