From a2f68c72599e63cf6c98b5e995465aeb3aecaab6 Mon Sep 17 00:00:00 2001 From: Keith Stevens Date: Mon, 16 Jan 2023 18:51:01 +0900 Subject: [PATCH 1/3] Require labels to be set on labeling task and setting up basic storybook stories for tasks --- website/src/components/FlaggableElement.tsx | 6 +++++- website/src/components/Survey/LabelSliderGroup.tsx | 2 +- .../src/components/Tasks/{ => LabelTask}/LabelTask.tsx | 5 ++++- website/src/components/Tasks/{ => Task}/Task.tsx | 0 website/src/lib/oasst_api_client.ts | 8 +++++++- website/src/pages/api/new_task/[task_type].ts | 1 + 6 files changed, 18 insertions(+), 4 deletions(-) rename website/src/components/Tasks/{ => LabelTask}/LabelTask.tsx (95%) rename website/src/components/Tasks/{ => Task}/Task.tsx (100%) diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx index b9e41a32..9ba227ee 100644 --- a/website/src/components/FlaggableElement.tsx +++ b/website/src/components/FlaggableElement.tsx @@ -26,7 +26,7 @@ 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"; +import { colors } from "src/styles/Theme/colors"; import useSWR from "swr"; import useSWRMutation from "swr/mutation"; @@ -105,6 +105,10 @@ export const FlaggableElement = (props: FlaggableElementProps) => { if (isLoading) { return; } + if (!data) { + updateReport({ type: "load_labels", labels: [] }); + return; + } const { valid_labels } = data; updateReport({ type: "load_labels", labels: valid_labels }); }, [data, isLoading]); diff --git a/website/src/components/Survey/LabelSliderGroup.tsx b/website/src/components/Survey/LabelSliderGroup.tsx index f65cfb80..af75281d 100644 --- a/website/src/components/Survey/LabelSliderGroup.tsx +++ b/website/src/components/Survey/LabelSliderGroup.tsx @@ -1,6 +1,6 @@ import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react"; import { useId, useState } from "react"; -import { colors } from "styles/Theme/colors"; +import { colors } from "src/styles/Theme/colors"; // TODO: consolidate with FlaggableElement interface LabelSliderGroupProps { diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask/LabelTask.tsx similarity index 95% rename from website/src/components/Tasks/LabelTask.tsx rename to website/src/components/Tasks/LabelTask/LabelTask.tsx index 758ee127..9dc36397 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask/LabelTask.tsx @@ -19,7 +19,10 @@ export const LabelTask = ({ const [sliderValues, setSliderValues] = useState(new Array(valid_labels.length).fill(0)); useEffect(() => { - onReplyChanged({ content: { labels: {}, text: task.reply, message_id: task.message_id }, state: "DEFAULT" }); + onReplyChanged({ + content: { labels: {}, text: task.reply, message_id: task.message_id }, + state: "NOT_SUBMITTABLE", + }); }, [task, onReplyChanged]); const onSliderChange = (values: number[]) => { diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task/Task.tsx similarity index 100% rename from website/src/components/Tasks/Task.tsx rename to website/src/components/Tasks/Task/Task.tsx diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts index f94d8b10..0268b6d2 100644 --- a/website/src/lib/oasst_api_client.ts +++ b/website/src/lib/oasst_api_client.ts @@ -16,7 +16,13 @@ export class OasstError { } export class OasstApiClient { - constructor(private readonly oasstApiUrl: string, private readonly oasstApiKey: string) {} + oasstApiUrl: string; + oasstApiKey: string; + + constructor(oasstApiUrl: string, oasstApiKey: string) { + this.oasstApiUrl = oasstApiUrl; + this.oasstApiKey = oasstApiKey; + } private async post(path: string, body: any): Promise { const resp = await fetch(`${this.oasstApiUrl}${path}`, { diff --git a/website/src/pages/api/new_task/[task_type].ts b/website/src/pages/api/new_task/[task_type].ts index 8fd2b26b..e77c5eb2 100644 --- a/website/src/pages/api/new_task/[task_type].ts +++ b/website/src/pages/api/new_task/[task_type].ts @@ -20,6 +20,7 @@ const handler = withoutRole("banned", async (req, res, token) => { } catch (err) { console.error(err); res.status(500).json(err); + return; } // Store the task and link it to the user.. From 68f22d0fa99e34868885f507d07e5b7c79e1d37c Mon Sep 17 00:00:00 2001 From: Keith Stevens Date: Mon, 16 Jan 2023 18:53:11 +0900 Subject: [PATCH 2/3] Adding new index and story files --- .../src/components/Tasks/LabelTask/index.tsx | 1 + .../components/Tasks/Task/Task.stories.tsx | 32 +++++++++++++++++++ website/src/components/Tasks/Task/index.tsx | 1 + 3 files changed, 34 insertions(+) create mode 100644 website/src/components/Tasks/LabelTask/index.tsx create mode 100644 website/src/components/Tasks/Task/Task.stories.tsx create mode 100644 website/src/components/Tasks/Task/index.tsx diff --git a/website/src/components/Tasks/LabelTask/index.tsx b/website/src/components/Tasks/LabelTask/index.tsx new file mode 100644 index 00000000..173b4ef2 --- /dev/null +++ b/website/src/components/Tasks/LabelTask/index.tsx @@ -0,0 +1 @@ +export * from "./LabelTask"; diff --git a/website/src/components/Tasks/Task/Task.stories.tsx b/website/src/components/Tasks/Task/Task.stories.tsx new file mode 100644 index 00000000..2b8e7139 --- /dev/null +++ b/website/src/components/Tasks/Task/Task.stories.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +import { Task } from "./Task"; + +export default { + title: "tasks/Task", + component: Task, +}; + +const Template = ({ frontendId, task, trigger, mutate }) => { + return ; +}; + +export const Default = Template.bind({}); +Default.args = { + frontendId: "1234", + task: { + conversation: [], + id: "1234-4321", + mandatory_labels: ["spam"], + message_id: "772f843e-f740-4aad-a44f-e3cf0260692c", + reply: "1231231231", + type: "label_prompter_reply", + valid_labels: ["spam", "fails_task"], + }, + trigger: (id, update_type, content) => { + console.log(content); + }, + mutate: () => { + console.log(mutate); + }, +}; diff --git a/website/src/components/Tasks/Task/index.tsx b/website/src/components/Tasks/Task/index.tsx new file mode 100644 index 00000000..92a057a4 --- /dev/null +++ b/website/src/components/Tasks/Task/index.tsx @@ -0,0 +1 @@ +export * from "./Task"; From 7e1b57a93e2f276edadf15d4fd37cb0d88cc173c Mon Sep 17 00:00:00 2001 From: Keith Stevens Date: Mon, 16 Jan 2023 18:58:44 +0900 Subject: [PATCH 3/3] Fixing the build --- website/src/components/Tasks/Task/Task.stories.tsx | 2 +- website/src/types/TaskReplyState.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/website/src/components/Tasks/Task/Task.stories.tsx b/website/src/components/Tasks/Task/Task.stories.tsx index 2b8e7139..bb0da0e3 100644 --- a/website/src/components/Tasks/Task/Task.stories.tsx +++ b/website/src/components/Tasks/Task/Task.stories.tsx @@ -27,6 +27,6 @@ Default.args = { console.log(content); }, mutate: () => { - console.log(mutate); + console.log("mutate"); }, }; diff --git a/website/src/types/TaskReplyState.ts b/website/src/types/TaskReplyState.ts index 648dae3c..100aed11 100644 --- a/website/src/types/TaskReplyState.ts +++ b/website/src/types/TaskReplyState.ts @@ -1,3 +1,7 @@ +export interface TaskReplyNotSubmittable { + content: T; + state: "NOT_SUBMITTABLE"; +} export interface TaskReplyValid { content: T; state: "VALID"; @@ -11,4 +15,8 @@ export interface TaskReplyInValid { state: "INVALID"; } -export type TaskReplyState = TaskReplyValid | TaskReplyDefault | TaskReplyInValid; +export type TaskReplyState = + | TaskReplyNotSubmittable + | TaskReplyValid + | TaskReplyDefault + | TaskReplyInValid;