Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refact: use i18n for data type / entity labels #223

Merged
merged 6 commits into from
Nov 14, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
refact: use i18n for data type / entity labels
  • Loading branch information
davidlougheed committed Nov 13, 2024
commit c23b1394b1bf31f67e0b8eb4426bd974ca7958d6
Original file line number Diff line number Diff line change
@@ -233,7 +233,7 @@ const BeaconQueryFormUi = ({
{hasVariants && (
<Col xs={24} lg={12}>
<Card
title={t('entities.Variants')}
title={t('entities.variant', { count: 100 })} // false count – just need the highest form of plural
davidlougheed marked this conversation as resolved.
Show resolved Hide resolved
style={CARD_STYLE}
styles={CARD_STYLES}
extra={
16 changes: 9 additions & 7 deletions src/js/components/Overview/Counts.tsx
Original file line number Diff line number Diff line change
@@ -25,19 +25,19 @@ const Counts = () => {
// Break down help into multiple sentences inside an array to make translation a bit easier.
const data = [
{
title: 'Individuals',
entity: 'individual',
help: ['individual_help_1'],
icon: <TeamOutlined />,
count: counts.individuals,
},
{
title: 'Biosamples',
entity: 'biosample',
help: ['biosample_help_1'],
icon: <BiDna />,
count: counts.biosamples,
},
{
title: 'Experiments',
entity: 'experiment',
help: ['experiment_help_1', 'experiment_help_2'],
icon: <ExpSvg />,
count: counts.experiments,
@@ -48,17 +48,19 @@ const Counts = () => {
<>
<Typography.Title level={3}>{t('Counts')}</Typography.Title>
<Space wrap>
{data.map(({ title, help, icon, count }, i) => {
const titleTransl = t(`entities.${title}`);
{data.map(({ entity, help, icon, count }, i) => {
// false count – just need the highest form of plural
// - see https://www.i18next.com/translation-function/plurals
const title = t(`entities.${entity}`, { count: 100 });
return (
<Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
<Statistic
title={
<Space>
{titleTransl}
{title}
{help && (
<Popover
title={titleTransl}
title={title}
content={
<CountsHelp>
{help.map((h, i) => (
5 changes: 3 additions & 2 deletions src/js/components/Overview/LastIngestion.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import { CalendarOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

import { useAppSelector } from '@/hooks';
import { getDataTypeLabel } from '@/types/dataTypes';

import type { LastIngestionDataTypeResponse } from '@/types/lastIngestionDataTypeResponse';
import { BOX_SHADOW } from '@/constants/overviewConstants';
@@ -48,7 +47,9 @@ const LastIngestionInfo: React.FC = () => {
<Card style={BOX_SHADOW} key={dataType.id}>
<Space direction="vertical">
<Typography.Text style={{ color: 'rgba(0,0,0,0.45)' }}>
{t(getDataTypeLabel(dataType.id))}
{/* false count – just need the highest form of plural
- see https://www.i18next.com/translation-function/plurals */}
{t(`entities.${dataType.id}`, { count: 100 })}
</Typography.Text>
<Typography.Text>
<CalendarOutlined />{' '}
6 changes: 3 additions & 3 deletions src/js/components/Search/SearchResultsCounts.tsx
Original file line number Diff line number Diff line change
@@ -58,7 +58,7 @@ const SearchResultsCounts = ({
].join(' ')}
>
<Statistic
title={t('entities.Individuals')}
title={t('entities.individual', { count: 100 })} // false count – just need the highest form of plural
value={
hasInsufficientData
? t(message ?? '')
@@ -71,13 +71,13 @@ const SearchResultsCounts = ({
/>
</div>
<Statistic
title={t('entities.Biosamples')}
title={t('entities.biosample', { count: 100 })} // false count – just need the highest form of plural
value={hasInsufficientData || (isBeaconNetwork && !biosampleCount) ? NO_RESULTS_DASHES : biosampleCount}
valueStyle={STAT_STYLE}
prefix={<BiDna />}
/>
<Statistic
title={t('entities.Experiments')}
title={t('entities.experiment', { count: 100 })} // false count – just need the highest form of plural
value={hasInsufficientData || (isBeaconNetwork && !experimentCount) ? NO_RESULTS_DASHES : experimentCount}
valueStyle={STAT_STYLE}
prefix={<ExpSvg />}
10 changes: 7 additions & 3 deletions src/js/components/Search/SearchResultsPane.tsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ const SearchResultsPane = ({
() => [
{
dataIndex: 'id',
title: t('entities.Individual'),
title: t('entities.individual', { count: 1 }),
render: (id: string) => (
<a href={`${PORTAL_URL}/data/explorer/individuals/${id}`} target="_blank" rel="noreferrer">
{id}
@@ -85,7 +85,9 @@ const SearchResultsPane = ({
<>
<Col xs={24} lg={10}>
<Typography.Title level={5} style={{ marginTop: 0 }}>
{t('entities.Biosamples')}
{/* false count – just need the highest form of plural
- see https://www.i18next.com/translation-function/plurals */}
{t('entities.biosample', { count: 100 })}
</Typography.Title>
{!hasInsufficientData && biosampleChartData.length ? (
<PieChart data={biosampleChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />
@@ -95,7 +97,9 @@ const SearchResultsPane = ({
</Col>
<Col xs={24} lg={10}>
<Typography.Title level={5} style={{ marginTop: 0 }}>
{t('entities.Experiments')}
{/* false count – just need the highest form of plural
- see https://www.i18next.com/translation-function/plurals */}
{t('entities.experiment', { count: 100 })}
</Typography.Title>
{!hasInsufficientData && experimentChartData.length ? (
<PieChart data={experimentChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />
15 changes: 10 additions & 5 deletions src/public/locales/en/default_translation_en.json
Original file line number Diff line number Diff line change
@@ -6,16 +6,21 @@
"Portal": "Portal",
"missing": "missing",
"entities": {
"Phenopackets": "Clinical Data",
"phenopacket_one": "Phenopacket",
"phenopacket_other": "Clinical Data",
"individual_one": "Individual",
"individual_other": "Individuals",
"Individual": "Individual",
"Individuals": "Individuals",
davidlougheed marked this conversation as resolved.
Show resolved Hide resolved
"individual_help_1": "Individuals represent a specific person / organism, and may have one or multiple associated biosamples, each with associated experiments.",
"Biosamples": "Biosamples",
"biosample_one": "Biosample",
"biosample_other": "Biosamples",
"biosample_help_1": "Biosamples are usually biological material extracted from a specific individual.",
"Experiments": "Experiments",
"experiment_one": "Experiment",
"experiment_other": "Experiments",
"experiment_help_1": "Experiments are a process done to a specific sample, e.g., whole-genome sequencing.",
"experiment_help_2": "One lab experiment may result in multiple experiment records inside the portal, such as with multiplexed samples.",
"Variants": "Variants"
"variant_one": "Variant",
"variant_other": "Variants"
},
"in": "in",
"Get Data": "Get Data",
11 changes: 10 additions & 1 deletion src/public/locales/fr/default_translation_fr.json
Original file line number Diff line number Diff line change
@@ -6,16 +6,25 @@
"Portal": "Portail",
"missing": "manquant(s)",
"entities": {
"phenopacket_one": "Phenopacket",
"phenopacket_other": "Données cliniques",
"Phenopackets": "Données cliniques",
"individual_one": "Participant",
"individual_other": "Participants",
"Individual": "Participant",
"Individuals": "Participants",
"individual_help_1": "Les participants représentent une personne/un organisme spécifique et peuvent avoir un ou plusieurs échantillons biologiques associés, chacun avec des expériences associées.",
"biosample_one": "Échantillon biologique",
"biosample_other": "Échantillons biologiques",
"Biosamples": "Échantillons biologiques",
"biosample_help_1": "Les échantillons biologiques sont généralement du matériel biologique extrait d’un participant spécifique.",
"experiment_one": "Expérience",
"experiment_other": "Expériences",
"Experiments": "Expériences",
"experiment_help_1": "Les expériences sont un processus effectué sur un échantillon spécifique, par exemple le séquençage du génome entier.",
"experiment_help_2": "Une expérience par un laboratoire peut donner lieu à plusieurs enregistrements d'expériences dans le portail, par exemple avec des échantillons multiplexés.",
"Variants": "Variants"
"variant_one": "Variant",
"variant_other": "Variants"
},
"in": "en",
"Get Data": "Obtenir",