Enhance Model Display UI in ReadTheDocs (#632)

* Add dark theme to readthedocs model table * Restructure models table into separate section * Add filter label and changed clear filters button behavior * Add color highlighting for selected filter
PreferredAI · Jul 18, 2024 · 5c8cd20 · 5c8cd20
1 parent 3abfdaa
commit 5c8cd20
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 19 deletions.
diff --git a/docs/source/_static/models/models.html b/docs/source/_static/models/models.html
@@ -4,25 +4,27 @@
  </head>
  <body>
     <h3>Filters</h3>
-    <div>
-        <button onclick="clearFilters()">Clear Filters</button>
+
+    <div style="margin-top: 16px;">
+        <button id='btn-filter-cf' onclick="filterModels('Collaborative Filtering')">Collaborative Filtering</button>
+        <button id='btn-filter-content' onclick="filterModels('Content-Based')">Content Based</button>
+        <button id='btn-filter-explainable' onclick="filterModels('Explainable')">Explainable</button>
+        <button id='btn-filter-nextitem' onclick="filterModels('Next-Item')">Next-Item</button>
+        <button id='btn-filter-nextbasket' onclick="filterModels('Next-Basket')">Next-Basket</button>
+        <button id='btn-filter-baseline' onclick="filterModels('Baseline')">Baseline</button>
     </div>
     <div style="margin-top: 16px;">
-        <button onclick="filterModels('Collaborative Filtering')">Collaborative Filtering Models</button>
-        <button onclick="filterModels('Content-Based')">Content Based Models</button>
-        <button onclick="filterModels('Explainable')">Explainable Models</button>
-        <button onclick="filterModels('Next-Item')">Next-Item Models</button>
-        <button onclick="filterModels('Next-Basket')">Next-Basket Models</button>
-        <button onclick="filterModels('Baseline')">Baseline Models</button>
+        <input type="text" id="filter-text-box" size="50" spellcheck="false" placeholder="Filter by Text" oninput="onFilterTextBoxChanged()" />
     </div>
     <div style="margin-top: 16px;">
-        <input type="text" id="filter-text-box" size="50" placeholder="Fliter" oninput="onFilterTextBoxChanged()" />
+        <button id="btn-clear-filter" onclick="clearFilters()" disabled>Clear Filters</button>
     </div>
     <br />
-    <div id="grid" class="ag-theme-quartz" style="height: 480px"></div>
+    <div id="grid" class="ag-theme-quartz-auto-dark" style="height: 480px"></div>
  </body>
 </html>
 <script type="text/javascript" src="data.js"></script>
+<script type="text/javascript" src="../_static/models/data.js"></script>
 <script type="text/javascript" src="_static/models/data.js"></script>
 <script type="text/javascript">
     function LinkRenderer(url, title) {
@@ -39,6 +41,20 @@ <h3>Filters</h3>
             "quickFilterText",
             document.getElementById("filter-text-box").value,
         );
+
+        if (document.getElementById("filter-text-box").value.length > 0) {
+            document.getElementById("btn-clear-filter").disabled=false; // Enable clear button
+        } else {
+            document.getElementById("btn-clear-filter").disabled=true; // Disable clear button
+        }
+    }
+
+    function resetButtonColors() {
+        var btns = document.getElementsByTagName('button');
+        for (var i = 0; i < btns.length; i++) {
+            btns[i].style.background="";
+            btns[i].style.color="";
+        }
     }
 
     function filterModels(filter) {
@@ -48,6 +64,30 @@ <h3>Filters</h3>
         })
         .then(() => {
             gridApi.onFilterChanged();
+            document.getElementById("filter-text-box").value=""; // Clear text box (if any)
+            document.getElementById("btn-clear-filter").disabled=false; // Enable clear button
+
+            // reset all button colors
+            resetButtonColors();
+
+            // change button color for selected button
+            var btnId = "";
+
+            if (filter === "Collaborative Filtering") {
+                btnId = "btn-filter-cf";
+            } else if (filter === "Content-Based") {
+                btnId = "btn-filter-content";
+            } else if (filter === "Explainable") {
+                btnId = "btn-filter-explainable";
+            } else if (filter === "Next-Item") {
+                btnId = "btn-filter-nextitem";
+            } else if (filter === "Next-Basket") {
+                btnId = "btn-filter-nextbasket";
+            } else if (filter === "Baseline") {
+                btnId = "btn-filter-baseline";
+            } 
+            document.getElementById(btnId).style.background="#A3361F";
+            document.getElementById(btnId).style.color="white";
         });
     }
 
@@ -62,6 +102,10 @@ <h3>Filters</h3>
             "quickFilterText",
             "",
         );
+        document.getElementById("btn-clear-filter").disabled=true; // Disable clear button
+
+        // reset all button colors
+        resetButtonColors();
     }
 
     // Grid Options: Contains all of the grid configurations

diff --git a/docs/source/index.rst b/docs/source/index.rst
@@ -7,6 +7,7 @@ Cornac: A Comparative Framework for Multimodal Recommender Systems
    :hidden:
 
    User Guide <user/index>
+   Models Available <models/index>
    Contributors Guide <developer/index>
    API Reference <api_ref/index>
 
@@ -15,11 +16,11 @@ Cornac: A Comparative Framework for Multimodal Recommender Systems
 
 
 Quick Links
-   `GitHub <https://github.com/PreferredAI/cornac/>`_ |
+   :doc:`/models/index` |
    `Tutorials <https://github.com/PreferredAI/cornac/tree/master/tutorials#tutorials>`_ |
    `Examples <https://github.com/PreferredAI/cornac/tree/master/examples#cornac-examples-directory>`_ |
-   `Models <https://github.com/PreferredAI/cornac#models>`_ |
    `Datasets <https://github.com/PreferredAI/cornac/blob/master/cornac/datasets/README.md#datasets>`_ |
+   `GitHub <https://github.com/PreferredAI/cornac/>`_ |
    `Paper <http://www.jmlr.org/papers/volume21/19-805/19-805.pdf>`_ |
    `Preferred.AI <https://preferred.ai/>`_ 
 
@@ -113,10 +114,4 @@ Quick Links
          :expand:
          :click-parent:
 
-         Contributor's Guide
-
-Models Available
-^^^^^^^^^^^^^^^^
-
-.. raw:: html
-   :file: _static/models/models.html
+         Contributor's Guide
diff --git a/docs/source/models/index.rst b/docs/source/models/index.rst
@@ -0,0 +1,8 @@
+Models Available
+================
+
+Below shows a list of models available in Cornac.
+Clicking on the model name will take you to the model's API documentation.
+
+.. raw:: html
+   :file: ../_static/models/models.html