Give option to list unselected cases in the Custom Selection component

cBioPortal · Dec 16, 2019 · 939a1f5 · 939a1f5
1 parent edf5cd1
commit 939a1f5
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/src/pages/studyView/addChartButton/customCaseSelection/CustomCaseSelection.tsx b/src/pages/studyView/addChartButton/customCaseSelection/CustomCaseSelection.tsx
@@ -35,6 +35,9 @@ const GroupByOptions: { value: ClinicalDataType, label: string; }[] = [
     {value: ClinicalDataTypeEnum.PATIENT, label: 'By patient ID'}
 ];
 
+enum SelectMode {
+    SELECTED, UNSELECTED
+}
 @observer
 export default class CustomCaseSelection extends React.Component<ICustomCaseSelectionProps, {}> {
     private validateContent: boolean = false;
@@ -76,14 +79,23 @@ export default class CustomCaseSelection extends React.Component<ICustomCaseSele
 
     @autobind
     @action
-    onClick() {
-        let cases = this.props.selectedSamples.map(sample => {
+    onClick(selectMode: SelectMode) {
+        let selectedCases;
+        if (selectMode === SelectMode.SELECTED) {
+            selectedCases = this.props.selectedSamples;
+        } else {
+            const _selectedCaseIds = this.props.selectedSamples.map(sample => sample.sampleId);
+            selectedCases = this.props.allSamples.filter(sample => {
+                return !_selectedCaseIds.includes(sample.sampleId);
+            });
+        }
+        let cases = selectedCases.map(sample => {
             return `${sample.studyId}:${(this.caseIdsMode === ClinicalDataTypeEnum.SAMPLE) ? sample.sampleId : sample.patientId}${this.props.disableGrouping ? '' : ` ${DEFAULT_GROUP_NAME_WITHOUT_USER_INPUT}`}`
         });
         if (this.caseIdsMode === ClinicalDataTypeEnum.PATIENT) {
             cases = _.uniq(cases);
         }
-        this.content = cases.join("\n")
+        this.content = cases.join("\n");
         this.validateContent = false;
         this.validContent = this.content;
     }
@@ -94,7 +106,7 @@ export default class CustomCaseSelection extends React.Component<ICustomCaseSele
         this.validContent = newContent;
         this.validateContent = true;
     }
-    
+
     @autobind
     @action
     onChartNameChange(event: any) {
@@ -164,8 +176,17 @@ export default class CustomCaseSelection extends React.Component<ICustomCaseSele
                     <div style={{display: 'flex', justifyContent: 'space-between'}}>
                         <span
                             className={styles.fillIds}
-                            onClick={this.onClick}>
-                            Use currently selected samples/patients
+                            onClick={() => {
+                                this.onClick(SelectMode.SELECTED);
+                            }}>
+                            currently selected
+                        </span>
+                        <span
+                            className={styles.fillIds}
+                            onClick={() => {
+                                this.onClick(SelectMode.UNSELECTED);
+                            }}>
+                            unselected
                         </span>
 
                         <div className="collapsible-header" onClick={this.handleDataFormatToggle}>
@@ -177,7 +198,7 @@ export default class CustomCaseSelection extends React.Component<ICustomCaseSele
                             }
                         </span>
                         </div>
-                    </div>
+                    </div> 
                     <Collapse isOpened={!this.dataFormatCollapsed}>
                         <div style={{marginTop: '5px'}}>{this.dataFormatContent}</div>
                     </Collapse>
@@ -232,4 +253,4 @@ export default class CustomCaseSelection extends React.Component<ICustomCaseSele
             this.mainContent()
         )
     }
-}
+}