From b1d86ebc65596d6fba0672732553d8423be4b40d Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Thu, 2 Feb 2023 21:22:24 +1100
Subject: [PATCH] website: show descriptions for label flags

Desciptions are shown both via tooltips, which are easier to read on desktop browsers, and via an explain (i) button so that mobile users can get the description (though in one larger list).
---
 website/public/locales/en/labelling.json      |  9 ++++++-
 .../components/Messages/LabelFlagGroup.tsx    | 27 ++++++++++---------
 .../components/Messages/LabelInputGroup.tsx   | 23 ++++++++++++----
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/website/public/locales/en/labelling.json b/website/public/locales/en/labelling.json
index 0335f08f..624de963 100644
--- a/website/public/locales/en/labelling.json
+++ b/website/public/locales/en/labelling.json
@@ -8,10 +8,17 @@
   "spam.question": "Is the message spam?",
   "fails_task.question": "Is it a bad reply, as an answer to the prompt task?",
   "not_appropriate": "Not Appropriate",
+  "not_appropriate.explanation": "Inappropriate for a customer assistant.",
   "pii": "Contains PII",
+  "pii.explanation": "Contains personally identifying information. Examples include personal contact details, license and other identity numbers and banking details.",
   "hate_speech": "Hate Speech",
+  "hate_speech.explanation": "Content is abusive or threatening and expresses prejudice against a protected characteristic. Prejudice refers to preconceived views not based on reason. Protected characteristics include gender, ethnicity, religion, sexual orientation, and similar characteristics.",
   "sexual_content": "Sexual Content",
+  "sexual_content.explanation": "Contains sexual content.",
   "moral_judgement": "Judges Morality",
+  "moral_judgement.explanation": "Expresses moral judgement.",
   "political_content": "Political",
-  "lang_mismatch": "Wrong Language"
+  "political_content.explanation": "Expresses political views.",
+  "lang_mismatch": "Wrong Language",
+  "lang_mismatch.explanation": "Not written in the currently selected language."
 }
diff --git a/website/src/components/Messages/LabelFlagGroup.tsx b/website/src/components/Messages/LabelFlagGroup.tsx
index fb1158bc..53e8c49e 100644
--- a/website/src/components/Messages/LabelFlagGroup.tsx
+++ b/website/src/components/Messages/LabelFlagGroup.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, Tooltip } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 
@@ -14,18 +14,19 @@ export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
-        <Button
-          key={name}
-          onClick={() => {
-            const newValues = values.slice();
-            newValues[idx] = newValues[idx] ? 0 : 1;
-            onChange(newValues);
-          }}
-          isDisabled={!isEditable}
-          colorScheme={values[idx] === 1 ? "blue" : undefined}
-        >
-          {t(getTypeSafei18nKey(name))}
-        </Button>
+        <Tooltip key={name} label={`${t(getTypeSafei18nKey(`${name}.explanation`))}`}>
+          <Button
+            onClick={() => {
+              const newValues = values.slice();
+              newValues[idx] = newValues[idx] ? 0 : 1;
+              onChange(newValues);
+            }}
+            isDisabled={!isEditable}
+            colorScheme={values[idx] === 1 ? "blue" : undefined}
+          >
+            {t(getTypeSafei18nKey(name))}
+          </Button>
+        </Tooltip>
       ))}
     </Flex>
   );
diff --git a/website/src/components/Messages/LabelInputGroup.tsx b/website/src/components/Messages/LabelInputGroup.tsx
index 51383128..2193a9f2 100644
--- a/website/src/components/Messages/LabelInputGroup.tsx
+++ b/website/src/components/Messages/LabelInputGroup.tsx
@@ -1,10 +1,12 @@
 import { Text, VStack } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { Explain } from "src/components/Explain";
+import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
+import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
+import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
+import { getTypeSafei18nKey } from "src/lib/i18n";
 import { Label } from "src/types/Tasks";
 
-import { LabelLikertGroup } from "../Survey/LabelLikertGroup";
-import { LabelFlagGroup } from "./LabelFlagGroup";
-import { LabelYesNoGroup } from "./LabelYesNoGroup";
-
 export interface LabelInputInstructions {
   yesNoInstruction: string;
   flagInstruction: string;
@@ -28,6 +30,7 @@ export const LabelInputGroup = ({
   instructions,
   onChange,
 }: LabelInputGroupProps) => {
+  const { t } = useTranslation("labelling");
   const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
   const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
   const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);
@@ -52,7 +55,17 @@ export const LabelInputGroup = ({
       )}
       {flagIndexes.length > 0 && (
         <VStack alignItems="stretch" spacing={2}>
-          <Text>{instructions.flagInstruction}</Text>
+          <Text>
+            {instructions.flagInstruction}
+            <Explain
+              explanation={flagIndexes.map(
+                (idx) =>
+                  `${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
+                    getTypeSafei18nKey(`${labels[idx].name}.explanation`)
+                  )}`
+              )}
+            />{" "}
+          </Text>
           <LabelFlagGroup
             values={flagIndexes.map((idx) => values[idx])}
             labelNames={flagIndexes.map((idx) => labels[idx].name)}