human_evaluator / templates /results.html
iyadsultan's picture
Enhance results page behavior and messaging
8b48b6d
<!-- templates/results.html -->
<!DOCTYPE html>
<html>
<head>
<title>Evaluation Results</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<style>
.results-container {
overflow-x: auto; /* Add horizontal scrolling for the table */
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
min-width: 800px; /* Set a minimum width so smaller screens will scroll */
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
font-size: 0.9em; /* Slightly smaller font size */
}
th {
background-color: #f2f2f2;
position: sticky;
top: 0;
z-index: 10;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.export-btn {
margin-top: 20px;
margin-bottom: 20px;
text-align: right;
}
.export-btn a {
background-color: #28a745;
padding: 10px 15px;
color: white;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
.export-btn a:hover {
background-color: #218838;
}
/* Icon for export button */
.export-icon {
width: 16px;
height: 16px;
display: inline-block;
margin-right: 5px;
}
.no-results {
text-align: center;
padding: 40px 20px;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #dee2e6;
}
.no-results p {
margin: 10px 0;
font-size: 16px;
}
.clear-corrupted-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.clear-corrupted-btn:hover {
background-color: #c82333;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Evaluation Results</h1>
<div class="header-links">
<a href="{{ url_for('evaluate') }}" class="evaluate-btn">Continue Evaluating</a>
<a href="{{ url_for('view_instructions') }}" class="instructions-btn">Instructions</a>
<a href="{{ url_for('index') }}" class="evaluate-btn">Back to Home</a>
</div>
</div>
{% if evaluations %}
<div class="export-btn">
<a href="{{ url_for('export_csv') }}">
<svg class="export-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
Export to CSV
</a>
</div>
{% endif %}
<div class="results-container">
<h2>Results Table</h2>
{% if evaluations %}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Document</th>
<th>Description</th>
<th>MRN</th>
<th>Evaluator</th>
{% for criterion in criteria %}
<th>{{ criterion }}</th>
{% endfor %}
<th>Note Origin Assessment</th>
</tr>
</thead>
<tbody>
{% for eval in evaluations %}
<tr>
<td>{{ eval.timestamp }}</td>
<td>{{ eval.document_title }}</td>
<td>{{ eval.description }}</td>
<td>{{ eval.mrn }}</td>
<td>{{ eval.investigator_name }}</td>
{% for criterion in criteria %}
<td>{{ eval[criterion] }}</td>
{% endfor %}
<td>{{ eval.note_origin }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="no-results">
<p>No evaluations completed in this session yet.</p>
{% if session_saved %}
<p><strong>Your session progress has been saved.</strong> You can continue evaluating from where you left off.</p>
<div style="margin-top: 20px;">
<p><em>If you filled out an evaluation but it's not showing here, there may be a data corruption issue.</em></p>
<form method="POST" action="{{ url_for('clear_corrupted_data') }}" style="display: inline;">
<button type="submit" class="clear-corrupted-btn"
onclick="return confirm('This will clear any corrupted evaluation data. Are you sure?')">
Clear Corrupted Data
</button>
</form>
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="resource-links">
<p>
<strong>Resources:</strong>
<a href="{{ url_for('download_instructions') }}">Download Instructions</a> |
<a href="{{ url_for('download_template') }}">Download Template CSV</a>
</p>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% if show_empty_message and not evaluations %}
<div class="alert alert-info">
Your session progress has been saved, but no evaluations were recorded yet.
You can resume your evaluation from where you left off.
</div>
{% endif %}
{% if not evaluations and not show_empty_message %}
<div class="alert alert-warning">
No evaluations found in the system.
</div>
{% endif %}
</div>
</body>
</html>