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 ( - +
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 = ( - {hasBeaconNetworkError && Network Error} + {hasBeaconNetworkError && {t('beacon.network_error')}} {!noResponsesYet && isFetchingAtLeastOneResponse && ( } /> )} 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} )} /> diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx index f50f2854..f1034704 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,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={ } @@ -55,7 +61,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage dispatch(setAllDisplayedCharts({ section: sectionTitle })); }} > - Show All + {t('Show All')} 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 = () => { } - tooltip="Manage Charts" + tooltip={t('Manage Charts')} style={MANAGE_CHARTS_BUTTON_STYLE} onClick={onManageChartsOpen} /> 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 = () => {
- {t('Powered by')} + {t('footer.powered_by')} Bento @@ -22,19 +22,19 @@ const SiteFooter = () => {
- Copyright © 2019-2024 the{' '} + {t('footer.copyright')} 2019-2024{' '} - Canadian Centre for Computational Genomics + {t('footer.c3g')} .
- Bento is licensed under the{' '} + {t('footer.licensed_under') + ' '} LGPLv3 - . The source code is available on{' '} + . {t('footer.source_available') + ' '} Github @@ -43,7 +43,7 @@ const SiteFooter = () => {
- {t('Terms of Use')} + {t('footer.terms_of_use')}
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json index 9582a7d1..a0e45d65 100644 --- a/src/public/locales/en/default_translation_en.json +++ b/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" } } diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json index a82f046a..adde0dda 100644 --- a/src/public/locales/fr/default_translation_fr.json +++ b/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)" } }