forked from enviPath/enviPy
336 lines
11 KiB
HTML
336 lines
11 KiB
HTML
{% extends "framework_modern.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<div class="mx-auto w-full p-8">
|
|
<h1 class="h1 mb-4 text-3xl font-bold">Batch Predict Pathways</h1>
|
|
<form id="smiles-form" method="POST" action="{% url "jobs" %}">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="substrates" id="substrates" />
|
|
<input type="hidden" name="job-name" value="batch-predict" />
|
|
|
|
<fieldset class="flex flex-col gap-4 md:flex-3/4">
|
|
<!-- CSV Upload Section -->
|
|
<div class="mb-6 rounded-lg border-2 border-dashed border-base-300 p-6">
|
|
<div class="flex flex-col gap-4">
|
|
<div
|
|
class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<div class="flex-1">
|
|
<h3 class="text-base font-medium text-base-content mb-1">
|
|
Load from CSV
|
|
</h3>
|
|
<p class="text-sm text-base-content/70">
|
|
Upload a CSV file with SMILES and name columns, or insert
|
|
manually in the table below
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<input
|
|
type="file"
|
|
id="csv-file"
|
|
accept=".csv,.txt"
|
|
class="file-input file-input-bordered file-input-sm w-full sm:w-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="text-xs text-base-content/50 border-t border-base-300 pt-3"
|
|
>
|
|
<strong>Format:</strong> First column = SMILES, Second column =
|
|
Name (headers optional) • Maximum 30 rows
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-zebra w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>SMILES</th>
|
|
<th>Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="smiles-table-body">
|
|
<tr>
|
|
<td>
|
|
<label>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered w-full smiles-input"
|
|
placeholder="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
|
|
{% if meta.debug %}
|
|
value="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
|
|
{% endif %}
|
|
/>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<label>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered w-full name-input"
|
|
placeholder="Caffeine"
|
|
{% if meta.debug %}
|
|
value="Caffeine"
|
|
{% endif %}
|
|
/>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered w-full smiles-input"
|
|
placeholder="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
|
|
{% if meta.debug %}
|
|
value="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
|
|
{% endif %}
|
|
/>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<label>
|
|
<input
|
|
type="text"
|
|
class="input input-bordered w-full name-input"
|
|
placeholder="Ibuprofen"
|
|
{% if meta.debug %}
|
|
value="Ibuprofen"
|
|
{% endif %}
|
|
/>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<label class="select mb-2 w-full">
|
|
<span class="label">Predictor</span>
|
|
<select id="prediction-setting" name="prediction-setting">
|
|
<option disabled>Select a Setting</option>
|
|
{% for s in meta.available_settings %}
|
|
<option
|
|
value="{{ s.url }}"
|
|
{% if s.id == meta.user.default_setting.id %}selected{% endif %}
|
|
>
|
|
{{ s.name }}{% if s.id == meta.user.default_setting.id %}
|
|
(User default)
|
|
{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label class="floating-label" for="num-tps">
|
|
<input
|
|
type="number"
|
|
name="num-tps"
|
|
value="50"
|
|
step="1"
|
|
min="1"
|
|
max="100"
|
|
id="num-tps"
|
|
class="input input-md w-full"
|
|
/>
|
|
<span>Max Transformation Products</span>
|
|
</label>
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" id="add-row-btn" class="btn btn-outline">
|
|
Add row
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const tableBody = document.getElementById("smiles-table-body");
|
|
const addRowBtn = document.getElementById("add-row-btn");
|
|
const csvFileInput = document.getElementById("csv-file");
|
|
const form = document.getElementById("smiles-form");
|
|
const hiddenField = document.getElementById("substrates");
|
|
|
|
// Function to create a new table row
|
|
function createTableRow(
|
|
smilesValue = "",
|
|
nameValue = "",
|
|
placeholder = true,
|
|
) {
|
|
const row = document.createElement("tr");
|
|
|
|
const tdSmiles = document.createElement("td");
|
|
const tdName = document.createElement("td");
|
|
|
|
const smilesInput = document.createElement("input");
|
|
smilesInput.type = "text";
|
|
smilesInput.className = "input input-bordered w-full smiles-input";
|
|
smilesInput.placeholder = placeholder ? "SMILES" : "";
|
|
smilesInput.value = smilesValue;
|
|
|
|
const nameInput = document.createElement("input");
|
|
nameInput.type = "text";
|
|
nameInput.className = "input input-bordered w-full name-input";
|
|
nameInput.placeholder = placeholder ? "Name" : "";
|
|
nameInput.value = nameValue;
|
|
|
|
const smilesLabel = document.createElement("label");
|
|
smilesLabel.appendChild(smilesInput);
|
|
tdSmiles.appendChild(smilesLabel);
|
|
|
|
const nameLabel = document.createElement("label");
|
|
nameLabel.appendChild(nameInput);
|
|
tdName.appendChild(nameLabel);
|
|
|
|
row.appendChild(tdSmiles);
|
|
row.appendChild(tdName);
|
|
|
|
return row;
|
|
}
|
|
|
|
// Function to clear the table
|
|
function clearTable() {
|
|
tableBody.innerHTML = "";
|
|
}
|
|
|
|
// Function to populate table from CSV data
|
|
function populateTableFromCSV(csvData) {
|
|
const lines = csvData.trim().split("\n");
|
|
const maxRows = 30;
|
|
|
|
// Clear existing table
|
|
clearTable();
|
|
|
|
// Skip header row if it looks like headers
|
|
const startIndex =
|
|
lines.length > 0 &&
|
|
(lines[0].toLowerCase().includes("smiles") ||
|
|
lines[0].toLowerCase().includes("name"))
|
|
? 1
|
|
: 0;
|
|
|
|
let rowCount = 0;
|
|
for (let i = startIndex; i < lines.length && rowCount < maxRows; i++) {
|
|
const line = lines[i].trim();
|
|
if (!line) continue;
|
|
|
|
// Parse CSV line - split by comma, first part is SMILES, rest is name
|
|
const firstCommaIndex = line.indexOf(",");
|
|
let smiles = "";
|
|
let name = "";
|
|
|
|
if (firstCommaIndex === -1) {
|
|
// No comma found, treat entire line as SMILES
|
|
smiles = line.trim().replace(/^"(.*)"$/, "$1");
|
|
} else {
|
|
// Split at first comma only
|
|
smiles = line
|
|
.substring(0, firstCommaIndex)
|
|
.trim()
|
|
.replace(/^"(.*)"$/, "$1");
|
|
name = line
|
|
.substring(firstCommaIndex + 1)
|
|
.trim()
|
|
.replace(/^"(.*)"$/, "$1");
|
|
}
|
|
|
|
// Skip empty rows
|
|
if (!smiles && !name) continue;
|
|
|
|
const row = createTableRow(smiles, name, false);
|
|
tableBody.appendChild(row);
|
|
rowCount++;
|
|
}
|
|
|
|
// Add at least one empty row if no data was loaded
|
|
if (rowCount === 0) {
|
|
const row = createTableRow();
|
|
tableBody.appendChild(row);
|
|
}
|
|
|
|
// Show success message
|
|
if (rowCount > 0) {
|
|
const message =
|
|
rowCount >= maxRows
|
|
? `Loaded ${rowCount} rows (maximum reached)`
|
|
: `Loaded ${rowCount} rows from CSV`;
|
|
|
|
// Create temporary success notification
|
|
const notification = document.createElement("div");
|
|
notification.className = "alert alert-success mb-4";
|
|
notification.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>${message}</span>
|
|
`;
|
|
|
|
// Insert notification before the table
|
|
const tableContainer = document.querySelector("table").parentNode;
|
|
tableContainer.insertBefore(
|
|
notification,
|
|
document.querySelector("table"),
|
|
);
|
|
|
|
// Remove notification after 3 seconds
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
// Handle CSV file selection
|
|
csvFileInput.addEventListener("change", function (event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Check file type
|
|
if (!file.name.match(/\.(csv|txt)$/i)) {
|
|
alert("Please select a CSV or TXT file.");
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
try {
|
|
populateTableFromCSV(e.target.result);
|
|
} catch (error) {
|
|
console.error("Error parsing CSV:", error);
|
|
alert("Error parsing CSV file. Please check the file format.");
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
});
|
|
|
|
// Handle add row button
|
|
addRowBtn.addEventListener("click", () => {
|
|
const row = createTableRow();
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// Before submit, gather table data into the hidden field
|
|
form.addEventListener("submit", (e) => {
|
|
const smilesInputs = Array.from(
|
|
document.querySelectorAll(".smiles-input"),
|
|
);
|
|
const nameInputs = Array.from(document.querySelectorAll(".name-input"));
|
|
|
|
const lines = [];
|
|
|
|
for (let i = 0; i < smilesInputs.length; i++) {
|
|
const smiles = smilesInputs[i].value.trim();
|
|
const name = nameInputs[i]?.value.trim() ?? "";
|
|
|
|
// Skip empty rows
|
|
if (!smiles && !name) {
|
|
continue;
|
|
}
|
|
lines.push(`${smiles},${name}`);
|
|
}
|
|
// Value looks like:
|
|
// "CN1C=NC2=C1C(=O)N(C(=O)N2C)C,Caffeine\nCC(C)CC1=CC=C(C=C1)C(C)C(=O)O,Ibuprofen"
|
|
hiddenField.value = lines.join("\n");
|
|
});
|
|
</script>
|
|
{% endblock content %}
|