From 159680049285793099fe207c1dd0a6c39c645cb7 Mon Sep 17 00:00:00 2001 From: natha Date: Fri, 18 Jul 2025 16:35:53 -0300 Subject: [PATCH 01/10] FAQ push --- src/frontend/static/frontend/package.json | 2 +- src/frontend/static/frontend/rspack.common.js | 3 +- src/frontend/static/frontend/rspack.prod.js | 2 +- .../frontend/src/components/MainNavbar.tsx | 13 ++- .../frontend/src/components/faq/FAQ.tsx | 83 +++++++++++++++++++ 5 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 src/frontend/static/frontend/src/components/faq/FAQ.tsx diff --git a/src/frontend/static/frontend/package.json b/src/frontend/static/frontend/package.json index fd73478c..a2af0b70 100644 --- a/src/frontend/static/frontend/package.json +++ b/src/frontend/static/frontend/package.json @@ -57,7 +57,7 @@ "@visx/scale": "^3.5.0", "@visx/stats": "^3.5.0", "@visx/tooltip": "^3.3.0", - "apexcharts": "^3.52.0", + "apexcharts": "^4.0.0", "axios": "^1.8.4", "cytoscape": "^3.30.2", "d3": "^7.9.0", diff --git a/src/frontend/static/frontend/rspack.common.js b/src/frontend/static/frontend/rspack.common.js index e7f41f91..13bdbbf8 100644 --- a/src/frontend/static/frontend/rspack.common.js +++ b/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, diff --git a/src/frontend/static/frontend/rspack.prod.js b/src/frontend/static/frontend/rspack.prod.js index ac78fe38..e35b42e1 100644 --- a/src/frontend/static/frontend/rspack.prod.js +++ b/src/frontend/static/frontend/rspack.prod.js @@ -1,4 +1,4 @@ -import { common } from './rspack.common.js' +import { common } from './' export default { ...common, diff --git a/src/frontend/static/frontend/src/components/MainNavbar.tsx b/src/frontend/static/frontend/src/components/MainNavbar.tsx index 508735f1..84ab549a 100644 --- a/src/frontend/static/frontend/src/components/MainNavbar.tsx +++ b/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) => { + + + FAQ + + + Open source diff --git a/src/frontend/static/frontend/src/components/faq/FAQ.tsx b/src/frontend/static/frontend/src/components/faq/FAQ.tsx new file mode 100644 index 00000000..082675ab --- /dev/null +++ b/src/frontend/static/frontend/src/components/faq/FAQ.tsx @@ -0,0 +1,83 @@ +import React from 'react' +import { Base } from '../Base' +import { Container, Divider, Grid, Header, HeaderSubheader, List, ListContent, ListDescription, ListHeader, ListIcon, ListItem } from 'semantic-ui-react' + +export const FAQ = () => { + return ( + + + + {/* Git hub */} + + +
+ 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. Avilable in our GitHub organization. +
+ + These repositories represent some of our most prominent open-source initiatives, developed to empower the research community with accessible and cutting-edge bioinformatics tools. + + + + + + Multiomix + Cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation. + + + + + + Modulector + Modulector is a performing open platform that provides information about miRNAs, genes and methylation sites based on a compilation of information from different resources. + + + + + + BioApi + A powerful abstraction of genomics databases. Bioapi is a REST API that provides data related to gene nomenclature, gene expression, and metabolic pathways. + + + + + + + +
+ Discover our scientific contributions +
+ + 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. + + + + + + + Multiomix + + + A cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation + + + + + + + + Modulector + + + Una plataforma como servicio para el acceso a bases de datos de micro ARNs + + + + + + + + + + + ) +} \ No newline at end of file From 32845e60d5c724468f46938b89c768f21f06d4fe Mon Sep 17 00:00:00 2001 From: Genaro Camele Date: Mon, 21 Jul 2025 18:17:08 -0300 Subject: [PATCH 02/10] Added missing file --- src/frontend/static/frontend/src/components/faq/FAQ.tsx | 2 +- src/frontend/static/frontend/src/faq.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/frontend/static/frontend/src/faq.tsx diff --git a/src/frontend/static/frontend/src/components/faq/FAQ.tsx b/src/frontend/static/frontend/src/components/faq/FAQ.tsx index 082675ab..b8969f75 100644 --- a/src/frontend/static/frontend/src/components/faq/FAQ.tsx +++ b/src/frontend/static/frontend/src/components/faq/FAQ.tsx @@ -80,4 +80,4 @@ export const FAQ = () => { ) -} \ No newline at end of file +} diff --git a/src/frontend/static/frontend/src/faq.tsx b/src/frontend/static/frontend/src/faq.tsx new file mode 100644 index 00000000..7c41060f --- /dev/null +++ b/src/frontend/static/frontend/src/faq.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import { createRoot } from 'react-dom/client' +import { FAQ } from './components/faq/FAQ' + +const container = document.getElementById('faq-app') +const root = createRoot(container!) +// eslint-disable-next-line @stylistic/jsx-pascal-case +root.render() From ea93d56a1b726bcdcbe2f70fad00e582f33f50e5 Mon Sep 17 00:00:00 2001 From: natha Date: Thu, 28 Aug 2025 16:41:11 -0300 Subject: [PATCH 03/10] FAQ Components --- .../frontend/src/components/faq/FAQ.tsx | 142 ++++++++---------- src/frontend/static/frontend/src/faq.tsx | 1 - src/frontend/templates/frontend/base.html | 1 + src/frontend/templates/frontend/faq.html | 16 ++ src/frontend/urls.py | 3 +- src/frontend/views.py | 4 + 6 files changed, 87 insertions(+), 80 deletions(-) create mode 100644 src/frontend/templates/frontend/faq.html diff --git a/src/frontend/static/frontend/src/components/faq/FAQ.tsx b/src/frontend/static/frontend/src/components/faq/FAQ.tsx index b8969f75..bb783695 100644 --- a/src/frontend/static/frontend/src/components/faq/FAQ.tsx +++ b/src/frontend/static/frontend/src/components/faq/FAQ.tsx @@ -1,83 +1,69 @@ import React from 'react' +import { Container, Divider, Grid, Header, Segment, List } from 'semantic-ui-react' import { Base } from '../Base' -import { Container, Divider, Grid, Header, HeaderSubheader, List, ListContent, ListDescription, ListHeader, ListIcon, ListItem } from 'semantic-ui-react' export const FAQ = () => { - return ( - - - - {/* Git hub */} - - -
- 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. Avilable in our GitHub organization. -
- - These repositories represent some of our most prominent open-source initiatives, developed to empower the research community with accessible and cutting-edge bioinformatics tools. - - - - - - Multiomix - Cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation. - - - - - - Modulector - Modulector is a performing open platform that provides information about miRNAs, genes and methylation sites based on a compilation of information from different resources. - - - - - - BioApi - A powerful abstraction of genomics databases. Bioapi is a REST API that provides data related to gene nomenclature, gene expression, and metabolic pathways. - - - - - - - -
- Discover our scientific contributions -
- - 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. - - - - - - - Multiomix - - - A cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation - - - - - - - - Modulector - - - Una plataforma como servicio para el acceso a bases de datos de micro ARNs - - - - - - - - - - - ) + return ( + + + + + +
Frequently Asked Questions
+ + + +
How are cBioPortal datasets incorporated and preprocessed?
+

+ Datasets from cBioPortal are synchronized regularly to ensure data consistency. + If there is an update that we miss, users can contact us directly. + Duplicate molecules are removed to keep the dataset clean. + Samples without information for a given molecule in a biomarker are excluded from trained models, + statistical validations, feature selection experiments, and inference steps. +

+

+ Clinical data also undergo preprocessing: cases with NaN, empty or Null values are filtered out. + Additionally, cases with an event but survival time equal to zero are excluded (pending clarification from cBioPortal). +

+ + + + + +
How is user-uploaded data privacy handled?
+

+ Uploaded data is securely stored and only accessible to the uploading user. + Once deleted, the data is permanently removed from our servers and cannot be recovered. + No third parties have access to private user data. +

+ + + + + +
Libraries and Tools with Licenses
+

+ For legal and transparency reasons, we provide a list of third-party libraries and tools used in this platform, + along with their respective licenses. This ensures compliance and acknowledgment of the open-source + community contributions that power our ecosystem. +

+ + + + + +
Additional Links
+ + Site Map + Contact Us + Terms and Conditions + Privacy Policy + + + + + + + + ) } diff --git a/src/frontend/static/frontend/src/faq.tsx b/src/frontend/static/frontend/src/faq.tsx index 7c41060f..def10ef7 100644 --- a/src/frontend/static/frontend/src/faq.tsx +++ b/src/frontend/static/frontend/src/faq.tsx @@ -4,5 +4,4 @@ import { FAQ } from './components/faq/FAQ' const container = document.getElementById('faq-app') const root = createRoot(container!) -// eslint-disable-next-line @stylistic/jsx-pascal-case root.render() diff --git a/src/frontend/templates/frontend/base.html b/src/frontend/templates/frontend/base.html index 0f2a9378..c12137aa 100644 --- a/src/frontend/templates/frontend/base.html +++ b/src/frontend/templates/frontend/base.html @@ -61,6 +61,7 @@ const urlSearchUser = "{% url 'search_user' %}" {# URL to search user view #} const urlUpdateUser = "{% url 'update_user' %}" {# URL to update user view #} const currentUserId = "{{ user.id }}" + const urlFAQ = "{% url 'faq' %}" {# URL to FAQ page #} {% render_bundle 'base' 'js' %} diff --git a/src/frontend/templates/frontend/faq.html b/src/frontend/templates/frontend/faq.html new file mode 100644 index 00000000..29c94675 --- /dev/null +++ b/src/frontend/templates/frontend/faq.html @@ -0,0 +1,16 @@ +{% extends 'frontend/base.html' %} +{% load static %} +{% load render_bundle from webpack_loader %} + +{% block title %} | FAQ{% endblock %} +{% block meta_description %} +Frequently Asked Questions about Multiomix and our platform. +{% endblock %} + +{% block content %} +
+{% endblock %} + +{% block js %} + {% render_bundle 'faq' 'js' %} +{% endblock %} \ No newline at end of file diff --git a/src/frontend/urls.py b/src/frontend/urls.py index eefe99a1..c90eb8ca 100644 --- a/src/frontend/urls.py +++ b/src/frontend/urls.py @@ -10,6 +10,7 @@ path('open-source', views.open_source, name='open_source'), path('site-policy', views.terms_and_privacy_policy_action, name='site_policy'), path('biomarker', views.biomarker, name='biomarker'), - path('differential-expression', views.differential_expression, name='differential_expression') + path('differential-expression', views.differential_expression, name='differential_expression'), + path('faq', views.faq_action, name='faq') ] diff --git a/src/frontend/views.py b/src/frontend/views.py index 7243b6c3..a0da3eb5 100644 --- a/src/frontend/views.py +++ b/src/frontend/views.py @@ -63,3 +63,7 @@ def differential_expression(request): def open_source(request): """Open source view""" return render(request, "frontend/open-source.html") + +def faq_action(request): + """FAQ view""" + return render(request, "frontend/faq.html") From c70c2657b520fd007d669ab70f90a1f788875e14 Mon Sep 17 00:00:00 2001 From: natha Date: Thu, 25 Sep 2025 23:34:36 -0300 Subject: [PATCH 04/10] FAQ comments added --- src/frontend/static/frontend/rspack.prod.js | 2 +- .../frontend/src/components/faq/FAQ.tsx | 66 +++++++++++++------ .../components/faq/FAQQuestionAndAnswer.tsx | 30 +++++++++ 3 files changed, 78 insertions(+), 20 deletions(-) create mode 100644 src/frontend/static/frontend/src/components/faq/FAQQuestionAndAnswer.tsx diff --git a/src/frontend/static/frontend/rspack.prod.js b/src/frontend/static/frontend/rspack.prod.js index e35b42e1..ac78fe38 100644 --- a/src/frontend/static/frontend/rspack.prod.js +++ b/src/frontend/static/frontend/rspack.prod.js @@ -1,4 +1,4 @@ -import { common } from './' +import { common } from './rspack.common.js' export default { ...common, diff --git a/src/frontend/static/frontend/src/components/faq/FAQ.tsx b/src/frontend/static/frontend/src/components/faq/FAQ.tsx index bb783695..bae8f591 100644 --- a/src/frontend/static/frontend/src/components/faq/FAQ.tsx +++ b/src/frontend/static/frontend/src/components/faq/FAQ.tsx @@ -1,6 +1,13 @@ import React from 'react' import { Container, Divider, Grid, Header, Segment, List } from 'semantic-ui-react' import { Base } from '../Base' +import {FAQQuestionAndAnswer} from "./FAQQuestionAndAnswer"; + +/** + * FAQ Page (Frequently Asked Questions). + * + * Uses the `FAQQuestionAndAnswer` component to display each questions and answers. + */ export const FAQ = () => { return ( @@ -12,11 +19,15 @@ export const FAQ = () => {
Frequently Asked Questions
- -
How are cBioPortal datasets incorporated and preprocessed?
-

- Datasets from cBioPortal are synchronized regularly to ensure data consistency. - If there is an update that we miss, users can contact us directly. + {/* Question 1: Datasets */} + +

+ Datasets from cBioPortal are synchronized regularly to ensure data consistency. + If there is an update that we miss, users can contact us directly. Duplicate molecules are removed to keep the dataset clean. Samples without information for a given molecule in a biomarker are excluded from trained models, statistical validations, feature selection experiments, and inference steps. @@ -25,41 +36,58 @@ export const FAQ = () => { Clinical data also undergo preprocessing: cases with NaN, empty or Null values are filtered out. Additionally, cases with an event but survival time equal to zero are excluded (pending clarification from cBioPortal).

- - - - - -
How is user-uploaded data privacy handled?
+ + } + /> + + {/* Question 2: Privacy */} + Uploaded data is securely stored and only accessible to the uploading user. Once deleted, the data is permanently removed from our servers and cannot be recovered. No third parties have access to private user data.

- + } + /> - -
Libraries and Tools with Licenses
+ {/* Question 3: Licenses */} + - For legal and transparency reasons, we provide a list of third-party libraries and tools used in this platform, + For legal and transparency reasons, we provide a list of third-party libraries and tools used in this platform, along with their respective licenses. This ensures compliance and acknowledgment of the open-source community contributions that power our ecosystem. +

- + } + /> - -
Additional Links
+ {/* Question 4: Additional Links */} + Site Map Contact Us Terms and Conditions Privacy Policy - + } + + /> diff --git a/src/frontend/static/frontend/src/components/faq/FAQQuestionAndAnswer.tsx b/src/frontend/static/frontend/src/components/faq/FAQQuestionAndAnswer.tsx new file mode 100644 index 00000000..d7e6e6eb --- /dev/null +++ b/src/frontend/static/frontend/src/components/faq/FAQQuestionAndAnswer.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { Segment, Header } from "semantic-ui-react"; + +/** + * Props for the FAQQuestionAndAnswer component. + */ +interface FAQQuestionAndAnswerProps { + /** The unique identifier for the segment */ + segmentId: string; + /** The title of the FAQ question */ + headerTitle: string; + /** The answer content for the FAQ question */ + answer: React.ReactNode; +} + +/** + * Reusable component for displaying a FAQ question and its answer. + * + * @param props - Object containing `segmentId`, `headerTitle`, and `answer` + * @returns A React component that displays a FAQ question and its answer. +*/ +export const FAQQuestionAndAnswer = (props: FAQQuestionAndAnswerProps) => { + const { segmentId, headerTitle, answer } = props; + return ( + +
{headerTitle}
+ {answer} + + ) +} From 9009c7df107ac1925b51cd15df29a69b17fd608a Mon Sep 17 00:00:00 2001 From: natharisa Date: Fri, 26 Dec 2025 11:58:21 -0300 Subject: [PATCH 05/10] Translations --- src/frontend/static/frontend/package.json | 2 +- .../src/components/about-us/AboutUs.tsx | 28 +- .../BiomarkerInferenceExperimentsPanel.tsx | 7 +- ...renceExperimentClinicalAttributeSelect.tsx | 4 +- .../InferenceExperimentResultMetrics.tsx | 6 +- .../inference/InferenceExperimentsTable.tsx | 48 +-- .../inference/NewInferenceExperimentModal.tsx | 27 +- .../SamplesAndGroupsInferenceTable.tsx | 23 +- .../SamplesAndTimeInferenceCharts.tsx | 6 +- .../SamplesAndTimeInferenceTable.tsx | 29 +- .../molecules/CurrentMoleculeDetails.tsx | 6 +- .../molecules/MoleculesDetailsMenu.tsx | 15 +- .../molecules/MoleculesTable.tsx | 29 +- .../GeneOntologyCytoscapeChart.tsx | 45 ++- .../gene-ontology/GeneOntologyPanel.tsx | 40 +-- .../genes/ActionableCancerGenesPanel.tsx | 5 +- .../genes/GeneAssociationsNetworkPanel.tsx | 35 +- .../molecules/genes/GeneInformation.tsx | 14 +- .../molecules/genes/MetabolicPathways.tsx | 12 +- .../molecules/genes/PathwaysInformation.tsx | 6 +- .../methylation/MethylationInformation.tsx | 28 +- .../NewStatisticalValidationModal.tsx | 22 +- .../StatisticalValidationMenu.tsx | 12 +- .../StatisticalValidationsTable.tsx | 44 +-- .../result/SamplesAndGroupsTable.tsx | 14 +- ...tatisticalValidationResultBestFeatures.tsx | 13 +- ...StatisticalValidationResultKaplanMeier.tsx | 38 +-- .../StatisticalValidationResultMetrics.tsx | 26 +- .../trained-models/NewClusteringModelForm.tsx | 55 ++-- .../static/frontend/src/locales/en.ts | 303 ++++++++++++++++++ .../static/frontend/src/locales/es.ts | 303 ++++++++++++++++++ 31 files changed, 960 insertions(+), 285 deletions(-) create mode 100644 src/frontend/static/frontend/src/locales/en.ts create mode 100644 src/frontend/static/frontend/src/locales/es.ts diff --git a/src/frontend/static/frontend/package.json b/src/frontend/static/frontend/package.json index a2af0b70..fd73478c 100644 --- a/src/frontend/static/frontend/package.json +++ b/src/frontend/static/frontend/package.json @@ -57,7 +57,7 @@ "@visx/scale": "^3.5.0", "@visx/stats": "^3.5.0", "@visx/tooltip": "^3.3.0", - "apexcharts": "^4.0.0", + "apexcharts": "^3.52.0", "axios": "^1.8.4", "cytoscape": "^3.30.2", "d3": "^7.9.0", diff --git a/src/frontend/static/frontend/src/components/about-us/AboutUs.tsx b/src/frontend/static/frontend/src/components/about-us/AboutUs.tsx index 6e26bbb3..6440da30 100644 --- a/src/frontend/static/frontend/src/components/about-us/AboutUs.tsx +++ b/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 (
@@ -34,13 +36,13 @@ export const AboutUs = () => {
- Multiomix is the result of interdisciplinary work between members of the following scientific institutions: + {intl.formatMessage({ id: 'about.description' })}
- - - + + + @@ -51,12 +53,12 @@ export const AboutUs = () => {
- Project coordination: + {intl.formatMessage({ id: 'about.coordination' })}
- - + + @@ -67,15 +69,15 @@ export const AboutUs = () => {
- Project members + {intl.formatMessage({ id: 'about.members.title' })}
- Main contributor: B.Comp.Sc. Genaro Camele + {intl.formatMessage({ id: 'about.members.main' })}
- 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' })}
@@ -87,10 +89,10 @@ export const AboutUs = () => { {/* Contact */}
- Contact: + {intl.formatMessage({ id: 'about.contact.title' })}
-

For questions or suggestions please contact us:

+

{intl.formatMessage({ id: 'about.contact.questions' })}

{EMAILS.map((email) => (

@@ -98,7 +100,7 @@ export const AboutUs = () => {

))} -

You can also contact us for creating your research institution. It will let researchers share datasets inside Multiomix.

+

{intl.formatMessage({ id: 'about.contact.institutions' })}

 diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/BiomarkerInferenceExperimentsPanel.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/BiomarkerInferenceExperimentsPanel.tsx index 3c43ab0a..d4c6bf22 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/BiomarkerInferenceExperimentsPanel.tsx +++ b/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>(null) @@ -92,7 +93,7 @@ export const BiomarkerInferenceExperimentsPanel = (props: BiomarkerInferenceExpe return ( } + closeIcon={} closeOnEscape={false} centered={false} closeOnDimmerClick={false} @@ -100,7 +101,7 @@ export const BiomarkerInferenceExperimentsPanel = (props: BiomarkerInferenceExpe onClose={closeStatResult} open={openModalResultInferenceExperiment} > -
+
diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentClinicalAttributeSelect.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentClinicalAttributeSelect.tsx index 1ddc75a9..7b5c4baa 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentClinicalAttributeSelect.tsx +++ b/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 ( <> - + { props.setSelectedClinicalAttribute(value as string) }} - placeholder='Clinical attribute to group by' + placeholder='inference.clinicalAttribute.placeholder' disabled={clinicalAttributesOptions.length === 0} /> diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentResultMetrics.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentResultMetrics.tsx index 405c5d1f..2d74c9bf 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentResultMetrics.tsx +++ b/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 ( <>
- "{props.selectedInferenceExperiment.name}" metrics + {intl.formatMessage({ id: 'inference.metrics.title' }, { name: props.selectedInferenceExperiment.name })}
{/* Model details. */} -
Model details
+
{intl.formatMessage({ id: 'inference.model.details' })}
{props.selectedInferenceExperiment.trained_model !== null && } diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentsTable.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentsTable.tsx index 1cbb1fbd..946309b0 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/InferenceExperimentsTable.tsx +++ b/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>(null) @@ -109,13 +111,13 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps) return ( -
+
- Are you sure you want to stop the inference experiment {inferenceExperimentToStop.name}? + {intl.formatMessage({ id: 'inference.stop.confirm' }, { name: inferenceExperimentToStop.name })} @@ -141,16 +143,16 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps) return ( -
+
- Are you sure you want to delete the inference experiment {inferenceExperimentToRemove.name}? + {intl.formatMessage({ id: 'inference.delete.confirm' }, { name: inferenceExperimentToRemove.name })} @@ -165,24 +167,25 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps) {/* Modal to confirm deleting the InferenceExperiment */} {getDeletionConfirmModal()} - 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: 'inference.table.columns.name' }), serverCodeToSort: 'name', width: 3 }, + { name: intl.formatMessage({ id: 'inference.table.columns.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: 'inference.table.columns.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: 'inference.search.label' })} + searchPlaceholder={intl.formatMessage({ id: 'inference.search.placeholder' })} urlToRetrieveData={urlBiomarkerInferenceExperiments} customElements={[ - + @@ -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 && ( setInferenceExperimentToStop(inferenceExperiment)} /> )} @@ -235,7 +239,7 @@ export const InferenceExperimentsTable = (props: InferenceExperimentsTableProps) {/* Todo: Revisar ownerid */} {!isInProcess && ( setInferenceExperimentToRemove(inferenceExperiment)} ownerId={null} /> diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/NewInferenceExperimentModal.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/NewInferenceExperimentModal.tsx index 22ddb004..61aaac85 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/NewInferenceExperimentModal.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/NewInferenceExperimentModal.tsx @@ -7,6 +7,7 @@ import { SourceSelectors } from '../../../common/SourceSelectors' import { DjangoCGDSStudy, DjangoUserFile } from '../../../../utils/django_interfaces' import { BiomarkerTrainedModelsTable } from '../BiomarkerTrainedModelsTable' import ky from 'ky' +import { useIntl } from 'react-intl' declare const urlSubmitInferenceExperiment: string @@ -56,6 +57,7 @@ const getDefaultNewInferenceExperimentData = (): NewInferenceExperimentData => ( * @returns Component */ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalProps) => { + const intl = useIntl() const [form, setForm] = useState(getDefaultNewInferenceExperimentData()) const [currentStep, setCurrentStep] = useState(1) const [sendingData, setSendingData] = useState(false) @@ -292,7 +294,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr return ( } + closeIcon={} closeOnEscape={false} centered={false} closeOnDimmerClick={false} @@ -302,7 +304,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr > - Create new inference experiment + {intl.formatMessage({ id: 'inference.new.title' })} @@ -311,27 +313,30 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr {/* Basic data */} -
Basic data
+
+ {intl.formatMessage({ id: 'inference.new.basicData' })} +
- Required field + {intl.formatMessage({ id: 'inference.new.requiredField' })} +
@@ -341,7 +346,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr 1} link onClick={() => { setCurrentStep(1) }}> - Step 1: Trained model + {intl.formatMessage({ id: 'inference.new.step1' })} - Step 2: molecules datasets + {intl.formatMessage({ id: 'inference.new.step2' })} @@ -378,7 +383,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr color='red' onClick={() => setCurrentStep(currentStep - 1)} > - Go back + {intl.formatMessage({ id: 'inference.new.goBack' })} )} @@ -392,7 +397,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr }} disabled={!selectedTrainedModelIsValid} > - Continue + {intl.formatMessage({ id: 'inference.new.continue' })} )} @@ -406,7 +411,7 @@ export const NewInferenceExperimentModal = (props: NewInferenceExperimentModalPr }} disabled={!formIsValid()} > - Confirm + {intl.formatMessage({ id: 'inference.new.confirm' })} )} diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndGroupsInferenceTable.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndGroupsInferenceTable.tsx index 5a763c07..47a3937c 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndGroupsInferenceTable.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndGroupsInferenceTable.tsx @@ -5,6 +5,7 @@ import { PaginatedTable } from '../../../common/PaginatedTable' import { TableCellWithTitle } from '../../../common/TableCellWithTitle' import { ClusterLabelsSetSelect } from '../../../common/cluster-labels/ClusterLabelsSetSelect' import { NewClusterLabelsSetModal } from '../../../common/cluster-labels/NewClusterLabelsSetModal' +import { useIntl } from 'react-intl' declare const urlInferenceExperimentSamplesAndClusters: string declare const urlInferenceExperimentSamplesAndClustersDownload: string @@ -22,6 +23,7 @@ interface SamplesAndGroupsInferenceTableProps { * @returns Component. */ export const SamplesAndGroupsInferenceTable = (props: SamplesAndGroupsInferenceTableProps) => { + const intl = useIntl() const [selectedClusterSetPk, setSelectedClusterSetPk] = useState(undefined) const [openClusterLabelsSetModal, setOpenClusterLabelsSetModal] = useState(false) @@ -47,15 +49,16 @@ export const SamplesAndGroupsInferenceTable = (props: SamplesAndGroupsInferenceT headers={[ - { name: 'Sample', serverCodeToSort: 'sample', width: 3, textAlign: 'center' }, - { name: 'Cluster', serverCodeToSort: 'cluster', width: 2, textAlign: 'center' } + { name: intl.formatMessage({ id: 'inference.table.columns.sample' }), serverCodeToSort: 'sample', width: 3, textAlign: 'center' }, + { name: intl.formatMessage({ id: 'inference.table.columns.cluster' }), serverCodeToSort: 'cluster', width: 2, textAlign: 'center' } + ]} queryParams={{ inference_experiment_pk: props.selectedInferenceExperiment.id, ...extraQueryParams }} customElements={[ - + @@ -63,10 +66,10 @@ export const SamplesAndGroupsInferenceTable = (props: SamplesAndGroupsInferenceT ]} customFilters={[ { - label: 'Cluster', + label: intl.formatMessage({ id: 'inference.table.filter.cluster.label' }), keyForServer: 'cluster', defaultValue: '', - placeholder: 'Filter by cluster', + placeholder: intl.formatMessage({ id: 'inference.table.filter.cluster.placeholder' }), allowZero: true, urlToRetrieveOptions: `${urlClustersUniqueInferenceExperiment}/${props.selectedInferenceExperiment.id}/` } @@ -74,8 +77,8 @@ export const SamplesAndGroupsInferenceTable = (props: SamplesAndGroupsInferenceT defaultSortProp={{ sortField: 'sample', sortOrderAscendant: false }} showSearchInput defaultPageSize={25} - searchLabel='Sample' - searchPlaceholder='Search by sample' + searchLabel={intl.formatMessage({ id: 'inference.table.search.label' })} + searchPlaceholder={intl.formatMessage({ id: 'inference.table.search.placeholder' })} urlToRetrieveData={urlInferenceExperimentSamplesAndClusters} mapFunction={(sampleAndCluster: SampleAndCluster) => { return ( @@ -88,7 +91,7 @@ export const SamplesAndGroupsInferenceTable = (props: SamplesAndGroupsInferenceT /> - {selectedTrainedModelPk !== null && ( + {selectedTrainedModelPk !== null && ( <> - - + + )} diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceCharts.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceCharts.tsx index c91dd401..0c60893a 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceCharts.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceCharts.tsx @@ -8,6 +8,7 @@ import { alertGeneralError } from '../../../../utils/util_functions' import { ResultPlaceholder } from '../stat-validations/result/ResultPlaceholder' import { BoxPlotChart } from '../../../pipeline/experiment-result/gene-gem-details/stats/BoxPlotChart' import { COLOR_YELLOW_FILL, COLOR_YELLOW_STROKE } from '../../../../utils/constants' +import { useIntl } from 'react-intl' declare const urlClinicalSourceAddOrEditInferenceExperiment: string declare const urlUnlinkClinicalSourceInferenceExperiment: string @@ -36,6 +37,7 @@ interface SamplesAndTimeInferenceChartsProps { * @returns Component. */ export const SamplesAndTimeInferenceCharts = (props: SamplesAndTimeInferenceChartsProps) => { + const intl = useIntl() const abortController = useRef(new AbortController()) const [loadingChartData, setLoadingChartData] = useState(false) const [chartData, setChartData] = useState([]) @@ -80,10 +82,10 @@ export const SamplesAndTimeInferenceCharts = (props: SamplesAndTimeInferenceChar
- No clinical attribute selected + {intl.formatMessage({ id: 'inference.charts.noAttribute' })} - Please, select one in the right Select. + {intl.formatMessage({ id: 'inference.charts.selectAttribute' })}
) diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceTable.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceTable.tsx index de57c85c..d47aa937 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceTable.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/inference/SamplesAndTimeInferenceTable.tsx @@ -9,6 +9,7 @@ import { InfoPopup } from '../../../pipeline/experiment-result/gene-gem-details/ import { SamplesAndTimeInferenceCharts } from './SamplesAndTimeInferenceCharts' import { InferenceExperimentClinicalAttributeSelect } from './InferenceExperimentClinicalAttributeSelect' import { ClinicalSourcePopup } from '../../../pipeline/all-experiments-view/ClinicalSourcePopup' +import { useIntl } from 'react-intl' declare const urlInferenceExperimentSamplesAndTime: string declare const urlClinicalSourceAddOrEditInferenceExperiment: string @@ -28,6 +29,7 @@ interface SamplesAndTimeInferenceTableProps { * @returns Component. */ export const SamplesAndTimeInferenceTable = (props: SamplesAndTimeInferenceTableProps) => { + const intl = useIntl() const [activeMenuItem, setActiveMenuItem] = useState<'table' | 'charts'>('charts') // TODO: change to 'table' const [selectedRangeSetPk, setSelectedClusterSetPk] = useState(undefined) const [openRangeLabelsSetModal, setOpenRangeLabelsSetModal] = useState(false) @@ -48,8 +50,9 @@ export const SamplesAndTimeInferenceTable = (props: SamplesAndTimeInferenceTable return ( headers={[ - { name: 'Sample', serverCodeToSort: 'sample', width: 3, textAlign: 'center' }, - { name: 'Predicted time', serverCodeToSort: 'prediction', width: 2, textAlign: 'center' } + { name: intl.formatMessage({ id: 'inference.timeTable.columns.sample' }), serverCodeToSort: 'sample', width: 3, textAlign: 'center' }, + { name: intl.formatMessage({ id: 'inference.timeTable.columns.predictedTime' }), serverCodeToSort: 'prediction', width: 2, textAlign: 'center' } + ]} queryParams={{ inference_experiment_pk: props.selectedInferenceExperiment.id, @@ -57,18 +60,18 @@ export const SamplesAndTimeInferenceTable = (props: SamplesAndTimeInferenceTable }} customFilters={[ { - label: 'Range', + label: intl.formatMessage({ id: 'inference.timeTable.filter.range.label' }), keyForServer: 'prediction', defaultValue: '', - placeholder: 'Filter by range', + placeholder: intl.formatMessage({ id: 'inference.timeTable.filter.range.placeholder' }), disabledFunction: () => selectedRangeSetPk === undefined } ]} defaultSortProp={{ sortField: 'sample', sortOrderAscendant: false }} showSearchInput defaultPageSize={25} - searchLabel='Sample' - searchPlaceholder='Search by sample' + searchLabel={intl.formatMessage({ id: 'inference.timeTable.search.label' })} + searchPlaceholder={intl.formatMessage({ id: 'inference.timeTable.search.placeholder' })} searchWidth={5} entriesSelectWidth={3} urlToRetrieveData={urlInferenceExperimentSamplesAndTime} @@ -116,10 +119,10 @@ export const SamplesAndTimeInferenceTable = (props: SamplesAndTimeInferenceTable active={activeMenuItem === 'charts'} onClick={() => setActiveMenuItem('charts')} > - Charts + {intl.formatMessage({ id: 'inference.timeTable.menu.table' })} - {selectedTrainedModelPk !== null && ( + {selectedTrainedModelPk !== null && ( <> {/* Clinical attribute select */} - {(activeMenuItem === 'charts' && props.selectedInferenceExperiment.clinical_source_id) && ( + {(activeMenuItem === 'charts' && props.selectedInferenceExperiment.clinical_source_id) && ( <> - + )} {/* Range Select */} @@ -176,8 +179,8 @@ export const SamplesAndTimeInferenceTable = (props: SamplesAndTimeInferenceTable setSelectedClusterSetPk={setSelectedClusterSetPk} /> - - + + )} diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/CurrentMoleculeDetails.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/CurrentMoleculeDetails.tsx index 4f463eeb..50231679 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/CurrentMoleculeDetails.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/CurrentMoleculeDetails.tsx @@ -11,6 +11,7 @@ import { GeneAssociationsNetworkPanel } from './genes/GeneAssociationsNetworkPan import { MiRNADrugsPanel } from '../../../pipeline/experiment-result/gene-gem-details/MiRNADrugsPanel' import { MiRNADiseasesPanel } from '../../../pipeline/experiment-result/gene-gem-details/MiRNADiseasesPanel' import { ActionableCancerGenesPanel } from './genes/ActionableCancerGenesPanel' +import { useIntl } from 'react-intl' // const MENU_DEFAULT: ActiveBiomarkerMoleculeItemMenu = ActiveBiomarkerMoleculeItemMenu.DETAILS // TODO: use this const MENU_DEFAULT: ActiveBiomarkerMoleculeItemMenu = ActiveBiomarkerMoleculeItemMenu.DETAILS @@ -31,6 +32,7 @@ interface CurrentMoleculeDetailsProps { */ export const CurrentMoleculeDetails = (props: CurrentMoleculeDetailsProps) => { const [activeItem, setActiveItem] = useState(MENU_DEFAULT) + const intl = useIntl() /** Effect to set the active item to DETAILS when the selected molecule changes. */ useEffect(() => { @@ -98,10 +100,10 @@ export const CurrentMoleculeDetails = (props: CurrentMoleculeDetailsProps) => {
- No molecule selected + {intl.formatMessage({ id: 'currentMoleculeDetails.noSelection' })} - Select one in the left panel + {intl.formatMessage({ id: 'currentMoleculeDetails.selectOne' })}
) diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesDetailsMenu.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesDetailsMenu.tsx index 5a98008b..ea118238 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesDetailsMenu.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesDetailsMenu.tsx @@ -3,6 +3,7 @@ import { Menu } from 'semantic-ui-react' import { InfoPopup } from '../../../pipeline/experiment-result/gene-gem-details/InfoPopup' import { ActiveBiomarkerMoleculeItemMenu, BiomarkerMolecule } from '../../types' import { MoleculeType } from '../../../../utils/interfaces' +import { useIntl } from 'react-intl' /** MoleculesDetailsMenu props. */ interface MoleculesDetailsMenuProps { @@ -29,13 +30,13 @@ interface ItemMenuProp { */ export const MoleculesDetailsMenu = (props: MoleculesDetailsMenuProps) => { const isGene = [MoleculeType.MRNA, MoleculeType.CNA].includes(props.selectedMolecule.type) - + const intl = useIntl() /** * Array with all the items and conditions */ const items: ItemMenuProp[] = [ { - name: 'Details', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.details' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.DETAILS), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.DETAILS, popupInfo: `Details of ${props.selectedMolecule.identifier} obtained from different standardized sources`, @@ -50,14 +51,14 @@ export const MoleculesDetailsMenu = (props: MoleculesDetailsMenuProps) => { // isVisible: isGene // }, { - name: 'Gene associations network', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.geneAssociations' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.GENE_ASSOCIATIONS_NETWORK), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.GENE_ASSOCIATIONS_NETWORK, popupInfo: 'It shows the network of gene associations of the genes of this biomarker', isVisible: isGene }, { - name: 'Gene Ontology', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.geneOntology' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.GENE_ONTOLOGY), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.GENE_ONTOLOGY, popupInfo: 'Gene Ontology (GO) is a powerful tool for understanding the biological processes, molecular functions, and cellular components associated with a gene', @@ -72,21 +73,21 @@ export const MoleculesDetailsMenu = (props: MoleculesDetailsMenuProps) => { // isVisible: isGene // }, { - name: 'Diseases', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.diseases' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.DISEASES), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.DISEASES, popupInfo: 'Interactions of the molecule with diseases that have been reported in the literature', isVisible: [MoleculeType.MIRNA].includes(props.selectedMolecule.type) }, { - name: 'Drugs', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.drugs' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.DRUGS), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.DRUGS, popupInfo: 'Interactions of the molecule with drugs that have been reported in the literature', isVisible: [MoleculeType.MIRNA].includes(props.selectedMolecule.type) }, { - name: 'miRNA-Gene interactions', + name: intl.formatMessage({ id: 'moleculesDetailsMenu.miRNAGeneInteractions' }), onClick: () => props.setActiveItem(ActiveBiomarkerMoleculeItemMenu.MIRNA_GENE_INTERACTIONS), isActive: props.activeItem === ActiveBiomarkerMoleculeItemMenu.MIRNA_GENE_INTERACTIONS, popupInfo: 'Different miRNA-Gene interactions that have been reported in the literature along with the associated mirDIP score and Pubmed sources', diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesTable.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesTable.tsx index dc1b9d23..b58bb72e 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesTable.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/MoleculesTable.tsx @@ -5,6 +5,7 @@ import { PaginatedTable } from '../../../common/PaginatedTable' import { TableCellWithTitle } from '../../../common/TableCellWithTitle' import { MoleculeTypeLabel } from '../../labels/MoleculeTypeLabel' import { MoleculeType, Nullable } from '../../../../utils/interfaces' +import { useIntl } from 'react-intl' declare const urlBiomarkerMolecules: string @@ -18,35 +19,35 @@ interface MoleculesTableProps { openMoleculeDetails: (molecule: BiomarkerMolecule) => void } -const moleculesTypesOptions: DropdownItemProps[] = [ - { key: MoleculeType.MRNA, text: 'mRNA', value: MoleculeType.MRNA }, - { key: MoleculeType.MIRNA, text: 'miRNA', value: MoleculeType.MIRNA }, - { key: MoleculeType.CNA, text: 'CNA', value: MoleculeType.CNA }, - { key: MoleculeType.METHYLATION, text: 'Methylation', value: MoleculeType.METHYLATION } -] - /** * Renders a Table with the samples and the cluster where they belong. * @param props Component props. * @returns Component. */ export const MoleculesTable = (props: MoleculesTableProps) => { + const intl = useIntl() + const moleculesTypesOptions: DropdownItemProps[] = [ + { key: MoleculeType.MRNA, text: intl.formatMessage({ id: 'moleculesTable.type.mrna' }), value: MoleculeType.MRNA }, + { key: MoleculeType.MIRNA, text: intl.formatMessage({ id: 'moleculesTable.type.mirna' }), value: MoleculeType.MIRNA }, + { key: MoleculeType.CNA, text: intl.formatMessage({ id: 'moleculesTable.type.cna' }), value: MoleculeType.CNA }, + { key: MoleculeType.METHYLATION, text: intl.formatMessage({ id: 'moleculesTable.type.methylation' }), value: MoleculeType.METHYLATION } + ] return ( headers={[ - { name: 'Identifier', serverCodeToSort: 'identifier', width: 3 }, - { name: 'Type', serverCodeToSort: 'type', width: 2 }, - { name: 'Actions' } + { name: intl.formatMessage({ id: 'moleculesTable.header.identifier' }), serverCodeToSort: 'identifier', width: 3 }, + { name: intl.formatMessage({ id: 'moleculesTable.header.type' }), serverCodeToSort: 'type', width: 2 }, + { name: intl.formatMessage({ id: 'moleculesTable.header.actions' }) } ]} queryParams={{ biomarker_pk: props.selectedBiomarker.id }} customFilters={[ - { label: 'Type', keyForServer: 'type', defaultValue: '', options: moleculesTypesOptions, width: 6 } + { label: intl.formatMessage({ id: 'moleculesTable.header.type' }), keyForServer: 'type', defaultValue: '', options: moleculesTypesOptions, width: 6 } ]} defaultSortProp={{ sortField: 'identifier', sortOrderAscendant: true }} showSearchInput defaultPageSize={25} - searchLabel='Sample' - searchPlaceholder='Search by identifier' + searchLabel={intl.formatMessage({ id: 'moleculesTable.search.label' })} + searchPlaceholder={intl.formatMessage({ id: 'moleculesTable.search.placeholder' })} urlToRetrieveData={urlBiomarkerMolecules} searchWidth={6} entriesSelectWidth={3} @@ -61,7 +62,7 @@ export const MoleculesTable = (props: MoleculesTableProps) => { name='chart bar' className='clickable' color='blue' - title='Details' + title={intl.formatMessage({ id: 'moleculesTable.details' })} onClick={() => props.openMoleculeDetails(molecule)} /> diff --git a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/gene-ontology/GeneOntologyCytoscapeChart.tsx b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/gene-ontology/GeneOntologyCytoscapeChart.tsx index 9b277bba..d1c94702 100644 --- a/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/gene-ontology/GeneOntologyCytoscapeChart.tsx +++ b/src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/gene-ontology/GeneOntologyCytoscapeChart.tsx @@ -6,6 +6,7 @@ import { alertGeneralError } from '../../../../../utils/util_functions' import { OntologyRelationTermToTermFilter, CytoscapeElements, OntologyType, GoTermToTermSearchParams, GoTermToTermForm } from './types' import { Button, Form, Grid } from 'semantic-ui-react' import '../../../../../css/cytoscape.css' +import { useIntl } from 'react-intl' declare const urlGOTermToTerms: string @@ -20,18 +21,27 @@ const COLORS_BY_ONTOLOGY_RELATION = { * Renders the legends for the Cytoscape instance. * @returns Component. */ -const CytoscapeLegends = () => ( -
-
Relations
-
-
    - {Object.entries(COLORS_BY_ONTOLOGY_RELATION).map(([_, [relationDescription, color]]) => ( -
  • {relationDescription}
    • - ))} -
+const CytoscapeLegends = () => { + const intl = useIntl() + + return ( +
+
+ {intl.formatMessage({ id: 'geneOntology.legend.relations' })} +
+
+
    + {Object.entries(COLORS_BY_ONTOLOGY_RELATION).map(([_, [relationDescription, color]]) => ( +
  • + + {relationDescription} +
    • + ))} +
+
-
-) + ) +} /** GeneOntologyCytoscapeChart props. */ interface GeneOntologyCytoscapeChartProps { @@ -47,6 +57,7 @@ interface GeneOntologyCytoscapeChartProps { * @returns Component. */ export const GeneOntologyCytoscapeChart = (props: GeneOntologyCytoscapeChartProps) => { + const intl = useIntl() const abortControllerTerm = useRef(new AbortController()) const [termsRelatedToTermForm, setTermsRelatedToTermForm] = useState({ relations: [OntologyRelationTermToTermFilter.PART_OF, OntologyRelationTermToTermFilter.REGULATES, OntologyRelationTermToTermFilter.HAS_PART], @@ -188,12 +199,12 @@ export const GeneOntologyCytoscapeChart = (props: GeneOntologyCytoscapeChartProp {/* Go back button. */} -