Merge pull request #884 from LAION-AI/available

Present available task types on dashboard

website/src/components/Dashboard/TaskOption.tsx

@@ -1,51 +1,75 @@
 import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Link from "next/link";
+import { useMemo } from "react";
+import { TaskType } from "src/types/Task";
 
-import { TaskCategory, TaskCategoryLabels, TaskTypes } from "../Tasks/TaskTypes";
+import { TaskCategory, TaskCategoryLabels, TaskInfo, TaskInfos } from "../Tasks/TaskTypes";
 
-export const TaskOption = ({ displayTaskCategories }: { displayTaskCategories: TaskCategory[] }) => {
+export interface TasksOptionProps {
+  content: Partial<Record<TaskCategory, TaskType[]>>;
+}
+
+export const TaskOption = ({ content }: TasksOptionProps) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
+  const taskInfoMap = useMemo(
+    () =>
+      Object.values(content)
+        .flat()
+        .reduce((obj, taskType) => {
+          obj[taskType] = TaskInfos.filter((t) => t.type === taskType).pop();
+          return obj;
+        }, {} as Record<TaskType, TaskInfo>),
+    [content]
+  );
+
   return (
     <Box className="flex flex-col gap-14">
-      {displayTaskCategories.map((category) => (
+      {Object.entries(content).map(([category, taskTypes]) => (
         <div key={category}>
-          <Text className="text-2xl font-bold pb-4">{TaskCategoryLabels[category]}</Text>
+          <Heading size="lg" className="pb-4">
+            {TaskCategoryLabels[category]}
+          </Heading>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
-            {TaskTypes.filter((task) => task.category === category).map((item) => (
-              <Link key={category + item.label} href={item.pathname}>
-                <GridItem
-                  bg={backgroundColor}
-                  borderRadius="xl"
-                  boxShadow="base"
-                  className="flex flex-col justify-between h-full"
-                >
-                  <Box className="p-6 pb-10">
-                    <Flex flexDir="column" gap="3">
-                      <Heading size="md" fontFamily="inter">
-                        {item.label}
-                      </Heading>
-                      <Text size="sm" opacity="80%">
-                        {item.desc}
-                      </Text>
-                    </Flex>
-                  </Box>
-                  <Box
-                    bg="blue.500"
-                    borderBottomRadius="xl"
-                    className="px-6 py-2 transition-colors duration-300"
-                    _hover={{ backgroundColor: "blue.600" }}
+            {taskTypes
+              .map((taskType) => taskInfoMap[taskType])
+              .map((item) => (
+                <Link key={category + item.label} href={item.pathname}>
+                  <GridItem
+                    bg={backgroundColor}
+                    borderRadius="xl"
+                    boxShadow="base"
+                    className="flex flex-col justify-between h-full"
                   >
-                    <Text fontWeight="bold" color="white">
+                    <Flex className="p-6 pb-10" flexDir="column" gap="3">
+                      <Heading size="md">{item.label}</Heading>
+                      <Text size="sm">{item.desc}</Text>
+                    </Flex>
+                    <Text
+                      fontWeight="bold"
+                      color="white"
+                      borderBottomRadius="xl"
+                      className="px-6 py-2 transition-colors duration-300 bg-blue-500 hover:bg-blue-600"
+                    >
                       Go -&gt;
                     </Text>
-                  </Box>
-                </GridItem>
-              </Link>
-            ))}
+                  </GridItem>
+                </Link>
+              ))}
           </SimpleGrid>
         </div>
       ))}
     </Box>
   );
 };
+
+export const allTaskOptions: TasksOptionProps["content"] = {
+  [TaskCategory.Random]: [TaskType.random],
+  [TaskCategory.Create]: [TaskType.initial_prompt, TaskType.prompter_reply, TaskType.assistant_reply],
+  [TaskCategory.Evaluate]: [
+    TaskType.rank_initial_prompts,
+    TaskType.rank_prompter_replies,
+    TaskType.rank_assistant_replies,
+  ],
+  [TaskCategory.Label]: [TaskType.label_initial_prompt, TaskType.label_prompter_reply, TaskType.label_assistant_reply],
+};

website/src/components/EmptyState.tsx

@@ -1,5 +1,5 @@
-import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
-import { useRouter } from "next/router";
+import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import NextLink from "next/link";
 import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
@@ -10,16 +10,15 @@ type EmptyStateProps = {
 
 export const EmptyState = (props: EmptyStateProps) => {
   const backgroundColor = useColorModeValue("white", "gray.800");
-  const router = useRouter();
 
   return (
     <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
       <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
         <props.icon size="30" color="DarkOrange" />
         <Text>{props.text}</Text>
-        <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
-          <Text>Click here to go back</Text>
-        </Link>
+        <NextLink href="/dashboard">
+          <Text color="blue.500">Go back to the dashboard</Text>
+        </NextLink>
       </Box>
     </Box>
   );

website/src/components/Tasks/Task/Task.tsx

@@ -3,7 +3,7 @@ import { TaskControls } from "src/components/Survey/TaskControls";
 import { CreateTask } from "src/components/Tasks/CreateTask";
 import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
 import { LabelTask } from "src/components/Tasks/LabelTask";
-import { TaskCategory, TaskInfo, TaskTypes } from "src/components/Tasks/TaskTypes";
+import { TaskCategory, TaskInfo, TaskInfos } from "src/components/Tasks/TaskTypes";
 import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
 import { post } from "src/lib/api";
 import { TaskContent } from "src/types/Task";
@@ -29,7 +29,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
 
   const rootEl = useRef<HTMLDivElement>(null);
 
-  const taskType = TaskTypes.find((taskType) => taskType.type === task.type && taskType.mode === task.mode);
+  const taskType = TaskInfos.find((taskType) => taskType.type === task.type && taskType.mode === task.mode);
 
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
     onSuccess: async () => {

website/src/components/Tasks/TaskTypes.tsx

@@ -21,16 +21,16 @@ export interface TaskInfo {
 }
 
 export const TaskCategoryLabels: { [key in TaskCategory]: string } = {
-  [TaskCategory.Random]: "I'm feeling lucky",
+  [TaskCategory.Random]: "Grab a task!",
   [TaskCategory.Create]: "Create",
   [TaskCategory.Evaluate]: "Evaluate",
   [TaskCategory.Label]: "Label",
 };
 
-export const TaskTypes: TaskInfo[] = [
+export const TaskInfos: TaskInfo[] = [
   // general/random
   {
-    label: "Start a Task",
+    label: "I'm feeling lucky",
     desc: "Help us improve Open Assistant by starting a random task.",
     category: TaskCategory.Random,
     pathname: "/tasks/random",
@@ -104,7 +104,7 @@ export const TaskTypes: TaskInfo[] = [
     category: TaskCategory.Evaluate,
     pathname: "/evaluate/rank_initial_prompts",
     help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
-    overview: "Given the following inital prompts, sort them from best to worst, best being first, worst being last.",
+    overview: "Given the following initial prompts, sort them from best to worst, best being first, worst being last.",
     type: "rank_initial_prompts",
     update_type: "message_ranking",
     unchanged_title: "Order Unchanged",

website/src/pages/dashboard.tsx

@@ -5,15 +5,17 @@ import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashbo
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
 import { get } from "src/lib/api";
-import type { AvailableTasks, TaskType } from "src/types/Task";
+import { AvailableTasks, TaskType } from "src/types/Task";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 import useSWRImmutable from "swr/immutable";
 
 const Dashboard = () => {
   const { data } = useSWRImmutable<AvailableTasks>("/api/available_tasks", get);
 
-  // TODO: show only these tasks:
-  const availableTasks = useMemo(() => filterAvailableTasks(data ?? {}), [data]);
+  const availableTaskTypes = useMemo(() => {
+    const taskTypes = filterAvailableTasks(data ?? {});
+    return { [TaskCategory.Random]: taskTypes };
+  }, [data]);
 
   return (
     <>
@@ -23,7 +25,7 @@ const Dashboard = () => {
       </Head>
       <Flex direction="column" gap="10">
         <WelcomeCard />
-        <TaskOption displayTaskCategories={[TaskCategory.Random]} />
+        <TaskOption content={availableTaskTypes} />
         <LeaderboardTable />
       </Flex>
     </>

website/src/pages/tasks/all.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { TaskOption } from "src/components/Dashboard";
+import { allTaskOptions } from "src/components/Dashboard/TaskOption";
 import { getDashboardLayout } from "src/components/Layout";
-import { TaskCategory } from "src/components/Tasks/TaskTypes";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const AllTasks = () => {
@@ -11,7 +11,7 @@ const AllTasks = () => {
         <title>All Tasks - Open Assistant</title>
         <meta name="description" content="All tasks for Open Assistant." />
       </Head>
-      <TaskOption displayTaskCategories={[TaskCategory.Create, TaskCategory.Evaluate, TaskCategory.Label]} />
+      <TaskOption content={allTaskOptions} />
     </>
   );
 };