Make time series' resizing more fluid.

Goutte
1 parent 4bbc0e4a
Showing 2 changed files with 49 additions and 56 deletions Show diff stats
web/static/js/main.js
web/view/home.html.jinja2
@@ -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;
@@ -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();