Merge pull request #692 from LAION-AI/672-live-leaderboards

Udpating the leaderboard components to use real data

website/src/components/Dashboard/LeaderboardTable.tsx

@@ -1,55 +1,12 @@
-import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
 import NextLink from "next/link";
+import { get } from "src/lib/api";
+import useSWR from "swr";
 
 export function LeaderboardTable() {
   const backgroundColor = useColorModeValue("white", "gray.700");
   const accentColor = useColorModeValue("gray.200", "gray.900");
-
-  //need to add streak info to chart
-
-  const leaderInfo = [
-    {
-      name: "fozziethebeat#6690",
-      image: "/images/temp-avatars/av1.jpg",
-      score: "5,208",
-      arrowDir: "increase",
-      streak: false,
-      streakCount: "5-Day Streak",
-    },
-    {
-      name: "k_nearest_neighbor#8579",
-      image: "/images/temp-avatars/av2.jpg",
-      score: "5,164",
-      arrowDir: "decrease",
-      streak: false,
-      streakCount: "",
-    },
-    {
-      name: "andreaskoepf#2266",
-      image: "/images/temp-avatars/av3.jpg",
-      score: "5,120",
-      arrowDir: "",
-      streak: false,
-      streakCount: "2-Day Streak",
-    },
-    {
-      name: "AbdBarho#1684",
-      image: "/images/temp-avatars/av4.jpg",
-      score: "4,260",
-      arrowDir: "",
-      streak: false,
-      streakCount: "",
-    },
-    {
-      name: "zu#9016",
-      image: "/images/temp-avatars/av5.jpg",
-      score: "3,608",
-      arrowDir: "",
-      streak: false,
-      streakCount: "",
-    },
-  ];
-
+  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
   return (
     <main className="h-fit col-span-3">
       <div className="flex flex-col gap-4">
@@ -75,15 +32,19 @@ export function LeaderboardTable() {
                 <p>Score</p>
               </div>
             </div>
-            {leaderInfo.map((item, itemIndex) => (
-              <div key={itemIndex} className="grid grid-cols-4 items-center">
+            {leaderboardEntries?.map(({ display_name, score }, idx) => (
+              <div key={idx} className="grid grid-cols-4 items-center">
                 <div className="flex items-center gap-3">
+                  {/*
                   <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
-                  <p>{item.name}</p>
+                    */}
+                  <p>{display_name}</p>
+                  {/*
                   <Badge colorScheme="purple">{item.streakCount}</Badge>
+                    */}
                 </div>
                 <Box bg={backgroundColor} className="col-start-4 flex justify-center">
-                  <p>{item.score}</p>
+                  <p>{score}</p>
                 </Box>
               </div>
             ))}

website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx

@@ -0,0 +1,97 @@
+import { Avatar, Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+import { get } from "src/lib/api";
+import useSWR from "swr";
+
+/**
+ * Presents a grid of leaderboard entries with more detailed information.
+ */
+const LeaderboardGridCell = () => {
+  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const columns = `repeat(${FILTER.length}, 1fr)`;
+
+  return (
+    <>
+      <Grid>
+        <GridItem
+          colSpan={4}
+          bg={backgroundColor}
+          display="grid"
+          gridTemplateColumns={columns}
+          p="4"
+          borderRadius="lg"
+          mb="4"
+          shadow="base"
+        >
+          {FILTER.map(({ title, GridItemProps }, index) => (
+            <GridItem key={index} display="flex" {...GridItemProps}>
+              <Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
+                <Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
+                  {title}
+                </Text>
+
+                <FiChevronDown size="16" />
+              </Box>
+            </GridItem>
+          ))}
+        </GridItem>
+      </Grid>
+      <Grid templateColumns={columns} bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
+        {leaderboardEntries?.map(({ display_name, ranking, score }, index) => (
+          <GridItem key={index} colSpan={4} display="grid" gridTemplateColumns={columns} borderRadius="lg" p="2">
+            <GridItem overflow="hidden">
+              <Box display="flex" gap="2">
+                <Avatar size="xs" />
+                <Text>{display_name}</Text>
+              </Box>
+            </GridItem>
+            <GridItem>
+              <GridItem display="flex" justifyContent="center">
+                <Text>{ranking}</Text>
+              </GridItem>
+            </GridItem>
+            <GridItem display="flex" justifyContent="center">
+              <Text>{score}</Text>
+            </GridItem>
+            {/*
+            <GridItem display="flex" justifyContent="center">
+              <Text fontSize="xl">{item.medal}</Text>
+            </GridItem>
+              */}
+          </GridItem>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+/**
+ * Specifies the table headers in the grid.
+ */
+const FILTER = [
+  {
+    title: "User",
+    isActive: false,
+    GridItemProps: { justifyContent: "start" },
+  },
+  {
+    title: "Rank",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+  {
+    title: "Score",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+  /*
+  {
+    title: "Medal",
+    isActive: false,
+    GridItemProps: { justifyContent: "center" },
+  },
+   */
+];
+
+export { LeaderboardGridCell };

website/src/components/LeaderboardGridCell/index.tsx

@@ -0,0 +1 @@
+export * from "./LeaderboardGridCell";

website/src/components/RankItem.tsx

@@ -1,58 +0,0 @@
-import { Avatar, Box, GridItem, Text } from "@chakra-ui/react";
-
-const RankItem = () => {
-  const leaderInfo = [
-    {
-      username: "fozziethebeat",
-      rank: 1,
-      score: 530,
-      medal: "\uD83E\uDD47",
-    },
-    {
-      username: "k_nearest",
-      rank: 2,
-      score: 420,
-      medal: "\uD83E\uDD48",
-    },
-    {
-      username: "zu",
-      rank: 3,
-      score: 160,
-      medal: "\uD83E\uDD49",
-    },
-    {
-      username: "Abd",
-      rank: 4,
-      score: 140,
-      medal: "",
-    },
-  ];
-
-  return (
-    <>
-      {leaderInfo.map((item, index) => (
-        <GridItem key={index} colSpan={4} display="grid" gridTemplateColumns="repeat(4, 1fr)" borderRadius="lg" p="2">
-          <GridItem overflow="hidden">
-            <Box display="flex" gap="2">
-              <Avatar size="xs" />
-              <Text>{item.username}</Text>
-            </Box>
-          </GridItem>
-          <GridItem>
-            <GridItem display="flex" justifyContent="center">
-              <Text>{item.rank}</Text>
-            </GridItem>
-          </GridItem>
-          <GridItem display="flex" justifyContent="center">
-            <Text>{item.score}</Text>
-          </GridItem>
-          <GridItem display="flex" justifyContent="center">
-            <Text fontSize="xl">{item.medal}</Text>
-          </GridItem>
-        </GridItem>
-      ))}
-    </>
-  );
-};
-
-export default RankItem;

website/src/lib/oasst_api_client.ts

@@ -121,11 +121,19 @@ export class OasstApiClient {
     });
   }
 
-  //Fetch valid labels. This is called every task. though the call may be redundant
-  //keeping this for future where the valid labels may change per task
-  async fetch_valid_text(): Promise<void> {
+  /**
+   * Returns the valid labels for messages.
+   */
+  async fetch_valid_text(): Promise<any> {
     return this.get(`/api/v1/text_labels/valid_labels`);
   }
+
+  /**
+   * Returns the current leaderboard ranking.
+   */
+  async fetch_leaderboard(): Promise<any> {
+    return this.get(`/api/v1/experimental/leaderboards/create/assistant`);
+  }
 }
 
 const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);

website/src/pages/api/leaderboard.ts

@@ -0,0 +1,18 @@
+import { withoutRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+
+/**
+ * Returns the set of valid labels that can be applied to messages.
+ */
+const handler = withoutRole("banned", async (req, res) => {
+  const { leaderboard } = await oasstApiClient.fetch_leaderboard();
+  res.status(200).json(
+    leaderboard.map(({ display_name, ranking, score }) => ({
+      display_name,
+      ranking,
+      score,
+    }))
+  );
+});
+
+export default handler;

website/src/pages/leaderboard.tsx

@@ -0,0 +1,25 @@
+import { Box, Heading } from "@chakra-ui/react";
+import Head from "next/head";
+import { getDashboardLayout } from "src/components/Layout";
+import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+
+const Leaderboard = () => {
+  return (
+    <>
+      <Head>
+        <title>Leaderboard - Open Assistant</title>
+        <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
+      </Head>
+      <Box display="flex" flexDirection="column">
+        <Heading fontSize="2xl" fontWeight="bold" pb="4">
+          Leaderboard
+        </Heading>
+        <LeaderboardGridCell />
+      </Box>
+    </>
+  );
+};
+
+Leaderboard.getLayout = getDashboardLayout;
+
+export default Leaderboard;

website/src/pages/leaderboard/index.tsx

@@ -1,80 +0,0 @@
-import { Box, Grid, GridItem, GridItemProps, Heading, Text, useColorModeValue } from "@chakra-ui/react";
-import Head from "next/head";
-import { FiChevronDown } from "react-icons/fi";
-import { getDashboardLayout } from "src/components/Layout";
-import RankItem from "src/components/RankItem";
-
-const Leaderboard = () => {
-  const backgroundColor = useColorModeValue("white", "gray.800");
-
-  const GridProps: GridItemProps = {
-    justifyContent: "start",
-  };
-  const filter = [
-    {
-      title: "User",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "start" },
-    },
-    {
-      title: "Rank",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-    {
-      title: "Score",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-    {
-      title: "Medal",
-      isActive: false,
-      GridItemProps: { ...GridProps, justifyContent: "center" },
-    },
-  ];
-
-  return (
-    <>
-      <Head>
-        <title>Leaderboard - Open Assistant</title>
-        <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
-      </Head>
-      <Box display="flex" flexDirection="column">
-        <Heading fontSize="2xl" fontWeight="bold" pb="4">
-          Leaderboard
-        </Heading>
-        <Grid>
-          <GridItem
-            colSpan={4}
-            bg={backgroundColor}
-            display="grid"
-            gridTemplateColumns="repeat(4, 1fr)"
-            p="4"
-            borderRadius="lg"
-            mb="4"
-            shadow="base"
-          >
-            {filter.map((item, index) => (
-              <GridItem key={index} display="flex" {...item.GridItemProps}>
-                <Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
-                  <Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
-                    {item.title}
-                  </Text>
-
-                  <FiChevronDown size="16" />
-                </Box>
-              </GridItem>
-            ))}
-          </GridItem>
-        </Grid>
-        <Grid templateColumns="repeat(4, 1fr)" bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
-          <RankItem />
-        </Grid>
-      </Box>
-    </>
-  );
-};
-
-Leaderboard.getLayout = getDashboardLayout;
-
-export default Leaderboard;

website/src/types/Leaderboard.ts

@@ -0,0 +1,5 @@
+export interface LeaderboardEntry {
+  display_name: string;
+  ranking: number;
+  score: number;
+}