Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance Model Display UI in ReadTheDocs #632

Merged
merged 5 commits into from
Jul 18, 2024
Merged

Enhance Model Display UI in ReadTheDocs #632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f6d5e8
Add dark theme to readthedocs model table
darrylong Jun 27, 2024
a920860
Restructure models table into separate section
darrylong Jun 28, 2024
5de2c20
Add filter label and changed clear filters button behavior
darrylong Jul 1, 2024
34c31ac
Merge branch 'PreferredAI:master' into fix-model-docs-display
darrylong Jul 1, 2024
e2a9b46
Add color highlighting for selected filter
darrylong Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 54 additions & 10 deletions docs/source/_static/models/models.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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";
});
}

Expand All @@ -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
Expand Down
13 changes: 4 additions & 9 deletions docs/source/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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/>`_ 

Expand Down Expand Up @@ -113,10 +114,4 @@ Quick Links
:expand:
:click-parent:

Contributor's Guide

Models Available
^^^^^^^^^^^^^^^^

.. raw:: html
:file: _static/models/models.html
Contributor's Guide
8 changes: 8 additions & 0 deletions docs/source/models/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Loading