fix: Merge pull request #306 from UniversalDataTool/improve-label-help

Improve Label Help by showing errors when it fails to enable

Author: seveibar

src/components/LabelHelpView/api-key-entry.js

@@ -18,6 +18,14 @@ const Title = styled("div")({
   },
 })
 
+const LabelHelpIs = styled("div")({
+  fontSize: 18,
+  lineHeight: 1.5,
+  color: colors.grey[800],
+  padding: 16,
+  width: 800,
+})
+
 const ErrorText = styled("div")({
   color: colors.red[600],
 })
@@ -31,6 +39,10 @@ export default () => {
 
   return (
     <Box paddingTop={8} textAlign="center">
+      <LabelHelpIs>
+        Label Help is a UDT-integrated service that crowd-sources your labeling,
+        it's about the same speed as having a team of 5-10 full-time labelers.
+      </LabelHelpIs>
       <Title>
         To use Label Help, enter your API key. You can{" "}
         <a

src/components/LabelHelpView/label-help-dialog-content.js

@@ -46,11 +46,11 @@ export default () => {
   const {
     labelHelpEnabled,
     labelHelpError,
-    loadMyCredits,
+    loadMyCredits = () => 0,
     variables,
-    totalCost,
-    formulaFunc,
-    myCredits,
+    totalCost = 0,
+    formulaFunc = () => 0,
+    myCredits = () => 0,
   } = useLabelHelp()
   const [error, setError] = useState()
   const { dataset, setDataset } = useActiveDataset()
@@ -75,7 +75,6 @@ export default () => {
         )}&api_key=${fromConfig("labelhelp.apikey")}`
       ).then((r) => r.json())
       // response contains { progress, status }
-      console.log({ response })
       setLabelHelpInfo({
         ...dataset.labelHelp,
         ...response,
@@ -88,9 +87,14 @@ export default () => {
   if (!labelHelpEnabled)
     return (
       <Container>
-        Label Help is Disabled.
+        Label Help isn't enabled, check the error below. If you can't resolve
+        the error, reach out on{" "}
+        <a href="https://universaldatatool.slack.com">the slack</a> for more
+        help!
         {labelHelpError && (
-          <div style={{ color: colors.red[500] }}>{labelHelpError}</div>
+          <div style={{ color: colors.red[500], marginTop: 24 }}>
+            {labelHelpError}
+          </div>
         )}
       </Container>
     )

src/components/LabelView/index.js

@@ -36,17 +36,11 @@ export default ({
   sampleTimeToComplete,
 }) => {
   const [currentTab, setTab] = useState("label")
-  const [showLabelHelpPricing, setShowLabelHelpPricing] = useState(false)
   const posthog = usePosthog()
   const { labelHelpEnabled, totalCost } = useLabelHelp()
   const labelOnlyMode = useIsLabelOnlyMode()
   const [annotationStartTime, setAnnotationStartTime] = useState(null)
 
-  useEffect(() => {
-    if (process.env.REACT_APP_SHOW_LABELHELP_PRICING === "true")
-      setShowLabelHelpPricing(true)
-  }, [])
-
   const isInOverview = sampleIndex === null
 
   let percentComplete = 0
@@ -140,14 +134,10 @@ export default ({
                 value="activelearning"
               />
             )}
-            {labelHelpEnabled && (
+            {!labelOnlyMode && (
               <Tab
                 icon={<SupervisedUserCircleIcon />}
-                label={
-                  showLabelHelpPricing && totalCost
-                    ? `${totalCost}$`
-                    : "Label Help"
-                }
+                label={totalCost ? `$${totalCost}` : "Label Help"}
                 value="labelhelp"
               />
             )}