Skip to content

[HTML Report] Reduce report load time by deferring collapsed section parsing #11495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hotbees wants to merge 12 commits into
base: midnight
Choose a base branch
from
Open

[HTML Report] Reduce report load time by deferring collapsed section parsing #11495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
254ba9a
[HTML Report] Render Raid DPS chart early
hotbees Jun 2, 2026
cc1589d
[HTML Report] Emit grouping classes by default
hotbees Jun 2, 2026
9042cfd
[HTML Report] Emit `section-open` for main actor of single actor reports
hotbees Jun 2, 2026
e9f99fe
[HTML Report] Defer actor subsection loading
hotbees Jun 2, 2026
55262d3
[report] Remove special casing for HTML reports based on actor count.
renanthera Jun 7, 2026
cd567eb
fix talent tables toggle
hotbees Jun 7, 2026
bb81182
fix toggle onclick in deferred blocks
hotbees Jun 7, 2026
6f41342
[report] Remove deferral for talent tree iframe to mitigate flashbang.
renanthera Jun 7, 2026
23fabc4
[report] Remove deferral on default-open sections.
renanthera Jun 7, 2026
e655ae0
make charts inside deferred blocks load properly
hotbees Jun 7, 2026
3d183c8
[report] Defer only actor, as nested script tags are not permitted.
renanthera Jun 7, 2026
e993ada
fix charts again; cleanup
hotbees Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions engine/player/player.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16440,9 +16440,9 @@ void player_t::print_parsed_effects( report::sc_html_stream& os ) const
if ( !sim->report_details )
return;

os << R"(<div class="player-section parsed_effects">)"
<< R"(<h3 class="toggle">Parsed Player Effects</h3>)"
<< R"(<div class="toggle-content hide">)";
os << R"(<div class="player-section parsed_effects">)";
os.format( R"(<h3 class="toggle">Parsed Player Effects</h3>)", index );
os << R"(<div class="toggle-content hide">)";

