wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-02 12:20:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show more stats in leaderboard table

Browse Source
This commit is contained in:
notmd
2023-01-24 02:04:00 +07:00
parent 7f993b670c
commit b7056eccd1
13 changed files with 56 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Dashboard/LeaderboardTable.tsx → website/src/components/Dashboard/LeaderboardWidget.tsx
+8 -14
View File
@@ -1,11 +1,9 @@
import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
import { Card, CardBody, Link, Text } from "@chakra-ui/react";
import NextLink from "next/link";
import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
import { LeaderboardTable } from "src/components/LeaderboardTable";
import { LeaderboardTimeFrame } from "src/types/Leaderboard";
export function LeaderboardTable() {
const backgroundColor = useColorModeValue("white", "gray.700");
const accentColor = useColorModeValue("gray.200", "gray.900");
export function LeaderboardWidget() {
return (
<main className="h-fit col-span-3">
<div className="flex flex-col gap-4">
@@ -17,15 +15,11 @@ export function LeaderboardTable() {
</Text>
</Link>
</div>
<Box
backgroundColor={backgroundColor}
boxShadow="base"
dropShadow={accentColor}
borderRadius="xl"
className="p-6 shadow-sm"
>
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
</Box>
<Card>
<CardBody>
<LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={5} />
</CardBody>
</Card>
</div>
</main>
);
website/src/components/Dashboard/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export { LeaderboardTable } from "./LeaderboardTable";
export { LeaderboardWidget } from "./LeaderboardWidget";
export { TaskOption } from "./TaskOption";
export { WelcomeCard } from "./WelcomeCard";
website/src/components/LeaderboardGridCell/index.tsx
-1
View File
@@ -1 +0,0 @@
export * from "./LeaderboardGridCell";
website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx → website/src/components/LeaderboardTable/LeaderboardTable.tsx
+10 -7
View File
@@ -13,13 +13,13 @@ const columnHelper = createColumnHelper<LeaderboardEntity>();
/**
* Presents a grid of leaderboard entries with more detailed information.
*/
const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
export const LeaderboardTable = ({ timeFrame, limit }: { timeFrame: LeaderboardTimeFrame; limit: number }) => {
const { t } = useTranslation("leaderboard");
const {
data: reply,
isLoading,
error,
} = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
} = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}&limit=${limit}`, get, {
revalidateOnMount: true,
});
@@ -35,7 +35,13 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
header: t("score"),
}),
columnHelper.accessor("prompts", {
header: t("pro"),
header: t("prompt"),
}),
columnHelper.accessor((row) => row.replies_assistant + row.replies_prompter, {
header: t("reply"),
}),
columnHelper.accessor((row) => row.labels_full + row.labels_simple, {
header: t("label"),
}),
],
[t]
@@ -45,7 +51,6 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
const val = new Date(reply?.last_updated);
return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
}, [t, reply?.last_updated]);
console.log(reply, isLoading);
if (isLoading) {
return <CircularProgress isIndeterminate></CircularProgress>;
@@ -55,7 +60,5 @@ const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame })
return <span>Unable to load leaderboard</span>;
}
return <DataTable data={reply?.leaderboard || []} columns={columns} caption={lastUpdated}></DataTable>;
return <DataTable data={reply.leaderboard} columns={columns} caption={lastUpdated}></DataTable>;
};
export { LeaderboardGridCell };
website/src/components/LeaderboardTable/index.tsx
+1
View File
@@ -0,0 +1 @@
export * from "./LeaderboardTable";
website/src/components/UserTable.tsx
+17 -15
View File
@@ -1,4 +1,4 @@
import { IconButton } from "@chakra-ui/react";
import { Card, CardBody, IconButton } from "@chakra-ui/react";
import { createColumnHelper } from "@tanstack/react-table";
import { Pencil } from "lucide-react";
import Link from "next/link";
@@ -90,19 +90,21 @@ export const UserTable = memo(function UserTable() {
};
return (
<>
<DataTable
data={data?.items || []}
columns={columns}
caption="Users"
onNextClick={toNextPage}
onPreviousClick={toPreviousPage}
disableNext={!data?.next}
disablePrevious={!data?.prev}
filterValues={filterValues}
onFilterChange={handleFilterValuesChange}
></DataTable>
{error && "Unable to load users."}
</>
<Card>
<CardBody>
<DataTable
data={data?.items || []}
columns={columns}
caption="Users"
onNextClick={toNextPage}
onPreviousClick={toPreviousPage}
disableNext={!data?.next}
disablePrevious={!data?.prev}
filterValues={filterValues}
onFilterChange={handleFilterValuesChange}
></DataTable>
{error && "Unable to load users."}
</CardBody>
</Card>
);
});
website/src/lib/oasst_api_client.ts
+8 -2
View File
@@ -262,8 +262,14 @@ export class OasstApiClient {
/**
* Returns the current leaderboard ranking.
*/
async fetch_leaderboard(time_frame: LeaderboardTimeFrame): Promise<LeaderboardReply> {
return this.get(`/api/v1/leaderboards/${time_frame}`);
async fetch_leaderboard(
time_frame: LeaderboardTimeFrame,
{ limit = 20 }: { limit?: number }
): Promise<LeaderboardReply> {
const params = new URLSearchParams({
limit: limit.toString(),
});
return this.get(`/api/v1/leaderboards/${time_frame}?${params.toString()}`);
}
/**
website/src/pages/api/leaderboard.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import { LeaderboardTimeFrame } from "src/types/Leaderboard";
*/
const handler = withoutRole("banned", async (req, res) => {
const time_frame = (req.query.time_frame as LeaderboardTimeFrame) ?? LeaderboardTimeFrame.day;
const info = await oasstApiClient.fetch_leaderboard(time_frame);
const info = await oasstApiClient.fetch_leaderboard(time_frame, { limit: req.query.limit as unknown as number });
res.status(200).json(info);
});
website/src/pages/dashboard.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { useEffect, useMemo, useState } from "react";
import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
import { LeaderboardWidget, TaskOption, WelcomeCard } from "src/components/Dashboard";
import { getDashboardLayout } from "src/components/Layout";
import { TaskCategory } from "src/components/Tasks/TaskTypes";
import { get } from "src/lib/api";
@@ -42,7 +42,7 @@ const Dashboard = () => {
<Flex direction="column" gap="10">
<WelcomeCard />
<TaskOption content={availableTaskTypes} />
<LeaderboardTable />
<LeaderboardWidget />
</Flex>
</>
);
website/src/pages/leaderboard.tsx
+5 -5
View File
@@ -2,8 +2,8 @@ import { Box, Card, CardBody, Heading, Tab, TabList, TabPanel, TabPanels, Tabs }
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { getDashboardLayout } from "src/components/Layout";
import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
import { LeaderboardTable } from "src/components/LeaderboardTable";
import { LeaderboardTimeFrame } from "src/types/Leaderboard";
const Leaderboard = () => {
@@ -30,16 +30,16 @@ const Leaderboard = () => {
<TabPanels>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
<LeaderboardTable timeFrame={LeaderboardTimeFrame.day} limit={20} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.week} />
<LeaderboardTable timeFrame={LeaderboardTimeFrame.week} limit={20} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.month} />
<LeaderboardTable timeFrame={LeaderboardTimeFrame.month} limit={20} />
</TabPanel>
<TabPanel p="0">
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.total} />
<LeaderboardTable timeFrame={LeaderboardTimeFrame.total} limit={20} />
</TabPanel>
</TabPanels>
</Tabs>