Implement a new component for a better UX of Tags

src/frontend/static/frontend/src/components/Base.tsx

@@ -16,10 +16,15 @@ import 'fomantic-ui-css/semantic.css'
 import '../css/base.css'
 
 const messages = { en, es }
+const LOCALE_STORAGE_KEY = 'multiomix_locale'
+
+const LOCALES = ['en', 'es'] as const
+type Locale = typeof LOCALES[number]
+const LANG_SET: Set<Locale> = new Set(LOCALES)
 
 interface LocaleContextType {
-    locale: 'en' | 'es',
-    setLocale: React.Dispatch<React.SetStateAction<'en' | 'es'>>
+    locale: Locale,
+    setLocale: (locale: Locale) => void
 }
 const LocaleContext = React.createContext<LocaleContextType>({
     locale: 'es',
@@ -51,7 +56,15 @@ const Base = (props: BaseProps) => {
     const [currentUser, setUser] = useState<Nullable<DjangoUser>>(null)
     const [isLoadingCurrentUser, setIsLoadingCurrentUser] = useState<boolean>(true)
     // State that defines the current language ('es' or 'en') for <IntlProvider>, used to display the interface in the selected locale
-    const [locale, setLocale] = useState<'en' | 'es'>('es')
+    const [locale, setLocaleState] = useState<Locale>(() => {
+        const storedLocale = localStorage.getItem(LOCALE_STORAGE_KEY) as Locale
+        return LANG_SET.has(storedLocale) ? storedLocale : 'es'
+    })
+
+    const setLocale = (newLocale: Locale) => {
+        localStorage.setItem(LOCALE_STORAGE_KEY, newLocale)
+        setLocaleState(newLocale)
+    }
 
     /**
      * Method which is executed when the component has mounted
@@ -120,4 +133,4 @@ const Base = (props: BaseProps) => {
     )
 }
 
-export { Base, CurrentUserContext }
+export { Base, CurrentUserContext, LocaleContext }

src/frontend/static/frontend/src/components/LanguageSelector.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react'
+import { Dropdown, Flag } from 'semantic-ui-react'
+import { useIntl } from 'react-intl'
+import { LocaleContext } from './Base'
+
+/**
+ * Allows the user to change the interface language without reloading the page.
+ * @returns Component
+ */
+const LanguageSelector = () => {
+    const intl = useIntl()
+    const { locale, setLocale } = useContext(LocaleContext)
+
+    return (
+        <Dropdown
+            item
+            text={locale === 'es' ? 'Español' : 'English'}
+            aria-label={intl.formatMessage({ id: 'mainNavbar.language' })}
+        >
+            <Dropdown.Menu>
+                <Dropdown.Item active={locale === 'es'} onClick={() => setLocale('es')}>
+                    <Flag name='es' />
+                    Spanish (Español)
+                </Dropdown.Item>
+                <Dropdown.Item active={locale === 'en'} onClick={() => setLocale('en')}>
+                    <Flag name='gb' />
+                    English
+                </Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown>
+    )
+}
+
+export { LanguageSelector }

src/frontend/static/frontend/src/components/MainNavbar.tsx

@@ -6,6 +6,7 @@ import { CurrentUserContext } from './Base'
 import { UpdateUserModal } from './UpdateUserModal'
 import { Alert } from './common/Alert'
 import { useIntl } from 'react-intl'
+import { LanguageSelector } from './LanguageSelector'
 
 // Constants declared in base.html
 declare const urlIndex: string
@@ -320,6 +321,7 @@ const MainNavbar = (props: MainNavbarProps) => {
 
             {/* LogIn/LogOut panel */}
             <Menu.Menu position='right'>
+                <LanguageSelector />
                 <LogInLogOutPanel currentUser={currentUser} />
             </Menu.Menu>
         </Menu>

src/frontend/static/frontend/src/components/open-source/OpenSource.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Base } from '../Base'
 import { Container, Divider, Grid, Header, HeaderSubheader, List, ListContent, ListDescription, ListHeader, ListIcon, ListItem } from 'semantic-ui-react'
-import { useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 /**
  * Wrapper to make Context.Provider work.
@@ -17,16 +17,16 @@ const OpenSourceWrapper = () => {
                     <Grid.Row columns={1}>
                         <Grid.Column>
                             <Header as='h1'>
-                                {intl.formatMessage({ id: 'openSource.header.main' })}{' '}
-                                <a href='https://omicsdatascience.org/' rel='noreferrer' target='_blank'>
-                                    Omicsdatascience
-                                </a>{' '}
-                                <a href='https://github.com/omics-datascience' rel='noreferrer' target='_blank'>
-                                    GitHub
-                                </a>.
+                                <FormattedMessage
+                                    id='openSource.intro.title'
+                                    values={{
+                                        organizationLink: chunks => <a href='https://omicsdatascience.org/' rel='noreferrer' target='_blank'>{chunks}</a>,
+                                        githubLink: chunks => <a href='https://github.com/omics-datascience' rel='noreferrer' target='_blank'>{chunks}</a>
+                                    }}
+                                />
                             </Header>
                             <HeaderSubheader>
-                                {intl.formatMessage({ id: 'openSource.header.sub' })}
+                                {intl.formatMessage({ id: 'openSource.intro.description' })}
                             </HeaderSubheader>
                             <List>
                                 <ListItem>
@@ -56,10 +56,15 @@ const OpenSourceWrapper = () => {
                     <Grid.Row columns={1}>
                         <Grid.Column>
                             <Header as='h2'>
-                                {intl.formatMessage({ id: 'openSource.publications.title' })}{' '} <a href='https://omicsdatascience.org/?page_id=15' rel='noreferrer' target='_blank'>contributions</a>
+                                <FormattedMessage
+                                    id='openSource.publications.title'
+                                    values={{
+                                        contributionsLink: chunks => <a href='https://omicsdatascience.org/?page_id=15' rel='noreferrer' target='_blank'>{chunks}</a>
+                                    }}
+                                />
                             </Header>
                             <HeaderSubheader>
-                                {intl.formatMessage({ id: 'openSource.publications.sub' })}
+                                {intl.formatMessage({ id: 'openSource.publications.description' })}
                             </HeaderSubheader>
                             <List>
                                 <ListItem>
@@ -69,7 +74,7 @@ const OpenSourceWrapper = () => {
                                             Multiomix
                                         </ListHeader>
                                         <ListDescription>
-                                            {intl.formatMessage({ id: 'openSource.publications.multiomix.description' })}
+                                            {intl.formatMessage({ id: 'openSource.publication.multiomix.description' })}
                                         </ListDescription>
                                     </ListContent>
                                 </ListItem>
@@ -80,7 +85,7 @@ const OpenSourceWrapper = () => {
                                             Modulector
                                         </ListHeader>
                                         <ListDescription>
-                                            {intl.formatMessage({ id: 'openSource.publications.modulector.description' })}
+                                            {intl.formatMessage({ id: 'openSource.publication.modulector.description' })}
                                         </ListDescription>
                                     </ListContent>
                                 </ListItem>

src/frontend/static/frontend/src/locales/en.ts

@@ -813,14 +813,14 @@ export default {
     'loginSignUpForm.validEmailMessage': 'Please provide a valid email address',
     'loginSignUpForm.passwordMismatchMessage': 'This value is different to Password field',
     // 91.OpenSource
-    'openSource.intro.title': 'At Omicsdatascience, we believe in open science. Explore our open-source projects, freely available to the community to foster collaboration, transparency, and innovation in biomedical research. Available in our GitHub organization.',
+    'openSource.intro.title': 'At <organizationLink>Omicsdatascience</organizationLink>, we believe in open science. Explore our open-source projects, freely available to the community to foster collaboration, transparency, and innovation in biomedical research. Available in our <githubLink>GitHub organization</githubLink>.',
     'openSource.intro.description': 'These repositories represent some of our most prominent open-source initiatives, developed to empower the research community with accessible and cutting-edge bioinformatics tools.',
 
     'openSource.multiomix.description': 'Cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation.',
     'openSource.modulector.description': 'Modulector is a performing open platform that provides information about miRNAs, genes and methylation sites based on a compilation of information from different resources.',
     'openSource.bioapi.description': 'A powerful abstraction of genomics databases. Bioapi is a REST API that provides data related to gene nomenclature, gene expression, and metabolic pathways.',
 
-    'openSource.publications.title': 'Discover our scientific contributions',
+    'openSource.publications.title': 'Discover our scientific <contributionsLink>contributions</contributionsLink>',
     'openSource.publications.description': 'In addition to our open-source software, we regularly publish peer-reviewed scientific articles that document the methodologies, innovations, and findings behind our tools. We invite you to explore our publications to better understand the research impact of our work.',
 
     'openSource.publication.multiomix.description': 'A cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation',
@@ -1359,6 +1359,7 @@ export default {
     'mainNavbar.aboutUs': 'About us',
     'mainNavbar.faq': 'FAQ',
     'mainNavbar.openSource': 'Open source',
+    'mainNavbar.language': 'Language',
 
     'mainNavbar.homepage': 'Multiomix homepage',
     // 148.UpdateUserModal

src/frontend/static/frontend/src/locales/es.ts

@@ -862,14 +862,14 @@ export default {
     'loginSignUpForm.validEmailMessage': 'Por favor ingrese una dirección de correo válida',
     'loginSignUpForm.passwordMismatchMessage': 'Este valor es diferente al campo Contraseña',
     // 91.OpenSource
-    'openSource.intro.title': 'En Omicsdatascience creemos en la ciencia abierta. Explora nuestros proyectos de código abierto, disponibles libremente para la comunidad con el fin de fomentar la colaboración, la transparencia y la innovación en la investigación biomédica. Disponibles en nuestra organización de GitHub.',
+    'openSource.intro.title': 'En <organizationLink>Omicsdatascience</organizationLink> creemos en la ciencia abierta. Explora nuestros proyectos de código abierto, disponibles libremente para la comunidad con el fin de fomentar la colaboración, la transparencia y la innovación en la investigación biomédica. Disponibles en nuestra <githubLink>organización de GitHub</githubLink>.',
     'openSource.intro.description': 'Estos repositorios representan algunas de nuestras iniciativas de código abierto más destacadas, desarrolladas para brindar a la comunidad científica herramientas bioinformáticas accesibles y de vanguardia.',
 
     'openSource.multiomix.description': 'Plataforma basada en la nube para inferir eventos genómicos y epigenómicos del cáncer asociados con la modulación de la expresión génica.',
     'openSource.modulector.description': 'Modulector es una plataforma abierta que proporciona información sobre miRNAs, genes y sitios de metilación basada en la recopilación de información de diferentes recursos.',
     'openSource.bioapi.description': 'Una potente abstracción de bases de datos genómicas. BioApi es una API REST que proporciona datos relacionados con nomenclatura génica, expresión génica y rutas metabólicas.',
 
-    'openSource.publications.title': 'Descubre nuestras contribuciones científicas',
+    'openSource.publications.title': 'Descubre nuestras <contributionsLink>contribuciones científicas</contributionsLink>',
     'openSource.publications.description': 'Además de nuestro software de código abierto, publicamos regularmente artículos científicos revisados por pares que documentan las metodologías, innovaciones y hallazgos detrás de nuestras herramientas. Te invitamos a explorar nuestras publicaciones para comprender mejor el impacto científico de nuestro trabajo.',
 
     'openSource.publication.multiomix.description': 'Una plataforma basada en la nube para inferir eventos genómicos y epigenómicos del cáncer asociados con la modulación de la expresión génica',
@@ -1413,6 +1413,7 @@ export default {
     'mainNavbar.aboutUs': 'Sobre nosotros',
     'mainNavbar.faq': 'Preguntas frecuentes',
     'mainNavbar.openSource': 'Código abierto',
+    'mainNavbar.language': 'Idioma',
 
     'mainNavbar.homepage': 'Página principal de Multiomix',
     // 148.UpdateUserModal