feat: speed up highlighting on analysis page

optimized code and replaced custom line numbering function with much faster lib
fkie-cad · Oct 25, 2024 · 257dfb3 · 257dfb3
1 parent 6c320ca
commit 257dfb3
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 194 deletions.
diff --git a/src/web_interface/components/ajax_routes.py b/src/web_interface/components/ajax_routes.py
@@ -90,10 +90,7 @@ def ajax_get_binary(self, mime_type, uid):
         mime_type = mime_type.replace('_', '/')
         binary = self.intercom.get_binary_and_filename(uid)[0]
         if 'text/' in mime_type:
-            return (
-                '<pre class="line_numbering" style="white-space: pre-wrap">'
-                f'{html.escape(bytes_to_str_filter(binary))}</pre>'
-            )
+            return f'<pre style="white-space: pre-wrap">{html.escape(bytes_to_str_filter(binary))}</pre>'
         if 'image/' in mime_type:
             return (
                 '<div style="display: block; border: 1px solid; border-color: #dddddd; padding: 5px; '

diff --git a/src/web_interface/static/css/line_numbering.css b/src/web_interface/static/css/line_numbering.css
diff --git a/src/web_interface/static/js/line_numbering.js b/src/web_interface/static/js/line_numbering.js
diff --git a/src/web_interface/static/js/show_analysis_preview.js b/src/web_interface/static/js/show_analysis_preview.js
@@ -5,19 +5,33 @@ const offset_input = document.getElementById("hex-preview-offset");
 function hide_gif(element) {
     element.style.display = "none";
 }
+
 function init_preview() {
     hide_gif(preview_loading_gif);
     if (isTextOrImage) {
-        highlight_code();
+        highlightCode('div#preview-div pre', true).then(
+            (_) => null, // do nothing
+            (error) => {
+                console.log(`Error: Code highlighting not successful: ${error}`);
+            }
+        );
     }
     preview_button.scrollIntoView();
     offset_input.focus();
 }
-function highlight_code() {
-    const block = $('div#preview-div pre')[0];
-    hljs.highlightElement(block);
-    line_numbering();
+
+async function highlightCode(jqElement, lineNumbering = false, sizeLimit = 1048576) {
+    if (typeof jqElement === "string") {
+        jqElement = $(jqElement)[0];
+    }
+    if (jqElement.innerText.length < sizeLimit) { // only highlight the element if it isn't too large
+        hljs.highlightElement(jqElement);
+    }
+    if (lineNumbering) {
+        hljs.lineNumbersBlock(jqElement);
+    }
 }
+
 function load_preview(offset = null, focus = false) {
     let resourcePath;
     document.getElementById("preview_button").onclick = () => false;
@@ -43,16 +57,16 @@ function load_preview(offset = null, focus = false) {
     preview_loading_gif.style.display = "block";
     $("#preview-content").load(resourcePath, init_preview);
 }
+
 preview_button.onclick = load_preview;
 let rawResultIsHighlighted = false;
 const toggleSwitch = document.getElementById("rawResultSwitch");
+const analysisTable = document.getElementById("analysis-table-body");
+const rawResultRow = document.getElementById("raw-result");
+const analysisRows = Array.from(analysisTable.children)
+    .filter(child => !child.classList.contains("analysis-meta"));
 
-toggleSwitch.addEventListener('change', function() {
-    const analysisTable = document.getElementById("analysis-table-body");
-    const rawResultRow = document.getElementById("raw-result");
-    const analysisRows = Array.from(analysisTable.children)
-        .filter(child => !child.classList.contains("analysis-meta"));
-
+toggleSwitch.addEventListener('change', function () {
     if (toggleSwitch.checked) {
         analysisRows.forEach((element) => {
             element.style.visibility = "collapse";
@@ -69,11 +83,16 @@ toggleSwitch.addEventListener('change', function() {
         // highlight the result lazily and only once
         rawResultIsHighlighted = true;
         let rawResult = document.getElementById('raw-analysis');
-        hljs.highlightBlock(rawResult);
+        highlightCode(rawResult).then(
+            (_) => null, // do nothing
+            (error) => {
+                console.log(`Error: Raw result highlighting not successful: ${error}`);
+            }
+        );
     }
 });
 
-window.onload = function() {
+window.onload = function () {
     // make sure the switch is off when the page is reloaded
     toggleSwitch.checked = false;
 };