incorporated requested changes from Luke, Aaron, and Ino

- made mutationsOptions and clinicalOptions in AddColumns of type Options[] only
- refactored ClinicalAttributesCache using await/async
- implemented 'Deselect all' button in FixedHeaderTable using flexbox
- added filters for clinical attribute columns of datatype string

src/pages/resultsView/ResultsViewPageStore.ts

@@ -1143,6 +1143,26 @@ export class ResultsViewPageStore {
         },
     });
 
+    // TODO: Should include all clinical attributes, not just server attributes
+    readonly mutationsTabClinicalAttributes = remoteData<ClinicalAttribute[]>({
+        await: () => [this.studyIds],
+        invoke: async () => {
+            const clinicalAttributes = await client.fetchClinicalAttributesUsingPOST(
+                {
+                    studyIds: this.studyIds.result!,
+                }
+            );
+            const excludeList = ['CANCER_TYPE_DETAILED', 'MUTATION_COUNT'];
+
+            return _.uniqBy(
+                clinicalAttributes.filter(
+                    x => !excludeList.includes(x.clinicalAttributeId)
+                ),
+                x => x.clinicalAttributeId
+            );
+        },
+    });
+
     readonly clinicalAttributeIdToClinicalAttribute = remoteData({
         await: () => [this.clinicalAttributes],
         invoke: () =>
@@ -1255,6 +1275,22 @@ export class ResultsViewPageStore {
         },
     });
 
