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

sped up highlighting on analysis page #1287

Merged
merged 2 commits into from
Dec 19, 2024
Merged

sped up highlighting on analysis page #1287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84e298d
feat: speed up highlighting on analysis page
jstucke Oct 25, 2024
4897fb3
fix: hide raw result overflow to fix scrollbar issue
jstucke Dec 18, 2024
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
5 changes: 1 addition & 4 deletions src/web_interface/components/ajax_routes.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; '
Expand Down
22 changes: 0 additions & 22 deletions src/web_interface/static/css/line_numbering.css
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions src/web_interface/static/js/line_numbering.js
View file
Open in desktop

This file was deleted.

83 changes: 53 additions & 30 deletions src/web_interface/static/js/show_analysis_preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is null if no analysis is selected (by clicking on the file name).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed. The variable analysisRows had the same problem

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");
Expand Down
14 changes: 9 additions & 5 deletions src/web_interface/static/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/web_interface/static/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
126 changes: 63 additions & 63 deletions src/web_interface/templates/analysis_plugins/general_information.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,82 @@

<table class="table table-bordered" style="table-layout: fixed">
<colgroup>
<col style="width: 12.5%">
<col style="width: 87.5%">
<col style="width: 12.5%">
<col style="width: 87.5%">
</colgroup>
<thead class="thead-light">
<tr>
<th colspan="2">
<div class="d-flex justify-content-between align-items-center">
<tr>
<th colspan="2">
<div class="d-flex justify-content-between align-items-center">
<span>
Showing Analysis: {{ selected_analysis | replace_underscore }}
</span>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rawResultSwitch">
<label class="custom-control-label" for="rawResultSwitch" style="font-weight: normal;">
Show Raw Result (JSON)
</label>
<button class="btn btn-outline-secondary btn-sm" type="submit" style="padding: 2px 5px;"
onclick="copyRawAnalysis()" data-toggle="tooltip" title="copy raw result">
<i class="far fa-copy"></i>
</button>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rawResultSwitch">
<label class="custom-control-label" for="rawResultSwitch" style="font-weight: normal;">
Show Raw Result (JSON)
</label>
<button class="btn btn-outline-secondary btn-sm" type="submit" style="padding: 2px 5px;"
onclick="copyRawAnalysis()" data-toggle="tooltip" title="copy raw result">
<i class="far fa-copy"></i>
</button>
</div>
</th>
</tr>
</div>
</th>
</tr>
</thead>
<tbody class="table-analysis" id="analysis-table-body">
{% if analysis_result['skipped'] %}
<tr class="analysis-meta">
<td class="table-warning">Analysis was skipped</td>
<td>{{ analysis_metadata['skipped'] }}</td>
</tr>
{% endif %}
{% if analysis_metadata['analysis_date'] %}
<tr class="analysis-meta">
<td class="table-head-light">Time of Analysis</td>
<td>{{ analysis_metadata['analysis_date'] | nice_unix_time }}</td>
</tr>
{% endif %}
{% if analysis_metadata['plugin_version'] %}
<tr class="analysis-meta">
<td class="table-head-light">Plugin Version</td>
<td>{{ analysis_metadata['plugin_version']}}</td>
</tr>
{% endif %}
{% if analysis_metadata['system_version'] %}
<tr class="analysis-meta">
<td class="table-head-light">System Version</td>
<td>{{ analysis_metadata['system_version']}}</td>
</tr>
{% endif %}
<tr id="raw-result" class="analysis-meta" style="visibility: collapse">
<td>Raw Analysis Result</td>
<td>
<pre class="m-0"><code id="raw-analysis" class="language-json">{{ analysis_result | dict_to_json(indent=4) }}</code></pre>
</td>
{% if analysis_result['skipped'] %}
<tr class="analysis-meta">
<td class="table-warning">Analysis was skipped</td>
<td>{{ analysis_metadata['skipped'] }}</td>
</tr>
{% endif %}
{% if analysis_metadata['analysis_date'] %}
<tr class="analysis-meta">
<td class="table-head-light">Time of Analysis</td>
<td>{{ analysis_metadata['analysis_date'] | nice_unix_time }}</td>
</tr>
{% endif %}
{% if analysis_metadata['plugin_version'] %}
<tr class="analysis-meta">
<td class="table-head-light">Plugin Version</td>
<td>{{ analysis_metadata['plugin_version'] }}</td>
</tr>
{% endif %}
{% if analysis_metadata['system_version'] %}
<tr class="analysis-meta">
<td class="table-head-light">System Version</td>
<td>{{ analysis_metadata['system_version'] }}</td>
</tr>
{% endif %}
<tr id="raw-result" class="analysis-meta" style="visibility: collapse">
<td>Raw Analysis Result</td>
<td>
<pre class="m-0" style="max-height: 50vh; overflow: scroll;"><code id="raw-analysis" class="language-json">{{ analysis_result | dict_to_json(indent=4) }}</code></pre>
</td>
</tr>

{% set version_backend = analysis_plugin_dict[selected_analysis][3] %}
{% set version_database = analysis_metadata['plugin_version'] %}

{% if selected_analysis == 'unpacker' or version_database | version_is_compatible(version_backend, True) %}
{% if analysis_result is not none and 'skipped' not in analysis_result %}
{% block analysis_result_details %}
{% set version_backend = analysis_plugin_dict[selected_analysis][3] %}
{% set version_database = analysis_metadata['plugin_version'] %}

{% endblock %}
{% endif %}
{% else %}
<tr>
<td class="table-warning">Analysis outdated</td>
<td>
The backend plugin version ({{ version_backend | string }}) is incompatible with
the version ({{ version_database | string }}) of the analysis result.
{% if selected_analysis == 'unpacker' or version_database | version_is_compatible(version_backend, True) %}
{% if analysis_result is not none and 'skipped' not in analysis_result %}
{% block analysis_result_details %}

Please update the analysis.
</td>
</tr>
{% endblock %}
{% endif %}
{% else %}
<tr>
<td class="table-warning">Analysis outdated</td>
<td>
The backend plugin version ({{ version_backend | string }}) is incompatible with
the version ({{ version_database | string }}) of the analysis result.

Please update the analysis.
</td>
</tr>
{% endif %}
</tbody>
</table>

Expand Down
19 changes: 16 additions & 3 deletions src/web_interface/templates/show_analysis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}


Expand Down
Loading