Added entity updating to front-end

src/Server/Views/Home/Index.cshtml

@@ -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');
+                addEntityAttribute('createEntityAttributesContainer', uuid);
-                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);
             });
 
         document
             .getElementById('createEntityDatapointsAdd')
             .addEventListener('click', () => {
                 var uuid = crypto.randomUUID();
-                var enntityDatapointsContainer = document.getElementById('createEntityDatapointsContainer');
+                addEntityDatapoint('createEntityDatapointsContainer', uuid, "", "");
-                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);
-
             });
 
         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');
@@ -966,7 +1018,7 @@
               const modal = new bootstrap.Modal(
                   document.getElementById('deleteEntityModal')
               );
-                modal.show();
+              modal.show();
               let entityConfirmDelete = document.getElementById('EntityConfirmDelete');
               entityConfirmDelete.setAttribute('data-name', entity.Name);
               let deleteEntityConfirmationModalName = document.getElementById('deleteEntityConfirmationModalName');
@@ -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>