Skip to content

Commit

Permalink
Restyled model list
Browse files Browse the repository at this point in the history
  • Loading branch information
@VukW
VukW committed Oct 15, 2024
1 parent e082cec commit 4926f07
Showing 1 changed file with 41 additions and 27 deletions.
68 changes: 41 additions & 27 deletions cli/medperf/web_ui/templates/dataset_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,25 +90,39 @@ <h5 class="card-title mb-0">Details</h5>
</div>
</div>
</div>
<!-- Display associated models without status -->

<!-- Display associated models with improved layout and dynamic actions -->
<div class="card mb-3">
<div class="card-body">
<h5>Associated Models</h5>
{% for assoc in benchmark_associations %}
<h6>Benchmark: {{ benchmarks[assoc.benchmark].name }}</h6>
<ul>
<h6>
Benchmark: <a href="/benchmarks/ui/display/{{ benchmarks[assoc.benchmark].id }}">
<strong>{{ benchmarks[assoc.benchmark].name }}</strong>
</a>
</h6>
<ul class="list-group mb-3">
{% for model_uid in benchmark_models[assoc.benchmark] %}
<li>
Model ID: {{ model_uid }}
<span class="model-status" id="status-{{ assoc.benchmark }}-{{ model_uid }}">🔄 Fetching status...</span>
<button class="btn btn-primary run-model-btn" data-benchmark-id="{{ assoc.benchmark }}" data-model-id="{{ model_uid }}">▶️ Run</button>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
Model ID: <a href="/models/ui/display/{{ model_uid }}">
<strong>{{ model_uid }}</strong>
</a>
</div>
<div id="status-container-{{ assoc.benchmark }}-{{ model_uid }}">
<button class="btn btn-primary run-model-btn" data-benchmark-id="{{ assoc.benchmark }}"
data-model-id="{{ model_uid }}" id="run-btn-{{ assoc.benchmark }}-{{ model_uid }}">
▶️ Run
</button>
</div>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>


<!-- Set Operational Modal -->

<div class="modal fade" id="setOperationalModal" tabindex="-1" aria-labelledby="setOperationalModalLabel" aria-hidden="true">
Expand Down Expand Up @@ -221,50 +235,50 @@ <h5 class="modal-title" id="setOperationalModalLabel">Approval Required</h5>
$('#setOperationalModal').modal('hide');
});

const fetchStatus = async (datasetId, benchmarkId, modelId, element, intervalId) => {
const fetchStatus = async (datasetId, benchmarkId, modelId, statusContainer, intervalId) => {
try {
const response = await fetch(`/datasets/run_draft/status?dataset_id=${datasetId}&benchmark_id=${benchmarkId}&model_id=${modelId}`);
const statusData = await response.json();
const resultId = `b${benchmarkId}m${modelId}d${datasetId}`; // Calculate result_id

let statusLink = '';
if (statusData.status === 'done') {
element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-success">✅ Done</a>`;
statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-success">✅ Done</a>`;
clearInterval(intervalId); // Stop polling
} else if (statusData.status === 'failed') {
element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-danger">❌ Failed</a>`;
statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-danger">❌ Failed</a>`;
clearInterval(intervalId); // Stop polling
} else if (statusData.status === 'pending') {
element.innerHTML = `<a href="/datasets/run_draft/ui/${resultId}" class="text-info">⏳ Pending...</a>`;
} else {
element.innerHTML = `<span class="text-muted">🔄 Not started</span>`;
clearInterval(intervalId); // Stop polling if status is N/A
statusLink = `<a href="/datasets/run_draft/ui/${resultId}" class="btn btn-info">⏳ Pending...</a>`;
}

if (statusLink) {
statusContainer.innerHTML = statusLink; // Replace run button with status link
}
} catch (error) {
console.error('Error fetching status:', error);
}
};

// Iterate over all model statuses and fetch them
document.querySelectorAll('.model-status').forEach(statusElement => {
const [benchmarkId, modelId] = statusElement.id.split('-').slice(1);
document.querySelectorAll('.run-model-btn').forEach(btn => {
const benchmarkId = btn.getAttribute('data-benchmark-id');
const modelId = btn.getAttribute('data-model-id');
const datasetId = {{ entity.id }};
const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusElement, intervalId), 1000); // Poll status every second
});
const statusContainer = document.getElementById(`status-container-${benchmarkId}-${modelId}`);

// Handle the "Run" button click
document.querySelectorAll('.run-model-btn').forEach(btn => {
btn.addEventListener('click', async function() {
const benchmarkId = this.getAttribute('data-benchmark-id');
const modelId = this.getAttribute('data-model-id');
const datasetId = {{ entity.id }};
const statusElement = document.getElementById(`status-${benchmarkId}-${modelId}`);
// Polling to update status
const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusContainer, intervalId), 1000);

// Handle the "Run" button click
btn.addEventListener('click', async function() {
try {
await fetch(`/datasets/run_draft/run?dataset_id=${datasetId}&benchmark_id=${benchmarkId}&model_id=${modelId}`, {
method: 'POST'
});
statusElement.innerHTML = `<span class="text-info">⏳ Pending...</span>`;
const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusElement, intervalId), 1000); // Poll status every second
// Replace the run button with a pending status immediately
statusContainer.innerHTML = `<a href="#" class="btn btn-info">⏳ Pending...</a>`;
const intervalId = setInterval(() => fetchStatus(datasetId, benchmarkId, modelId, statusContainer, intervalId), 1000);
} catch (error) {
console.error('Error running model:', error);
}
Expand Down

0 comments on commit 4926f07

Please sign in to comment.