From 41dfda5f54fa368e82a3186b22b4a47f7b59091c Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:31:06 -0500
Subject: [PATCH 1/6] i18n: missing translations for chart management

---
 .../Overview/Drawer/ManageChartsDrawer.tsx           | 12 ++++++++----
 src/js/components/Overview/PublicOverview.tsx        |  4 ++--
 src/public/locales/en/default_translation_en.json    |  3 +++
 src/public/locales/fr/default_translation_fr.json    |  3 +++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index f50f2854..370b0772 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -6,6 +6,7 @@ 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) => {
@@ -13,6 +14,8 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
 
   const dispatch = useAppDispatch();
 
+  const isSmallScreen = useSmallScreen();
+
   const { sections } = useAppSelector((state) => state.data);
 
   return (
@@ -21,6 +24,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       placement="right"
       onClose={onManageDrawerClose}
       open={manageDrawerVisible}
+      width={isSmallScreen ? '100vw' : 400}
       extra={
         <Space>
           <Button
@@ -29,7 +33,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               dispatch(setAllDisplayedCharts({}));
             }}
           >
-            Show All
+            {t('Show All')}
           </Button>
           <Button
             size="small"
@@ -37,7 +41,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               dispatch(resetLayout());
             }}
           >
-            Reset
+            {t('Reset')}
           </Button>
         </Space>
       }
@@ -55,7 +59,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
                   dispatch(setAllDisplayedCharts({ section: sectionTitle }));
                 }}
               >
-                Show All
+                {t('Show All')}
               </Button>
               <Button
                 size="small"
@@ -63,7 +67,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
                   dispatch(hideAllSectionCharts({ section: sectionTitle }));
                 }}
               >
-                Hide All
+                {t('Hide All')}
               </Button>
             </Space>
           </Flex>
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
index 2c2bfcf2..1add9750 100644
--- a/src/js/components/Overview/PublicOverview.tsx
+++ b/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}
       />
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index 9582a7d1..21d14d27 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -64,6 +64,9 @@
   "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.",
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index a82f046a..8a280036 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -64,6 +64,9 @@
   "Download DATS File": "Télécharcher le fichier DATS",
   "Charts": "Tableaux",
   "Manage Charts": "Gestion des tableaux",
+  "Show All": "Aff. tous",
+  "Reset": "Réinit.",
+  "Hide All": "Cacher tous",
   "Remove this chart": "Supprimer ce tableau",
   "Width": "Largeur",
   "Insufficient data available.": "Pas suffisamment de données.",

From ac57386702705011cd305811f43dd2b6a0e8ded4 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:36:24 -0500
Subject: [PATCH 2/6] lint: comment charts drawer width logic

---
 src/js/components/Overview/Drawer/ManageChartsDrawer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index 370b0772..c2720c3b 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -24,6 +24,8 @@ 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' : 400}
       extra={
         <Space>

From 2b1c42a82f7babe1c7d102ae77573e382586cf71 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:38:50 -0500
Subject: [PATCH 3/6] style: wider chart drawer + alt show transl

---
 src/js/components/Overview/Drawer/ManageChartsDrawer.tsx | 2 +-
 src/public/locales/fr/default_translation_fr.json        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index c2720c3b..f1034704 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -26,7 +26,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       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' : 400}
+      width={isSmallScreen ? '100vw' : 420}
       extra={
         <Space>
           <Button
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index 8a280036..a500263b 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -64,7 +64,7 @@
   "Download DATS File": "Télécharcher le fichier DATS",
   "Charts": "Tableaux",
   "Manage Charts": "Gestion des tableaux",
-  "Show All": "Aff. tous",
+  "Show All": "Montrer tous",
   "Reset": "Réinit.",
   "Hide All": "Cacher tous",
   "Remove this chart": "Supprimer ce tableau",

From 5b82fe001014d8a9eb4ec4cf2fc82b87725374d4 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:03:07 -0500
Subject: [PATCH 4/6] i18n: add missing beacon network translations

---
 src/js/components/Beacon/BeaconCommon/Filters.tsx               | 2 +-
 src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx | 2 +-
 src/public/locales/en/default_translation_en.json               | 2 ++
 src/public/locales/fr/default_translation_fr.json               | 2 ++
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/Filters.tsx b/src/js/components/Beacon/BeaconCommon/Filters.tsx
index 0b83fd29..60435834 100644
--- a/src/js/components/Beacon/BeaconCommon/Filters.tsx
+++ b/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())}
diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
index 5fe994ca..a8a01cdd 100644
--- a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
+++ b/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} />} />
       )}
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index 21d14d27..dbc7865d 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -113,8 +113,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",
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index a500263b..fc6cc70a 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -113,8 +113,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.",

From df6d81391dec1d6cd26ed416e6bf905da14e0c1d Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:15:32 -0500
Subject: [PATCH 5/6] i18n: footer translation

---
 src/js/components/SiteFooter.tsx                  | 12 ++++++------
 src/public/locales/en/default_translation_en.json | 10 ++++++++--
 src/public/locales/fr/default_translation_fr.json | 10 ++++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/js/components/SiteFooter.tsx b/src/js/components/SiteFooter.tsx
index 791ba6a5..b80e3424 100644
--- a/src/js/components/SiteFooter.tsx
+++ b/src/js/components/SiteFooter.tsx
@@ -14,7 +14,7 @@ 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" />
@@ -22,19 +22,19 @@ const SiteFooter = () => {
           </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>
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index dbc7865d..a0e45d65 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -70,8 +70,6 @@
   "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.",
@@ -134,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"
   }
 }
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index fc6cc70a..adde0dda 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -70,8 +70,6 @@
   "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.",
@@ -134,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)"
   }
 }

From 9d1bf8cda443bacd4f582ede9ee634c756e0327d Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:25:04 -0500
Subject: [PATCH 6/6] i18n: translate chart units + choropleth count

---
 src/js/components/Overview/Chart.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
index 91b471a9..172300ae 100644
--- a/src/js/components/Overview/Chart.tsx
+++ b/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}
             </>
           )}
         />