Skip to content

make crossmatch results page more useful #50

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
Kraysent wants to merge 3 commits into
base: master
Choose a base branch
from
Open

make crossmatch results page more useful #50

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
050bbc8
make crossmatch results page more useful
Kraysent Apr 21, 2026
8ce0e03
move triage status as a badge
Kraysent Apr 21, 2026
4462640
remove status filter
Kraysent Apr 21, 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
73 changes: 19 additions & 54 deletions src/pages/CrossmatchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { getCrossmatchRecords } from "../clients/admin/sdk.gen";
import type {
GetRecordsCrossmatchResponse,
RecordCrossmatch,
RecordCrossmatchStatus,
RecordTriageStatus,
ValidationError,
} from "../clients/admin/types.gen";
Expand All @@ -27,45 +26,35 @@ import { adminClient } from "../clients/config";

interface CrossmatchFiltersProps {
tableName: string | null;
status: RecordCrossmatchStatus | null;
triageStatus: string | null;
pageSize: number;
onApplyFilters: (
tableName: string,
status: string,
triageStatus: string,
pageSize: number,
) => void;
}

function CrossmatchFilters({
tableName,
status,
triageStatus,
pageSize,
onApplyFilters,
}: CrossmatchFiltersProps): ReactElement {
const [localStatus, setLocalStatus] = useState<string>(status || "all");
const [localTriageStatus, setLocalTriageStatus] = useState<string>(
triageStatus ?? "pending",
);
const [localPageSize, setLocalPageSize] = useState<number>(pageSize);
const [localTableName, setLocalTableName] = useState<string>(tableName || "");

useEffect(() => {
setLocalStatus(status || "all");
setLocalTriageStatus(triageStatus ?? "pending");
setLocalPageSize(pageSize);
setLocalTableName(tableName || "");
}, [status, triageStatus, pageSize, tableName]);
}, [triageStatus, pageSize, tableName]);

function applyFilters(): void {
onApplyFilters(
localTableName,
localStatus,
localTriageStatus,
localPageSize,
);
onApplyFilters(localTableName, localTriageStatus, localPageSize);
}

return (
Expand All @@ -78,18 +67,6 @@ function CrossmatchFilters({
onEnter={applyFilters}
/>
<Link href={`/table/${localTableName.trim()}`} external />
<DropdownFilter
title="Status"
options={[
{ value: "all", label: "All Statuses" },
{ value: "unprocessed", label: "Unprocessed" },
{ value: "new", label: "New" },
{ value: "collided", label: "Collided" },
{ value: "existing", label: "Existing" },
]}
value={localStatus}
onChange={setLocalStatus}
/>
<DropdownFilter
title="Manual check status"
options={[
Expand Down Expand Up @@ -127,12 +104,23 @@ function CrossmatchResults({
data,
loading,
}: CrossmatchResultsProps): ReactElement {
function getTriageStatusLabel(triageStatus: RecordTriageStatus): string {
return getResource(`crossmatch.triage.${triageStatus}`).Title;
}

function getRecordName(record: RecordCrossmatch): ReactElement {
const displayName = record.catalogs.designation?.name || record.record_id;
const triageStatusLabel = getTriageStatusLabel(record.triage_status);
const triageBadgeType =
record.triage_status === "resolved" ? "success" : "warning";

return (
<Link href={`/records/${record.record_id}/crossmatch`}>
{displayName}
</Link>
<div className="flex items-center gap-2">
<Link href={`/records/${record.record_id}/crossmatch`}>
{displayName}
</Link>
<Badge type={triageBadgeType}>{triageStatusLabel}</Badge>
</div>
);
}

Expand All @@ -156,14 +144,6 @@ function CrossmatchResults({
);
}

function getStatusLabel(status: RecordCrossmatchStatus): string {
return getResource(`crossmatch.status.${status}`).Title;
}

function getTriageStatusLabel(triageStatus: RecordTriageStatus): string {
return getResource(`crossmatch.triage.${triageStatus}`).Title;
}

const columns: Column[] = [
{
name: "Record name",
Expand All @@ -174,8 +154,6 @@ function CrossmatchResults({
return <span>NULL</span>;
},
},
{ name: "Status" },
{ name: "Manual check status" },
{
name: "Candidates",
renderCell: (recordIndex: CellPrimitive) => {
Expand All @@ -188,10 +166,8 @@ function CrossmatchResults({
];

const tableData: Record<string, CellPrimitive>[] =
data?.records.map((record: RecordCrossmatch, index: number) => ({
data?.records.map((_: RecordCrossmatch, index: number) => ({
"Record name": index,
Status: getStatusLabel(record.status),
"Manual check status": getTriageStatusLabel(record.triage_status),
Candidates: index,
})) || [];

Expand All @@ -200,7 +176,6 @@ function CrossmatchResults({

async function fetcher(
tableName: string | null,
status: RecordCrossmatchStatus | null,
triageStatus: RecordTriageStatus | null,
page: number,
pageSize: number,
Expand All @@ -213,7 +188,6 @@ async function fetcher(
client: adminClient,
query: {
table_name: tableName,
status: status,
triage_status: triageStatus,
page: page,
page_size: pageSize,
Expand All @@ -239,7 +213,6 @@ export function CrossmatchResultsPage(): ReactElement {
const [searchParams, setSearchParams] = useSearchParams();

const tableName = searchParams.get("table_name");
const status = searchParams.get("status") as RecordCrossmatchStatus | null;
const triageStatusParam = searchParams.get("triage_status");
const apiTriageStatus: RecordTriageStatus | null =
triageStatusParam === null || triageStatusParam === ""
Expand All @@ -255,8 +228,8 @@ export function CrossmatchResultsPage(): ReactElement {
}, [tableName]);

const { data, loading, error } = useDataFetching(
() => fetcher(tableName, status, apiTriageStatus, page, pageSize),
[tableName, status, apiTriageStatus, page, pageSize],
() => fetcher(tableName, apiTriageStatus, page, pageSize),
[tableName, apiTriageStatus, page, pageSize],
);

function handlePageChange(newPage: number): void {
Expand All @@ -267,7 +240,6 @@ export function CrossmatchResultsPage(): ReactElement {

function handleApplyFilters(
newTableName: string,
newStatus: string,
newTriageStatus: string,
newPageSize: number,
): void {
Expand All @@ -279,12 +251,6 @@ export function CrossmatchResultsPage(): ReactElement {
newSearchParams.delete("table_name");
}

if (newStatus === "all") {
newSearchParams.delete("status");
} else {
newSearchParams.set("status", newStatus);
}

if (newTriageStatus === "all") {
newSearchParams.set("triage_status", "all");
} else {
Expand Down Expand Up @@ -320,7 +286,6 @@ export function CrossmatchResultsPage(): ReactElement {
<h2 className="text-3xl font-bold mb-4">Crossmatch results</h2>
<CrossmatchFilters
tableName={tableName}
status={status}
triageStatus={triageStatusParam}
pageSize={pageSize}
onApplyFilters={handleApplyFilters}
Expand Down
Loading