os << R"(<table class="sc left even"><thead><tr><th colspan="2" class="left">Passive Effects</th>)"
<< R"(<th>Spell</th><th colspan="2">ID</th><th>Value</th><th>Source</th></tr></thead>)";
Expand Down
38 changes: 27 additions & 11 deletions engine/report/data/html_report_script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,10 @@ jQuery(document).ready(function ($) {
scrollTop: $anchor.parent().offset().top - $anchor.height()
}, 300);
});
$('.toggle').click(function (e) {
$(document).on('click', '.toggle', function (e) {
e.preventDefault();
var $me = $(this);
revealSection(this.id);
$me.toggleClass('open');
$me.next('.toggle-content').slideToggle(150);
var section = $me.parent('.section');
Expand All @@ -86,10 +87,11 @@ jQuery(document).ready(function ($) {
}
}
});
$('.toggle-details').click(function (e) {
$(document).on('click', '.toggle-details', function (e) {
e.preventDefault();
e.stopPropagation();
var $me = $(this);
if ( this.id ) renderCharts(this.id);
var $row = $me.closest('tr').nextAll('.details').first();
if ($me.hasClass('open')) {
$me.removeClass('open');
Expand All @@ -99,16 +101,30 @@ jQuery(document).ready(function ($) {
$row.fadeToggle(150);
}
});
$('.toggle, .toggle-details').each(function() {
if ( __chartData[this.id] === undefined ) return;
$(this).one('click', function() {
var d = __chartData[this.id];
for (var idx in d) {
$('#' + d[idx]['target']).highcharts(d[idx]['data']);
function renderCharts(key) {
var items = __chartData[key];
if ( items === undefined ) return;
items.forEach(function(chart) {
var $el = $('#' + chart.target);
if ( $el.length && !$el.highcharts() ) {
$el.highcharts(chart.data);
}
});
});
$('table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type').click(function (e) {
}
function revealSection(id) {
var $deferred = id ? $('script[type="text/x-deferred-html"][data-toggle="' + id + '"]') : $();
if ( $deferred.length ) {
$deferred.each(function() {
$(this).replaceWith($($.parseHTML(this.textContent)));
});
$('.stripetoprow').oddstripe();
renderCharts('');
}
if ( id ) renderCharts(id);
}
$('.toggle.open').each(function() { revealSection(this.id); });
renderCharts('');
$(document).on('click', 'table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type', function (e) {
e.preventDefault();
$(this).children('.toggle-details').first().click();
});
Expand Down Expand Up @@ -202,7 +218,7 @@ jQuery(document).ready(function ($) {
$cells.removeClass('pulse');
}, 150);
}
$('.sort').on('click', 'th.toggle-sort', function (e) {
$(document).on('click', '.sort th.toggle-sort', function (e) {
e.preventDefault();
var $me = $(this);
var $col = $me.closest('th');
Expand Down
92 changes: 48 additions & 44 deletions engine/report/data/report_data.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1135,50 +1135,54 @@ static const char* __html_report_script[] = {
"$('a.ext').mouseover(function () { $(this).attr('target', '_blank'); }); $('ul.toc li a').click(function (e) { e.pre",
"ventDefault(); var href = this.getAttribute('href'); var $anchor = $(href).children('h2').first(); if (!$anchor.hasC",
"lass('open')) { $anchor.click(); } $('html, body').animate( { scrollTop: $anchor.parent().offset().top - $anchor.hei",
"ght() }, 300); }); $('.toggle').click(function (e) { e.preventDefault(); var $me = $(this); $me.toggleClass('open');",
" $me.next('.toggle-content').slideToggle(150); var section = $me.parent('.section'); if (section.length) { section.v",
"alidate_section(); if ($me.hasClass('open')) { var wh = $(window).height() / 3; var pos = section[0].getBoundingClie",
"ntRect().top; if (pos > wh * 2) { $('html, body').animate( { scrollTop: section.offset().top - wh }, 300); } } } });",
" $('.toggle-details').click(function (e) { e.preventDefault(); e.stopPropagation(); var $me = $(this); var $row = $m",
"e.closest('tr').nextAll('.details').first(); if ($me.hasClass('open')) { $me.removeClass('open'); $row.fadeToggle(75",
"); } else { $me.addClass('open'); $row.fadeToggle(150); } }); $('.toggle, .toggle-details').each(function() { if ( _",
"_chartData[this.id] === undefined ) return; $(this).one('click', function() { var d = __chartData[this.id]; for (var",
" idx in d) { $('#' + d[idx]['target']).highcharts(d[idx]['data']); } }); }); $('table.stripetoprow .toprow td:first-",
"of-type, table.stripebody tbody td:first-of-type').click(function (e) { e.preventDefault(); $(this).children('.toggl",
"e-details').first().click(); }); var hoverTimeout; function hoverHide() { clearTimeout(hoverTimeout); $('#active-hel",
"p','.help-box').hide(); $('#active-help').removeAttr('style'); } $('.help').hover(function (e) { var $target = $(thi",
"s.dataset.help + ' .help-box'); var content; if (!$target.length) { content = '<h3>NO HELP FOUND</h3><p>PLEASE REPOR",
"T AS A BUG</p>'; } else { content = $target.html(); } $('#active-help-dynamic .help-box').html(content); $('#active-",
"help .help-box').show(); var pos = $(this).offset(); $('#active-help').css({ top: pos.top - $('#active-help').height",
"() - $(this).height(), left: pos.left, }); hoverTimeout = setTimeout(function() { $('#active-help').fadeIn(300); }, ",
"750); }, hoverHide); window.onblur = hoverHide; function getCell(elem, i, both) { var $row; var ret; var idx = i; if",
" ($(elem).is('tr')) { $row = $(elem); } else { $row = $(elem).find('tr').first(); } ret = $row.children('td').eq(idx",
").text().trim(); if (!ret.length && both) { var span = $row.children('td[rowspan]').length; $row = $row.nextAll('.ch",
"ildrow').first(); if ($row.length && idx >= span) { idx -= span; ret = $row.children('td').eq(idx).text().trim(); } ",
"} return ret; } function strip(val) { return val.slice(val.indexOf('\\xa0') + 1).replace(/[^\\d.-]/g,''); } function",
" numberSort(a, b, i, dsc, both) { var va = +strip(getCell(a, i, both)) || 0; var vb = +strip(getCell(b, i, both)) ||",
" 0; return dsc \? vb - va : va - vb; } function alphaSort(a, b, i, dsc, both) { var va = getCell(a, i, both); var vb",
" = getCell(b, i, both); if (dsc) { return va < vb \? 1 : -1; } else { return va > vb \? 1 : -1; } } function pulseco",
"lumn(table, index, both) { var $cells = $(); if (table.hasClass('stripetoprow')) { table.find('.toprow:not(.childrow",
")').each(function() { var me = $(this); var cell = me.children('td').eq(index); if (both && (!cell.length || cell.is",
"(':empty'))) { var span = me.children('td[rowspan]').length; var row = me.nextAll('.childrow').first(); if (row.leng",
"th && index >= span) { cell = row.children('td').eq(index - span); } } if (cell.length && !cell.is(':empty')) { $.me",
"rge($cells, cell); } }); } else if (table.hasClass('stripebody')) { $cells = table.find('tbody tr:first-of-type td:n",
"th-of-type(' + (index + 1) + '):not(:empty)'); } else { $cells = table.find('tbody tr td:nth-of-type(' + (index + 1)",
" + '):not(:empty)'); } $cells.addClass('pulse'); setTimeout(function () { $cells.removeClass('pulse'); }, 150); } $(",
"'.sort').on('click', 'th.toggle-sort', function (e) { e.preventDefault(); var $me = $(this); var $col = $me.closest(",
"'th'); var $thd = $col.closest('thead'); var $tbl = $thd.closest('table.sort'); var $sib = $col.siblings('.asc-sorte",
"d, .dsc-sorted'); $sib.removeClass('asc-sorted dsc-sorted'); var idx = $col.index(); var doAlpha = this.dataset.sort",
"type == 'alpha'; var doAsc = this.dataset.sortdir == 'asc'; var doRows = this.dataset.sortrows == 'both'; if (!($me.",
"hasClass('dsc-sorted') || $me.hasClass('asc-sorted'))) { $me.toggleClass('dsc-sorted', !doAsc); } else { $me.toggleC",
"lass('dsc-sorted'); } var isDsc = $me.hasClass('dsc-sorted'); $me.toggleClass('asc-sorted', !isDsc); var srt; if (do",
"Alpha) { srt = function(i, dsc, both) { return function(a, b) { return alphaSort(a, b, i, dsc, both); }; }; } else {",
" srt = function(i, dsc, both) { return function(a, b) { return numberSort(a, b, i, dsc, both); }; }; } var $bucket =",
" $thd.nextUntil('.petrow'); if ($bucket.length == 1) { $bucket = $bucket.children('tr').first().nextUntil('.petrow')",
".addBack(); } var $remain = $bucket.last().nextAll(); var $petrow; do { $bucket.sort(srt(idx, isDsc, doRows)); $tbl.",
"append($bucket); if (!$remain.length) { break; } $tbl.append($remain); $petrow = $remain.first(); $bucket = $petrow.",
"nextUntil('.petrow'); $remain = $bucket.last().nextAll(); } while ($bucket.length > 1); if ($tbl.hasClass('stripetop",
"row')) { $tbl.oddstripe(); } pulsecolumn($tbl, idx, doRows); });});",
"ght() }, 300); }); $(document).on('click', '.toggle', function (e) { e.preventDefault(); var $me = $(this); revealSe",
"ction(this.id); $me.toggleClass('open'); $me.next('.toggle-content').slideToggle(150); var section = $me.parent('.se",
"ction'); if (section.length) { section.validate_section(); if ($me.hasClass('open')) { var wh = $(window).height() /",
" 3; var pos = section[0].getBoundingClientRect().top; if (pos > wh * 2) { $('html, body').animate( { scrollTop: sect",
"ion.offset().top - wh }, 300); } } } }); $(document).on('click', '.toggle-details', function (e) { e.preventDefault(",
"); e.stopPropagation(); var $me = $(this); if ( this.id ) renderCharts(this.id); var $row = $me.closest('tr').nextAl",
"l('.details').first(); if ($me.hasClass('open')) { $me.removeClass('open'); $row.fadeToggle(75); } else { $me.addCla",
"ss('open'); $row.fadeToggle(150); } }); function renderCharts(key) { var items = __chartData[key]; if ( items === un",
"defined ) return; items.forEach(function(chart) { var $el = $('#' + chart.target); if ( $el.length && !$el.highchart",
"s() ) { $el.highcharts(chart.data); } }); } function revealSection(id) { var $deferred = id \? $('script[type=\"text",
"/x-deferred-html\"][data-toggle=\"' + id + '\"]') : $(); if ( $deferred.length ) { $deferred.each(function() { $(thi",
"s).replaceWith($($.parseHTML(this.textContent))); }); $('.stripetoprow').oddstripe(); renderCharts(''); } if ( id ) ",
"renderCharts(id); } $('.toggle.open').each(function() { revealSection(this.id); }); renderCharts(''); $(document).on",
"('click', 'table.stripetoprow .toprow td:first-of-type, table.stripebody tbody td:first-of-type', function (e) { e.p",
"reventDefault(); $(this).children('.toggle-details').first().click(); }); var hoverTimeout; function hoverHide() { c",
"learTimeout(hoverTimeout); $('#active-help','.help-box').hide(); $('#active-help').removeAttr('style'); } $('.help')",
".hover(function (e) { var $target = $(this.dataset.help + ' .help-box'); var content; if (!$target.length) { content",
" = '<h3>NO HELP FOUND</h3><p>PLEASE REPORT AS A BUG</p>'; } else { content = $target.html(); } $('#active-help-dynam",
"ic .help-box').html(content); $('#active-help .help-box').show(); var pos = $(this).offset(); $('#active-help').css(",
"{ top: pos.top - $('#active-help').height() - $(this).height(), left: pos.left, }); hoverTimeout = setTimeout(functi",
"on() { $('#active-help').fadeIn(300); }, 750); }, hoverHide); window.onblur = hoverHide; function getCell(elem, i, b",
"oth) { var $row; var ret; var idx = i; if ($(elem).is('tr')) { $row = $(elem); } else { $row = $(elem).find('tr').fi",
"rst(); } ret = $row.children('td').eq(idx).text().trim(); if (!ret.length && both) { var span = $row.children('td[ro",
"wspan]').length; $row = $row.nextAll('.childrow').first(); if ($row.length && idx >= span) { idx -= span; ret = $row",
".children('td').eq(idx).text().trim(); } } return ret; } function strip(val) { return val.slice(val.indexOf('\\xa0')",
" + 1).replace(/[^\\d.-]/g,''); } function numberSort(a, b, i, dsc, both) { var va = +strip(getCell(a, i, both)) || 0",
"; var vb = +strip(getCell(b, i, both)) || 0; return dsc \? vb - va : va - vb; } function alphaSort(a, b, i, dsc, bot",
"h) { var va = getCell(a, i, both); var vb = getCell(b, i, both); if (dsc) { return va < vb \? 1 : -1; } else { retur",
"n va > vb \? 1 : -1; } } function pulsecolumn(table, index, both) { var $cells = $(); if (table.hasClass('stripetopr",
"ow')) { table.find('.toprow:not(.childrow)').each(function() { var me = $(this); var cell = me.children('td').eq(ind",
"ex); if (both && (!cell.length || cell.is(':empty'))) { var span = me.children('td[rowspan]').length; var row = me.n",
"extAll('.childrow').first(); if (row.length && index >= span) { cell = row.children('td').eq(index - span); } } if (",
"cell.length && !cell.is(':empty')) { $.merge($cells, cell); } }); } else if (table.hasClass('stripebody')) { $cells ",
"= table.find('tbody tr:first-of-type td:nth-of-type(' + (index + 1) + '):not(:empty)'); } else { $cells = table.find",
"('tbody tr td:nth-of-type(' + (index + 1) + '):not(:empty)'); } $cells.addClass('pulse'); setTimeout(function () { $",
"cells.removeClass('pulse'); }, 150); } $(document).on('click', '.sort th.toggle-sort', function (e) { e.preventDefau",
"lt(); var $me = $(this); var $col = $me.closest('th'); var $thd = $col.closest('thead'); var $tbl = $thd.closest('ta",
"ble.sort'); var $sib = $col.siblings('.asc-sorted, .dsc-sorted'); $sib.removeClass('asc-sorted dsc-sorted'); var idx",
" = $col.index(); var doAlpha = this.dataset.sorttype == 'alpha'; var doAsc = this.dataset.sortdir == 'asc'; var doRo",
"ws = this.dataset.sortrows == 'both'; if (!($me.hasClass('dsc-sorted') || $me.hasClass('asc-sorted'))) { $me.toggleC",
"lass('dsc-sorted', !doAsc); } else { $me.toggleClass('dsc-sorted'); } var isDsc = $me.hasClass('dsc-sorted'); $me.to",
"ggleClass('asc-sorted', !isDsc); var srt; if (doAlpha) { srt = function(i, dsc, both) { return function(a, b) { retu",
"rn alphaSort(a, b, i, dsc, both); }; }; } else { srt = function(i, dsc, both) { return function(a, b) { return numbe",
"rSort(a, b, i, dsc, both); }; }; } var $bucket = $thd.nextUntil('.petrow'); if ($bucket.length == 1) { $bucket = $bu",
"cket.children('tr').first().nextUntil('.petrow').addBack(); } var $remain = $bucket.last().nextAll(); var $petrow; d",
"o { $bucket.sort(srt(idx, isDsc, doRows)); $tbl.append($bucket); if (!$remain.length) { break; } $tbl.append($remain",
"); $petrow = $remain.first(); $bucket = $petrow.nextUntil('.petrow'); $remain = $bucket.last().nextAll(); } while ($",
"bucket.length > 1); if ($tbl.hasClass('stripetoprow')) { $tbl.oddstripe(); } pulsecolumn($tbl, idx, doRows); });});",
};

// Automatically generated from file style.css
Expand Down
Loading
Loading