Show p- and q-values in groups comparison clinical plot

cBioPortal · May 23, 2022 · ad87a47 · ad87a47
1 parent 7acb4e6
commit ad87a47
Show file tree

Hide file tree

Showing 24 changed files with 98 additions and 4 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -195,6 +195,10 @@ jobs:
     steps:
       - attach_workspace:
           at: /tmp/
+#      - run:
+#          # needed to get python3 on the path (https://discuss.circleci.com/t/pyenv-pyvenv-command-not-found/4087/2)
+#          name: Add python3 to path [corrects bug in circle ci image and may be removed in the future]
+#          command: pyenv local 3.6.5 && virtualenv venv
       - run:
           name: Setup python libraries
           command: |
@@ -385,4 +389,4 @@ workflows:
             - install
       - end_to_end_tests_localdb:
           requires:
-            - install
+            - install
diff --git a/...cluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png b/...cluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png
diff --git a/...rison_page_clinical_tab_bar_chart_chi_squared_test_element_chrome_1600x1000.png b/...rison_page_clinical_tab_bar_chart_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...ab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png b/...ab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...n_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png b/...n_page_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...chart_exclude_overlapping_samples_chi_squared_test_element_chrome_1600x1000.png b/...chart_exclude_overlapping_samples_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...ge_clinical_tab_stacked_bar_chart_chi_squared_test_element_chrome_1600x1000.png b/...ge_clinical_tab_stacked_bar_chart_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...stacked_bar_chart_horizontal_bars_chi_squared_test_element_chrome_1600x1000.png b/...stacked_bar_chart_horizontal_bars_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...tab_stacked_bar_chart_swaped_axes_chi_squared_test_element_chrome_1600x1000.png b/...tab_stacked_bar_chart_swaped_axes_chi_squared_test_element_chrome_1600x1000.png
diff --git a/..._page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png b/..._page_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...shots/reference/no_session_comparison_tab_clinical_element_chrome_1600x1000.png b/...shots/reference/no_session_comparison_tab_clinical_element_chrome_1600x1000.png
diff --git a/...arison_tab_clinical_tab_bar_chart_chi_squared_test_element_chrome_1600x1000.png b/...arison_tab_clinical_tab_bar_chart_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...ab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png b/...ab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...on_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png b/...on_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...chart_exclude_overlapping_samples_chi_squared_test_element_chrome_1600x1000.png b/...chart_exclude_overlapping_samples_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...ab_clinical_tab_stacked_bar_chart_chi_squared_test_element_chrome_1600x1000.png b/...ab_clinical_tab_stacked_bar_chart_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...stacked_bar_chart_horizontal_bars_chi_squared_test_element_chrome_1600x1000.png b/...stacked_bar_chart_horizontal_bars_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...tab_stacked_bar_chart_swaped_axes_chi_squared_test_element_chrome_1600x1000.png b/...tab_stacked_bar_chart_swaped_axes_chi_squared_test_element_chrome_1600x1000.png
diff --git a/...n_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png b/...n_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png
diff --git a/...eenshots/reference/session_comparison_tab_clinical_element_chrome_1600x1000.png b/...eenshots/reference/session_comparison_tab_clinical_element_chrome_1600x1000.png
diff --git a/env/group-comparison-p-q-values-in-plot.sh b/env/group-comparison-p-q-values-in-plot.sh
@@ -0,0 +1,2 @@
+export CBIOPORTAL_URL="${CBIOPORTAL_URL:-https://www.cbioportal.org}"
+export GENOME_NEXUS_URL="${GENOME_NEXUS_URL:-https://www.genomenexus.org}"
diff --git a/src/pages/groupComparison/ClinicalData.tsx b/src/pages/groupComparison/ClinicalData.tsx
@@ -246,6 +246,7 @@ export default class ClinicalData extends React.Component<
     @observable private logScale = false;
     @observable logScaleFunction: IAxisLogScaleParams | undefined;
     @observable swapAxes = false;
+    @observable showPAndQ = false;
     @observable horizontalBars = false;
     @observable showNA = true;
 
@@ -270,6 +271,11 @@ export default class ClinicalData extends React.Component<
         this.swapAxes = !this.swapAxes;
     }
 
+    @action.bound
+    private onClickTogglePAndQ() {
+        this.showPAndQ = !this.showPAndQ;
+    }
+
     @action.bound
     private onClickhorizontalBars() {
         this.horizontalBars = !this.horizontalBars;
@@ -708,6 +714,15 @@ export default class ClinicalData extends React.Component<
                                 Show NA
                             </label>
                         )}
