Global translations

src/frontend/static/frontend/package.json

@@ -22,11 +22,6 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "babel-loader": "^10.0.0",
-    "babel-plugin-react-compiler": "^19.1.0-rc.2",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "react-compiler-runtime": "^19.1.0-rc.2",
-
     "@eslint/compat": "^1.2.8",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.27.0",
@@ -37,13 +32,17 @@
     "@types/react-dom": "^18.3.5",
     "@types/react-virtualized": "^9.22.2",
     "@types/validator": "^13.12.3",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "css-loader": "^7.1.2",
     "eslint": "^9.27.0",
     "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
     "neostandard": "^0.12.1",
+    "react-compiler-runtime": "^19.1.0-rc.2",
     "style-loader": "^4.0.0",
     "ts-checker-rspack-plugin": "^1.1.1",
     "ts-loader": "^9.5.2",
@@ -72,6 +71,7 @@
     "react-avatar": "^5.0.3",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
+    "react-intl": "^7.1.14",
     "react-virtualized": "^9.22.6",
     "recharts": "^2.15.1",
     "semantic-ui-react": "^2.1.5",

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

@@ -25,7 +25,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/MainNavbar.tsx

@@ -149,7 +149,7 @@ const LogInLogOutPanel = (props: LogInLogOutPanelProps) => {
     )
 }
 
-type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source'
+type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers' | 'open-source' | 'faq'
 
 interface MainNavbarProps {
     activeItem?: ActiveItemOptions,
@@ -289,6 +289,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,17 @@ 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' })} B.Comp.Sc. 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 +91,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>

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/BiomarkerInferenceExperimentsPanel.tsx

@@ -7,6 +7,7 @@ import { NewInferenceExperimentModal } from './NewInferenceExperimentModal'
 import { InferenceExperimentResultModal } from './InferenceExperimentResultModal'
 import ky from 'ky'
 import { alertGeneralError } from '../../../../utils/util_functions'
+import { useIntl } from 'react-intl'
 
 declare const urlBiomarkerInferenceExperimentsDetails: string
 
@@ -23,7 +24,7 @@ interface BiomarkerInferenceExperimentsPanelProps {
  */
 export const BiomarkerInferenceExperimentsPanel = (props: BiomarkerInferenceExperimentsPanelProps) => {
     const abortController = useRef(new AbortController())
-
+    const intl = useIntl()
     const [openModalNewInferenceExperiment, setOpenModalNewInferenceExperiment] = useState(false)
     const [openModalResultInferenceExperiment, setOpenModalResultInferenceExperiment] = useState(false)
     const [selectedInferenceExperiment, setSelectedInferenceExperiment] = useState<Nullable<InferenceExperimentForTable>>(null)
@@ -92,15 +93,15 @@ export const BiomarkerInferenceExperimentsPanel = (props: BiomarkerInferenceExpe
         return (
             <Modal
                 className='large-modal'
-                closeIcon={<Icon name='close' size='large' />}
+                closeIcon={<Icon name='close' size='large' title={intl.formatMessage({ id: 'common.close' })} />}
                 closeOnEscape={false}
                 centered={false}
                 closeOnDimmerClick={false}
                 closeOnDocumentClick={false}
                 onClose={closeStatResult}
                 open={openModalResultInferenceExperiment}
             >
-                <Header icon='area chart' content={`Inference experiment "${selectedInferenceExperiment.name}"`} />
+                <Header icon='area chart' content={intl.formatMessage({ id: 'inference.experiment.title' }, { name: selectedInferenceExperiment.name })} />
 
                 <Modal.Content>
                     <InferenceExperimentResultModal selectedInferenceExperiment={selectedInferenceExperiment} refreshExperimentInfo={refreshExperimentInfo} />

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentClinicalAttributeSelect.tsx

@@ -67,7 +67,7 @@ export const InferenceExperimentClinicalAttributeSelect = (props: InferenceExper
     }, [props.selectedInferenceExperiment.id])
     return (
         <>
-            <InputLabel label='Group by clinical attribute' />
+            <InputLabel label='inference.clinicalAttribute.label' />
 
             <Form.Select
                 fluid
@@ -79,7 +79,7 @@ export const InferenceExperimentClinicalAttributeSelect = (props: InferenceExper
                 clearable
                 value={props.selectedClinicalAttribute}
                 onChange={(_, { value }) => { props.setSelectedClinicalAttribute(value as string) }}
-                placeholder='Clinical attribute to group by'
+                placeholder='inference.clinicalAttribute.placeholder'
                 disabled={clinicalAttributesOptions.length === 0}
             />
         </>

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentResultMetrics.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Header, Segment } from 'semantic-ui-react'
 import { InferenceExperimentForTable } from '../../types'
 import { ModelDetailsPanel } from '../ModelDetailsPanels'
+import { useIntl } from 'react-intl'
 
 // declare const urlInferenceExperimentMetrics: string
 
@@ -17,15 +18,16 @@ interface InferenceExperimentResultMetricsProps {
  * @returns Component
  */
 export const InferenceExperimentResultMetrics = (props: InferenceExperimentResultMetricsProps) => {
+    const intl = useIntl()
     return (
         <>
             <Header textAlign='center' dividing as='h1'>
-                "{props.selectedInferenceExperiment.name}" metrics
+                {intl.formatMessage({ id: 'inference.metrics.title' }, { name: props.selectedInferenceExperiment.name })}
             </Header>
 
             {/* Model details. */}
             <Segment>
-                <Header as='h2' dividing>Model details</Header>
+                <Header as='h2' dividing>{intl.formatMessage({ id: 'inference.model.details' })}</Header>
 
                 {props.selectedInferenceExperiment.trained_model !== null &&
                     <ModelDetailsPanel trainedModelPk={props.selectedInferenceExperiment.trained_model} />}

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentsTable.tsx

@@ -11,6 +11,7 @@ import { Nullable } from '../../../../utils/interfaces'
 import { StopExperimentButton } from '../../../pipeline/all-experiments-view/StopExperimentButton'
 import { DeleteButton } from '../../../common/DeleteButton'
 import { TableCellSources } from '../../../common/TableCellSources'
+import { useIntl } from 'react-intl'
 
 declare const urlBiomarkerInferenceExperiments: string
 declare const urlStopInferenceExperiment: string
@@ -31,6 +32,7 @@ interface InferenceExperimentsTableProps {
  * @returns Component.
  */
 export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps) => {
+    const intl = useIntl()
     const [stoppingInferenceExperiment, setStoppingInferenceExperiment] = useState(false)
     const [inferenceExperimentToStop, setInferenceExperimentToStop] = useState<Nullable<InferenceExperimentForTable>>(null)
 
@@ -109,21 +111,21 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps)
 
         return (
             <Modal size='small' open={inferenceExperimentToStop !== null} onClose={handleCloseStopInferenceExperiment} centered={false}>
-                <Header icon='stop' content='Stop inference experiment' />
+                <Header icon='stop' content={intl.formatMessage({ id: 'inference.stop.title' })} />
                 <Modal.Content>
-                    Are you sure you want to stop the inference experiment <strong>{inferenceExperimentToStop.name}</strong>?
+                    {intl.formatMessage({ id: 'inference.stop.confirm' }, { name: inferenceExperimentToStop.name })}
                 </Modal.Content>
                 <Modal.Actions>
                     <Button onClick={handleCloseStopInferenceExperiment}>
-                        Cancel
+                        {intl.formatMessage({ id: 'common.cancel' })}
                     </Button>
                     <Button
                         color='red'
                         onClick={stopInferenceExperiment}
                         loading={stoppingInferenceExperiment}
                         disabled={stoppingInferenceExperiment}
                     >
-                        Stop
+                        {intl.formatMessage({ id: 'common.stop' })}
                     </Button>
                 </Modal.Actions>
             </Modal>
@@ -141,16 +143,16 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps)
 
         return (
             <Modal size='small' open={inferenceExperimentToRemove !== null} onClose={handleCloseRemoveInferenceExperiment} centered={false}>
-                <Header icon='trash' content='Delete experiment' />
+                <Header icon='trash' content={intl.formatMessage({ id: 'inference.delete.title' })} />
                 <Modal.Content>
-                    Are you sure you want to delete the inference experiment <strong>{inferenceExperimentToRemove.name}</strong>?
+                    {intl.formatMessage({ id: 'inference.delete.confirm' }, { name: inferenceExperimentToRemove.name })}
                 </Modal.Content>
                 <Modal.Actions>
                     <Button onClick={handleCloseRemoveInferenceExperiment}>
-                        Cancel
+                        {intl.formatMessage({ id: 'common.cancel' })}
                     </Button>
                     <Button color='red' onClick={deleteInferenceExperiment} loading={deletingInferenceExperiment} disabled={deletingInferenceExperiment}>
-                        Delete
+                        {intl.formatMessage({ id: 'common.delete' })}
                     </Button>
                 </Modal.Actions>
             </Modal>
@@ -165,24 +167,25 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps)
             {/* Modal to confirm deleting the InferenceExperiment */}
             {getDeletionConfirmModal()}
             <PaginatedTable<InferenceExperimentForTable>
-                headerTitle='Inference experiments'
+                headerTitle={intl.formatMessage({ id: 'inference.experiments.table.title' })}
                 headers={[
-                    { name: 'Name', serverCodeToSort: 'name', width: 3 },
-                    { name: 'Description', serverCodeToSort: 'description', width: 4 },
-                    { name: 'State', serverCodeToSort: 'state', textAlign: 'center' },
-                    { name: 'Model', serverCodeToSort: 'model', width: 1 },
-                    { name: 'Date', serverCodeToSort: 'created' },
-                    { name: 'Datasets' },
-                    { name: 'Actions' }
+                    { name: intl.formatMessage({ id: 'common.name' }), serverCodeToSort: 'name', width: 3 },
+                    { name: intl.formatMessage({ id: 'common.description' }), serverCodeToSort: 'description', width: 4 },
+                    { name: intl.formatMessage({ id: 'inference.table.columns.state' }), serverCodeToSort: 'state', textAlign: 'center' },
+                    { name: intl.formatMessage({ id: 'inference.table.columns.model' }), serverCodeToSort: 'model', width: 1 },
+                    { name: intl.formatMessage({ id: 'inference.table.columns.date' }), serverCodeToSort: 'created' },
+                    { name: intl.formatMessage({ id: 'inference.table.columns.dataset' }) },
+                    { name: intl.formatMessage({ id: 'common.actions' }) }
+
                 ]}
                 queryParams={{ biomarker_pk: props.selectedBiomarker.id }}
                 defaultSortProp={{ sortField: 'created', sortOrderAscendant: false }}
                 showSearchInput
-                searchLabel='Name'
-                searchPlaceholder='Search by name or description'
+                searchLabel={intl.formatMessage({ id: 'common.name' })}
+                searchPlaceholder={intl.formatMessage({ id: 'inference.search.placeholder' })}
                 urlToRetrieveData={urlBiomarkerInferenceExperiments}
                 customElements={[
-                    <Form.Field key={1} className='custom-table-field' title='New inference experiment'>
+                    <Form.Field key={1} className='custom-table-field' title={intl.formatMessage({ id: 'inference.new.title' })}>
                         <Button primary icon onClick={() => { props.setOpenModalNewInferenceExperiment(true) }}>
                             <Icon name='add' />
                         </Button>
@@ -219,14 +222,15 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps)
                                         onClick={() => { props.openInferenceResult(inferenceExperiment) }}
                                         className='clickable'
                                         color='blue'
-                                        title='See results'
+                                        title={intl.formatMessage({ id: 'inference.results.tooltip' })}
+
                                     />
                                 )}
 
                                 {/* Stop button */}
                                 {isInProcess && (
                                     <StopExperimentButton
-                                        title='Stop experiment'
+                                        title={intl.formatMessage({ id: 'inference.stop.title' })}
                                         onClick={() => setInferenceExperimentToStop(inferenceExperiment)}
                                     />
                                 )}
@@ -235,7 +239,7 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps)
                                 {/* Todo: Revisar ownerid */}
                                 {!isInProcess && (
                                     <DeleteButton
-                                        title='Delete experiment'
+                                        title={intl.formatMessage({ id: 'inference.delete.title' })}
                                         onClick={() => setInferenceExperimentToRemove(inferenceExperiment)}
                                         ownerId={null}
                                     />