Create a basic array data table viewer for 1 and 3 dimensional arrays stored in an ArrayData node.

Author: BTSpeake

src/alc_aiidalab_widgets/viewers.py

@@ -3,7 +3,10 @@
 from alc_aiidalab_widgets.widgets.file_viewer import SinglefileDataViewer
 from alc_aiidalab_widgets.widgets.process_node_view import ProcessNodeViewerWidget
 from alc_aiidalab_widgets.widgets.structure import StructureViewWidget
-from alc_aiidalab_widgets.widgets.tables import XYZArrayDataTableWidget
+from alc_aiidalab_widgets.widgets.tables import (
+    GenericArrayDataTableWidget,
+    XYZArrayDataTableWidget,
+)
 
 ALC_AIIDA_VIEWER_MAPPING = {
     # Process node type labels
@@ -14,6 +17,7 @@
     # AiiDA data type labels
     "data.core.structure.StructureData.": StructureViewWidget,
     "data.core.singlefile.SinglefileData.": SinglefileDataViewer,
+    "data.core.array.ArrayData.": GenericArrayDataTableWidget,
     # Custom redirections
     "xyz_table": XYZArrayDataTableWidget,
 }

src/alc_aiidalab_widgets/widgets/tables.py

@@ -2,11 +2,12 @@
 
 from aiida.orm import ArrayData
 from ipywidgets import HTML, Dropdown, VBox
+from numpy import floating as npfloat
 
 
 class XYZArrayDataTableWidget(VBox):
     """
-    Custom widget to display array data produced from ChemShell jobs.
+    Custom widget to display array data associated with XYZ coordinates.
 
     Create a table based widget for displaying different arrays within
     an ArrayData object assuming that all the data is XYZ based i.e
@@ -58,3 +59,74 @@ def _render_array(self, change) -> None:
 
         self.children = [self.array_selector, HTML(html)]
         return
+
+
+class GenericArrayDataTableWidget(VBox):
+    """Custom widget to display generic array data as a table."""
+
+    def __init__(self, array: ArrayData, **kwargs):
+        """GenericArrayDataTableWidget Constructor."""
+        super().__init__(**kwargs)
+        self.array = array
+        self.array_selector = Dropdown(
+            options=self.array.get_arraynames(),
+            description="Array Labels:",
+            layout={"width": "50%"},
+            **kwargs,
+        )
+        self._render_array({"new": self.array_selector.index, "old": -1})
+        self.array_selector.observe(self._render_array, "index")
+        return
+
+    def _render_array(self, change: dict) -> None:
+        """Create a HTML table based on the currently selected array."""
+        index = change["new"]
+        if index == change["old"]:
+            return
+        values = self.array.get_array(self.array.get_arraynames()[index])
+        if len(values.shape) > 2:
+            self.children = [
+                self.array_selector,
+                HTML("<p>To many dimension to create 2D table from array.</p>"),
+            ]
+            return
+        if len(values.shape) == 1:
+            nrows = values.shape[0]
+            ncols = 1
+        else:
+            ncols, nrows = values.shape  # type: ignore
+        values = values.reshape(1, -1)
+
+        # Unique styling prefix to prevent CSS bleeding into other Jupyter elements
+
+        # Build Table Header (Column Indices)
+        html = "<table style='width:100%; border: 1px solid #ddd; text-align: left; "
+        html += "border-collapse: collapse;'>"
+        html += "<tr style='background-color: #2196F3; color: white;'>"
+        html += "<th>Index</th>"
+        if ncols > 1:
+            for c in range(ncols):
+                html += f"<th>{c}</th>"
+        else:
+            col_header = (
+                self.array.get_arraynames()[index].replace("_", " ").capitalize()
+            )
+            html += f"<th>{col_header}</th>"
+        html += "</tr></thead><tbody>"
+
+        # Build Table Body (Row Index + Cell Data)
+        for r in range(nrows):
+            html += "<tr>"
+            html += f'<th class="row-idx">{r}</th>'
+            for c in range(ncols):
+                val = values[c, r]
+                # Format floats to 6 decimals, leave ints/strings as they are
+                formatted_val = (
+                    f"{val:.6f}" if isinstance(val, float | npfloat) else str(val)
+                )
+                html += f"<td>{formatted_val}</td>"
+            html += "</tr>"
+
+        html += "</tbody></table></div>"
+        self.children = [self.array_selector, HTML(html)]
+        return