From 5732952b3e26f7fe2016347588b21003a0712061 Mon Sep 17 00:00:00 2001 From: Keith Stevens Date: Sat, 14 Jan 2023 10:27:38 +0900 Subject: [PATCH 01/15] Udpating the leaderboard components to use real data --- .../components/Dashboard/LeaderboardTable.tsx | 63 +++--------- .../LeaderboardGridCell.tsx | 97 +++++++++++++++++++ .../components/LeaderboardGridCell/index.tsx | 1 + website/src/components/RankItem.tsx | 58 ----------- website/src/lib/oasst_api_client.ts | 14 ++- website/src/pages/api/leaderboard.ts | 18 ++++ website/src/pages/leaderboard.tsx | 25 +++++ website/src/pages/leaderboard/index.tsx | 80 --------------- website/src/types/Leaderboard.ts | 5 + 9 files changed, 169 insertions(+), 192 deletions(-) create mode 100644 website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx create mode 100644 website/src/components/LeaderboardGridCell/index.tsx delete mode 100644 website/src/components/RankItem.tsx create mode 100644 website/src/pages/api/leaderboard.ts create mode 100644 website/src/pages/leaderboard.tsx delete mode 100644 website/src/pages/leaderboard/index.tsx create mode 100644 website/src/types/Leaderboard.ts diff --git a/website/src/components/Dashboard/LeaderboardTable.tsx b/website/src/components/Dashboard/LeaderboardTable.tsx index cd7d22d4..b6048f3f 100644 --- a/website/src/components/Dashboard/LeaderboardTable.tsx +++ b/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 (
@@ -75,15 +32,19 @@ export function LeaderboardTable() {

Score

- {leaderInfo.map((item, itemIndex) => ( -
+ {leaderboardEntries?.map(({ display_name, score }, idx) => ( +
+ {/* Profile Picture -

{item.name}

+ */} +

{display_name}

+ {/* {item.streakCount} + */}
-

{item.score}

+

{score}
))} diff --git a/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx b/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx new file mode 100644 index 00000000..51dd877e --- /dev/null +++ b/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 ( + <> + + + {FILTER.map(({ title, GridItemProps }, index) => ( + + + + {title} + + + + + + ))} + + + + {leaderboardEntries?.map(({ display_name, ranking, score }, index) => ( + + + + + {display_name} + + + + + {ranking} + + + + {score} + + {/* + + {item.medal} + + */} + + ))} + + + ); +}; + +/** + * 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 }; diff --git a/website/src/components/LeaderboardGridCell/index.tsx b/website/src/components/LeaderboardGridCell/index.tsx new file mode 100644 index 00000000..c4657eb6 --- /dev/null +++ b/website/src/components/LeaderboardGridCell/index.tsx @@ -0,0 +1 @@ +export * from "./LeaderboardGridCell"; diff --git a/website/src/components/RankItem.tsx b/website/src/components/RankItem.tsx deleted file mode 100644 index daed0576..00000000 --- a/website/src/components/RankItem.tsx +++ /dev/null @@ -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) => ( - - - - - {item.username} - - - - - {item.rank} - - - - {item.score} - - - {item.medal} - - - ))} - - ); -}; - -export default RankItem; diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts index 381e6e0f..b2ece97b 100644 --- a/website/src/lib/oasst_api_client.ts +++ b/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 { + /** + * Returns the valid labels for messages. + */ + async fetch_valid_text(): Promise { return this.get(`/api/v1/text_labels/valid_labels`); } + + /** + * Returns the current leaderboard ranking. + */ + async fetch_leaderboard(): Promise { + return this.get(`/api/v1/experimental/leaderboards/create/assistant`); + } } const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY); diff --git a/website/src/pages/api/leaderboard.ts b/website/src/pages/api/leaderboard.ts new file mode 100644 index 00000000..d2a591a8 --- /dev/null +++ b/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; diff --git a/website/src/pages/leaderboard.tsx b/website/src/pages/leaderboard.tsx new file mode 100644 index 00000000..ef2c4529 --- /dev/null +++ b/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 ( + <> + + Leaderboard - Open Assistant + + + + + Leaderboard + + + + + ); +}; + +Leaderboard.getLayout = getDashboardLayout; + +export default Leaderboard; diff --git a/website/src/pages/leaderboard/index.tsx b/website/src/pages/leaderboard/index.tsx deleted file mode 100644 index a350e092..00000000 --- a/website/src/pages/leaderboard/index.tsx +++ /dev/null @@ -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 ( - <> - - Leaderboard - Open Assistant - - - - - Leaderboard - - - - {filter.map((item, index) => ( - - - - {item.title} - - - - - - ))} - - - - - - - - ); -}; - -Leaderboard.getLayout = getDashboardLayout; - -export default Leaderboard; diff --git a/website/src/types/Leaderboard.ts b/website/src/types/Leaderboard.ts new file mode 100644 index 00000000..ea3c9dae --- /dev/null +++ b/website/src/types/Leaderboard.ts @@ -0,0 +1,5 @@ +export interface LeaderboardEntry { + display_name: string; + ranking: number; + score: number; +} From eb0988bee924746f8c2c1ef159afa10fcf5139c6 Mon Sep 17 00:00:00 2001 From: rsandb Date: Fri, 13 Jan 2023 19:57:46 -0600 Subject: [PATCH 02/15] Message Styling For Mobile Decreased padding for mobile and changed some styling to give better contrast --- website/src/components/FlaggableElement.tsx | 31 ++++++++------ .../src/components/Messages/MessageTable.tsx | 4 +- .../components/Messages/MessageTableEntry.tsx | 40 +++++++++++++------ .../Messages/MessageWithChildren.tsx | 24 +++++++---- website/src/components/SideMenuLayout.tsx | 6 +-- website/src/components/Survey/SurveyCard.tsx | 4 +- website/src/components/Tasks/CreateTask.tsx | 4 +- website/src/components/Tasks/LabelTask.tsx | 4 +- website/src/pages/messages/[id]/index.tsx | 5 +-- website/src/pages/messages/index.tsx | 10 ++--- 10 files changed, 81 insertions(+), 51 deletions(-) diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx index f2f3242b..5232e04f 100644 --- a/website/src/components/FlaggableElement.tsx +++ b/website/src/components/FlaggableElement.tsx @@ -1,4 +1,5 @@ import { + Box, Button, Checkbox, Flex, @@ -21,8 +22,9 @@ import { useColorModeValue, useId, } from "@chakra-ui/react"; -import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; +import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; import { useEffect, useReducer } from "react"; +import { FiAlertCircle } from "react-icons/fi"; import { get, post } from "src/lib/api"; import { Message } from "src/types/Conversation"; import { colors } from "styles/Theme/colors"; @@ -98,7 +100,6 @@ export const FlaggableElement = (props: FlaggableElementProps) => { { label_values: [], submittable: false } ); const [isEditing, setIsEditing] = useBoolean(); - const backgroundColor = useColorModeValue("gray.200", "gray.700"); const { data, isLoading } = useSWR("/api/valid_labels", get); useEffect(() => { @@ -145,20 +146,26 @@ export const FlaggableElement = (props: FlaggableElementProps) => { isLazy lazyBehavior="keepMounted" > - + {props.children} -
- - - -
+ + + + - +
@@ -224,7 +231,7 @@ export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element { : `text-${colors.dark.text} hover:text-blue-400 float-left`; return ( - + } spacing="4"> + {messages.map((item) => ( ))} diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index d7b8b08c..64bb332f 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -11,30 +11,44 @@ interface MessageTableEntryProps { export function MessageTableEntry(props: MessageTableEntryProps) { const { item } = props; - const backgroundColor = useColorModeValue("gray.50", "gray.800"); + const backgroundColor = useColorModeValue("gray.100", "gray.700"); + const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B"); + + const avatarColor = useColorModeValue("white", "black"); + const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200"); + return ( -
- - + + + - - {props.enabled ? ( + + {props.enabled ? ( + - + {item.text} - ) : ( - + + ) : ( + + {item.text} - )} - - -
+ + )} + + ); } diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx index 39b6bbbd..f4776773 100644 --- a/website/src/components/Messages/MessageWithChildren.tsx +++ b/website/src/components/Messages/MessageWithChildren.tsx @@ -26,8 +26,8 @@ interface MessageWithChildrenProps { } export function MessageWithChildren(props: MessageWithChildrenProps) { - const backgroundColor = useColorModeValue("white", "gray.700"); - const childBackgroundColor = useColorModeValue("gray.200", "gray.800"); + const backgroundColor = useColorModeValue("white", "gray.800"); + const childBackgroundColor = useColorModeValue("gray.200", "gray.700"); const { id, depth, maxDepth, isOnlyChild = true } = props; @@ -93,11 +93,21 @@ export function MessageWithChildren(props: MessageWithChildrenProps) { <> {isFirstOrOnly ? "Children" : "Ancestor"} - {children.map((item, idx) => ( - - - - ))} + + {children.map((item, idx) => ( + + + + ))} + ) diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx index d2220f36..a768bc85 100644 --- a/website/src/components/SideMenuLayout.tsx +++ b/website/src/components/SideMenuLayout.tsx @@ -12,11 +12,11 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => { return ( - - + + - {props.children} + {props.children} ); diff --git a/website/src/components/Survey/SurveyCard.tsx b/website/src/components/Survey/SurveyCard.tsx index 1126fa0b..5a78ce2b 100644 --- a/website/src/components/Survey/SurveyCard.tsx +++ b/website/src/components/Survey/SurveyCard.tsx @@ -6,13 +6,13 @@ interface SurveyCardProps { } export const SurveyCard = (props: SurveyCardProps) => { - const backgroundColor = useColorModeValue("white", "gray.800"); + const backgroundColor = useColorModeValue("white", "gray.700"); const BoxClasses: BoxProps = { - p: "6", gap: "2", borderRadius: "xl", shadow: "base", + className: "p-4 sm:p-6", }; return ( diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index 27273acf..07d4e64d 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -12,7 +12,7 @@ export const CreateTask = ({ isDisabled, onReplyChanged, }: TaskSurveyProps<{ text: string }>) => { - const cardColor = useColorModeValue("gray.100", "gray.700"); + const cardColor = useColorModeValue("gray.50", "gray.900"); const titleColor = useColorModeValue("gray.800", "gray.300"); const labelColor = useColorModeValue("gray.600", "gray.400"); @@ -42,7 +42,7 @@ export const CreateTask = ({ {task.conversation ? ( - + ) : null} diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx index 695ede2c..aac0f416 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask.tsx @@ -3,11 +3,11 @@ import { Text, useColorModeValue } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import { MessageView } from "src/components/Messages"; import { MessageTable } from "src/components/Messages/MessageTable"; +import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup"; +import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup"; import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; import { TaskSurveyProps } from "src/components/Tasks/Task"; import { TaskType } from "src/types/Task"; -import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup"; -import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup"; export const LabelTask = ({ task, diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx index c1712b6d..7d47873f 100644 --- a/website/src/pages/messages/[id]/index.tsx +++ b/website/src/pages/messages/[id]/index.tsx @@ -9,7 +9,7 @@ import { get } from "src/lib/api"; import useSWR from "swr"; const MessageDetail = ({ id }) => { - const backgroundColor = useColorModeValue("white", "gray.700"); + const backgroundColor = useColorModeValue("white", "gray.800"); const [parent, setParent] = useState(null); const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, get, { @@ -38,11 +38,10 @@ const MessageDetail = ({ id }) => { {parent && ( <> - + Parent - {" "} diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx index 1da42db4..7504cfcb 100644 --- a/website/src/pages/messages/index.tsx +++ b/website/src/pages/messages/index.tsx @@ -8,7 +8,7 @@ import { Message } from "src/types/Conversation"; import useSWRImmutable from "swr/immutable"; const MessagesDashboard = () => { - const boxBgColor = useColorModeValue("white", "gray.700"); + const boxBgColor = useColorModeValue("white", "gray.800"); const boxAccentColor = useColorModeValue("gray.200", "gray.900"); const [messages, setMessages] = useState(null); @@ -40,24 +40,24 @@ const MessagesDashboard = () => { Messages - Open Assistant - + - Recent messages + Recent Messages {receivedMessages ? : } - Your recent messages + Your Recent Messages Date: Fri, 13 Jan 2023 20:34:52 -0600 Subject: [PATCH 03/15] Update UserMenu to use Chakra components and include score --- website/src/components/Header/UserMenu.tsx | 124 ++++++--------------- 1 file changed, 36 insertions(+), 88 deletions(-) diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index b99d4a1f..9f225bb6 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -1,16 +1,10 @@ -import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react"; -import { Popover } from "@headlessui/react"; -import { AnimatePresence, motion } from "framer-motion"; -import Image from "next/image"; -import NextLink from "next/link"; +import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react"; import { signOut, useSession } from "next-auth/react"; import React from "react"; import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; export function UserMenu() { const { data: session } = useSession(); - const backgroundColor = useColorModeValue("white", "gray.700"); - const accentColor = useColorModeValue("gray.300", "gray.600"); if (!session) { return <>; @@ -47,87 +41,41 @@ export function UserMenu() { } return ( - - {({ open }) => ( - <> - - - Profile Picture -

- {session.user.name || session.user.email} -

- - - - {open && ( - - - - - {accountOptions.map((item) => ( - -
-
-
- {item.name} -
- - ))} - signOut({ callbackUrl: "/" })} - > -
- -
-
- Sign Out -
- - - - - - )} - - - )} - + <> + + + + +

+ {session.user.name || session.user.email} +

+ + + + + Your Score + + 3,200 + + + + {accountOptions.map((item) => ( + + + + + ))} + + + signOut({ callbackUrl: "/" })}> + + + + ); } } From f1ba1e550881a466eba079ef98a02f822759a0a4 Mon Sep 17 00:00:00 2001 From: rsandb Date: Fri, 13 Jan 2023 21:08:16 -0600 Subject: [PATCH 04/15] grouped items, added FAQ to menu --- website/src/components/Header/UserMenu.tsx | 72 ++++++++++++++++------ 1 file changed, 53 insertions(+), 19 deletions(-) diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index 9f225bb6..ecd4febb 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -1,9 +1,23 @@ -import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react"; +import { + Avatar, + Box, + Link, + Menu, + MenuButton, + MenuDivider, + MenuGroup, + MenuItem, + MenuList, + Text, + useColorModeValue, +} from "@chakra-ui/react"; import { signOut, useSession } from "next-auth/react"; import React from "react"; -import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; +import { FiAlertTriangle, FiHelpCircle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; export function UserMenu() { + const borderColor = useColorModeValue("gray.300", "gray.600"); + const { data: session } = useSession(); if (!session) { @@ -18,17 +32,25 @@ export function UserMenu() { icon: FiLayout, }, { - name: "Account Settings", + name: "Settings", href: "/account", desc: "Account Settings", icon: FiSettings, }, + ]; + const helpOptions = [ { name: "Report a Bug", href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose", desc: "Report a Bug", icon: FiAlertTriangle, }, + { + name: "FAQ", + href: "/faq", + desc: "Report a Bug", + icon: FiHelpCircle, + }, ]; if (session.user.role === "admin") { @@ -43,32 +65,44 @@ export function UserMenu() { return ( <> - + -

+ {session.user.name || session.user.email} -

+ - + - Your Score + {session.user.name} 3,200 - - {accountOptions.map((item) => ( - - - - - ))} - - + + + {accountOptions.map((item) => ( + + + + + ))} + + + + {helpOptions.map((item) => ( + + + + + ))} + + signOut({ callbackUrl: "/" })}>