Skip to content

Update Admin > Statistics views data fetching and error handling #9416

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

Open
hotzenklotz wants to merge 2 commits into
base: update-admin-page-design
Choose a base branch
from
+295 −297
Open

Update Admin > Statistics views data fetching and error handling #9416

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
443e9db
add useQuery to admin statistics views
hotzenklotz Mar 24, 2026
14540a7
code rabbit feedback
hotzenklotz Mar 25, 2026
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
29 changes: 9 additions & 20 deletions frontend/javascripts/admin/statistic/available_tasks_report_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,26 @@ import AdminPage from "admin/admin_page";
import { getAvailableTasksReport } from "admin/rest_api";
import { Spin, Table, Tag, Tooltip } from "antd";
import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
import { handleGenericError } from "libs/error_handling";
import { useQueryWithErrorHandling } from "libs/react_hooks";
import { compareBy, localeCompareBy } from "libs/utils";
import { useState } from "react";
import type { APIAvailableTasksReport } from "types/api_types";

const { Column } = Table;

/*
* Note that the phrasing “available” tasks is chosen here over “pending” to
* Note that the phrasing "available" tasks is chosen here over "pending" to
* emphasize that tasks are still available for individual users.
* From the project viewpoint they are tasks with pending instances.
*/
function AvailableTasksReportView() {
const [data, setData] = useState<APIAvailableTasksReport[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);

async function fetchData(teamId: string | null | undefined) {
if (teamId == null) {
setData([]);
} else {
try {
setIsLoading(true);
const progressData = await getAvailableTasksReport(teamId);
setData(progressData);
} catch (error) {
handleGenericError(error as Error);
} finally {
setIsLoading(false);
}
}
}
const { data = [], isLoading } = useQueryWithErrorHandling({
queryKey: ["availableTasksReport", selectedTeamId],
enabled: selectedTeamId != null,
queryFn: () => getAvailableTasksReport(selectedTeamId!),
});

return (
<AdminPage
Expand All @@ -47,7 +36,7 @@ function AvailableTasksReportView() {
<TeamSelectionComponent
onChange={(selectedTeam) => {
if (!Array.isArray(selectedTeam) && selectedTeam != null) {
fetchData(selectedTeam.id);
setSelectedTeamId(selectedTeam.id);
}
Comment on lines 37 to 40
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 24, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Reset selectedTeamId when the filter is cleared.

This handler ignores null, so clearing the selector leaves the previous team id in state and the table keeps showing stale report data.

💡 Proposed fix 
           <TeamSelectionComponent
             onChange={(selectedTeam) => {
-              if (!Array.isArray(selectedTeam) && selectedTeam != null) {
-                setSelectedTeamId(selectedTeam.id);
-              }
+              if (Array.isArray(selectedTeam) || selectedTeam == null) {
+                setSelectedTeamId(null);
+                return;
+              }
+              setSelectedTeamId(selectedTeam.id);
             }}
             prefix={<FilterOutlined />}
           />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onChange={(selectedTeam) => {
if (!Array.isArray(selectedTeam) && selectedTeam != null) {
fetchData(selectedTeam.id);
setSelectedTeamId(selectedTeam.id);
}
onChange={(selectedTeam) => {
if (Array.isArray(selectedTeam) || selectedTeam == null) {
setSelectedTeamId(null);
return;
}
setSelectedTeamId(selectedTeam.id);
}}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/javascripts/admin/statistic/available_tasks_report_view.tsx` around
lines 37 - 40, The onChange handler for the team selector currently ignores the
null case and leaves stale state; update the handler that calls
setSelectedTeamId so that when selectedTeam is null (filter cleared) you call
setSelectedTeamId(null) (or an appropriate empty value) instead of doing
nothing, otherwise keep setting setSelectedTeamId(selectedTeam.id) when a single
team object is provided; adjust the existing Array.isArray(selectedTeam) check
to branch: array -> ignore/handle arrays, null -> reset selectedTeamId, else ->
set selectedTeam id.

}}
prefix={<FilterOutlined />}
Expand Down
24 changes: 12 additions & 12 deletions frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { FilterOutlined } from "@ant-design/icons";
import { getProjects } from "admin/rest_api";
import { Select } from "antd";
import { useFetch } from "libs/react_helpers";
import { useWkSelector } from "libs/react_hooks";
import { useQueryWithErrorHandling, useWkSelector } from "libs/react_hooks";
import { isUserAdminOrTeamManager } from "libs/utils";
import type React from "react";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -55,17 +54,15 @@ function ProjectAndAnnotationTypeDropdown({
}: ProjectAndTypeDropdownProps) {
// This state property is derived from selectedProjectIds and selectedAnnotationType.
// It is mainly used to determine the selected items in the multiselect form item.
const [selectedFilters, setSelectedFilters] = useState(Array<string>);
const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
const [filterOptions, setFilterOptions] = useState<Array<NestedSelectOptions>>([]);
const activeUser = useWkSelector((state) => state.activeUser);
const allProjects = useFetch(
async () => {
if (activeUser == null || !isUserAdminOrTeamManager(activeUser)) return [];
return await getProjects();
},
[],
[],
);

const { data: allProjects = [] } = useQueryWithErrorHandling({
queryKey: ["projects"],
enabled: activeUser != null && isUserAdminOrTeamManager(activeUser),
queryFn: getProjects,
});

useEffect(() => {
const selectedKeys =
Expand All @@ -84,7 +81,10 @@ function ProjectAndAnnotationTypeDropdown({
value: project.id,
};
});
let allOptions = [ANNOTATION_TYPE_FILTERS, ANNOTATION_STATE_FILTERS];
const allOptions: Array<NestedSelectOptions> = [
ANNOTATION_TYPE_FILTERS,
ANNOTATION_STATE_FILTERS,
];
if (projectOptions.length > 0) {
allOptions.push({ label: "Filter projects (only tasks)", options: projectOptions });
}
Expand Down
Loading
Loading