Skip to content
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

Speedup page loading of VizStmt. #7755

Merged
merged 3 commits into from
Aug 21, 2023
Merged

Speedup page loading of VizStmt. #7755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
61e9c63
Speedup page loading of VizStmt.
mcourteaux Aug 11, 2023
633365d
Fix computedStyleMap() not available in Firefox.
mcourteaux Aug 17, 2023
1eee5ca
Reanble assembly highlighting by default.
mcourteaux Aug 18, 2023
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
10 changes: 2 additions & 8 deletions src/irvisualizer/StmtToViz_dependencies.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
<!-- Bootstrap links -->
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx' crossorigin='anonymous'>

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' integrity='sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa' crossorigin='anonymous'></script>

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css'>

<!-- Tooltip links -->
<script src='https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]'></script>
<script src='https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]'></script>

<!-- Hierarchy links -->
<link rel='stylesheet' href='https://unpkg.com/treeflex/dist/css/treeflex.css'>

Expand All @@ -23,9 +17,9 @@
<script type="module">
import { highlightAll } from 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/index.js';
import 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/languages/asm.js';
highlightAll();
highlightAll({hideLineNumbers: true});
</script>
<!-- adapted from the default style from: https://unpkg.com/@speed-highlight/[email protected]/dist/themes/default.css -->
<style type='text/css'>
[class*=shj-lang-]{white-space:pre;background:white;color:#112;box-shadow:0 0 5px #0001;text-shadow:none;font: 12px Consolas,Courier New,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:14px;box-sizing:border-box;max-width:min(100%,100vw)}.shj-inline{margin:0;padding:2px 5px;display:inline-block;border-radius:5px}[class*=shj-lang-]::selection,[class*=shj-lang-] ::selection{background:#bdf5}[class*=shj-lang-]>div{display:flex;overflow:auto}[class*=shj-lang-]>div :last-child{flex:1;outline:none}.shj-numbers{padding-left:5px;counter-reset:line}.shj-numbers div{padding-right:5px}.shj-numbers div:before{color:#999;display:block;content:counter(line);opacity:.5;text-align:right;margin-right:5px;counter-increment:line}.shj-syn-cmnt{font-style:italic}.shj-syn-err,.shj-syn-kwd{color:#e16}.shj-syn-num,.shj-syn-class{color:#f60}.shj-numbers,.shj-syn-cmnt{color:#999}.shj-syn-insert,.shj-syn-str{color:#7d8}.shj-syn-bool{color:#3bf}.shj-syn-type,.shj-syn-oper{color:#5af}.shj-syn-section,.shj-syn-func{color:#84f}.shj-syn-deleted,.shj-syn-var{color:#f44}.shj-oneline{padding:12px 10px}.shj-lang-http.shj-oneline .shj-syn-kwd{background:#25f;color:#fff;padding:5px 7px;border-radius:5px}.shj-multiline.shj-mode-header{padding:20px}.shj-multiline.shj-mode-header:before{content:attr(data-lang);color:#58f;display:block;padding:10px 20px;background:#58f3;border-radius:5px;margin-bottom:20px}
[class*=shj-lang-]{white-space:pre;background:white;color:#112;box-shadow:0 0 5px #0001;text-shadow:none;font: 12px Consolas,Courier New,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:14px;box-sizing:border-box;max-width:min(100%,100vw)}.shj-inline{margin:0;padding:2px 5px;display:inline-block;border-radius:5px}[class*=shj-lang-]::selection,[class*=shj-lang-] ::selection{background:#bdf5}[class*=shj-lang-]>div{display:flex;overflow:auto}[class*=shj-lang-]>div :last-child{flex:1;outline:none}.shj-numbers{padding-left:5px;counter-reset:line}.shj-numbers div{padding-right:5px; width:0;}.shj-numbers div:before{color:#999;display:block;content:counter(line);opacity:.5;text-align:right;margin-right:5px;counter-increment:line;width:5em;}.shj-syn-cmnt{font-style:italic}.shj-syn-err,.shj-syn-kwd{color:#e16}.shj-syn-num,.shj-syn-class{color:#f60}.shj-numbers,.shj-syn-cmnt{color:#999}.shj-syn-insert,.shj-syn-str{color:#7d8}.shj-syn-bool{color:#3bf}.shj-syn-type,.shj-syn-oper{color:#5af}.shj-syn-section,.shj-syn-func{color:#84f}.shj-syn-deleted,.shj-syn-var{color:#f44}.shj-oneline{padding:12px 10px}.shj-lang-http.shj-oneline .shj-syn-kwd{background:#25f;color:#fff;padding:5px 7px;border-radius:5px}.shj-multiline.shj-mode-header{padding:20px}.shj-multiline.shj-mode-header:before{content:attr(data-lang);color:#58f;display:block;padding:10px 20px;background:#58f3;border-radius:5px;margin-bottom:20px}
</style>
93 changes: 43 additions & 50 deletions src/irvisualizer/StmtToViz_javascript.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,29 @@
}

/* Expand/Collapse buttons in Viz */
function toggleViz(id) {
var buttonShow = document.getElementById(id + '-show');
var buttonHide = document.getElementById(id + '-hide');
var body = document.getElementById(id);
var re = /(?:\-([^-]+))?$/;
var ccost_btn = document.getElementById("vcc-" + re.exec(id)[1]);
var dcost_btn = document.getElementById("vdc-" + re.exec(id)[1]);
var ccost_tt = document.getElementById("tooltip-vcc-" + re.exec(id)[1]);
var dcost_tt = document.getElementById("tooltip-vdc-" + re.exec(id)[1]);
function toggleVizByElem(body) {
var id = body.id;
var group = body.parentElement;
var header = group.firstElementChild;
const safe_but_slow_code = false;
if (safe_but_slow_code) {
var buttonShow = header.querySelector('#' + id + '-show');
var buttonHide = header.querySelector('#' + id + '-hide');
var re = /(?:\-([^-]+))?$/;
var viz_id = re.exec(id)[1];
var ccost_btn = header.querySelector("#vcc-" + viz_id);
var dcost_btn = header.querySelector("#vdc-" + viz_id);
var ccost_tt = header.querySelector("#tooltip-vcc-" + viz_id);
var dcost_tt = header.querySelector("#tooltip-vdc-" + viz_id);
} else {
var buttonHide = header.firstElementChild; // #id-hide
var buttonShow = header.firstElementChild.nextElementSibling; // #id-show
var cost_div = header.lastElementChild; // #box-header > .viz-cost-btns
var ccost_btn = cost_div.firstElementChild; // # vcc-id
var dcost_btn = cost_div.lastElementChild; // # vdc-id
var ccost_tt = ccost_btn.firstElementChild; // #tooltip-vcc-id
var dcost_tt = dcost_btn.firstElementChild; // #tooltip-vdc-id
}
if (body.classList.contains("collapsed-viz")) {
body.classList.remove("collapsed-viz");
buttonShow.style.display = 'none';
Expand Down Expand Up @@ -128,6 +142,10 @@
}
};

function toggleViz(id) {
toggleVizByElem(document.getElementById(id));
}

/* Scroll to visualization from IR code */
function scrollToViz(id) {
var container = document.getElementById('ir-visualization-tab');
Expand Down Expand Up @@ -308,48 +326,17 @@
}

// Tooltips
function update(buttonElement, tooltipElement) {
window.FloatingUIDOM.computePosition(buttonElement, tooltipElement, {
placement: 'top',
middleware: [
window.FloatingUIDOM.offset(6),
window.FloatingUIDOM.flip(),
window.FloatingUIDOM.shift({
padding: 5
}),
],
}).then(({
x,
y,
placement,
middlewareData
}) => {
Object.assign(tooltipElement.style, {
left: `${x}px`,
top: `${y}px`,
});
// Accessing the data
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
}[placement.split('-')[0]];
});
}

function showTooltip(buttonElement, tooltipElement) {
tooltipElement.style.display = 'block';
tooltipElement.style.opacity = '1';
update(buttonElement, tooltipElement);
}

function hideTooltip(tooltipElement) {
tooltipElement.style.display = '';
tooltipElement.style.opacity = '0';
}

function init_tooltips(btns, prefix) {
function init_tooltips(btns) {
for (var i = 0; i < btns.size(); i++) {
const button = btns[i];
const tooltip = button.firstElementChild;
Expand All @@ -374,11 +361,11 @@
}
}

init_tooltips($('button[id^="cond-"]'), "cond-tooltip-"); // span#
init_tooltips($('div[id^="cc-"]'), "tooltip-cc-"); // span#
init_tooltips($('div[id^="dc-"]'), "tooltip-dc-"); // span#
init_tooltips($('div[id^="vcc-"]'), "tooltip-vcc-"); // span#
init_tooltips($('div[id^="vdc-"]'), "tooltip-vdc-"); // span#
init_tooltips($('button[id^="cond-"]')); // span#cond-tooltip-
init_tooltips($('div[id^="cc-"]')); // span#tooltip-cc-
init_tooltips($('div[id^="dc-"]')); // span#tooltip-dc-
init_tooltips($('div[id^="vcc-"]')); // span#tooltip-vcc-
init_tooltips($('div[id^="vdc-"]')); // span#tooltip-vdc-

function depth(elem) {
if (elem.id == 'ir-visualization-tab') {
Expand All @@ -394,16 +381,22 @@
$('div[id^="viz-"]').filter((idx, val) => {
return depth(val) > 1;
}).each((idx, val) => {
toggleViz(val.id);
toggleVizByElem(val);
});

function scrollToAsm(lno) {
document.getElementsByClassName("shj-numbers")[0].children[lno].scrollIntoView({
behavior: "smooth"
var asmContent = document.getElementById("assemblyContent");
var line_height = window.getComputedStyle(asmContent).getPropertyValue("line-height");
line_height = parseInt(line_height, 10);
document.getElementById("assembly-tab").scrollTo({
behavior: "smooth",
top: lno * line_height
});
}

collapse_assembly_tab();
// Instead of calling 'collapse_assembly_tab();' we use the
// last bit of it, which skips a whole Layout Recalculation.
assemblyCodeDiv.style.display = 'none';

// Cost model js
var re = /(?:\-([^-]+))?$/;
Expand Down
29 changes: 17 additions & 12 deletions src/irvisualizer/StmtToViz_stylesheet.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,13 @@
position: relative;
}

button#highlight-button {
margin: 0.4em;
padding: 0.5em;
border-radius: 4px;
}


/* Resize bars */
div#visualization-tabs div.resize-bar {
background: rgb(201, 231, 190);
Expand Down Expand Up @@ -469,10 +476,11 @@
}

span.tooltip {
display: none;
position: absolute;
top: 0;
left: 0;
opacity: 1;
visibility: hidden;
position: relative;
left: 50px;
top: -10px;
width: max-content;
padding: 8px;
background: #fff7e0;
Expand All @@ -484,6 +492,10 @@
text-indent: 0px;
}

div.cost-btn:hover span.tooltip {
visibility: visible;
}

.conditionTooltip {
width: 300px;
padding: 5px;
Expand Down Expand Up @@ -540,22 +552,15 @@
border-style: dashed;
}

/* CodeMirror */
.CodeMirror {
height: 100%;
width: 100%;
}

/* Cost model */

div.node-cost {
position: absolute;
left: 35px;
display: flex;
}

div.cost-btn {
width: 10px;
width: 15px;
height: 14px;
margin-top: 2px;
}
Expand Down