Require labels to be set on labeling task and setting up basic storybook stories for tasks

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]);

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 {

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -19,7 +19,10 @@ export const LabelTask = ({
   const [sliderValues, setSliderValues] = useState<number[]>(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[]) => {