Mutation Table Header Tooltips

src/pages/patientView/mutation/MutationInformationContainer.tsx

@@ -35,12 +35,17 @@ export default class MutationInformationContainer extends React.Component<IMutat
                 name: "Sample",
                 visible: "excluded"
             },
+            gene: {
+                name: "Gene",
+                description: "HUGO Symbol"
+            },
             proteinChange: {
                 name: "Protein Change",
                 formatter: ProteinChangeColumnFormatter.renderFunction
             },
             tumors: {
                 name: "Tumors",
+                description: "Cases/Samples",
                 priority: 0.50,
                 formatter: TumorColumnFormatter.renderFunction,
                 sortable: TumorColumnFormatter.sortFunction,
@@ -75,7 +80,8 @@ export default class MutationInformationContainer extends React.Component<IMutat
                 visible: "hidden"
             },
             mutationType: {
-                name: "Type"
+                name: "Type",
+                description: "Mutation Type"
             },
             annotation: {
                 name: "Annotation",
@@ -94,16 +100,19 @@ export default class MutationInformationContainer extends React.Component<IMutat
             },
             cohort: {
                 name: "Cohort",
+                description: "Mutation frequency in cohort",
                 priority: 18.30,
                 sortable: true
             },
             cosmic: {
                 name: "COSMIC",
+                description: "COSMIC occurrences",
                 priority: 18.40,
                 sortable: true
             },
             tumorAlleleFreq: {
                 name: "Allele Freq",
+                description: "Variant allele frequency in the tumor sample",
                 formatter: AlleleFreqColumnFormatter.renderFunction,
                 sortable: AlleleFreqColumnFormatter.sortFunction,
                 filterable: false,
@@ -115,6 +124,7 @@ export default class MutationInformationContainer extends React.Component<IMutat
             },
             normalAlleleFreq : {
                 name: "Allele Freq (N)",
+                description: "Variant allele frequency in the normal sample",
                 visible: "hidden"
             },
             normalRefCount: {

src/shared/components/enhancedReactTable/EnhancedReactTable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {Table, Thead, Th, Tr, Td} from "reactable";
+import Tooltip from 'rc-tooltip';
 import * as _ from 'lodash';
 import TableHeaderControls from "shared/components/tableHeaderControls/TableHeaderControls";
 import {
@@ -309,10 +310,28 @@ export default class EnhancedReactTable<T> extends React.Component<IEnhancedReac
         let headers:Array<any> = [];
 
         _.each(columns, function(columnDef:IEnhancedReactTableColumnDef) {
+            // basic content (with no tooltip)
+            let headerContent = (
+                <span>
+                    {columnDef.name}
+                </span>
+            );
+
+            // if description is provided, add a tooltip
+            if (columnDef.description)
+            {
+                const arrowContent = <div className="rc-tooltip-arrow-inner"/>;
+
+                headerContent = (
+                    <Tooltip overlay={columnDef.description} placement="rightTop" arrowContent={arrowContent}>
+                        {headerContent}
+                    </Tooltip>
+                );
+            }
 
             headers.push(
-                <Th key={columnDef.name} columns={columnDef.name}>
-                    {columnDef.name}
+                <Th key={columnDef.name} column={columnDef.name}>
+                    {headerContent}
                 </Th>
             );
         });

src/shared/components/enhancedReactTable/IEnhancedReactTableProps.ts

@@ -39,15 +39,16 @@ export interface IColumnVisibilityDef {
 }
 
 export interface IEnhancedReactTableColumnDef {
-    name: string;
-    formatter?: IColumnRenderFunction;
-    sortable?: IColumnSortFunction | boolean;
-    filterable?: IColumnFilterFunction | boolean;
-    visible?: IColumnVisibilityFunction | ColumnVisibility;
-    priority?: number;
-    columnProps?: any;
-    dataField?: string;
-    columnData?:IColumnDataFunction;
+    name: string; // display name for the column header
+    description?: string | JSX.Element; // column description (used as a column header tooltip value)
+    formatter?: IColumnRenderFunction; // actual renderer function
+    sortable?: IColumnSortFunction | boolean; // boolean indicator, or a custom sort function
+    filterable?: IColumnFilterFunction | boolean; // boolean indicator, or a custom filter function
+    visible?: IColumnVisibilityFunction | ColumnVisibility; // visibility value, or visibility function
+    priority?: number; // column priority (used for column ordering)
+    columnProps?: any; // any additional column props (passed as argument to the formatter)
+    dataField?: string; // data field to retrieve display data (in case no formatter provided, otherwise ignored)
+    columnData?:IColumnDataFunction; // column data function to retrieve display data (in case no formatter provided)
 }
 
 export default IEnhancedReactTableProps;