Update the table with scatter data summary

Update table based on feedback

Update table with log scale

Define types in data table

Updated PR

src/pages/groupComparison/ClinicalNumericalDataVisualisation.tsx

@@ -1,11 +1,14 @@
 import BoxScatterPlot, {
+    IBaseBoxScatterPlotPoint,
+    IBoxScatterPlotData,
     IBoxScatterPlotProps,
     toBoxPlotData,
+    toDataDescriptive,
 } from 'shared/components/plots/BoxScatterPlot';
 import { IBoxScatterPlotPoint } from 'shared/components/plots/PlotsTabUtils';
 import React from 'react';
 import { computed, makeObservable } from 'mobx';
-import { SummaryStatisticsTable } from './SummaryStatisticsTable';
+import { DescriptiveDataTable } from './SummaryStatisticsTable';
 
 export enum ClinicalNumericalVisualisationType {
     Plot = 'Plot',
@@ -43,9 +46,17 @@ export class ClinicalNumericalDataVisualisation extends React.Component<
             this.props.excludeLimitValuesFromBoxPlot,
             this.props.logScale
         );
+        const dataDescription = toDataDescriptive(
+            this.props.data,
+            this.props.logScale
+        );
         const groupLabels = this.props.data.map(d => d.label);
         return (
-            <SummaryStatisticsTable data={groupStats} labels={groupLabels} />
+            <DescriptiveDataTable
+                dataBoxplot={groupStats}
+                labels={groupLabels}
+                descriptiveData={dataDescription}
+            />
         );
     }
 

src/pages/groupComparison/GroupComparisonUtils.tsx

@@ -47,6 +47,10 @@ import {
 import { GroupComparisonMutation } from 'shared/model/GroupComparisonMutation';
 import { getTwoTailedPValue } from 'shared/lib/calculation/FisherExactTestCalculator';
 import { calculateQValues } from 'shared/lib/calculation/BenjaminiHochbergFDRCalculator';
+import {
+    IBaseBoxScatterPlotPoint,
+    IBoxScatterPlotData,
+} from 'shared/components/plots/BoxScatterPlot';
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 

src/pages/groupComparison/SummaryStatisticsTable.tsx

@@ -1,8 +1,31 @@
 import { FunctionComponent } from 'react';
 import _ from 'lodash';
 import * as React from 'react';
+import {
+    BoxModel,
+    IBoxScatterPlotData,
+} from 'shared/components/plots/BoxScatterPlot';
 
-type SummaryStatisticsTableProps = { data: any[]; labels: string[] };
+type SummaryStatisticsTableProps = {
+    data: BoxModel[];
+    labels: string[];
+};
+
+type DescriptiveDataTableProps = {
+    descriptiveData: DataDescriptiveValues[];
+    dataBoxplot: BoxModel[];
+    labels: string[];
+};
+
+type DataDescriptiveValues = {
+    mad: number;
+    stdDeviation: number;
+    median: number;
+    mean: number;
+    count: number;
+    maximum: number;
+    minimum: number;
+};
 
 export const SummaryStatisticsTable: FunctionComponent<SummaryStatisticsTableProps> = (
     props: SummaryStatisticsTableProps
@@ -53,3 +76,100 @@ export const SummaryStatisticsTable: FunctionComponent<SummaryStatisticsTablePro
         </table>
     );
 };
