fix: SKFP-1208 improve landing page after QA reviews (#4124)

kids-first · Sep 20, 2024 · 6dc83d6 · 6dc83d6
1 parent bfb6908
commit 6dc83d6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -661,7 +661,7 @@ const en = {
         kftall: {
           name: 'Comprehensive Genomic Profiling to Improve Prediction of Clinical Outcome for Children with T-cell Acute Lymphoblastic Leukemia',
           description:
-            'The outcome for patients with relapsed T-ALL is dismal with 3-year event free survival of <15%. Thus, the primary goal in the treatment of T-ALL is to prevent relapse, which requires accurate risk stratification. Unfortunately, no reproducibly prognostic genetic alterations independent of minimal residual disease (MRD) have been identified, making it challenging to predict relapse at diagnosis. Therefore, the Gabriella Miller Kids First T-ALL project is conducting whole genome, exome sequencing, and transcriptome profiling of tumor and germline DNA acriss 1350 samples.',
+            'The outcome for patients with relapsed T-ALL is dismal with 3-year event free survival of <15%. Thus, the primary goal in the treatment of T-ALL is to prevent relapse, which requires accurate risk stratification. Unfortunately, no reproducibly prognostic genetic alterations independent of minimal residual disease (MRD) have been identified, making it challenging to predict relapse at diagnosis. Therefore, the Gabriella Miller Kids First T-ALL project is conducting whole genome, exome sequencing, and transcriptome profiling of tumor and germline DNA across 1350 samples.',
         },
         kfesgr: {
           name: 'Kids First: Expanded Ewing sarcoma cohort for tumor genomics and association with DNA repair deficiencies, clinical presentation, and outcome',
@@ -684,7 +684,11 @@ const en = {
         },
         chart: {
           demographics: 'Demographics',
-          mondo: 'Most Frequent Diagnoses (MONDO)',
+          mondo: {
+            title: 'Most Frequent Diagnoses (MONDO)',
+            bottomAxis: '# of participants',
+            leftAxis: 'Diagnoses (MONDO)',
+          },
           familyComposition: 'Family Composition',
           race: 'Race',
         },

diff --git a/src/views/LandingPage/ChartsSection/Charts/Demographic/index.tsx b/src/views/LandingPage/ChartsSection/Charts/Demographic/index.tsx
@@ -69,14 +69,14 @@ const StudiesChart = () => {
             {...graphSetting}
           />
           <PieChart
-            title={intl.get('screen.dataExploration.tabs.summary.demographic.ethnicityTitle')}
-            data={ethnicityData}
+            title={intl.get('screen.loginPage.chartsSection.chart.race')}
+            data={raceData}
             colors={colors}
             {...graphSetting}
           />
           <PieChart
-            title={intl.get('screen.loginPage.chartsSection.chart.race')}
-            data={raceData}
+            title={intl.get('screen.dataExploration.tabs.summary.demographic.ethnicityTitle')}
+            data={ethnicityData}
             colors={colors}
             {...graphSetting}
           />

diff --git a/src/views/LandingPage/ChartsSection/Charts/Mondo/index.tsx b/src/views/LandingPage/ChartsSection/Charts/Mondo/index.tsx
@@ -27,15 +27,17 @@ const MondoChart = () => {
       wrapperClassName={styles.wrapper}
       contentClassName={styles.contentCard}
       theme="shade"
-      title={<Title level={4}>{intl.get('screen.loginPage.chartsSection.chart.mondo')}</Title>}
+      title={
+        <Title level={4}>{intl.get('screen.loginPage.chartsSection.chart.mondo.title')}</Title>
+      }
       content={
         <BarChart
           labelTextColor="white"
           colors={{ scheme: 'paired' }}
           defs={undefined}
           axisBottom={{
             tickValues: 10,
-            legend: intl.get('screen.loginPage.mondoChart.bottomAxis'),
+            legend: intl.get('screen.loginPage.chartsSection.chart.mondo.bottomAxis'),
             legendOffset: 35,
             legendPosition: 'middle',
           }}
@@ -45,16 +47,16 @@ const MondoChart = () => {
                 .replace(/\(MONDO:\d+\)/g, '')
                 .split('-')
                 .pop(),
-            legend: intl.get('screen.loginPage.mondoChart.leftAxis'),
-            legendOffset: -185,
+            legend: intl.get('screen.loginPage.chartsSection.chart.mondo.leftAxis'),
+            legendOffset: -195,
             legendPosition: 'middle',
           }}
           padding={0.5}
           data={massagedDiagnosis}
           layout="horizontal"
           margin={{
             bottom: 45,
-            left: 190,
+            left: 210,
             right: 12,
             top: 12,
           }}

diff --git a/src/views/LandingPage/ChartsSection/Grid/index.tsx b/src/views/LandingPage/ChartsSection/Grid/index.tsx
@@ -58,7 +58,7 @@ const StatsGrid = () => {
 
       <Stats
         src={cloudSaveSvg}
-        data={stats?.fileSize ?? 0}
+        data={stats?.fileSize.replace(/\s/g, '') ?? 0}
         description={intl.get('screen.loginPage.chartsSection.stats.files')}
       />
 

diff --git a/src/views/LandingPage/Footer/About/index.tsx b/src/views/LandingPage/Footer/About/index.tsx
@@ -38,7 +38,7 @@ const About = () => (
         <a className={styles.link} href="https://kidsfirstdrc.org/tools/">
           {intl.get('screen.loginPage.footer.about.tools')}
         </a>
-        <a className={styles.link} href="ttps://kidsfirstdrc.org/help-center/">
+        <a className={styles.link} href="https://kidsfirstdrc.org/help-center/">
           {intl.get('screen.loginPage.footer.about.helpCenter')}
         </a>
       </div>