i18n: missing translations for charts + beacon network

src/js/components/Beacon/BeaconCommon/Filters.tsx

@@ -16,7 +16,7 @@ const NetworkFilterToggle = () => {
   const { isQuerySectionsUnion } = useBeaconNetwork();
 
   return (
-    <Tooltip title="Choose all search filters across the network, or only those common to all beacons.">
+    <Tooltip title={t('beacon.network_filter_toggle_help')}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <Switch
           onChange={() => dispatch(toggleQuerySectionsUnionOrIntersection())}

src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx

@@ -43,7 +43,7 @@ const NetworkSearchResults = () => {
   // currently not possible to have both a network error and results, but this may change in the future
   const resultsExtra = (
     <Space>
-      {hasBeaconNetworkError && <Tag color="red">Network Error</Tag>}
+      {hasBeaconNetworkError && <Tag color="red">{t('beacon.network_error')}</Tag>}
       {!noResponsesYet && isFetchingAtLeastOneResponse && (
         <Spin size="small" indicator={<Loading3QuartersOutlined spin={true} />} />
       )}

src/js/components/Overview/Chart.tsx

@@ -39,6 +39,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
   };
 
   const { chart_type: type } = chartConfig;
+  units = t(units); // Units can be a word, like "years". Make sure this word gets translated.
 
   switch (type) {
     case CHART_TYPE_BAR:
@@ -101,7 +102,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           }}
           renderPopupBody={(_f, d) => (
             <>
-              Count: {(d ?? 0).toString()} {units}
+              {t('Count') + ':'} {(d ?? 0).toString()} {units}
             </>
           )}
         />

src/js/components/Overview/Drawer/ManageChartsDrawer.tsx

@@ -6,13 +6,16 @@ import ChartTree from './ChartTree';
 
 import type { ChartDataField } from '@/types/data';
 import { useAppSelector, useAppDispatch, useTranslationFn } from '@/hooks';
+import { useSmallScreen } from '@/hooks/useResponsiveContext';
 import { hideAllSectionCharts, setAllDisplayedCharts, resetLayout } from '@/features/data/data.store';
 
 const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: ManageChartsDrawerProps) => {
   const t = useTranslationFn();
 
   const dispatch = useAppDispatch();
 
+  const isSmallScreen = useSmallScreen();
+
   const { sections } = useAppSelector((state) => state.data);
 
   return (
@@ -21,6 +24,9 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       placement="right"
       onClose={onManageDrawerClose}
       open={manageDrawerVisible}
+      // If we're on a small device, make the drawer full-screen width instead of a fixed width.
+      // The default value for Ant Design is 372.
+      width={isSmallScreen ? '100vw' : 420}
       extra={
         <Space>
           <Button
@@ -29,15 +35,15 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               dispatch(setAllDisplayedCharts({}));
             }}
           >
-            Show All
+            {t('Show All')}
           </Button>
           <Button
             size="small"
             onClick={() => {
               dispatch(resetLayout());
             }}
           >
-            Reset
+            {t('Reset')}
           </Button>
         </Space>
       }
@@ -55,15 +61,15 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
                   dispatch(setAllDisplayedCharts({ section: sectionTitle }));
                 }}
               >
-                Show All
+                {t('Show All')}
               </Button>
               <Button
                 size="small"
                 onClick={() => {
                   dispatch(hideAllSectionCharts({ section: sectionTitle }));
                 }}
               >
-                Hide All
+                {t('Hide All')}
               </Button>
             </Space>
           </Flex>

src/js/components/Overview/PublicOverview.tsx

