Skip to content

Add pagination support to Web UI entity listing pages#672

Open
mhmdk0 wants to merge 4 commits intomlcommons:mainfrom
mhmdk0:entities-pagination
Open

Add pagination support to Web UI entity listing pages#672
mhmdk0 wants to merge 4 commits intomlcommons:mainfrom
mhmdk0:entities-pagination

Conversation

@mhmdk0
Copy link
Copy Markdown
Contributor

@mhmdk0 mhmdk0 commented Jan 16, 2026

  • Add pagination and filtering to Web UI entity listing pages (benchmarks, datasets, containers)
  • Update comms client to support paginated requests using limit and offset

@mhmdk0 mhmdk0 requested a review from a team as a code owner January 16, 2026 21:20
@mhmdk0 mhmdk0 had a problem deploying to testing-external-code January 16, 2026 21:20 — with GitHub Actions Failure
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 16, 2026

MLCommons CLA bot All contributors have signed the MLCommons CLA ✍️ ✅

@mhmdk0 mhmdk0 had a problem deploying to testing-external-code January 24, 2026 17:47 — with GitHub Actions Failure
Copy link
Copy Markdown
Contributor

@hasan7n hasan7n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mhmdk0
please address my comments below and merge main

Comment on lines +90 to +91
owner = "owner" in filters and filters["owner"] == get_medperf_user_data()["id"]
return config.comms.get_benchmarks_count, owner
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's cleaner to have this "is_owner" logic written in the get_count method, not here. This method should be just "get_comms_counter" define in the top (beside get_comms_retriever etc...)

Comment on lines +47 to +55
if ordering == "created_at_asc":
order = "created_at"
elif ordering == "name_asc":
order = "name"
elif ordering == "name_desc":
order = "-name"
else:
order = "-created_at"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's move this to a common util file

Comment on lines +92 to +98
"page": page,
"page_size": page_size,
"total_pages": total_pages,
"ordering": ordering,
"total_count": total_count,
"start_index": start_index,
"end_index": end_index,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we move all the ordering/pagination logic to a common file and have it return a dictionary (page page_size total_pages ordering total_count start_index end_index)?

Comment on lines +37 to +78
{% if benchmarks %}
<div class="container mt-5">
<div class="row align-items-end justify-content-between g-3">
<div class="col-md-3">
<label class="form-label fw-semibold">Sort by</label>
<select class="form-select" id="ordering">
<option value="created_at_desc" {% if ordering == "created_at_desc" %}selected{% endif %}>
Newest first
</option>
<option value="created_at_asc" {% if ordering == "created_at_asc" %}selected{% endif %}>
Oldest first
</option>
<option value="name_asc" {% if ordering == "name_asc" %}selected{% endif %}>
Name (A → Z)
</option>
<option value="name_desc" {% if ordering == "name_desc" %}selected{% endif %}>
Name (Z → A)
</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label fw-semibold">Items per page</label>
<select class="form-select" id="page-size">
{% for size in [6, 9, 12, 24] %}
<option value="{{ size }}" {% if page_size == size %}selected{% endif %}>
{{ size }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 text-md-end text-muted">
{% if total_count %}
<small>
Showing
<strong>{{ start_index }}</strong>-<strong>{{ end_index }}</strong>
of <strong>{{ total_count }}</strong> benchmarks
</small>
{% endif %}
</div>
</div>
</div>
{% endif %}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we move this to a common partial?

Comment on lines +94 to +110
{% if benchmarks and total_pages > 1 %}
<nav class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item {% if page == 1 %}disabled{% endif %}">
<a class="page-link" href="#" data-page="{{ page - 1 }}">Previous</a>
</li>
{% for p in range(1, total_pages + 1) %}
<li class="page-item {% if p == page %}active{% endif %}">
<a class="page-link" href="#" data-page="{{ p }}">{{ p }}</a>
</li>
{% endfor %}
<li class="page-item {% if page == total_pages %}disabled{% endif %}">
<a class="page-link" href="#" data-page="{{ page + 1 }}">Next</a>
</li>
</ul>
</nav>
{% endif %}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we move this to a common partial?

Comment on lines +115 to +146
function reloadUi(page = 1) {
if (page < 1 || !Number.isInteger(page)) return;

const params = new URLSearchParams({page: page, mine_only: $("#switch").is(":checked")});
const locParams = new URLSearchParams(window.location.search);

const pageSize = $("#page-size").val();
if (pageSize !== undefined && pageSize !== "") {
params.append("page_size", pageSize);
}
else if (locParams.get("page_size")) {
params.append("page_size", locParams.get("page_size"));
}

const ordering = $("#ordering").val();
if (ordering !== undefined && ordering !== "") {
params.append("ordering", ordering);
}
else if (locParams.get("ordering")) {
params.append("ordering", locParams.get("ordering"));
}

window.location = `/benchmarks/ui?${params.toString()}`;
}

$("#ordering, #page-size, #switch").on("change", () => reloadUi(1));

$(".page-link").on("click", function (e) {
e.preventDefault();
const page = $(this).data("page");
if (page) reloadUi(page);
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we move this to a common js file?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants