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 <[email protected]>
LLNL · Sep 20, 2024 · 3652541 · 3652541
1 parent 252e37e
commit 3652541
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git 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
@@ -0,0 +1,3 @@
+$(document).ready( function () {
+    $('table.datatable').DataTable({paging: false});
+} );
diff --git 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
@@ -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
@@ -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