From 3652541f065a3a108a810e865c9e085e0e21dcc7 Mon Sep 17 00:00:00 2001
From: Dewi <43684384+dyokelson@users.noreply.github.com>
Date: Fri, 20 Sep 2024 17:05:27 -0400
Subject: [PATCH] Docs: Make System Configs Table Searchable (#369)

* add paths to datatables js

* add main.js to apply datatable properties to csv-table

* add datatable class

* add datatable class

* added search bar, removed table transpose

* add align left back, no effect but keep the same

* this change wasn't showing up but making benchmark table same as systems

* reverting this table change, keep as is

* black reformat

---------

Co-authored-by: pearce8 <pearce8@llnl.gov>
---
 docs/_static/css/custom.css    |  4 ++++
 docs/_static/main.js           |  3 +++
 docs/conf.py                   | 14 ++++++++++++--
 docs/generate-sys-defs-list.py | 20 ++++----------------
 docs/system-list.rst           |  1 +
 5 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 docs/_static/main.js

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 3040dcdeb..0292011a8 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -81,6 +81,10 @@ a:visited {
 .wy-side-nav-search img {
     background-color: #7fa866
 }
+.dataTables_wrapper .dataTables_filter {
+  float: unset;
+  text-align: right;
+}
 
 html.writer-html4 .rst-content dl:not(.docutils) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
     color: #7fa866
diff --git a/docs/_static/main.js b/docs/_static/main.js
new file mode 100644
index 000000000..c4b8d96e9
--- /dev/null
+++ b/docs/_static/main.js
@@ -0,0 +1,3 @@
+$(document).ready( function () {
+    $('table.datatable').DataTable({paging: false});
+} );
diff --git a/docs/conf.py b/docs/conf.py
index 5267a063e..ac9c9e4e0 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -39,8 +39,18 @@
 # -- Options for HTML output -------------------------------------------------
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
 
-html_theme = "sphinx_rtd_theme"
 html_static_path = ["_static"]
-html_css_files = ["css/custom.css"]
+html_js_files = [
+    "https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js",
+    "main.js",
+]
+html_css_files = [
+    (
+        "https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css",
+        {"priority": 800},
+    ),
+    ("css/custom.css", {"priority": 999}),
+]
 html_logo = "_static/images/benchpark-dark.svg"
+html_theme = "sphinx_rtd_theme"
 html_theme_options = {"logo_only": True}
diff --git a/docs/generate-sys-defs-list.py b/docs/generate-sys-defs-list.py
index 028affacc..f3ade050e 100755
--- a/docs/generate-sys-defs-list.py
+++ b/docs/generate-sys-defs-list.py
@@ -45,30 +45,18 @@ def main():
         list_of_strings.append(", ".join(item for item in i if item))
     df.loc[:, "system_definition.top500-system-instances"] = list_of_strings
 
-    # Set index to be system names
-    df.set_index("system_definition.name", inplace=True)
-    df.index.name = ""  # remove system_definition.name from cell
-    df_tpose = df.T
-
     # Remove system_definition from all field names
     # (e.g., system_definition.system-tested.description)
-    df_tpose["fielddesc"] = df_tpose.index
-    df_tpose[["first", ""]] = df_tpose["fielddesc"].str.split(".", n=1, expand=True)
-
-    # Add ** to either side of field names for bold rendering in RST
-    df_tpose[""] = "**" + df_tpose[""] + "**"
-
-    # Drop temporary columns
-    df_tpose.drop(["first", "fielddesc"], axis=1, inplace=True)
+    df.columns = df.columns.str.removeprefix("system_definition.")
 
     # Replace NaN with empty string
-    df_tpose.fillna("", inplace=True)
+    df.fillna("", inplace=True)
 
     # Set index to be field names
-    df_tpose.set_index([""], inplace=True)
+    df.set_index("name", inplace=True)
 
     # Write out current system definitions to CSV format
-    df_tpose.to_csv("current-system-definitions.csv")
+    df.to_csv("current-system-definitions.csv")
 
 
 if __name__ == "__main__":
diff --git a/docs/system-list.rst b/docs/system-list.rst
index 1519e4bbc..77aad2934 100644
--- a/docs/system-list.rst
+++ b/docs/system-list.rst
@@ -13,6 +13,7 @@ use as the ``system`` parameter in ``Benchpark setup``. See
 :doc:`4-benchpark-setup` for more details.
 
 .. csv-table:: Current System Specifications in Benchpark.
+   :class: datatable
    :file: current-system-definitions.csv
    :header-rows: 1
    :align: left