Skip to content
Snippets Groups Projects
Unverified Commit 5c8cd20b authored by darrylong's avatar darrylong Committed by GitHub
Browse files

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
parent 3abfdaa2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
docs/source/_static/models/models.html
+ 54
− 10
View file @ 5c8cd20b
......@@ -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 @@
"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 @@
})
.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 @@
"quickFilterText",
"",
);
document.getElementById("btn-clear-filter").disabled=true; // Disable clear button
// reset all button colors
resetButtonColors();
}
// Grid Options: Contains all of the grid configurations
......
docs/source/index.rst
+ 4
− 9
View file @ 5c8cd20b
......@@ -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
\ No newline at end of file
Contributor's Guide
\ No newline at end of file
docs/source/models/index.rst 0 → 100644
+ 8
− 0
View file @ 5c8cd20b
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
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment