Global translations

src/frontend/static/frontend/rspack.common.js

@@ -26,7 +26,8 @@ export const common = {
         survival: `${PATHS.src}/survival.tsx`,
         aboutUs: `${PATHS.src}/about-us.tsx`,
         openSource: `${PATHS.src}/open-source.tsx`,
-        sitePolicy: `${PATHS.src}/site-policy.tsx`
+        sitePolicy: `${PATHS.src}/site-policy.tsx`,
+        faq: `${PATHS.src}/faq.tsx`
     },
     output: {
         path: PATHS.output,

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

@@ -4,7 +4,26 @@ import ky from 'ky'
 import { DjangoUser } from '../utils/django_interfaces'
 import { Nullable } from '../utils/interfaces'
 import { Footer } from './Footer'
-import { ChatWidget } from './assistant/ChatWidget'
+import { IntlProvider } from 'react-intl'
+
+// Locales
+import es from '../locales/es'
+import en from '../locales/en'
+
+// Common dependencies for all the pages
+import 'fomantic-ui-css/semantic.css'
+import '../css/base.css'
+
+const messages = { en, es }
+
+interface LocaleContextType {
+    locale: 'en' | 'es',
+    setLocale: React.Dispatch<React.SetStateAction<'en' | 'es'>>
+}
+const LocaleContext = React.createContext<LocaleContextType>({
+    locale: 'es',
+    setLocale: () => {}
+})
 
 declare const urlCurrentUser: string
 
@@ -30,6 +49,8 @@ const Base = (props: BaseProps) => {
     const abortController = useRef(new AbortController())
     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')
 
     /**
      * Method which is executed when the component has mounted
@@ -76,20 +97,21 @@ const Base = (props: BaseProps) => {
 
     return (
         <CurrentUserContext.Provider value={currentUser}>
-            {/* Navbar */}
-            <MainNavbar activeItem={props.activeItem} isLoadingUser={isLoadingCurrentUser} />
-
-            {/* Composition part */}
-            <div className={props.wrapperClass}>
-                {props.children}
-            </div>
+            <LocaleContext.Provider value={{ locale, setLocale }}>
+                <IntlProvider locale={locale} messages={messages[locale]}>
+                    {/* Navbar */}
+                    <MainNavbar activeItem={props.activeItem} isLoadingUser={isLoadingCurrentUser} />
 
-            {/* Footer */}
-            {/* TODO: add license */}
-            <Footer />
+                    {/* Composition part */}
+                    <div className={props.wrapperClass}>
+                        {props.children}
+                    </div>
 
-            {/* AI Assistant floating widget */}
-            {currentUser && !currentUser.is_anonymous && <ChatWidget />}
+                    {/* Footer */}
+                    {/* TODO: add license */}
+                    <Footer />
+                </IntlProvider>
+            </LocaleContext.Provider>
         </CurrentUserContext.Provider>
     )
 }

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

@@ -150,7 +150,7 @@ const LogInLogOutPanel = (props: LogInLogOutPanelProps) => {
     )
 }
 
-type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source' | 'differential-expression'
+type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source' | 'differential-expression' | 'faq'
 
 interface MainNavbarProps {
     activeItem?: ActiveItemOptions,
@@ -298,6 +298,17 @@ const MainNavbar = (props: MainNavbarProps) => {
                 </Menu.Item>
             </Menu.Menu>
 
+            <Menu.Menu>
+                <Menu.Item
+                    as='a'
+                    href='/faq'
+                    style={{ fontSize: '1rem' }}
+                    active={props.activeItem === 'faq'}
+                >
+                    FAQ
+                </Menu.Item>
+            </Menu.Menu>
+
             <Menu.Menu>
                 <Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
                     Open source

src/frontend/static/frontend/src/components/about-us/AboutUs.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Container, Divider, Grid, Header, Image, List } from 'semantic-ui-react'
 import { Base } from '../Base'
+import { useIntl } from 'react-intl'
 
 const EMAILS: string[] = [
     'mcabba@gmail.com',
@@ -13,6 +14,7 @@ const EMAILS: string[] = [
  * @returns Component
  */
 export const AboutUs = () => {
+    const intl = useIntl()
     return (
         <div>
             <Base activeItem='about-us' wrapperClass='wrapper'>
@@ -34,13 +36,13 @@ export const AboutUs = () => {
                         <Grid.Row columns={1}>
                             <Grid.Column>
                                 <Header as='h1'>
-                                    Multiomix is the result of interdisciplinary work between members of the following scientific institutions:
+                                    {intl.formatMessage({ id: 'about.description' })}
                                 </Header>
 
                                 <List>
-                                    <List.Item icon='building' content='CAETI - Universidad Abierta Interamericana' />
-                                    <List.Item icon='building' content='CINIBA - Faculty of Medical Sciences - UNLP' />
-                                    <List.Item icon='building' content='LIDI - Faculty of Informatics - UNLP' />
+                                    <List.Item icon='building' content={intl.formatMessage({ id: 'about.institution.caeti' })} />
+                                    <List.Item icon='building' content={intl.formatMessage({ id: 'about.institution.ciniba' })} />
+                                    <List.Item icon='building' content={intl.formatMessage({ id: 'about.institution.lidi' })} />
                                 </List>
                             </Grid.Column>
                         </Grid.Row>
@@ -51,7 +53,7 @@ export const AboutUs = () => {
                         <Grid.Row columns={1}>
                             <Grid.Column>
                                 <Header as='h1'>
-                                    Project coordination:
+                                    {intl.formatMessage({ id: 'about.coordination' })}
                                 </Header>
 
                                 <List>
@@ -67,15 +69,16 @@ export const AboutUs = () => {
                         <Grid.Row columns={1}>
                             <Grid.Column>
                                 <Header as='h1'>
-                                    Project members
+                                    {intl.formatMessage({ id: 'about.members.title' })}
                                 </Header>
 
                                 <Header as='h3'>
-                                    Main contributor: B.Comp.Sc. Genaro Camele
+                                    {intl.formatMessage({ id: 'about.members.main' })} PhD in Computer Science Genaro Camele
                                 </Header>
 
                                 <Header as='h3'>
-                                    Collaborators: Esp. Hernán Chanfreau, Dr. Sebastián Menazzi, St. Agustín Marraco, B.Comp.Sc. Julián Muhlberger, St. Ramiro Lasorsa, PhD. Waldo Hasperué
+                                    {intl.formatMessage({ id: 'about.members.collaborators' })} Esp. Hernán Chanfreau, Dr. Sebastián Menazzi, St. Agustín Marraco, B.Comp.Sc. Julián Muhlberger, St. Ramiro Lasorsa, PhD. Waldo Hasperué
+
                                 </Header>
                             </Grid.Column>
                         </Grid.Row>
@@ -87,18 +90,18 @@ export const AboutUs = () => {
                             <Grid.Column>
                                 {/* Contact */}
                                 <Header as='h3'>
-                                    Contact:
+                                    {intl.formatMessage({ id: 'about.contact.title' })}
                                 </Header>
 
-                                <p>For questions or suggestions please contact us:</p>
+                                <p>{intl.formatMessage({ id: 'about.contact.questions' })}</p>
 
                                 {EMAILS.map((email) => (
                                     <p key={email}>
                                         <a href={`mailto:${email}`}>{email}</a>
                                     </p>
                                 ))}
 
-                                <p>You can also contact us for creating your research institution. It will let researchers share datasets inside Multiomix.</p>
+                                <p>{intl.formatMessage({ id: 'about.contact.institutions' })}</p>
                             </Grid.Column>
                         </Grid.Row>
                     </Grid>