wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-27 11:18:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

implement trollboard UI (#1301)

Browse Source 
* implement trollboard UI

* remove unneeded code

* add link to user

* user link in leaderboard
This commit is contained in:
notmd
2023-02-08 13:49:00 +09:00
committed by GitHub
parent 59dbfea48f
commit a46e4a2bb1
13 changed files with 389 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Layout.tsx
+5
View File
@@ -74,6 +74,11 @@ export const getAdminLayout = (page: React.ReactElement) => (
pathname: "/admin",
icon: Users,
},
{
labelID: "trollboard",
pathname: "/admin/trollboard",
icon: BarChart2,
},
{
labelID: "status",
pathname: "/admin/status",
website/src/components/LeaderboardTable/LeaderboardTable.tsx
+38 -69
View File
@@ -1,15 +1,16 @@
import { Box, CircularProgress, Flex, useColorModeValue, useToken } from "@chakra-ui/react";
import { Box, CircularProgress, Flex, Link, useColorModeValue } from "@chakra-ui/react";
import { createColumnHelper } from "@tanstack/react-table";
import { MoreHorizontal } from "lucide-react";
import NextLink from "next/link";
import { useSession } from "next-auth/react";
import { useTranslation } from "next-i18next";
import React, { useCallback, useMemo, useState } from "react";
import { get } from "src/lib/api";
import { colors } from "src/styles/Theme/colors";
import React, { useMemo } from "react";
import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
import useSWRImmutable from "swr/immutable";
import { DataTable, DataTableColumnDef, DataTableRowPropsCallback } from "../DataTable";
import { DataTable, DataTableColumnDef } from "../DataTable";
import { useBoardPagination } from "./useBoardPagination";
import { useBoardRowProps } from "./useBoardRowProps";
import { useFetchBoard } from "./useFetchBoard";
type WindowLeaderboardEntity = LeaderboardEntity & { isSpaceRow?: boolean };
const columnHelper = createColumnHelper<WindowLeaderboardEntity>();
@@ -34,10 +35,13 @@ export const LeaderboardTable = ({
data: reply,
isLoading,
error,
} = useSWRImmutable<LeaderboardReply & { user_stats_window?: LeaderboardReply["leaderboard"] }>(
`/api/leaderboard?time_frame=${timeFrame}&limit=${limit}&includeUserStats=${!hideCurrentUserRanking}`,
get
lastUpdated,
} = useFetchBoard<LeaderboardReply & { user_stats_window?: LeaderboardReply["leaderboard"] }>(
`/api/leaderboard?time_frame=${timeFrame}&limit=${limit}&includeUserStats=${!hideCurrentUserRanking}`
);
const { data: session } = useSession();
const isAdmin = session?.user?.role === "admin";
const columns: DataTableColumnDef<WindowLeaderboardEntity>[] = useMemo(
() => [
{
@@ -49,6 +53,14 @@ export const LeaderboardTable = ({
},
columnHelper.accessor("display_name", {
header: t("user"),
cell: ({ getValue, row }) =>
isAdmin ? (
<Link as={NextLink} href={`/admin/manage_user/${row.original.user_id}`}>
{getValue()}
</Link>
) : (
getValue()
),
}),
columnHelper.accessor("leader_score", {
header: t("score"),
@@ -63,40 +75,32 @@ export const LeaderboardTable = ({
header: t("label"),
}),
],
[t]
[isAdmin, t]
);
const lastUpdated = useMemo(() => {
const val = new Date(reply?.last_updated);
return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
}, [t, reply?.last_updated]);
const [page, setPage] = useState(1);
const {
data: paginatedData,
end,
...pagnationProps
} = useBoardPagination({ rowPerPage, data: reply?.leaderboard, limit });
const data: WindowLeaderboardEntity[] = useMemo(() => {
if (!reply) {
return [];
}
const start = (page - 1) * rowPerPage;
const end = start + rowPerPage;
const leaderBoardEntities = reply.leaderboard.slice(start, end);
if (hideCurrentUserRanking || !reply.user_stats_window) {
return leaderBoardEntities;
if (hideCurrentUserRanking || !reply?.user_stats_window) {
return paginatedData;
}
const userStatsWindow: WindowLeaderboardEntity[] = reply.user_stats_window;
const userStats = userStatsWindow.find((stats) => stats.highlighted);
if (userStats.rank > end) {
leaderBoardEntities.push(
if (userStats && userStats.rank > end) {
paginatedData.push(
{ isSpaceRow: true } as WindowLeaderboardEntity,
...reply.user_stats_window.filter(
(stats) =>
leaderBoardEntities.findIndex((leaderBoardEntity) => leaderBoardEntity.user_id === stats.user_id) === -1
(stats) => paginatedData.findIndex((leaderBoardEntity) => leaderBoardEntity.user_id === stats.user_id) === -1
) // filter to avoid duplicated row
);
}
return leaderBoardEntities;
}, [page, rowPerPage, reply, hideCurrentUserRanking]);
return paginatedData;
}, [hideCurrentUserRanking, reply?.user_stats_window, end, paginatedData]);
const rowProps = useLeaderboardRowProps();
const rowProps = useBoardRowProps<WindowLeaderboardEntity>();
if (isLoading) {
return <CircularProgress isIndeterminate></CircularProgress>;
@@ -106,19 +110,13 @@ export const LeaderboardTable = ({
return <span>Unable to load leaderboard</span>;
}
const maxPage = Math.ceil(reply.leaderboard.length / rowPerPage);
return (
<DataTable
<DataTable<WindowLeaderboardEntity>
data={data}
columns={columns}
caption={lastUpdated}
disablePagination={limit <= rowPerPage}
disableNext={page >= maxPage}
disablePrevious={page === 1}
onNextClick={() => setPage((p) => p + 1)}
onPreviousClick={() => setPage((p) => p - 1)}
rowProps={rowProps}
{...pagnationProps}
></DataTable>
);
};
@@ -131,32 +129,3 @@ const SpaceRow = () => {
</Flex>
);
};
const useLeaderboardRowProps = () => {
const borderColor = useToken("colors", useColorModeValue(colors.light.active, colors.dark.active));
return useCallback<DataTableRowPropsCallback<WindowLeaderboardEntity>>(
(row) => {
const rowData = row.original;
return rowData.highlighted
? {
sx: {
// https://stackoverflow.com/questions/37963524/how-to-apply-border-radius-to-tr-in-bootstrap
position: "relative",
"td:first-of-type:before": {
borderLeft: `6px solid ${borderColor}`,
content: `""`,
display: "block",
width: "10px",
height: "100%",
left: 0,
top: 0,
borderRadius: "6px 0 0 6px",
position: "absolute",
},
},
}
: {};
},
[borderColor]
);
};
website/src/components/LeaderboardTable/TrollboardTable.tsx
+124
View File
@@ -0,0 +1,124 @@
import { Box, CircularProgress, Flex, Link } from "@chakra-ui/react";
import { createColumnHelper } from "@tanstack/react-table";
import { ThumbsDown, ThumbsUp } from "lucide-react";
import NextLink from "next/link";
import { FetchTrollBoardResponse, TrollboardEntity, TrollboardTimeFrame } from "src/types/Trollboard";
import { DataTable } from "../DataTable";
import { useBoardPagination } from "./useBoardPagination";
import { useBoardRowProps } from "./useBoardRowProps";
import { useFetchBoard } from "./useFetchBoard";
const columnHelper = createColumnHelper<TrollboardEntity>();
const toPercentage = (num: number) => `${Math.round(num * 100)}%`;
const columns = [
columnHelper.accessor("rank", {}),
columnHelper.accessor("display_name", {
header: "Display name",
cell: ({ getValue, row }) => (
<Link as={NextLink} href={`/admin/manage_user/${row.original.user_id}`}>
{getValue()}
</Link>
),
}),
columnHelper.accessor("troll_score", {
header: "Troll score",
}),
columnHelper.accessor("red_flags", {
header: "Red flags",
}),
columnHelper.accessor((row) => [row.upvotes, row.downvotes] as const, {
id: "vote",
cell: ({ getValue }) => {
const [up, down] = getValue();
return (
<Flex gap={2} justifyItems="center" alignItems="center">
<ThumbsUp></ThumbsUp>
{up}
<ThumbsDown></ThumbsDown>
{down}
</Flex>
);
},
}),
columnHelper.accessor((row) => row.spam + row.spam_prompts, {
header: "Spam",
}),
columnHelper.accessor("lang_mismach", {
header: "Lang mismach",
}),
columnHelper.accessor("not_appropriate", {
header: "Not appropriate",
}),
columnHelper.accessor("pii", {}),
columnHelper.accessor("hate_speech", {
header: "Hate speech",
}),
columnHelper.accessor("sexual_content", {
header: "Sexual Content",
}),
columnHelper.accessor("political_content", {
header: "Political Content",
}),
columnHelper.accessor("quality", {
cell: ({ getValue }) => toPercentage(getValue()),
}),
columnHelper.accessor("helpfulness", {
cell: ({ getValue }) => toPercentage(getValue()),
}),
columnHelper.accessor("humor", {
cell: ({ getValue }) => toPercentage(getValue()),
}),
columnHelper.accessor("violence", {
cell: ({ getValue }) => toPercentage(getValue()),
}),
columnHelper.accessor("toxicity", {
cell: ({ getValue }) => toPercentage(getValue()),
}),
];
export const TrollboardTable = ({
limit,
rowPerPage,
timeFrame,
}: {
timeFrame: TrollboardTimeFrame;
limit: number;
rowPerPage: number;
}) => {
const {
data: trollboardRes,
isLoading,
error,
lastUpdated,
} = useFetchBoard<FetchTrollBoardResponse>(`/api/admin/trollboard?time_frame=${timeFrame}&limit=${limit}`);
const { data, ...paginationProps } = useBoardPagination({ rowPerPage, data: trollboardRes?.trollboard, limit });
const rowProps = useBoardRowProps<TrollboardEntity>();
if (isLoading) {
return <CircularProgress isIndeterminate></CircularProgress>;
}
if (error) {
return <span>Unable to load leaderboard</span>;
}
return (
<Box
sx={{
"th,td": {
px: 2,
},
}}
>
<DataTable<TrollboardEntity>
data={data}
columns={columns}
caption={lastUpdated}
rowProps={rowProps}
{...paginationProps}
></DataTable>
</Box>
);
};
website/src/components/LeaderboardTable/useBoardPagination.ts
+34
View File
@@ -0,0 +1,34 @@
import { useState } from "react";
export const useBoardPagination = <T>({
rowPerPage,
limit,
...res
}: {
rowPerPage: number;
data?: T[];
limit: number;
}) => {
const data = res.data || [];
const [page, setPage] = useState(1);
const maxPage = data ? Math.ceil(data.length / rowPerPage) : 0;
const disablePagination = limit <= rowPerPage;
const disableNext = page >= maxPage;
const disablePrevious = page === 1;
const onNextClick = () => setPage((p) => p + 1);
const onPreviousClick = () => setPage((p) => p - 1);
const start = (page - 1) * rowPerPage;
const end = start + rowPerPage;
const entities = data.slice(start, end);
return {
page,
data: entities,
end,
disablePrevious,
disableNext,
disablePagination,
onNextClick,
onPreviousClick,
};
};
website/src/components/LeaderboardTable/useBoardRowProps.ts
+34
View File
@@ -0,0 +1,34 @@
import { useColorModeValue, useToken } from "@chakra-ui/react";
import { useCallback } from "react";
import { colors } from "src/styles/Theme/colors";
import { DataTableRowPropsCallback } from "../DataTable";
export const useBoardRowProps = <T extends { highlighted: boolean }>() => {
const borderColor = useToken("colors", useColorModeValue(colors.light.active, colors.dark.active));
return useCallback<DataTableRowPropsCallback<T>>(
(row) => {
const rowData = row.original;
return rowData.highlighted
? {
sx: {
// https://stackoverflow.com/questions/37963524/how-to-apply-border-radius-to-tr-in-bootstrap
position: "relative",
"td:first-of-type:before": {
borderLeft: `6px solid ${borderColor}`,
content: `""`,
display: "block",
width: "10px",
height: "100%",
left: 0,
top: 0,
borderRadius: "6px 0 0 6px",
position: "absolute",
},
},
}
: {};
},
[borderColor]
);
};
website/src/components/LeaderboardTable/useFetchBoard.ts
+19
View File
@@ -0,0 +1,19 @@
import { useTranslation } from "next-i18next";
import { useMemo } from "react";
import { get } from "src/lib/api";
import useSWRImmutable from "swr/immutable";
export const useFetchBoard = <T extends { last_updated: string }>(url: string) => {
const { t } = useTranslation("leaderboard");
const res = useSWRImmutable<T>(url, get);
const lastUpdated = useMemo(() => {
const val = res.data ? new Date(res.data.last_updated) : new Date();
return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
}, [res.data, t]);
return {
...res,
lastUpdated,
};
};