Adding effect of selecting the table from the structure widget

src/aiidalab_qe/app/result/components/viewer/structure/structure.py

@@ -32,6 +32,8 @@ def _render(self):
                 self.atom_coordinates_table,
             ]
             self.atom_coordinates_table.observe(self._change_selection, "selected_rows")
+            # Listen for changes in self.widget.displayed_selection and update the table
+            self.widget.observe(self._update_table_selection, "displayed_selection")
 
         # HACK to resize the NGL viewer in cases where it auto-rendered when its
         # container was not displayed, which leads to a null width. This hack restores
@@ -66,3 +68,7 @@ def _generate_table(self, structure):
     def _change_selection(self, _):
         selected_indices = self.atom_coordinates_table.selected_rows
         self.widget.displayed_selection = selected_indices
+
+    def _update_table_selection(self, change):
+        selected_indices = change.new
+        self.atom_coordinates_table.selected_rows = selected_indices

src/aiidalab_qe/common/widgets.py

@@ -1282,6 +1282,20 @@ class TableWidget(anywidget.AnyWidget):
 
       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);
     }
     export default { render };