From 8cbe197d1b484a9887ad8c5dab041fc8746f15ab Mon Sep 17 00:00:00 2001 From: Adrian Cowan Date: Wed, 8 Feb 2023 19:23:53 +1100 Subject: [PATCH] website: "Wrong Language" -> "Not {lang}" (#1300) Change the "Wrong Language" labelling flag to instead say "Not English", "Not French" etc depending on the messages tagged language --- website/public/locales/en/labelling.json | 2 ++ .../components/Messages/LabelFlagGroup.tsx | 21 +++++++++++++++---- .../components/Messages/LabelInputGroup.tsx | 3 +++ .../src/components/Messages/LabelPopup.tsx | 14 +++++++------ .../components/Messages/MessageTableEntry.tsx | 2 +- .../components/Tasks/LabelTask/LabelTask.tsx | 2 ++ 6 files changed, 33 insertions(+), 11 deletions(-) diff --git a/website/public/locales/en/labelling.json b/website/public/locales/en/labelling.json index 3eb7fb891e..ccf0907d45 100644 --- a/website/public/locales/en/labelling.json +++ b/website/public/locales/en/labelling.json @@ -10,6 +10,8 @@ "label_message_yes_no_instruction": "Answer the following question(s) about the message:", "lang_mismatch": "Wrong Language", "lang_mismatch.explanation": "Not written in the currently selected language.", + "lang_mismatch_lang": "Not {{language}}", + "lang_mismatch_lang.explanation": "Not written in {{language}}.", "moral_judgement": "Judges Morality", "moral_judgement.explanation": "Expresses moral judgement.", "not_appropriate": "Not Appropriate", diff --git a/website/src/components/Messages/LabelFlagGroup.tsx b/website/src/components/Messages/LabelFlagGroup.tsx index 53e8c49e35..55010bfb99 100644 --- a/website/src/components/Messages/LabelFlagGroup.tsx +++ b/website/src/components/Messages/LabelFlagGroup.tsx @@ -5,16 +5,29 @@ import { getTypeSafei18nKey } from "src/lib/i18n"; interface LabelFlagGroupProps { values: number[]; labelNames: string[]; + expectedLanguage: string; isEditable?: boolean; onChange: (values: number[]) => void; } -export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange }: LabelFlagGroupProps) => { - const { t } = useTranslation("labelling"); +export const LabelFlagGroup = ({ + values, + labelNames, + expectedLanguage, + isEditable = true, + onChange, +}: LabelFlagGroupProps) => { + const { t } = useTranslation(["labelling", "language"]); + const expectedLanguageName = t(getTypeSafei18nKey(`language:lang_${expectedLanguage}`)); return ( {labelNames.map((name, idx) => ( - + ))} diff --git a/website/src/components/Messages/LabelInputGroup.tsx b/website/src/components/Messages/LabelInputGroup.tsx index 7cdb882838..088836e0fa 100644 --- a/website/src/components/Messages/LabelInputGroup.tsx +++ b/website/src/components/Messages/LabelInputGroup.tsx @@ -19,6 +19,7 @@ interface LabelInputGroupProps { requiredLabels?: string[]; isEditable?: boolean; instructions: LabelInputInstructions; + expectedLanguage: string; onChange: (values: number[]) => void; } @@ -28,6 +29,7 @@ export const LabelInputGroup = ({ requiredLabels, isEditable, instructions, + expectedLanguage, onChange, }: LabelInputGroupProps) => { const { t } = useTranslation("labelling"); @@ -71,6 +73,7 @@ export const LabelInputGroup = ({ values[idx])} labelNames={flagIndexes.map((idx) => labels[idx].name)} + expectedLanguage={expectedLanguage} isEditable={isEditable} onChange={(flagValues) => { const newValues = values.slice(); diff --git a/website/src/components/Messages/LabelPopup.tsx b/website/src/components/Messages/LabelPopup.tsx index 67bae3cc0d..60e59b94ce 100644 --- a/website/src/components/Messages/LabelPopup.tsx +++ b/website/src/components/Messages/LabelPopup.tsx @@ -12,12 +12,13 @@ import { useTranslation } from "next-i18next"; import { useCallback, useEffect, useMemo, useState } from "react"; import { LabelInputGroup } from "src/components/Messages/LabelInputGroup"; import { get, post } from "src/lib/api"; +import { Message } from "src/types/Conversation"; import { Label } from "src/types/Tasks"; import useSWRImmutable from "swr/immutable"; import useSWRMutation from "swr/mutation"; interface LabelMessagePopupProps { - messageId: string; + message: Message; show: boolean; onClose: () => void; } @@ -26,15 +27,15 @@ interface ValidLabelsResponse { valid_labels: Label[]; } -export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => { +export const LabelMessagePopup = ({ message, show, onClose }: LabelMessagePopupProps) => { const { t } = useTranslation(); - const { data: response } = useSWRImmutable(`/api/valid_labels?message_id=${messageId}`, get); + const { data: response } = useSWRImmutable(`/api/valid_labels?message_id=${message.id}`, get); const valid_labels = useMemo(() => response?.valid_labels ?? [], [response]); const [values, setValues] = useState(new Array(valid_labels.length).fill(null)); useEffect(() => { setValues(new Array(valid_labels.length).fill(null)); - }, [messageId, valid_labels.length]); + }, [message.id, valid_labels.length]); const { trigger: setLabels } = useSWRMutation("/api/set_label", post); @@ -47,13 +48,13 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu } }); setLabels({ - message_id: messageId, + message_id: message.id, label_map: Object.fromEntries(label_map), }); setValues(new Array(values.length).fill(null)); onClose(); - }, [messageId, onClose, setLabels, valid_labels, values]); + }, [message.id, onClose, setLabels, valid_labels, values]); return ( @@ -70,6 +71,7 @@ export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopu flagInstruction: t("labelling:label_message_flag_instruction"), likertInstruction: t("labelling:label_message_likert_instruction"), }} + expectedLanguage={message.lang} onChange={setValues} /> diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 51db6d7c5e..a82cc50c36 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -128,7 +128,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE onReport={showReportPopup} message={message} /> - + diff --git a/website/src/components/Tasks/LabelTask/LabelTask.tsx b/website/src/components/Tasks/LabelTask/LabelTask.tsx index 9c211d624a..d881384c52 100644 --- a/website/src/components/Tasks/LabelTask/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask/LabelTask.tsx @@ -50,6 +50,7 @@ export const LabelTask = ({ const cardColor = useColorModeValue("gray.50", "gray.800"); const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam"; + const lastMessage = task.conversation.messages[task.conversation.messages.length - 1]; return (
@@ -69,6 +70,7 @@ export const LabelTask = ({ flagInstruction: t("label_highlighted_flag_instruction"), likertInstruction: t("label_highlighted_likert_instruction"), }} + expectedLanguage={lastMessage.lang} onChange={(values) => { setValues(values); setUserInputMade.on();