Add table visualisation for categorical values (#5012)

* Create table component for category data
* Add table for categorical params to ClinicalData.tsx
- Change logic related to showing checkboxes leaving only show N/A for table

---------

Co-authored-by: alisman <lisman.aaron@gmail.com>

src/pages/groupComparison/CategoryPlot.tsx

@@ -7,6 +7,8 @@ import MultipleCategoryBarPlot, {
 import MultipleCategoryHeatmap from 'shared/components/plots/MultipleCategoryHeatmap';
 import autobind from 'autobind-decorator';
 import { OncoprintJS } from 'oncoprintjs';
+import { makePlotData } from 'shared/components/plots/MultipleCategoryBarPlotUtils';
+import { CategoryTable } from 'pages/groupComparison/CategoryTable';
 
 export type IMultipleCategoryPlotProps = IMultipleCategoryBarPlotProps & {
     type: CategoryPlotType;
@@ -19,6 +21,7 @@ export enum CategoryPlotType {
     StackedBar = 'StackedBar',
     PercentageStackedBar = 'PercentageStackedBar',
     Heatmap = 'Heatmap',
+    Table = 'Table',
 }
 
 @observer
@@ -40,8 +43,28 @@ export default class CategoryPlot extends React.Component<
     }
 
     render() {
-        const isHeatmap = this.props.type === CategoryPlotType.Heatmap;
-        return <>{isHeatmap ? this.heatmap : this.barchart}</>;
+        switch (this.props.type) {
+            case CategoryPlotType.Heatmap:
+                return <>{this.heatmap}</>;
+            case CategoryPlotType.Table:
+                return <>{this.table}</>;
+            default:
+                return <>{this.barchart}</>;
+        }
+    }
+
+    @computed get table() {
+        const plotData = makePlotData(
+            this.props.horzData!,
+            this.props.vertData!,
+            false
+        );
+        return (
+            <CategoryTable
+                data={plotData}
+                labels={this.props.horzCategoryOrder!}
+            />
+        );
     }
 
     @computed get heatmap() {

src/pages/groupComparison/CategoryTable.tsx

@@ -0,0 +1,36 @@
+import { FunctionComponent } from 'react';
+import * as React from 'react';
+import { IMultipleCategoryBarPlotData } from 'shared/components/plots/MultipleCategoryBarPlot';
+
+type CategoryTableProps = {
+    data: IMultipleCategoryBarPlotData[];
+    labels: string[];
+};
+
+export const CategoryTable: FunctionComponent<CategoryTableProps> = (
+    props: CategoryTableProps
+) => {
+    const headers =
+        props.labels.length === 1 ? (
+            <th colSpan={2}>{props.labels[0]}</th>
+        ) : (
+            [<th />, props.labels.map(label => <th colSpan={1}>{label}</th>)]
+        );
+    return (
+        <table className="table table-striped" style={{ minWidth: '400px' }}>
+            <thead>
+                <tr>{headers}</tr>
+            </thead>
+            <tbody>
+                {props.data.map(d => (
+                    <tr>
+                        <td>{d.minorCategory}</td>
+                        {d.counts.map(c => (
+                            <td>{c.count}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};

src/pages/groupComparison/ClinicalData.tsx

@@ -121,6 +121,7 @@ export const categoryPlotTypeOptions = [
         label: '100% stacked bar chart',
     },
     { value: CategoryPlotType.Heatmap, label: 'Heatmap' },
+    { value: CategoryPlotType.Table, label: 'Table' },
 ];
 
 function isNumerical(datatype?: string) {
@@ -277,7 +278,14 @@ export default class ClinicalData extends React.Component<
     }
 
     @computed get showHorizontalBarControls() {
-        return !this.showLogScaleControls && !this.isHeatmap;
+        return (
+            !this.showLogScaleControls &&
+            !this.isHeatmap &&
+            !(
+                !this.isNumericalPlot &&
+                this.categoryPlotType === CategoryPlotType.Table
+            )
+        );
     }
 
     @computed get showSwapAxisControls() {
@@ -286,9 +294,11 @@ export default class ClinicalData extends React.Component<
 
     @computed get isTable() {
         return (
-            this.isNumericalPlot &&
-            this.numericalVisualisationType ===
-                ClinicalNumericalVisualisationType.Table
+            (this.isNumericalPlot &&
+                this.numericalVisualisationType ===
+                    ClinicalNumericalVisualisationType.Table) ||
+            (!this.isNumericalPlot &&
+                this.categoryPlotType === CategoryPlotType.Table)
         );
     }