From 07593e3fcdc9882ab735d84e137519208b2a5f7f Mon Sep 17 00:00:00 2001
From: Andres Ortega-Guerrero
 <34098967+AndresOrtegaGuerrero@users.noreply.github.com>
Date: Wed, 8 Jan 2025 17:24:34 +0100
Subject: [PATCH] adding a updateSelection function in the JS table (#1067)

---
 src/aiidalab_qe/common/widgets.py | 126 +++++++++++++++---------------
 1 file changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/aiidalab_qe/common/widgets.py b/src/aiidalab_qe/common/widgets.py
index b4ced2f87..38537fbfd 100644
--- a/src/aiidalab_qe/common/widgets.py
+++ b/src/aiidalab_qe/common/widgets.py
@@ -1235,68 +1235,70 @@ def _hide_missing_information_warning(self):
 class TableWidget(anywidget.AnyWidget):
     _esm = """
     function render({ model, el }) {
-      let domElement = document.createElement("div");
-      el.classList.add("custom-table");
-      let selectedIndices = [];
-
-      function drawTable() {
-          const data = model.get("data");
-          domElement.innerHTML = "";
-          let innerHTML = '<table><tr>' + data[0].map(header => `<th>${header}</th>`).join('') + '</tr>';
-
-          for (let i = 1; i < data.length; i++) {
-              innerHTML += '<tr>' + data[i].map(cell => `<td>${cell}</td>`).join('') + '</tr>';
-          }
-
-          innerHTML += "</table>";
-          domElement.innerHTML = innerHTML;
-
-          const rows = domElement.querySelectorAll('tr');
-          rows.forEach((row, index) => {
-              if (index > 0) {
-                  row.addEventListener('click', () => {
-                      const rowIndex = index - 1;
-                      if (selectedIndices.includes(rowIndex)) {
-                          selectedIndices = selectedIndices.filter(i => i !== rowIndex);
-                          row.classList.remove('selected-row');
-                      } else {
-                          selectedIndices.push(rowIndex);
-                          row.classList.add('selected-row');
-                      }
-                      model.set('selected_rows', [...selectedIndices]);
-                      model.save_changes();
-                  });
-
-                  row.addEventListener('mouseover', () => {
-                      if (!row.classList.contains('selected-row')) {
-                          row.classList.add('hover-row');
-                      }
-                  });
-
-                  row.addEventListener('mouseout', () => {
-                      row.classList.remove('hover-row');
-                  });
-              }
-          });
-      }
-
-      drawTable();
-      model.on("change:data", drawTable);
-      model.on("change:selected_rows", (e) => {
-          const newSelection = model.get("selected_rows");
-          // Update row selection based on selected_rows
-          const rows = domElement.querySelectorAll('tr');
-          rows.forEach((row, index) => {
-              if (index > 0) {
-                  if (newSelection.includes(index - 1)) {
-                      row.classList.add('selected-row');
-                  } else {
-                      row.classList.remove('selected-row');
-                  }
-              }
-          });
-      });
-      el.appendChild(domElement);
+        let domElement = document.createElement("div");
+        el.classList.add("custom-table");
+        let selectedIndices = [];
+
+        function drawTable() {
+            const data = model.get("data");
+            domElement.innerHTML = "";
+            let innerHTML = '<table><tr>' + data[0].map(header => `<th>${header}</th>`).join('') + '</tr>';
+
+            for (let i = 1; i < data.length; i++) {
+                innerHTML += '<tr>' + data[i].map(cell => `<td>${cell}</td>`).join('') + '</tr>';
+            }
+
+            innerHTML += "</table>";
+            domElement.innerHTML = innerHTML;
+
+            const rows = domElement.querySelectorAll('tr');
+            rows.forEach((row, index) => {
+                if (index > 0) {
+                    row.addEventListener('click', () => {
+                        const rowIndex = index - 1;
+                        if (selectedIndices.includes(rowIndex)) {
+                            selectedIndices = selectedIndices.filter(i => i !== rowIndex);
+                            row.classList.remove('selected-row');
+                        } else {
+                            selectedIndices.push(rowIndex);
+                            row.classList.add('selected-row');
+                        }
+                        model.set('selected_rows', [...selectedIndices]);
+                        model.save_changes();
+                    });
+
+                    row.addEventListener('mouseover', () => {
+                        if (!row.classList.contains('selected-row')) {
+                            row.classList.add('hover-row');
+                        }
+                    });
+
+                    row.addEventListener('mouseout', () => {
+                        row.classList.remove('hover-row');
+                    });
+                }
+            });
+        }
+
+        function updateSelection() {
+            const newSelection = model.get("selected_rows");
+            selectedIndices = [...newSelection]; // Synchronize the JavaScript state with the Python state
+            const rows = domElement.querySelectorAll('tr');
+            rows.forEach((row, index) => {
+                if (index > 0) {
+                    if (selectedIndices.includes(index - 1)) {
+                        row.classList.add('selected-row');
+                    } else {
+                        row.classList.remove('selected-row');
+                    }
+                }
+            });
+        }
+
+        drawTable();
+        model.on("change:data", drawTable);
+        model.on("change:selected_rows", updateSelection);
+        el.appendChild(domElement);
     }
     export default { render };
     """