+                    <label className="checkbox-inline">
+                        <input
+                            type="checkbox"
+                            checked={this.showPAndQ}
+                            onClick={this.onClickTogglePAndQ}
+                            data-test="ShowPAndQ"
+                        />
+                        Show p and q
+                    </label>
                 </div>
             </div>
         );
@@ -814,6 +829,16 @@ export default class ClinicalData extends React.Component<
                             horizontalBars={this.horizontalBars}
                             percentage={isPercentage}
                             stacked={isStacked}
+                            pValue={
+                                this.showPAndQ
+                                    ? this.highlightedRow.pValue
+                                    : null
+                            }
+                            qValue={
+                                this.showPAndQ
+                                    ? this.highlightedRow.qValue
+                                    : null
+                            }
                         />
                     );
                 }

diff --git a/src/shared/components/plots/MultipleCategoryBarPlot.tsx b/src/shared/components/plots/MultipleCategoryBarPlot.tsx
@@ -32,6 +32,7 @@ import * as ReactDOM from 'react-dom';
 import { Popover } from 'react-bootstrap';
 import classnames from 'classnames';
 import WindowStore from '../window/WindowStore';
+import { toConditionalPrecisionWithMinimum } from 'shared/lib/FormatUtils';
 
 export interface IMultipleCategoryBarPlotProps {
     svgId?: string;
@@ -55,6 +56,8 @@ export interface IMultipleCategoryBarPlotProps {
     countAxisLabel?: string;
     tooltip?: (datum: any) => JSX.Element;
     svgRef?: (svgContainer: SVGElement | null) => void;
+    pValue: number | null;
+    qValue: number | null;
 }
 
 export interface IMultipleCategoryBarPlotData {
@@ -81,6 +84,7 @@ export default class MultipleCategoryBarPlot extends React.Component<
         super(props);
         makeObservable(this);
     }
+
     static defaultProps: Partial<IMultipleCategoryBarPlotProps> = {
         countAxisLabel: '# samples',
     };
@@ -872,6 +876,14 @@ export default class MultipleCategoryBarPlot extends React.Component<
                                 }}
                             >
                                 {this.legend}
+
+                                <PQValueLabel
+                                    x={this.chartWidth - 40}
+                                    y={50}
+                                    pValue={this.props.pValue}
+                                    qValue={this.props.qValue}
+                                />
+
                                 {this.horzAxis}
                                 {this.vertAxis}
                                 {this.chartEtl}
@@ -917,3 +929,47 @@ export default class MultipleCategoryBarPlot extends React.Component<
         );
     }
 }
+
+type PQValueLabelProps = {
+    x: number;
+    y: number;
+    pValue: number | null;
+    qValue: number | null;
+};
+
+const PQValueLabel: React.FunctionComponent<PQValueLabelProps> = props => {
+    const pFormatted = formatLabel('p', props.pValue);
+    const qFormatted = formatLabel('q', props.qValue);
+    return (
+        <foreignObject
+            x={props.x}
+            y={props.y}
+            width="100%"
+            height="3em"
+            style={{ fontSize: '0.8em' }}
+        >
+            <g x={props.x} y={props.y} xmlns="http://www.w3.org/1999/xhtml">
+                <div className="p-value-label">{pFormatted}</div>
+                <div className="q-value-label">{qFormatted}</div>
+            </g>
+        </foreignObject>
+    );
+
+    function formatLabel(name: string, value: number | null) {
+        if (value != null) {
+            return (
+                <>
+                    {name}{' '}
+                    {toConditionalPrecisionWithMinimum(
+                        value,
+                        3,
+                        0.01,
+                        -10,
+                        true
+                    )}
+                </>
+            );
+        }
+        return '';
+    }
+};
diff --git a/src/shared/lib/FormatUtils.tsx b/src/shared/lib/FormatUtils.tsx
@@ -103,20 +103,27 @@ export function toConditionalPrecisionWithMinimum(
     positiveNumber: number,
     precision: number,
     precisionThreshold: number,
-    minimumExponent: number
-) {
+    minimumExponent: number,
+    prependEqualSign?: boolean
+): string | React.ReactNode {
     if (positiveNumber === 0 || Math.log10(positiveNumber) < minimumExponent) {
         return (
             <span>
                 &lt; 10<sup>{minimumExponent}</sup>
             </span>
         );
     } else {
-        return toConditionalPrecision(
+        let transformed = toConditionalPrecision(
             positiveNumber,
             precision,
             precisionThreshold
         );
+        return (
+            <>
+                {prependEqualSign ? ' = ' : ''}
+                {transformed}
+            </>
+        );
     }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export CBIOPORTAL_URL="${CBIOPORTAL_URL:-https://www.cbioportal.org}"
		export GENOME_NEXUS_URL="${GENOME_NEXUS_URL:-https://www.genomenexus.org}"