Merge pull request #57 from omics-datascience/fix/kaplanMeier

Fix/kaplan meier

Author: Genarito

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/stat-validations/result/StatisticalValidationResultKaplanMeier.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import ky from 'ky'
-import { Button, Form, Grid, Header, Icon, Modal, Statistic } from 'semantic-ui-react'
+import { Button, Form, Grid, Header, Icon, Modal, Statistic, GridColumn } from 'semantic-ui-react'
 import { alertGeneralError, listToDropdownOptions } from '../../../../../utils/util_functions'
 import { StatisticalValidationForTable, KaplanMeierResultData, FitnessFunction } from '../../../types'
 import { KaplanMeier } from '../../../../pipeline/experiment-result/gene-gem-details/survival-analysis/KaplanMeierUtils'
@@ -188,10 +188,10 @@ export const StatisticalValidationResultKaplanMeier = (props: StatisticalValidat
     return (
         <Grid>
             <Grid.Row columns={2} divided textAlign='center'>
-                <Grid.Column textAlign='center' width={11}>
+                <GridColumn textAlign='center' mobile={16} tablet={16} computer={12}>
                     {getKaplanMeierPanel()}
-                </Grid.Column>
-                <Grid.Column textAlign='center' width={5}>
+                </GridColumn>
+                <GridColumn textAlign='center' mobile={16} tablet={16} computer={4}>
                     {/* Clustering metrics. */}
                     <InfoPopup
                         content='This metrics are computed using Cox-Regression'
@@ -273,7 +273,7 @@ export const StatisticalValidationResultKaplanMeier = (props: StatisticalValidat
                             </Modal.Actions>
                         </Modal>
                     }
-                </Grid.Column>
+                </GridColumn>
             </Grid.Row>
         </Grid>
     )

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/stat-validations/result/StatisticalValidationResultModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { ActiveStatValidationsItemMenu, StatisticalValidationForTable } from '../../../types'
 import { StatisticalValidationMenu } from '../StatisticalValidationMenu'
 import { StatisticalValidationResultMetrics } from './StatisticalValidationResultMetrics'
-import { Grid, Segment } from 'semantic-ui-react'
+import { Grid, Segment, GridColumn } from 'semantic-ui-react'
 import { StatisticalValidationResultBestFeatures } from './StatisticalValidationResultBestFeatures'
 import { StatisticalValidationResultHeatMap } from './StatisticalValidationResultHeatMap'
 import { StatisticalValidationResultKaplanMeier } from './StatisticalValidationResultKaplanMeier'
@@ -41,27 +41,25 @@ export const StatisticalValidationResultModal = (props: StatisticalValidationRes
 
     return (
         <>
-            <Grid>
-                <Grid.Row columns={2} stretched>
-                    <Grid.Column width={4}>
-                        <Segment>
-                            <StatisticalValidationResultMetrics selectedStatisticalValidation={props.selectedStatisticalValidation} />
-                        </Segment>
-                    </Grid.Column>
-                    <Grid.Column width={12} textAlign='center'>
-                        <Segment>
-                            {/* Menu */}
-                            <StatisticalValidationMenu
-                                activeItem={activeItem}
-                                setActiveItem={setActiveItem}
-                                selectedStatisticalValidation={props.selectedStatisticalValidation}
-                            />
+            <Grid stretched>
+                <GridColumn mobile={16} tablet={16} computer={4}>
+                    <Segment>
+                        <StatisticalValidationResultMetrics selectedStatisticalValidation={props.selectedStatisticalValidation} />
+                    </Segment>
+                </GridColumn>
+                <GridColumn mobile={16} tablet={16} computer={12}>
+                    <Segment>
+                        {/* Menu */}
+                        <StatisticalValidationMenu
+                            activeItem={activeItem}
+                            setActiveItem={setActiveItem}
+                            selectedStatisticalValidation={props.selectedStatisticalValidation}
+                        />
 
-                            {/* Selected menu option */}
-                            {getSelectedComponent()}
-                        </Segment>
-                    </Grid.Column>
-                </Grid.Row>
+                        {/* Selected menu option */}
+                        {getSelectedComponent()}
+                    </Segment>
+                </GridColumn>
             </Grid>
         </>
     )

src/frontend/static/frontend/src/components/pipeline/experiment-result/gene-gem-details/survival-analysis/KaplanMeierUtils.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as d3 from 'd3'
 import { Nullable } from '../../../../../utils/interfaces'
-
+import './kaplanMeier.css'
 /** Needed structure for KaplanMeier chart */
 type KaplanMeierSample = {
     time: number,
@@ -174,7 +174,14 @@ const YAxis = (props: AxisProps) => {
             className='axis axis-y'
             transform={`translate(${props.left}, ${props.top})`}
         >
-            <g dangerouslySetInnerHTML={d3Utils.createAxisMarkup(yAxis, props.width, props.height)}></g>
+            {
+                /**
+                 * g tag generate the dom structure of <g> <g> <text> ... </g> </g>
+                 * The idea es usign the first g wrapp the inside g tag and text to move it a few px to prevents being overwrite by Y axis.
+                 * If the Dom change in the future, open the navigator inspect then verify the Dom and fix the new structure.
+                 */
+            }
+            <g className='g-wrapper' dangerouslySetInnerHTML={d3Utils.createAxisMarkup(yAxis, props.width, props.height)}></g>
             <text
                 dy="1.50em"
                 style={{ textAnchor: 'middle' }}
@@ -388,7 +395,7 @@ class KaplanMeier extends React.Component<KaplanMeierProps, KaplanMeierState> {
         const colors = d3.scaleOrdinal(d3.schemeCategory10).range()
         const yDomain = [1, 0]
 
-        const seriesWidth = this.props.width - 64
+        const seriesWidth = this.props.width
         const seriesHeight = this.props.height - 64
 
         return (

src/frontend/static/frontend/src/components/pipeline/experiment-result/gene-gem-details/survival-analysis/kaplanMeier.css

@@ -0,0 +1,3 @@
+.g-wrapper> g > text {
+    transform: translateX(-20px); /* Prevents Y axis overwrite text */
+}