code-dot-org · wilkie · May 21, 2026 · Apr 9, 2026 · May 21, 2026 · May 21, 2026
diff --git a/src/UIComponents/ColumnDetailsCategorical.tsx b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -3,12 +3,14 @@ import {connect} from 'react-redux';
 import {RootState} from '../redux';
 import {colors, styles} from '../constants';
 import {Bar} from 'react-chartjs-2';
+import {getLocalizedValue} from '../helpers/valueDetails';
 import {getCategoricalColumnDetails} from '../selectors/currentColumnSelectors';
 import I18n from '../i18n';
 import {CategoricalColumnDetails} from '../types';
 
 interface ColumnDetailsCategoricalProps {
   columnDetails: CategoricalColumnDetails;
+  datasetId: string;
 }
 
 const chartOptions = {
@@ -27,11 +29,15 @@ const chartOptions = {
 
 const ColumnDetailsCategorical = ({
   columnDetails,
+  datasetId,
 }: ColumnDetailsCategoricalProps) => {
   const {id, uniqueOptions, frequencies} = columnDetails;
   const labels = uniqueOptions && Object.values(uniqueOptions);
+  const localizedLabels = labels.map(option =>
+    getLocalizedValue(option, datasetId),
+  );
   const barData = {
-    labels,
+    localizedLabels,
     datasets: [
       {
         label: id,
@@ -70,6 +76,7 @@ const ColumnDetailsCategorical = ({
 export default connect(
   (state: RootState) => ({
     columnDetails: getCategoricalColumnDetails(state),
+    datasetId: state.metadata?.name || 'unknown',
   }),
   {},
 )(ColumnDetailsCategorical);
diff --git a/src/UIComponents/CrossTab.tsx b/src/UIComponents/CrossTab.tsx
@@ -9,14 +9,16 @@ import {RootState} from '../redux';
 import {getCrossTabData} from '../selectors/visualizationSelectors';
 import {styles} from '../constants';
 import ScrollableContent from './ScrollableContent';
+import {getLocalizedValue} from '../helpers/valueDetails';
 import I18n from '../i18n';
 import {CrossTabData} from '../types';
 
 interface CrossTabProps {
   crossTabData: CrossTabData | null;
+  datasetId: string;
 }
 
-const CrossTab = ({crossTabData}: CrossTabProps) => {
+const CrossTab = ({crossTabData, datasetId}: CrossTabProps) => {
   const getCellStyle = useCallback((percent: number) => {
     return {
       ...(styles as Record<string, React.CSSProperties>)[
@@ -91,7 +93,7 @@ const CrossTab = ({crossTabData}: CrossTabProps) => {
                     (uniqueLabelValue, index) => {
                       return (
                         <td key={index} style={styles.tableCell}>
-                          {uniqueLabelValue}
+                          {getLocalizedValue(uniqueLabelValue, datasetId)}
                         </td>
                       );
                     },
@@ -104,7 +106,7 @@ const CrossTab = ({crossTabData}: CrossTabProps) => {
                         (featureValue, featureIndex) => {
                           return (
                             <td key={featureIndex} style={styles.tableCell}>
-                              {featureValue}
+                              {getLocalizedValue(featureValue, datasetId)}
                             </td>
                           );
                         },
@@ -137,4 +139,5 @@ const CrossTab = ({crossTabData}: CrossTabProps) => {
 
 export default connect((state: RootState) => ({
   crossTabData: getCrossTabData(state),
+  datasetId: state.metadata?.name || 'unknown',
 }))(CrossTab);
diff --git a/src/UIComponents/DataTable.tsx b/src/UIComponents/DataTable.tsx
@@ -9,13 +9,14 @@ import {
 import {Dispatch} from 'redux';
 import {styles} from '../constants';
 import {getLocalizedColumnName} from '../helpers/columnDetails';
+import {getLocalizedValue} from '../helpers/valueDetails';
 import {DataRow} from '../types';
 
 interface DataTableProps {
   currentPanel: string;
   data: DataRow[];
-  datasetId?: string;
-  labelColumn?: string;
+  datasetId: string;
+  labelColumn: string;
   selectedFeatures: string[];
   setCurrentColumn: (column?: string) => void;
   setHighlightColumn: (column?: string) => void;
@@ -143,7 +144,7 @@ const DataTable = ({
                 onMouseEnter={() => handleSetHighlightColumn(columnId)}
                 onMouseLeave={() => handleSetHighlightColumn(undefined)}
               >
-                {getLocalizedColumnName(datasetId!, columnId)}
+                {getLocalizedColumnName(datasetId, columnId)}
               </th>
             );
           })}
@@ -168,7 +169,7 @@ const DataTable = ({
                     {startingRow !== undefined && index <= startingRow ? (
                       <span>&nbsp;</span>
                     ) : (
-                      row[columnId]
+                      getLocalizedValue(row[columnId], datasetId)
                     )}
                   </td>
                 );
@@ -184,8 +185,8 @@ const DataTable = ({
 export default connect(
   (state: RootState, props: {useResultsData?: boolean}) => ({
     data: getTableData(state, !!props.useResultsData),
-    datasetId: state.metadata && state.metadata.name,
-    labelColumn: state.labelColumn,
+    datasetId: state.metadata?.name || 'unknown',
+    labelColumn: state.labelColumn || 'unknown',
     selectedFeatures: state.selectedFeatures,
     currentColumn: state.currentColumn,
     highlightColumn: state.highlightColumn,

diff --git a/src/UIComponents/ModelCard.tsx b/src/UIComponents/ModelCard.tsx
@@ -8,6 +8,7 @@ import Statement from './Statement';
 import aiBotBorder from '@public/images/ai-bot/ai-bot-border.png';
 import I18n from '../i18n';
 import {getLocalizedColumnName} from '../helpers/columnDetails';
+import {getLocalizedValue} from '../helpers/valueDetails';
 import {
   ModelCardColumn,
   TrainedModelDetailsSave,
@@ -21,6 +22,7 @@ interface ModelCardProps {
   label: ModelCardColumn;
   features: ModelCardColumn[];
   datasetDetails: DatasetDetails;
+  datasetId: string;
 }
 
 const ModelCard = ({
@@ -30,6 +32,7 @@ const ModelCard = ({
   label,
   features,
   datasetDetails,
+  datasetId,
 }: ModelCardProps) => {
   const localizedLabel = getLocalizedColumnName(datasetDetails.name, label.id);
   const localizedFeatures = selectedFeatures.map(feature =>
@@ -131,7 +134,7 @@ const ModelCard = ({
               <p style={styles.modelCardDetails}>
                 {I18n.t('modelCardPossibleValues')}
                 <br />
-                {label.values.join(' ')}
+                {label.values.map((value) => getLocalizedValue(value, datasetId)).join(' ')}
               </p>
             )}
           </div>
@@ -158,7 +161,7 @@ const ModelCard = ({
                       <p>
                         {I18n.t('modelCardPossibleValues')}
                         <br />
-                        {feature.values.join(' ')}
+                        {feature.values.map((value) => getLocalizedValue(value, datasetId)).join(' ')}
                       </p>
                     )}
                   </div>
@@ -178,4 +181,5 @@ export default connect((state: RootState) => ({
   label: getLabelToSave(state),
   features: getFeaturesToSave(state),
   datasetDetails: getDatasetDetails(state),
+  datasetId: state.metadata?.name || 'unknown',
 }))(ModelCard);
diff --git a/src/UIComponents/Predict.tsx b/src/UIComponents/Predict.tsx
@@ -17,9 +17,10 @@ import aiBotBorder from '@public/images/ai-bot/ai-bot-border.png';
 import ScrollableContent from './ScrollableContent';
 import I18n from '../i18n';
 import {getLocalizedColumnName} from '../helpers/columnDetails';
+import {getLocalizedValue} from '../helpers/valueDetails';
 
 interface PredictProps {
-  labelColumn: string | undefined;
+  labelColumn: string;
   selectedCategoricalFeatures: string[];
   selectedNumericalFeatures: string[];
   uniqueOptionsByColumn: Record<string, string[]>;
@@ -28,7 +29,7 @@ interface PredictProps {
   predictedLabel: string | number;
   getPredictAvailable: boolean;
   extremaByColumn: Record<string, {min: number; max: number}>;
-  datasetId: string | undefined;
+  datasetId: string;
 }
 
 const Predict = ({
@@ -66,7 +67,7 @@ const Predict = ({
             return (
               <div style={styles.cardRow} key={index}>
                 <label>
-                  {getLocalizedColumnName(datasetId!, feature)}
+                  {getLocalizedColumnName(datasetId, feature)}
                   &nbsp;
                   <input
                     type="number"
@@ -86,7 +87,7 @@ const Predict = ({
           {selectedCategoricalFeatures.map((feature, index) => {
             return (
               <div style={styles.cardRow} key={index}>
-                <div>{getLocalizedColumnName(datasetId!, feature)}&nbsp;</div>
+                <div>{getLocalizedColumnName(datasetId, feature)}&nbsp;</div>
                 <div>
                   <select
                     onChange={event => handleChange(event, feature)}
@@ -98,7 +99,7 @@ const Predict = ({
                       .map((option, index) => {
                         return (
                           <option key={index} value={option}>
-                            {option}
+                            {getLocalizedValue(option, datasetId)}
                           </option>
                         );
                       })}
@@ -132,10 +133,8 @@ const Predict = ({
           </div>
           <div style={styles.predictBotRight}>
             <div style={styles.statement}>{I18n.t('predictAIBotPredicts')}</div>
-            <div>{getLocalizedColumnName(datasetId!, labelColumn!)}</div>
-            <div>
-              {getLocalizedColumnName(datasetId!, String(predictedLabel))}
-            </div>
+            <div>{getLocalizedColumnName(datasetId, labelColumn)}</div>
+            <div>{getLocalizedValue(predictedLabel, datasetId)}</div>
           </div>
         </div>
       )}
@@ -147,13 +146,13 @@ export default connect(
   (state: RootState) => ({
     testData: state.testData,
     predictedLabel: getConvertedPredictedLabel(state),
-    labelColumn: state.labelColumn,
+    labelColumn: state.labelColumn || 'unknown',
     selectedNumericalFeatures: getSelectedNumericalFeatures(state),
     selectedCategoricalFeatures: getSelectedCategoricalFeatures(state),
     uniqueOptionsByColumn: getUniqueOptionsByColumn(state),
     getPredictAvailable: getPredictAvailable(state),
     extremaByColumn: getExtremaByColumn(state),
-    datasetId: state.metadata && state.metadata.name,
+    datasetId: state.metadata?.name || 'unknown',
   }),
   (dispatch: Dispatch) => ({
     setTestData(feature: string, value: string | number) {

diff --git a/src/UIComponents/ResultsTable.tsx b/src/UIComponents/ResultsTable.tsx
@@ -6,16 +6,17 @@ import {Dispatch} from 'redux';
 import {styles, colors, REGRESSION_ERROR_TOLERANCE} from '../constants';
 import I18n from '../i18n';
 import {getLocalizedColumnName} from '../helpers/columnDetails';
+import {getLocalizedValue} from '../helpers/valueDetails';
 import {ResultsData} from '../types';
 
 interface ResultsTableProps {
   selectedFeatures: string[];
-  labelColumn: string | undefined;
+  labelColumn: string;
   results: ResultsData;
   isRegression: boolean;
   setResultsHighlightRow: (row: number | undefined) => void;
   resultsHighlightRow: number | undefined;
-  datasetId: string | undefined;
+  datasetId: string;
 }
 
 const ResultsTable = ({
@@ -90,7 +91,7 @@ const ResultsTable = ({
                     }}
                     key={index}
                   >
-                    {getLocalizedColumnName(datasetId!, feature)}
+                    {getLocalizedColumnName(datasetId, feature)}
                   </th>
                 );
               })}
@@ -101,7 +102,7 @@ const ResultsTable = ({
                   ...styles.resultsTableSecondHeader,
                 }}
               >
-                {getLocalizedColumnName(datasetId!, labelColumn!)}
+                {getLocalizedColumnName(datasetId, labelColumn)}
               </th>
               <th
                 style={{
@@ -110,7 +111,7 @@ const ResultsTable = ({
                   ...styles.resultsTableSecondHeader,
                 }}
               >
-                {getLocalizedColumnName(datasetId!, labelColumn!)}
+                {getLocalizedColumnName(datasetId, labelColumn)}
               </th>
             </tr>
           </thead>
@@ -125,15 +126,18 @@ const ResultsTable = ({
                   {examples.map((example, i) => {
                     return (
                       <td style={getRowCellStyle(index)} key={i}>
-                        {example}
+                        {getLocalizedValue(example, datasetId)}
                       </td>
                     );
                   })}
                   <td style={getRowCellStyle(index)}>
-                    {results.labels[index]}
+                    {getLocalizedValue(results.labels[index], datasetId)}
                   </td>
                   <td style={getRowCellStyle(index)}>
-                    {results.predictedLabels[index]}
+                    {getLocalizedValue(
+                      results.predictedLabels[index],
+                      datasetId,
+                    )}
                   </td>
                 </tr>
               );
@@ -148,10 +152,10 @@ const ResultsTable = ({
 export default connect(
   (state: RootState) => ({
     selectedFeatures: state.selectedFeatures,
-    labelColumn: state.labelColumn,
+    labelColumn: state.labelColumn || 'unknown',
     isRegression: isRegression(state),
     resultsHighlightRow: state.resultsHighlightRow,
-    datasetId: state.metadata && state.metadata.name,
+    datasetId: state.metadata?.name || 'unknown',
   }),
   (dispatch: Dispatch) => ({
     setResultsHighlightRow(column: number | undefined) {

diff --git a/src/helpers/valueDetails.ts b/src/helpers/valueDetails.ts
@@ -0,0 +1,21 @@
+import I18n from '../i18n';
+
+export function getLocalizedValue(
+  value: string | number,
+  datasetId: string,
+): string | number {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (Number.isFinite(+(value || NaN))) {
+    return value;
+  }
+
+  return (
+    I18n.t(value, {
+      scope: ['datasets', datasetId, 'values'],
+      default: value,
+    }) || value
+  );
+}
diff --git a/test/unit/columnDetails.test.js b/test/unit/columnDetails.test.js
@@ -3,6 +3,7 @@ import {
   isColumnNumerical,
   filterColumnsByType,
   getUniqueOptions,
+  getLocalizedColumnName,
   tooManyUniqueOptions,
   isColumnReadOnly,
   getExtrema,
@@ -14,6 +15,7 @@ import {
   allNumericalState,
   regressionState,
   premadeDatasetState,
+  premadeDatasetColumnNameLocalized,
   mosquitoCountMax,
   mosquitoCountMin,
   mosquitoDescription,
@@ -151,3 +153,17 @@ describe('getColumnDescription', () => {
     expect(result).toEqual(null);
   });
 });
+
+describe('getLocalizedColumnName', () => {
+  test('returns the fallback column name', async () => {
+    const result = getLocalizedColumnName('dataset-id', 'column-id');
+    expect(result).toEqual('column-id');
+  });
+
+  test('returns the localized column name', async () => {
+    I18n.reset();
+    I18n.initI18n(premadeDatasetTranslations);
+    const result = getLocalizedColumnName('bats_eat_mozzies', 'mosquitoCount');
+    expect(result).toEqual(premadeDatasetColumnNameLocalized);
+  });
+});