lucretia/embeddingsearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added entity updating to front-end

Browse Source
This commit is contained in:
LD-Reborn
2025-12-22 12:58:40 +01:00
parent 4aa3015954
commit fd76da265b
1 changed files with 284 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
src/Server/Views/Home/Index.cshtml
View File

@@ -281,10 +281,10 @@
<div class="modal-footer">
<button type="button" id="searchdomainConfirmDelete" class="btn btn-danger" data-bs-dismiss="modal">
Delete
@T["Delete"]
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
@T["Close"]
</button>
</div>
@@ -426,6 +426,82 @@
</div>
</div>
<!-- Update entity Modal -->
<div class="modal fade" id="updateEntityModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-warning text">
<h2 class="modal-title" id="updateEntityTitle">@T["Update entity"]</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Entity base -->
<div class="row g-3">
<div class="col-md-6">
<label for="updateEntityName" class="form-label">@T["Entity name"]</label>
<input type="text" class="form-control mb-3" id="updateEntityName" placeholder="@T["Entity name"]" />
</div>
<div class="col-md-6">
<label for="updateEntityProbMethod" class="form-label">@T["Probmethod"]</label>
<input list="probMethods" id="updateEntityProbMethod" class="form-control" aria-label="@T["Probmethod"]">
<datalist id="probMethods">
@foreach (string probMethod in probMethods)
{
<option value=@probMethod>@probMethod</option>
}
</datalist>
</div>
</div>
<!-- Attributes -->
<div class="row g-3">
<h3 class="fs-5">@T["Attributes"]</h3>
<table>
<thead>
<tr>
<td>@T["Name"]</td>
<td>@T["Value"]</td>
<td class="visually-hidden">@T["Action"]</td>
</tr>
</thead>
<tbody id="updateEntityAttributesContainer"></tbody>
</table>
<button type="button" id="updateEntityAttributesAdd" class="btn btn-primary">@T["Add attribute"]</button>
</div>
<!-- Datapoints -->
<div class="row g-3 mt-3">
<h3 class="fs-5">@T["Datapoints"]</h3>
<table>
<thead>
<tr>
<td>@T["Name"]</td>
<td>@T["Value"]</td>
<td>@T["Probmethod_embedding"]</td>
<td>@T["Similarity method"]</td>
<td>@T["Model"]</td>
<td class="visually-hidden">@T["Action"]</td>
</tr>
</thead>
<tbody id="updateEntityDatapointsContainer"></tbody>
</table>
<button type="button" id="updateEntityDatapointsAdd" class="btn btn-primary">@T["Add datapoint"]</button>
</div>
</div>
<div class="modal-footer">
<button type="button" id="EntityConfirmUpdate" class="btn btn-warning" data-bs-dismiss="modal">
@T["Update"]
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
@T["Close"]
</button>
</div>
</div>
</div>
</div>
<script>
var domains = JSON.parse('@Html.Raw(System.Text.Json.JsonSerializer.Serialize(domains))');
var probMethods = JSON.parse('@Html.Raw(System.Text.Json.JsonSerializer.Serialize(probMethods))');
@@ -519,113 +595,14 @@
.getElementById('createEntityAttributesAdd')
.addEventListener('click', () => {
var uuid = crypto.randomUUID();
var entityAttributesContainer = document.getElementById('createEntityAttributesContainer');
var tr = document.createElement('tr');
tr.setAttribute('data-uid', uuid);
var tdKey = document.createElement('td');
var keyInput = document.createElement('input');
keyInput.classList.add('form-control')
keyInput.ariaLabel = '@T["Key"]';
tdKey.append(keyInput);
var tdValue = document.createElement('td');
var ValueInput = document.createElement('textarea');
ValueInput.classList.add('form-control')
ValueInput.ariaLabel = '@T["Value"]';
tdValue.append(ValueInput);
var tdAction = document.createElement('td');
var tdButton = document.createElement('button');
tdButton.classList.add('btn', 'btn-danger');
tdButton.textContent = '@T["Remove"]';
tdButton.ariaLabel = '@T["Remove attribute"]';
tdAction.append(tdButton);
tdButton.onclick = function() {
tr.remove();
};
tr.append(tdKey);
tr.append(tdValue);
tr.append(tdAction);
entityAttributesContainer.append(tr);
addEntityAttribute('createEntityAttributesContainer', uuid);
});
document
.getElementById('createEntityDatapointsAdd')
.addEventListener('click', () => {
var uuid = crypto.randomUUID();
var enntityDatapointsContainer = document.getElementById('createEntityDatapointsContainer');
var tr = document.createElement('tr');
tr.setAttribute('data-uid', uuid);
var tdName = document.createElement('td');
var nameInput = document.createElement('input');
nameInput.classList.add('form-control')
nameInput.ariaLabel = '@T["Name"]';
tdName.append(nameInput);
var tdValue = document.createElement('td');
var ValueInput = document.createElement('textarea');
ValueInput.classList.add('form-control')
ValueInput.ariaLabel = '@T["Value"]';
tdValue.append(ValueInput);
var tdProbmethodEmbedding = document.createElement('td');
var probMethodSelect = document.createElement('select');
probMethodSelect.classList.add('probmethod');
for (i in probMethods)
{
let probMethodSelectElement = document.createElement('option');
probMethodSelectElement.value = probMethods[i];
probMethodSelectElement.text = probMethods[i];
probMethodSelect.append(probMethodSelectElement);
}
probMethodSelect.classList.add('form-control')
probMethodSelect.ariaLabel = '@T["Probmethod_embedding"]';
tdProbmethodEmbedding.append(probMethodSelect);
var tdSimilarityMethod = document.createElement('td');
var similarityMethodSelect = document.createElement('select');
similarityMethodSelect.classList.add('similarityMethod');
for (i in similarityMethods)
{
let similarityMethodSelectElement = document.createElement('option');
similarityMethodSelectElement.value = similarityMethods[i];
similarityMethodSelectElement.text = similarityMethods[i];
similarityMethodSelect.append(similarityMethodSelectElement);
}
similarityMethodSelect.classList.add('form-control')
similarityMethodSelect.ariaLabel = '@T["Similarity method"]';
tdSimilarityMethod.append(similarityMethodSelect);
var tdModel = document.createElement('td');
var modelSelect = document.createElement('select');
modelSelect.classList.add('model');
modelSelect.multiple = true;
for (i in models)
{
let modelSelectElement = document.createElement('option');
modelSelectElement.value = models[i];
modelSelectElement.text = models[i];
modelSelect.append(modelSelectElement);
}
modelSelect.classList.add('form-control')
modelSelect.ariaLabel = '@T["Probmethod_embedding"]';
tdModel.append(modelSelect);
var tdAction = document.createElement('td');
var tdButton = document.createElement('button');
tdButton.classList.add('btn', 'btn-danger');
tdButton.textContent = '@T["Remove"]';
tdButton.ariaLabel = '@T["Remove attribute"]';
tdAction.append(tdButton);
tdButton.onclick = function() {
tr.remove();
};
tr.append(tdName);
tr.append(tdValue);
tr.append(tdProbmethodEmbedding);
tr.append(tdSimilarityMethod);
tr.append(tdModel);
tr.append(tdAction);
enntityDatapointsContainer.append(tr);
addEntityDatapoint('createEntityDatapointsContainer', uuid, "", "");
});
document
@@ -734,6 +711,58 @@
console.error('Error deleting entity:', error);
});
});
document
.getElementById('updateEntityAttributesAdd')
.addEventListener('click', () => {
var uuid = crypto.randomUUID();
addEntityAttribute('updateEntityAttributesContainer', uuid);
});
document
.getElementById('updateEntityDatapointsAdd')
.addEventListener('click', () => {
var uuid = crypto.randomUUID();
addEntityDatapoint('updateEntityDatapointsContainer', uuid, "", "");
});
document
.getElementById('EntityConfirmUpdate')
.addEventListener('click', () => {
var name = document.getElementById('updateEntityName').value;
var probMethod = document.getElementById('updateEntityProbMethod').value;
var attributes = getEntityAttributes('updateEntityAttributesContainer');
var datapoints = getEntityDatapoints('updateEntityDatapointsContainer');
var data = [{
"name": name,
"probmethod": probMethod,
"searchdomain": encodeURIComponent(domains[getSelectedDomainKey()]),
"attributes": attributes,
"datapoints": datapoints
}];
console.log(data);
// TODO add throbber to indicate loading
fetch(`/Entity/Index`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(async response => {
result = await response.json();
if (response.ok && result.Success) {
// TODO add toast
console.log('Entity was created successfully');
selectDomain(getSelectedDomainKey());
} else {
// TODO add toast
console.error('Failed to create entity:', result.Message);
}
}).catch(error => {
console.error('Error creating entity:', error);
});
});
});
function deleteSearchdomain(domainKey) {
@@ -837,7 +866,7 @@
let databaseUtilizationPromise = getSearchdomainDatabaseUtilization(getSelectedDomainKey());
/* ---------- ENTITIES ---------- */
let entitiesUrl = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false`;
let entitiesUrl = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false&returnModels=true`;
let entitiesCard = document.querySelector("#entitiesTable").parentElement;
clearEntitiesTable();
showEntitiesLoading(entitiesCard);
@@ -955,7 +984,30 @@
updateButton.textContent = '@T["Update"]';
updateButton.setAttribute("data-index", entities.findIndex(en => en == entity));
updateButton.addEventListener('click', () => {
updateEntity(entity);
const modal = new bootstrap.Modal(
document.getElementById('updateEntityModal')
);
modal.show();
let updateEntityName = document.getElementById('updateEntityName');
updateEntityName.value = entity.Name;
let updateEntityProbMethod = document.getElementById('updateEntityProbMethod');
updateEntityProbMethod.value = entity.ProbMethod;
let updateEntityAttributesContainer = document.getElementById('updateEntityAttributesContainer');
updateEntityAttributesContainer.textContent = "";
for (i in entity.Attributes)
{
let attribute = entity.Attributes[i];
addEntityAttribute('updateEntityAttributesContainer', attribute.Name, attribute.Name, attribute.Value);
}
let updateEntityDatapointsContainer = document.getElementById('updateEntityDatapointsContainer');
updateEntityDatapointsContainer.textContent = "";
for (i in entity.Datapoints)
{
let datapoint = entity.Datapoints[i];
addEntityDatapoint('updateEntityDatapointsContainer', datapoint.Name, datapoint.Name, null, datapoint.ProbMethod, datapoint.SimilarityMethod, Array.from(datapoint.Embeddings, x => x.Model));
}
});
var deleteButton = document.createElement('button');
@@ -1191,7 +1243,10 @@
if (keyInput && valueTextarea && probmethodSelect && modelSelect) {
const key = keyInput.value.trim();
const value = valueTextarea.value.trim();
var value = valueTextarea.value.trim();
if (value != null && value.length == 0) {
value = null;
}
const probMethod = probmethodSelect.selectedOptions[0].value;
const similarityMethod = similaritymethodSelect.selectedOptions[0].value;
const modelSelection = Array.from(modelSelect.selectedOptions)
@@ -1213,4 +1268,126 @@
return datapoints;
}
function addEntityAttribute(containerName = 'createEntityAttributesContainer', uid, key = '', value = '')
{
var container = document.getElementById(containerName);
var tr = document.createElement('tr');
tr.setAttribute('data-uid', uid);
var tdKey = document.createElement('td');
var keyInput = document.createElement('input');
keyInput.classList.add('form-control');
keyInput.ariaLabel = '@T["Key"]';
keyInput.value = key;
tdKey.append(keyInput);
var tdValue = document.createElement('td');
var ValueInput = document.createElement('textarea');
ValueInput.classList.add('form-control');
ValueInput.ariaLabel = '@T["Value"]';
ValueInput.value = value;
tdValue.append(ValueInput);
var tdAction = document.createElement('td');
var tdButton = document.createElement('button');
tdButton.classList.add('btn', 'btn-danger');
tdButton.textContent = '@T["Remove"]';
tdButton.ariaLabel = '@T["Remove attribute"]';
tdAction.append(tdButton);
tdButton.onclick = function() {
tr.remove();
};
tr.append(tdKey);
tr.append(tdValue);
tr.append(tdAction);
container.append(tr);
}
function addEntityDatapoint(containerName = 'createEntityDatapointsContainer', uid, name = null, value = null, probmethod_embedding = null, similarityMethod = null, selectedModels = [])
{
var entityDatapointsContainer = document.getElementById(containerName);
var tr = document.createElement('tr');
tr.setAttribute('data-uid', uid);
var tdName = document.createElement('td');
var nameInput = document.createElement('input');
nameInput.classList.add('form-control')
nameInput.ariaLabel = '@T["Name"]';
if (name != null) nameInput.value = name;
tdName.append(nameInput);
var tdValue = document.createElement('td');
var ValueInput = document.createElement('textarea');
ValueInput.classList.add('form-control')
ValueInput.ariaLabel = '@T["Value"]';
if (value != null) {
ValueInput.value = value;
} else {
nameInput.readOnly = true;
ValueInput.readOnly = true;
}
tdValue.append(ValueInput);
var tdProbmethodEmbedding = document.createElement('td');
var probMethodSelect = document.createElement('select');
probMethodSelect.classList.add('probmethod');
for (i in probMethods)
{
let probMethodSelectElement = document.createElement('option');
probMethodSelectElement.value = probMethods[i];
probMethodSelectElement.text = probMethods[i];
probMethodSelect.append(probMethodSelectElement);
}
probMethodSelect.classList.add('form-control')
probMethodSelect.ariaLabel = '@T["Probmethod_embedding"]';
if (probmethod_embedding != null) probMethodSelect.value = probmethod_embedding;
tdProbmethodEmbedding.append(probMethodSelect);
var tdSimilarityMethod = document.createElement('td');
var similarityMethodSelect = document.createElement('select');
similarityMethodSelect.classList.add('similarityMethod');
for (i in similarityMethods)
{
let similarityMethodSelectElement = document.createElement('option');
similarityMethodSelectElement.value = similarityMethods[i];
similarityMethodSelectElement.text = similarityMethods[i];
similarityMethodSelect.append(similarityMethodSelectElement);
}
similarityMethodSelect.classList.add('form-control')
similarityMethodSelect.ariaLabel = '@T["Similarity method"]';
if (similarityMethod != null) similarityMethodSelect.value = similarityMethod;
tdSimilarityMethod.append(similarityMethodSelect);
var tdModel = document.createElement('td');
var modelSelect = document.createElement('select');
modelSelect.classList.add('model');
modelSelect.multiple = true;
for (i in models)
{
let modelSelectElement = document.createElement('option');
modelSelectElement.value = models[i];
modelSelectElement.text = models[i];
modelSelectElement.selected = selectedModels.findIndex(x => x === models[i] || (x + ":latest") === models[i]) >= 0;
modelSelect.append(modelSelectElement);
}
modelSelect.classList.add('form-control')
modelSelect.ariaLabel = '@T["Probmethod_embedding"]';
if (value == null) {
modelSelect.disabled = true;
}
tdModel.append(modelSelect);
var tdAction = document.createElement('td');
var tdButton = document.createElement('button');
tdButton.classList.add('btn', 'btn-danger');
tdButton.textContent = '@T["Remove"]';
tdButton.ariaLabel = '@T["Remove attribute"]';
tdAction.append(tdButton);
tdButton.onclick = function() {
tr.remove();
};
tr.append(tdName);
tr.append(tdValue);
tr.append(tdProbmethodEmbedding);
tr.append(tdSimilarityMethod);
tr.append(tdModel);
tr.append(tdAction);
entityDatapointsContainer.append(tr);
}
</script>