sync/async scrolling reworked; both are better now and their difference is clear; highlighted regions can now be printed
Costa Tsaousis (ktsaou) committed
Nov 19, 2017 at 05:36 UTC
2aaeb55fe72dafe2fb25698568c6fad3301ec3f5
2 files changed
+19
-48
web/dashboard.js
+11
-40
@@ -396,7 +396,7 @@ var NETDATA = window.NETDATA || {};
396
397
abort_ajax_on_scroll: false, // kill pending ajax page scroll
398
async_on_scroll: false, // sync/async onscroll handler
399
- onscroll_worker_duration_threshold: 30, // time in ms, to consider slow the onscroll handler
399
+ onscroll_worker_duration_threshold: 30, // time in ms, for async scroll handler
400
401
retries_on_data_failures: 3, // how many retries to make if we can't fetch chart data from the server
402
@@ -626,9 +626,6 @@ var NETDATA = window.NETDATA || {};
626
};
627
628
NETDATA.onscroll_updater_timeout_id = 0;
629
- NETDATA.onscroll_updater_count = 0;
630
- NETDATA.onscroll_updater_max_duration = 0;
631
- NETDATA.onscroll_updater_above_threshold_count = 0;
629
NETDATA.onscroll_updater_enabled = true;
630
NETDATA.onscroll_updater = function() {
631
if(NETDATA.onscroll_updater_enabled === false)
@@ -638,7 +635,6 @@ var NETDATA = window.NETDATA || {};
635
636
NETDATA.globalSelectionSync.stop();
637
641
- NETDATA.onscroll_updater_count++;
638
var start = Date.now();
639
640
@@ -664,25 +660,6 @@ var NETDATA = window.NETDATA || {};
660
onscroll_updater_chart_is_visible();
661
662
var end = Date.now();
667
- // console.log('scroll No ' + NETDATA.onscroll_updater_count + ' calculation took ' + (end - start).toString() + ' ms');
668
-
669
- if(NETDATA.options.current.async_on_scroll === false) {
670
- var dt = end - start;
671
- if(dt > NETDATA.onscroll_updater_max_duration) {
672
- // console.log('max onscroll event handler duration increased to ' + dt);
673
- NETDATA.onscroll_updater_max_duration = dt;
674
- }
675
-
676
- if(dt > NETDATA.options.current.onscroll_worker_duration_threshold) {
677
- // console.log('slow: ' + dt);
678
- NETDATA.onscroll_updater_above_threshold_count++;
679
-
680
- if(NETDATA.onscroll_updater_above_threshold_count > 2 && NETDATA.onscroll_updater_above_threshold_count * 100 / NETDATA.onscroll_updater_count > 2) {
681
- NETDATA.setOption('async_on_scroll', true);
682
- console.log('NETDATA: your browser is slow - enabling asynchronous onscroll event handler.');
683
- }
684
- }
685
- }
663
664
NETDATA.onscroll_updater_timeout_id = 0;
665
//console.log('onscroll_updater() done in ' + (end - start).toString() + ' ms');
@@ -698,22 +675,14 @@ var NETDATA = window.NETDATA || {};
675
NETDATA.scrollY = window.scrollY;
676
677
NETDATA.options.last_page_scroll = Date.now();
701
- NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + 25;
678
+ NETDATA.options.on_scroll_refresher_stop_until = NETDATA.options.last_page_scroll + ((NETDATA.options.current.async_on_scroll === true)?NETDATA.options.current.onscroll_worker_duration_threshold:0);
679
680
if(NETDATA.options.targets === null) return;
681
705
- if(NETDATA.options.current.async_on_scroll === true) {
706
- // async
707
- if(NETDATA.onscroll_updater_timeout_id !== 0)
708
- clearTimeout(NETDATA.onscroll_updater_timeout_id);
709
-
710
- NETDATA.onscroll_updater_timeout_id = setTimeout(NETDATA.onscroll_updater, 0);
711
- }
712
- else {
713
- // sync
714
- NETDATA.onscroll_updater();
715
- }
682
+ if(NETDATA.onscroll_updater_timeout_id !== 0)
683
+ clearTimeout(NETDATA.onscroll_updater_timeout_id);
684
685
+ NETDATA.onscroll_updater_timeout_id = setTimeout(NETDATA.onscroll_updater, 0);
686
//console.log('onscroll() end');
687
};
688
@@ -4914,9 +4883,11 @@ var NETDATA = window.NETDATA || {};
4883
NETDATA.chartRefresherTimeoutId = 0;
4884
4885
NETDATA.chartRefresherReschedule = function() {
4917
- clearTimeout(NETDATA.chartRefresherTimeoutId);
4918
- NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher, NETDATA.chartRefresherWaitTime());
4919
- //console.log('chartRefresherReschedule()');
4886
+ if(NETDATA.options.current.async_on_scroll === true) {
4887
+ clearTimeout(NETDATA.chartRefresherTimeoutId);
4888
+ NETDATA.chartRefresherTimeoutId = setTimeout(NETDATA.chartRefresher, NETDATA.options.current.onscroll_worker_duration_threshold);
4889
+ //console.log('chartRefresherReschedule()');
4890
+ }
4891
};
4892
4893
NETDATA.chartRefresher = function() {
@@ -7217,7 +7188,7 @@ var NETDATA = window.NETDATA || {};
7188
create: NETDATA.dygraphChartCreate,
7189
update: NETDATA.dygraphChartUpdate,
7190
resize: function(state) {
7220
- if(typeof state.tmp.dygraph_instance.resize === 'function')
7191
+ if(typeof state.tmp.dygraph_instance !== 'undefined' && typeof state.tmp.dygraph_instance.resize === 'function')
7192
state.tmp.dygraph_instance.resize();
7193
},
7194
setSelection: NETDATA.dygraphSetSelection,
web/index.html
+8
-8
@@ -1860,6 +1860,12 @@
1860
div.innerHTML = html;
1861
document.getElementById('sidebar').innerHTML = sidebar;
1862
1863
+ if(urlOptions.highlight === true) {
1864
+ NETDATA.options.highlight_after = urlOptions.highlight_after;
1865
+ NETDATA.options.highlight_before = urlOptions.highlight_before;
1866
+ urlOptions.netdataHighlightCallback(urlOptions.highlight, urlOptions.highlight_after, urlOptions.highlight_before);
1867
+ }
1868
+
1869
if(urlOptions.mode === 'print')
1870
printPage();
1871
else
@@ -3700,12 +3706,6 @@
3706
NETDATA.globalPanAndZoom.callback = urlOptions.netdataPanAndZoomCallback;
3707
NETDATA.options.highlightCallback = urlOptions.netdataHighlightCallback;
3708
3703
- if(urlOptions.highlight === true) {
3704
- NETDATA.options.highlight_after = urlOptions.highlight_after;
3705
- NETDATA.options.highlight_before = urlOptions.highlight_before;
3706
- urlOptions.netdataHighlightCallback(urlOptions.highlight, urlOptions.highlight_after, urlOptions.highlight_before);
3707
- }
3708
-
3709
// let it run (update the charts)
3710
NETDATA.unpause();
3711
@@ -4696,7 +4696,7 @@
4696
<tr class="option-row">
4697
<td class="option-control"><input id="async_on_scroll" type="checkbox" data-toggle="toggle" data-on="Async" data-off="Sync" data-width="110px"></td>
4698
<td class="option-info"><strong>Page scroll handling?</strong><br/>
4699
- <small>When set to <b>Sync</b>, charts will be examined for their visibility synchronously. On slow computers this may impact the smoothness of page scrolling. To work asynchronously set it to <b>Async</b>. When set to <b>Sync</b>, the performance of page scrolling is monitored and this setting switches automatically to <b>Async</b> if the browser is found slow. Set it to <b>Sync</b> for best visual experience. Set it to <b>Async</b> for smoother page scrolling.</small>
4699
+ <small>When set to <b>Sync</b>, charts will be examined for their visibility immediately after scrolling. On slow computers this may impact the smoothness of page scrolling. To update the page when scrolling ends, set it to <b>Async</b>. Set it to <b>Sync</b> for immediate chart updates when scrolling. Set it to <b>Async</b> for smoother page scrolling on slower computers.</small>
4700
</td>
4701
</tr>
4702
</table>
@@ -5318,6 +5318,6 @@
5318
</div>
5319
</div>
5320
<div id="hiddenDownloadLinks" style="display: none;" hidden></div>
5321
- <script type="text/javascript" src="dashboard.js?v20171118-3"></script>
5321
+ <script type="text/javascript" src="dashboard.js?v20171118-5"></script>
5322
</body>
5323
</html>