@@ -25,7 +25,7 @@ const ABOUT_CARD_STYLE = { width: '100%', maxWidth: '1390px', borderRadius: '11p
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
 
 const PublicOverview = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
 
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [aboutContent, setAboutContent] = useState('');
@@ -105,7 +105,7 @@ const PublicOverview = () => {
       <FloatButton
         type="primary"
         icon={<AppstoreAddOutlined rotate={270} />}
-        tooltip="Manage Charts"
+        tooltip={t('Manage Charts')}
         style={MANAGE_CHARTS_BUTTON_STYLE}
         onClick={onManageChartsOpen}
       />

src/js/components/SiteFooter.tsx

@@ -14,27 +14,27 @@ const SiteFooter = () => {
         <Space size={8} direction="vertical" align="center">
           <div>
             <Title level={5} type="secondary" style={{ marginBottom: '0' }}>
-              {t('Powered by')}
+              {t('footer.powered_by')}
             </Title>
             <Link href="https://bento-platform.github.io" target="_blank">
               <img style={{ height: '36px' }} src={bentoLogo} alt="Bento" />
             </Link>
           </div>
           <div>
             <Text type="secondary">
-              Copyright &copy; 2019-2024 the{' '}
+              {t('footer.copyright')} 2019-2024{' '}
               <Link href="https://computationalgenomics.ca" target="_blank">
-                Canadian Centre for Computational Genomics
+                {t('footer.c3g')}
               </Link>
               .
             </Text>
             <br />
             <Text type="secondary">
-              Bento is licensed under the{' '}
+              {t('footer.licensed_under') + ' '}
               <Link href="https://github.com/bento-platform/bento_public/blob/main/LICENSE" target="_blank">
                 LGPLv3
               </Link>
-              . The source code is available on{' '}
+              . {t('footer.source_available') + ' '}
               <Link href="https://github.com/bento-platform" target="_blank">
                 Github
               </Link>
@@ -43,7 +43,7 @@ const SiteFooter = () => {
           </div>
           <div>
             <Link href="/public/terms.html" target="_blank">
-              {t('Terms of Use')}
+              {t('footer.terms_of_use')}
             </Link>
           </div>
         </Space>

src/public/locales/en/default_translation_en.json

@@ -64,11 +64,12 @@
   "Download DATS File": "Download DATS File",
   "Charts": "Charts",
   "Manage Charts": "Manage Charts",
+  "Show All": "Show All",
+  "Reset": "Reset",
+  "Hide All": "Hide All",
   "Remove this chart": "Remove this chart",
   "Width": "Width",
   "Insufficient data available.": "Insufficient data available.",
-  "Powered by": "Powered by",
-  "Terms of Use": "Terms of Use",
   "No Data": "No Data",
   "Counts": "Counts",
   "Search by genomic variants, clinical metadata or both.": "Search by genomic variants, clinical metadata or both.",
@@ -110,8 +111,10 @@
     "beacon_error": "Beacon Error",
     "results_from": "Results from",
     "network_search_results": "Network Search Results",
+    "network_error": "Network Error",
     "show_all_filters": "show all filters",
     "common_filters_only": "common filters only",
+    "network_filter_toggle_help": "Choose all search filters across the network, or only those common to all beacons.",
     "home_page": "Home Page",
     "select_asm": "Select an assembly",
     "variants_form_error": "Variants form should include a chromosome and either an end position or both reference and alternate bases",
@@ -129,5 +132,13 @@
       "Coordinates are one-based.",
       "Leave this form blank to search by metadata only."
     ]
+  },
+  "footer": {
+    "powered_by": "Powered by",
+    "copyright": "Copyright ©",
+    "c3g": "the Canadian Centre for Computational Genomics",
+    "licensed_under": "Bento is licensed under the",
+    "source_available": "The source code is available on",
+    "terms_of_use": "Terms of Use"
   }
 }

src/public/locales/fr/default_translation_fr.json

@@ -64,11 +64,12 @@
   "Download DATS File": "Télécharcher le fichier DATS",
   "Charts": "Tableaux",
   "Manage Charts": "Gestion des tableaux",
+  "Show All": "Montrer tous",
+  "Reset": "Réinit.",
+  "Hide All": "Cacher tous",
   "Remove this chart": "Supprimer ce tableau",
   "Width": "Largeur",
   "Insufficient data available.": "Pas suffisamment de données.",
-  "Powered by": "Propulsé par",
-  "Terms of Use": "Conditions d'utilisation (en anglais)",
   "No Data": "Pas de données",
   "Counts": "Totaux",
   "Search by genomic variants, clinical metadata or both.": "Recherche par variant génomique, métadonnées cliniques ou les deux.",
@@ -110,8 +111,10 @@
     "beacon_error": "Erreur de Beacon",
     "results_from": "Résultats de",
     "network_search_results": "Résultats de la recherche sur le réseau",
+    "network_error": "Erreur de réseau",
     "show_all_filters": "afficher tous les filtres",
     "common_filters_only": "filtres communs uniquement",
+    "network_filter_toggle_help": "Choisissez tous les filtres de recherche du réseau ou seulement ceux qui sont communs à tous les Beacons.",
     "home_page": "Page d'accueil",
     "select_asm": "Sélectionner un assemblage génomique",
     "variants_form_error": "Le formulaire de recherche de variants doit inclure un chromosome et soit la position de fin, ou les bases de référence et les bases alternatives.",
@@ -129,5 +132,13 @@
       "Les coordonnées sont en base un.",
       "Laissez ce formulaire vide pour effectuer une recherche sur les métadonnées seulement."
     ]
+  },
+  "footer": {
+    "powered_by": "Propulsé par",
+    "copyright": "©",
+    "c3g": "le Centre canadien de génomique computationnelle",
+    "licensed_under": "Bento est sous licence",
+    "source_available": "Le code source est disponible sur",
+    "terms_of_use": "Conditions d'utilisation (en anglais)"
   }
 }