+
+export const DescriptiveDataTable: FunctionComponent<DescriptiveDataTableProps> = (
+    props: DescriptiveDataTableProps
+) => {
+    const headers =
+        props.labels.length === 1 ? (
+            <th colSpan={2}>{props.labels[0]}</th>
+        ) : (
+            [<th />, props.labels.map(label => <th colSpan={1}>{label}</th>)]
+        );
+    return (
+        <div>
+            <h3>Data description</h3>
+            <table
+                className="table table-striped"
+                style={{ minWidth: '400px' }}
+            >
+                <thead>
+                    <tr>{headers}</tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Count</td>
+                        {props.descriptiveData.map((d, index) => (
+                            <td key={index}>{d.count}</td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td>Minimum</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return <td key={index}>{_.round(d.minimum, 2)}</td>;
+                        })}
+                    </tr>
+                    <tr>
+                        <td>Maximum</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return <td key={index}>{_.round(d.maximum, 2)}</td>;
+                        })}
+                    </tr>
+                    <tr>
+                        <td>Mean</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return <td key={index}>{_.round(d.mean, 2)}</td>;
+                        })}
+                    </tr>
+                    <tr>
+                        <td>Standard Deviation</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return (
+                                <td key={index}>
+                                    {_.round(d.stdDeviation, 2)}
+                                </td>
+                            );
+                        })}
+                    </tr>
+                    <tr>
+                        <td>Median</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return <td key={index}>{_.round(d.median, 2)}</td>;
+                        })}
+                    </tr>
+                    <tr>
+                        <td>MAD</td>
+                        {props.descriptiveData.map((d, index) => {
+                            return <td key={index}>{_.round(d.mad, 2)}</td>;
+                        })}
+                    </tr>
+
+                    <tr>
+                        <td>Lower Whisker</td>
+                        {props.dataBoxplot.map((d, index) => (
+                            <td key={index}>{_.round(d.min, 2)}</td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td>25% (q1)</td>
+                        {props.dataBoxplot.map((d, index) => (
+                            <td key={index}>{_.round(d.q1, 2)}</td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td>75% (q3)</td>
+                        {props.dataBoxplot.map((d, index) => (
+                            <td key={index}>{_.round(d.q3, 2)}</td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td>Upper whisker</td>
+                        {props.dataBoxplot.map((d, index) => (
+                            <td key={index}>{_.round(d.max, 2)}</td>
+                        ))}
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+};

src/shared/components/plots/BoxScatterPlot.tsx

@@ -93,7 +93,7 @@ export interface IBoxScatterPlotProps<D extends IBaseBoxScatterPlotPoint> {
     qValue?: number | null;
 }
 
-type BoxModel = {
+export type BoxModel = {
     min: number;
     max: number;
     median: number;
@@ -957,7 +957,7 @@ export function toBoxPlotData<D extends IBaseBoxScatterPlotPoint>(
     data: IBoxScatterPlotData<D>[],
     boxCalculationFilter?: (d: D) => boolean,
     excludeLimitValuesFromBoxPlot?: any,
-    logScale?: any,
+    logScale?: IAxisLogScaleParams,
     calcBoxSizes?: (box: BoxModel, i: number) => void
 ) {
     // when limit values are shown in the legend, exclude
@@ -1014,3 +1014,67 @@ export function toBoxPlotData<D extends IBaseBoxScatterPlotPoint>(
             );
         });
 }
+
+export function toDataDescriptive<D extends IBaseBoxScatterPlotPoint>(
+    data: IBoxScatterPlotData<D>[],
+    logScale?: IAxisLogScaleParams
+) {
+    return data.map(d => {
+        const scatterValues = d.data.map(x =>
+            logScale ? logScale.fLogScale(x.value, 0) : x.value
+        );
+        const count = scatterValues.length;
+        // Calculate minimum and maximum
+        const minimum = Math.min(...scatterValues);
+        const maximum = Math.max(...scatterValues);
+        const mean = _.mean(scatterValues);
+
+        // Calculate standard deviation
+        const squaredDifferences = scatterValues.map((val: number) => {
+            const difference = val - mean;
+            return difference * difference;
+        });
+        const variance =
+            squaredDifferences.reduce(
+                (sum: number, val: number) => sum + val,
+                0
+            ) / scatterValues.length;
+        const stdDeviation = Math.sqrt(variance);
+
+        // Calculate median
+        const scatterValuesSorted = scatterValues
+            .slice()
+            .sort((a: number, b: number) => a - b);
+        const mid = Math.floor(scatterValuesSorted.length / 2);
+        const median =
+            scatterValuesSorted.length % 2 !== 0
+                ? scatterValuesSorted[mid]
+                : (scatterValuesSorted[mid - 1] + scatterValuesSorted[mid]) / 2;
+
+        // Calculate median absolute deviation (MAD)
+        const absoluteDeviations = scatterValues.map(val =>
+            Math.abs(val - median)
+        );
+        const absoluteDeviationsSorted = absoluteDeviations
+            .slice()
+            .sort((a, b) => a - b);
+        const madMid = Math.floor(absoluteDeviationsSorted.length / 2);
+        const mad =
+            absoluteDeviationsSorted.length % 2 !== 0
+                ? absoluteDeviationsSorted[madMid]
+                : (absoluteDeviationsSorted[madMid - 1] +
+                      absoluteDeviationsSorted[madMid]) /
+                  2;
+
+        // Return an object with the descriptive statistics
+        return {
+            count,
+            minimum,
+            maximum,
+            mean,
+            stdDeviation,
+            median,
+            mad,
+        };
+    });
+}