Skip to content

Commit

Permalink
HTML: display text files in modal window with syntax highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
@claudiodsf
claudiodsf committed Oct 30, 2024
1 parent 394404d commit 97a04f9
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 15 deletions.
5 changes: 4 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ Copyright (c) 2011-2024 Claudio Satriano <[email protected]>

### Input/output

- Link to supplementary files and plots in the HTML report
- HTML report improvements:
- Link to supplementary files and plots in the HTML report
- Display configuration, log and output files in a modal window with syntax
highlighting (only when the HTML report is served by a web server)

### Processing

Expand Down
103 changes: 96 additions & 7 deletions sourcespec/html_report_template/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lightgallery.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/zoom/lg-zoom.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/lightgallery-bundle.min.css">
<!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/intellij-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/properties.min.js"></script>
</head>

<body>
Expand Down Expand Up @@ -494,31 +498,52 @@ <h2>Files</h2>
<th scope="row">Input Files:</th>
<td>
<a href="{INPUT_FILES}">
{INPUT_FILES}
{INPUT_FILES_TEXT}
</a>
</td>
</tr>
<tr>
<th scope="row">Configuration:</th>
<td>
<a href="{CONF_FILE}" type="text/plain">
{CONF_FILE_BNAME}
<button type="button" class="btn btn-outline-secondary"
data-toggle="modal" data-target="#fileModal"
data-filename="{CONF_FILE}"
data-language="properties"
data-description="Configuration file"
id="config_file_button" style="display: none;">
</button>
<a href="{CONF_FILE}" type="text/plain"
id="config_file_link" style="display: none;">
</a>
</td>
</tr>
<tr>
<th scope="row">Output:</th>
<td>
<a href="{YAML_FILE}" type="application/x-yaml">
{YAML_FILE_BNAME}
<button type="button" class="btn btn-outline-secondary"
data-toggle="modal" data-target="#fileModal"
data-filename="{YAML_FILE}"
data-language="yaml"
data-description="Output file"
id="output_file_button" style="display: none;">
</button>
<a href="{YAML_FILE}" type="application/x-yaml"
id="output_file_link" style="display: none;">
</a>
</td>
</tr>
<tr>
<th scope="row">Log:</th>
<td>
<a href="{LOG_FILE}" type="text/plain">
{LOG_FILE_BNAME}
<button type="button" class="btn btn-outline-secondary"
data-toggle="modal" data-target="#fileModal"
data-filename="{LOG_FILE}"
data-language="text"
data-description="Log file"
id="log_file_button" style="display: none;">
</button>
<a href="{LOG_FILE}" type="text/plain"
id="log_file_link" style="display: none;">
</a>
</td>
</tr>
Expand All @@ -528,6 +553,23 @@ <h2>Files</h2>
</table>
</div> <!-- dontprint -->

<!-- Modal window for showing text file contents -->
<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document" style="min-width:90%">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fileModalLongTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<pre id="file_content"></pre>
</div>
</div>
</div>
</div>

</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
Expand Down Expand Up @@ -640,5 +682,52 @@ <h2>Files</h2>
}
}
</script>
<script>
// script to display text files in modal window
function setup_file_access(id_prefix) {
var button = $('#' + id_prefix + '_button');
var link = $('#' + id_prefix + '_link');
var filename = link.attr('href');
fetch(filename)
.catch(error => {
link.css('display', 'inline');
link.html(filename);
})
.then(response => response.text())
.then(text => {
button.css('display', 'inline');
button.html(filename);
});
}
// set up the modal for all files
setup_file_access('config_file');
setup_file_access('output_file');
setup_file_access('log_file');
setup_file_access('quakeml_file');
$('#fileModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var filename = button.data('filename');
var language = button.data('language');
var description = button.data('description');
var modal = $(this);
modal.find('#fileModalLongTitle')
.html(
description +
'&nbsp;&nbsp;<a href="' +
filename +
'" download>&nbsp;<i class="fas fa-download"></i></a>'
);
fetch(filename)
.catch(error => {
modal.find('#file_content')
.html('Error loading file');
})
.then(response => response.text())
.then(text => {
modal.find('#file_content')
.html(hljs.highlight(text, {language: language}).value);
});
});
</script>
</body>
</html>
11 changes: 9 additions & 2 deletions sourcespec/html_report_template/quakeml_file_link.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<tr>
<th scope="row">QuakeML:</th>
<td>
<a href="{QUAKEML_FILE}" type="text/plain">
{QUAKEML_FILE_BNAME}
<button type="button" class="btn btn-outline-secondary"
data-toggle="modal" data-target="#fileModal"
data-filename="{QUAKEML_FILE}"
data-language="xml"
data-description="QuakeML file"
id="quakeml_file_button" style="display: none;">
</button>
<a href="{QUAKEML_FILE}" type="text/plain"
id="quakeml_file_link" style="display: none;">
</a>
</td>
</tr>
9 changes: 4 additions & 5 deletions sourcespec/ssp_html_report.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -940,18 +940,18 @@ def _add_downloadable_files_to_html(config, templates, replacements):
"""Add links to downloadable files to HTML report."""
# symlink to input files (not supported on Windows)
input_files = '' if os.name == 'nt' else 'input_files'
input_files_text = '' if os.name == 'nt'\
else 'Click to navigate to input files'
evid = config.event.event_id
config_file = f'{evid}.ssp.conf'
yaml_file = f'{evid}.ssp.yaml'
log_file = f'{evid}.ssp.log'

replacements.update({
'{INPUT_FILES}': input_files,
'{CONF_FILE_BNAME}': config_file,
'{INPUT_FILES_TEXT}': input_files_text,
'{CONF_FILE}': config_file,
'{YAML_FILE_BNAME}': yaml_file,
'{YAML_FILE}': yaml_file,
'{LOG_FILE_BNAME}': log_file,
'{LOG_FILE}': log_file,
})

Expand All @@ -961,8 +961,7 @@ def _add_downloadable_files_to_html(config, templates, replacements):
with open(templates.quakeml_file_link_html, encoding='utf-8') as fp:
quakeml_file_link = fp.read()
quakeml_file_link = quakeml_file_link\
.replace('{QUAKEML_FILE}', quakeml_file)\
.replace('{QUAKEML_FILE_BNAME}', quakeml_file)
.replace('{QUAKEML_FILE}', quakeml_file)
else:
quakeml_file_link = ''
replacements.update({
Expand Down

0 comments on commit 97a04f9

Please sign in to comment.