+    readonly clinicalAttributeIdToAvailableFrequency = remoteData({
+        await: () => [
+            this.clinicalAttributeIdToAvailableSampleCount,
+            this.samples,
+        ],
+        invoke: () => {
+            const numSamples = this.samples.result!.length;
+            return Promise.resolve(
+                _.mapValues(
+                    this.clinicalAttributeIdToAvailableSampleCount.result!,
+                    count => (100 * count) / numSamples
+                )
+            );
+        },
+    });
+
     readonly cnSegments = remoteData<CopyNumberSeg[]>(
         {
             await: () => [this.filteredSamples],
@@ -3442,6 +3478,8 @@ export class ResultsViewPageStore {
             this.uniqueSampleKeyToTumorType.result!,
             this.generateGenomeNexusHgvsgUrl,
             this.clinicalDataGroupedBySampleMap,
+            this.mutationsTabClinicalAttributes,
+            this.clinicalAttributeIdToAvailableFrequency,
             this.genomeNexusClient,
             this.genomeNexusInternalClient,
             () => this.urlWrapper.query.mutations_transcript_id

src/pages/resultsView/mutation/AddColumns.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import MobxPromise from 'mobxpromise';
+import { observer } from 'mobx-react';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { Checkbox } from 'react-bootstrap';
+import { remoteData, getTextWidth } from 'cbioportal-frontend-commons';
+import { ClinicalAttribute } from 'cbioportal-ts-api-client';
+import { IColumnVisibilityControlsProps } from 'shared/components/columnVisibilityControls/ColumnVisibilityControls';
+import { MSKTab, MSKTabs } from 'shared/components/MSKTabs/MSKTabs';
+import CustomDropdown from 'shared/components/oncoprint/controls/CustomDropdown';
+import AddChartByType from '../../studyView/addChartButton/addChartByType/AddChartByType';
+import { ChartDataCountSet } from '../../studyView/StudyViewUtils';
+
+export interface IAddColumnsProps extends IColumnVisibilityControlsProps {
+    clinicalAttributes: ClinicalAttribute[];
+    clinicalAttributeIdToAvailableFrequency: MobxPromise<{
+        [clinicalAttributeId: string]: number;
+    }>;
+}
+
+enum Tab {
+    MUTATIONS = 'Mutations',
+    CLINICAL = 'Clinical',
+}
+
+type Option = {
+    key: string;
+    label: string;
+    selected: boolean;
+};
+
+const MIN_DROPDOWN_WIDTH = 400;
+const CONTAINER_PADDING_WIDTH = 20;
+const TAB_PADDING_WIDTH = 14;
+const COUNT_PADDING_WIDTH = 17;
+@observer
+export default class AddColumns extends React.Component<IAddColumnsProps, {}> {
+    @observable tabId: Tab = Tab.MUTATIONS;
+
+    constructor(props: IAddColumnsProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @action.bound
+    private updateTabId(newId: Tab) {
+        this.tabId = newId;
+    }
+
+    @action.bound
+    private addAll(ids: string[], options: Option[]) {
+        if (this.props.onColumnToggled && options.length > 0) {
+            for (let option of options) {
+                if (!option.selected && ids.includes(option.key)) {
+                    this.props.onColumnToggled(option.key);
+                }
+            }
+        }
+    }
+
+    @action.bound
+    private clearAll(ids: string[], options: Option[]) {
+        if (this.props.onColumnToggled && options.length > 0) {
+            for (let option of options) {
+                if (option.selected && ids.includes(option.key)) {
+                    this.props.onColumnToggled(option.key);
+                }
+            }
+        }
+    }
+
+    @action.bound
+    private toggle(id: string) {
+        if (this.props.onColumnToggled) {
+            this.props.onColumnToggled(id);
+        }
+    }
+
+    readonly emptyPromise = remoteData({
+        invoke: () =>
+            new Promise<ChartDataCountSet>(() => {
+                return;
+            }),
+    });
+
+    @computed get clinicalAttributeIds(): Set<string> {
+        let ids: Set<string> = new Set();
+        this.props.clinicalAttributes.forEach(x =>
+            ids.add(x.clinicalAttributeId)
+        );
+        return ids
+            .add('CANCER_STUDY')
+            .add('CANCER_TYPE_DETAILED')
+            .add('MUTATION_COUNT');
+    }
+
+    @computed get mutationsOptions(): Option[] {
+        if (!this.props.columnVisibility) {
+            return [];
+        }
+
+        return this.props.columnVisibility
+            .filter(col => !this.clinicalAttributeIds.has(col.id))
+            .map(col => ({
+                key: col.id,
+                label: col.name,
+                selected: col.visible,
+            }));
+    }
+
+    @computed get mutationsTabContent() {
+        return (
+            <AddChartByType
+                options={this.mutationsOptions}
+                freqPromise={this.emptyPromise}
+                onAddAll={(ids: string[]) =>
+                    this.addAll(ids, this.mutationsOptions)
+                }
+                onClearAll={(ids: string[]) =>
+                    this.clearAll(ids, this.mutationsOptions)
+                }
+                onToggleOption={this.toggle}
+                optionsGivenInSortedOrder={true}
+                width={this.dropdownWidth}
+                excludeFrequency={true}
+            />
+        );
+    }
+
+    @computed get clinicalOptions(): Option[] {
+        if (!this.props.columnVisibility) {
+            return [];
+        }
+
+        return this.props.columnVisibility
+            .filter(col => this.clinicalAttributeIds.has(col.id))
+            .map(col => ({
+                key: col.id,
+                label: col.name,
+                selected: col.visible,
+            }));
+    }
+
+    @computed get clinicalTabContent() {
+        return (
+            <AddChartByType
+                options={this.clinicalOptions}
+                freqPromise={this.props.clinicalAttributeIdToAvailableFrequency}
+                onAddAll={(ids: string[]) =>
+                    this.addAll(ids, this.clinicalOptions)
+                }
+                onClearAll={(ids: string[]) =>
+                    this.clearAll(ids, this.clinicalOptions)
+                }
+                onToggleOption={this.toggle}
+                optionsGivenInSortedOrder={false}
+                width={this.dropdownWidth}
+            />
+        );
+    }
+
+    @computed get mutationsTabText() {
+        return (
+            <div>
+                {Tab.MUTATIONS}
+                <span style={{ paddingLeft: 5 }}>
+                    <span className="oncoprintDropdownCount">
+                        {this.mutationsOptions.length}
+                    </span>
+                </span>
+            </div>
+        );
+    }
+
+    @computed get clinicalTabText() {
+        return (
+            <div>
+                {Tab.CLINICAL}
+                <span style={{ paddingLeft: 5 }}>
+                    <span className="oncoprintDropdownCount">
+                        {this.clinicalOptions.length}
+                    </span>
+                </span>
+            </div>
+        );
+    }
+
+    private getTextPixel(text: string, fontSize: string) {
+        return Math.floor(getTextWidth(text, 'Helvetica Neue', fontSize));
+    }
+
+    @computed get dropdownWidth() {
+        let width = 2 * CONTAINER_PADDING_WIDTH;
+        const HEADER_FONT_SIZE = '14px';
+        const COUNT_FONT_SIZE = '11px';
+
+        const textWidth =
+            this.getTextPixel(Tab.CLINICAL, HEADER_FONT_SIZE) +
+            TAB_PADDING_WIDTH;
+        const countTextWidth =
+            this.getTextPixel(
+                this.clinicalOptions.length.toString(),
+                COUNT_FONT_SIZE
+            ) + COUNT_PADDING_WIDTH;
+        width += textWidth + countTextWidth;
+
+        return Math.max(width, MIN_DROPDOWN_WIDTH);
+    }
+
+    render() {
+        const haveMutationsOptions = this.mutationsOptions.length > 0;
+        const haveClinicalOptions = this.clinicalOptions.length > 0;
+
+        return (
+            <div style={{ float: 'right' }}>
+                <CustomDropdown
+                    bsStyle="default"
+                    title="Columns"
+                    id="addColumnsDropdown"
+                    className={this.props.className}
+                    styles={{ minWidth: MIN_DROPDOWN_WIDTH, width: 'auto' }}
+                    buttonClassName="btn btn-default btn-sm"
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                    >
+                        {(haveMutationsOptions || haveClinicalOptions) && (
+                            <MSKTabs
+                                activeTabId={this.tabId}
+                                onTabClick={this.updateTabId}
+                                unmountOnHide={false}
+                                className="mainTabs mutationsTabAddColumnsDropdown"
+                            >
+                                {haveMutationsOptions && (
+                                    <MSKTab
+                                        key={0}
+                                        id={Tab.MUTATIONS}
+                                        linkText={this.mutationsTabText}
+                                    >
+                                        {this.mutationsTabContent}
+                                    </MSKTab>
+                                )}
+                                {haveClinicalOptions && (
+                                    <MSKTab
+                                        key={1}
+                                        id={Tab.CLINICAL}
+                                        linkText={this.clinicalTabText}
+                                    >
+                                        {this.clinicalTabContent}
+                                    </MSKTab>
+                                )}
+                            </MSKTabs>
+                        )}
+                    </div>
+                </CustomDropdown>
+            </div>
+        );
+    }
+}

src/pages/resultsView/mutation/ResultsViewMutationMapper.tsx

@@ -88,7 +88,8 @@ export default class ResultsViewMutationMapper extends MutationMapper<
                 this.props.store.mutationData,
                 this.props.store.indexedVariantAnnotations,
                 this.props.store.activeTranscript,
-                this.props.store.clinicalDataGroupedBySampleMap
+                this.props.store.clinicalDataGroupedBySampleMap,
+                this.props.store.mutationsTabClinicalAttributes
             ) === 'pending'
         );
     }
@@ -164,6 +165,12 @@ export default class ResultsViewMutationMapper extends MutationMapper<
                 existsSomeMutationWithAscnProperty={
                     this.props.existsSomeMutationWithAscnProperty
                 }
+                mutationsTabClinicalAttributes={
+                    this.props.store.mutationsTabClinicalAttributes
+                }
+                clinicalAttributeIdToAvailableFrequency={
+                    this.props.store.clinicalAttributeIdToAvailableFrequency
+                }
             />
         );
     }

src/pages/resultsView/mutation/ResultsViewMutationMapperStore.ts

@@ -2,6 +2,7 @@ import { IHotspotIndex } from 'cbioportal-utils';
 import {
     Mutation,
     Gene,
+    ClinicalAttribute,
     ClinicalData,
     CancerStudy,
     MolecularProfile,
@@ -69,6 +70,10 @@ export default class ResultsViewMutationMapperStore extends MutationMapperStore
         public clinicalDataGroupedBySampleMap: MobxPromise<{
             [sampleId: string]: ClinicalData[];
         }>,
+        public mutationsTabClinicalAttributes: MobxPromise<ClinicalAttribute[]>,
+        public clinicalAttributeIdToAvailableFrequency: MobxPromise<{
+            [clinicalAttributeId: string]: number;
+        }>,
         protected genomenexusClient?: GenomeNexusAPI,
         protected genomenexusInternalClient?: GenomeNexusAPIInternal,
         public getTranscriptId?: () => string