Speedup page loading of VizStmt. (#7755)

* Speedup page loading of VizStmt. Disabled line numbers in the syntax highlihgting of the assembly. Made syntax highlighting on-demand with a button. * Fix computedStyleMap() not available in Firefox. * Reanble assembly highlighting by default.
halide · Aug 21, 2023 · c50d11a · c50d11a
1 parent 840ed4d
commit c50d11a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 70 deletions.
diff --git a/src/irvisualizer/StmtToViz_dependencies.template.html b/src/irvisualizer/StmtToViz_dependencies.template.html
@@ -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'>
 
@@ -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>
diff --git a/src/irvisualizer/StmtToViz_javascript.template.html b/src/irvisualizer/StmtToViz_javascript.template.html
@@ -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';
@@ -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');
@@ -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;
@@ -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') {
@@ -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 = /(?:\-([^-]+))?$/;

diff --git a/src/irvisualizer/StmtToViz_stylesheet.template.html b/src/irvisualizer/StmtToViz_stylesheet.template.html
@@ -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);
@@ -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;
@@ -484,6 +492,10 @@
         text-indent: 0px;
     }
 
+    div.cost-btn:hover span.tooltip {
+        visibility: visible;
+    }
+
     .conditionTooltip {
         width: 300px;
         padding: 5px;
@@ -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;
     }