feat: speed up highlighting on analysis page

optimized code and replaced custom line numbering function with much faster lib

src/web_interface/components/ajax_routes.py

@@ -97,10 +97,7 @@ def ajax_get_binary(self, mime_type, uid):
         mime_type = mime_type.replace('_', '/')
         binary = self.intercom.get_binary_and_filename(uid)[0]
         if is_text_file(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 is_image(mime_type):
             return (
                 '<div style="display: block; border: 1px solid; border-color: #dddddd; padding: 5px; '

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,40 +57,49 @@ 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");
 
-toggleSwitch.addEventListener('change', function() {
-    const analysisTable = document.getElementById("analysis-table-body");
-    const rawResultRow = document.getElementById("raw-result");
+if (toggleSwitch !== null && analysisTable !== null) {
+    // toggleSwitch and analysisTable are only there if an analysis is selected
     const analysisRows = Array.from(analysisTable.children)
         .filter(child => !child.classList.contains("analysis-meta"));
 
-    if (toggleSwitch.checked) {
-        analysisRows.forEach((element) => {
-            element.style.visibility = "collapse";
-        });
-        rawResultRow.style.visibility = "visible";
-    } else {
-        analysisRows.forEach((element) => {
-            element.style.visibility = "visible";
-        });
-        rawResultRow.style.visibility = "collapse";
-    }
+    toggleSwitch.addEventListener('change', function () {
+        if (toggleSwitch.checked) {
+            analysisRows.forEach((element) => {
+                element.style.visibility = "collapse";
+            });
+            rawResultRow.style.visibility = "visible";
+        } else {
+            analysisRows.forEach((element) => {
+                element.style.visibility = "visible";
+            });
+            rawResultRow.style.visibility = "collapse";
+        }
 
-    if (!rawResultIsHighlighted && toggleSwitch.checked) {
-        // highlight the result lazily and only once
-        rawResultIsHighlighted = true;
-        let rawResult = document.getElementById('raw-analysis');
-        hljs.highlightBlock(rawResult);
-    }
-});
+        if (!rawResultIsHighlighted && toggleSwitch.checked) {
+            // highlight the result lazily and only once
+            rawResultIsHighlighted = true;
+            let rawResult = document.getElementById('raw-analysis');
+            highlightCode(rawResult).then(
+                (_) => null, // do nothing
+                (error) => {
+                    console.log(`Error: Raw result highlighting not successful: ${error}`);
+                }
+            );
+        }
+    });
 
-window.onload = function() {
-    // make sure the switch is off when the page is reloaded
-    toggleSwitch.checked = false;
-};
+    window.onload = function () {
+        // make sure the switch is off when the page is reloaded
+        toggleSwitch.checked = false;
+    };
+}
 
 function copyRawAnalysis() {
     const code = document.getElementById("raw-analysis");

src/web_interface/static/package.json

@@ -10,6 +10,7 @@
     "chart.js": "^2.3.0",
     "diff2html": "^3.4.18",
     "graphiql": "^3.2.3",
+    "highlightjs-line-numbers.js": "^2.9.0",
     "jquery": "^3.5.0",
     "json5": "^2.2.3",
     "jstree": "^3.3.12",

src/web_interface/templates/show_analysis.html

@@ -28,15 +28,28 @@
     <script src="{{ url_for('static', filename='node_modules/@highlightjs/cdn-assets/highlight.min.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/@highlightjs/cdn-assets/styles/github.min.css') }}" />
 
-    {# line_numbering.js import #}
-    <script type="text/javascript" src="{{ url_for('static', filename='js/line_numbering.js') }}"></script>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/line_numbering.css') }}" />
+    <script src="{{ url_for('static', filename='node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js') }}"></script>
 
     <script>
         const uid = "{{ uid | safe }}";
         const selected_analysis = "{{ selected_analysis }}";
     </script>
     <script src="{{ url_for('static', filename='js/file_tree.js') }}"></script>
+
+    <style>
+        {# styling for file preview line lumbers #}
+        .hljs-ln-numbers {
+            user-select: none;
+            text-align: center;
+            color: gray;
+            border-right: 1px solid gray;
+            vertical-align: top;
+            padding-right: 5px !important;
+        }
+        .hljs-ln-code {
+            padding-left: 10px !important;
+        }
+    </style>
 {% endblock %}