From 61e9c63680e7b5f8992171963c659ff0f5f1ccb0 Mon Sep 17 00:00:00 2001 From: Martijn Courteaux Date: Fri, 11 Aug 2023 16:21:33 +0200 Subject: [PATCH 1/3] Speedup page loading of VizStmt. Disabled line numbers in the syntax highlihgting of the assembly. Made syntax highlighting on-demand with a button. --- src/StmtToViz.cpp | 1 + .../StmtToViz_dependencies.template.html | 10 +- .../StmtToViz_javascript.template.html | 104 +++++++++--------- .../StmtToViz_stylesheet.template.html | 29 +++-- 4 files changed, 74 insertions(+), 70 deletions(-) diff --git a/src/StmtToViz.cpp b/src/StmtToViz.cpp index ae498530d5f9..419382fe69d7 100644 --- a/src/StmtToViz.cpp +++ b/src/StmtToViz.cpp @@ -2897,6 +2897,7 @@ class IRVisualizer { // Generate tab 3/3: Generated assembly code void generate_assembly_tab(const Module &m) { stream << "
\n"; + stream << "\n"; stream << "
\n"; stream << "
\n";
         stream << asm_stream.str();
diff --git a/src/irvisualizer/StmtToViz_dependencies.template.html b/src/irvisualizer/StmtToViz_dependencies.template.html
index d3ffe395d9d2..b7d2560d5fc1 100644
--- a/src/irvisualizer/StmtToViz_dependencies.template.html
+++ b/src/irvisualizer/StmtToViz_dependencies.template.html
@@ -1,15 +1,9 @@
 
 
 
-
-
 
 
 
-
-
-
-
 
 
 
@@ -23,9 +17,9 @@
 
 
 
diff --git a/src/irvisualizer/StmtToViz_javascript.template.html b/src/irvisualizer/StmtToViz_javascript.template.html
index 3be2060ed617..4d11e89baecc 100644
--- 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,40 +326,9 @@
     }
 
     // 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) {
@@ -349,7 +336,7 @@
         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,33 @@
     $('div[id^="viz-"]').filter((idx, val) => {
         return depth(val) > 1;
     }).each((idx, val) => {
-        toggleViz(val.id);
+        toggleVizByElem(val);
     });
 
+    var highlighted = false;
+
     function scrollToAsm(lno) {
-        document.getElementsByClassName("shj-numbers")[0].children[lno].scrollIntoView({
-            behavior: "smooth"
+        if (highlighted) {
+            var asmContent = document.getElementById("assemblyContent");
+            var line_height = asmContent.computedStyleMap().get("line-height").value;
+        } else {
+            var pre = document.getElementById("assemblyContent").firstElementChild;
+            var line_height = pre.computedStyleMap().get("line-height").value;
+        }
+        document.getElementById("assembly-tab").scrollTo({
+            behavior: "smooth",
+            top: lno * line_height
         });
     }
 
-    collapse_assembly_tab();
+    function highlightAssembly() {
+        highlighted = true;
+        highlightAll({hideLineNumbers: true});
+    }
+
+    // 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
index 11b6289938be..45b2b1dfa392 100644
--- 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,12 +552,6 @@
             border-style: dashed;
         }
 
-    /* CodeMirror */
-    .CodeMirror {
-        height: 100%;
-        width: 100%;
-    }
-
     /* Cost model */
 
     div.node-cost {
@@ -553,9 +559,8 @@
         left: 35px;
         display: flex;
     }
-
     div.cost-btn {
-        width: 10px;
+        width: 15px;
         height: 14px;
         margin-top: 2px;
     }

From 633365dc4fdeb5e91d42b55c12834385f7b0cd7a Mon Sep 17 00:00:00 2001
From: Martijn Courteaux 
Date: Thu, 17 Aug 2023 15:58:07 +0200
Subject: [PATCH 2/3] Fix computedStyleMap() not available in Firefox.

---
 src/irvisualizer/StmtToViz_javascript.template.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/irvisualizer/StmtToViz_javascript.template.html b/src/irvisualizer/StmtToViz_javascript.template.html
index 4d11e89baecc..9867fbbe534f 100644
--- a/src/irvisualizer/StmtToViz_javascript.template.html
+++ b/src/irvisualizer/StmtToViz_javascript.template.html
@@ -389,10 +389,12 @@
     function scrollToAsm(lno) {
         if (highlighted) {
             var asmContent = document.getElementById("assemblyContent");
-            var line_height = asmContent.computedStyleMap().get("line-height").value;
+            var line_height = window.getComputedStyle(asmContent).getPropertyValue("line-height");
+            line_height = parseInt(line_height, 10);
         } else {
             var pre = document.getElementById("assemblyContent").firstElementChild;
-            var line_height = pre.computedStyleMap().get("line-height").value;
+            var line_height = window.getComputedStyle(pre).getPropertyValue("line-height");
+            line_height = parseInt(line_height, 10);
         }
         document.getElementById("assembly-tab").scrollTo({
             behavior: "smooth",

From 1eee5caf14923bff3ac511359982b9addfa28eef Mon Sep 17 00:00:00 2001
From: Martijn Courteaux 
Date: Fri, 18 Aug 2023 12:02:30 +0200
Subject: [PATCH 3/3] Reanble assembly highlighting by default.

---
 src/StmtToViz.cpp                             |  1 -
 .../StmtToViz_dependencies.template.html      |  2 +-
 .../StmtToViz_javascript.template.html        | 19 +++----------------
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/StmtToViz.cpp b/src/StmtToViz.cpp
index 419382fe69d7..ae498530d5f9 100644
--- a/src/StmtToViz.cpp
+++ b/src/StmtToViz.cpp
@@ -2897,7 +2897,6 @@ class IRVisualizer {
     // Generate tab 3/3: Generated assembly code
     void generate_assembly_tab(const Module &m) {
         stream << "
\n";
-        stream << "\n";
         stream << "
\n";
         stream << "
\n";
         stream << asm_stream.str();
diff --git a/src/irvisualizer/StmtToViz_dependencies.template.html b/src/irvisualizer/StmtToViz_dependencies.template.html
index b7d2560d5fc1..e8122c67ae91 100644
--- a/src/irvisualizer/StmtToViz_dependencies.template.html
+++ b/src/irvisualizer/StmtToViz_dependencies.template.html
@@ -17,7 +17,7 @@