change modal layout

cBioPortal · Nov 15, 2023 · 0236827 · 0236827
1 parent a87e6aa
commit 0236827
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 58 deletions.
diff --git a/end-to-end-test/remote/specs/core/resultsOncoprintColorConfig.spec.js b/end-to-end-test/remote/specs/core/resultsOncoprintColorConfig.spec.js
@@ -87,20 +87,15 @@ describe('oncoprint colors', () => {
             assertScreenShotMatch(res);
         });
 
-        it('reset colors button is enabled when default colors not used', () => {
+        it('reset colors button is visible when default colors not used', () => {
             // check "Reset Colors" button in modal
             var trackOptionsElts = getNthOncoprintTrackOptionsElements(5);
             $(trackOptionsElts.button_selector).click();
             $(trackOptionsElts.dropdown_selector).waitForDisplayed({
                 timeout: 1000,
             });
             $(trackOptionsElts.dropdown_selector + ' li:nth-child(8)').click();
-            getElementByTestHandle('resetColors').waitForExist();
-
-            assert.strictEqual(
-                getElementByTestHandle('resetColors').isEnabled(),
-                true
-            );
+            getElementByTestHandle('resetColors').waitForDisplayed();
         });
 
         it('color configuration modal reflects default colors', () => {
@@ -133,20 +128,17 @@ describe('oncoprint colors', () => {
             assertScreenShotMatch(res);
         });
 
-        it('reset colors button is disabled when default colors are used', () => {
+        it('reset colors button is hidden when default colors are used', () => {
             // check "Reset Colors" button in modal
             var trackOptionsElts = getNthOncoprintTrackOptionsElements(5);
             $(trackOptionsElts.button_selector).click();
             $(trackOptionsElts.dropdown_selector).waitForDisplayed({
                 timeout: 1000,
             });
             $(trackOptionsElts.dropdown_selector + ' li:nth-child(8)').click();
-            getElementByTestHandle('resetColors').waitForExist();
-
-            assert.strictEqual(
-                getElementByTestHandle('resetColors').isEnabled(),
-                false
-            );
+            getElementByTestHandle('resetColors').waitForDisplayed({
+                reverse: true,
+            });
         });
     });
 

diff --git a/src/shared/components/oncoprint/ResultsViewOncoprint.tsx b/src/shared/components/oncoprint/ResultsViewOncoprint.tsx
@@ -95,6 +95,7 @@ import { RestoreClinicalTracksMenu } from 'pages/resultsView/oncoprint/RestoreCl
 import { Modal } from 'react-bootstrap';
 import ClinicalTrackColorPicker from './ClinicalTrackColorPicker';
 import { hexToRGBA, rgbaToHex } from 'shared/lib/Colors';
+import classnames from 'classnames';
 
 interface IResultsViewOncoprintProps {
     divId: string;
@@ -1972,56 +1973,70 @@ export default class ResultsViewOncoprint extends React.Component<
                             </Modal.Title>
                         </Modal.Header>
                         <Modal.Body>
-                            <table
-                                className="table"
-                                style={{
-                                    tableLayout: 'fixed',
-                                    textAlign: 'center',
-                                }}
-                            >
-                                {this.selectedClinicalTrackValues.map(value => (
+                            <table className="table table-striped">
+                                <thead>
                                     <tr>
-                                        <td>{value}</td>
-                                        <td>
-                                            <ClinicalTrackColorPicker
-                                                store={this.props.store}
-                                                handleClinicalTrackColorChange={
-                                                    this
-                                                        .handleSelectedClinicalTrackColorChange
-                                                }
-                                                clinicalTrackValue={value}
-                                                color={getClinicalTrackColor(
-                                                    this.selectedClinicalTrack!,
-                                                    value as string
-                                                )}
-                                                setClinicalTrackColorChanged={
-                                                    this
-                                                        .setClinicalTrackColorChanged
-                                                }
-                                            />
-                                        </td>
+                                        <th>Value</th>
+                                        <th>Color</th>
                                     </tr>
-                                ))}
+                                </thead>
+                                <tbody>
+                                    {this.selectedClinicalTrackValues.map(
+                                        value => (
+                                            <tr>
+                                                <td>{value}</td>
+                                                <td>
+                                                    <ClinicalTrackColorPicker
+                                                        store={this.props.store}
+                                                        handleClinicalTrackColorChange={
+                                                            this
+                                                                .handleSelectedClinicalTrackColorChange
+                                                        }
+                                                        clinicalTrackValue={
+                                                            value
+                                                        }
+                                                        color={getClinicalTrackColor(
+                                                            this
+                                                                .selectedClinicalTrack!,
+                                                            value as string
+                                                        )}
+                                                        setClinicalTrackColorChanged={
+                                                            this
+                                                                .setClinicalTrackColorChanged
+                                                        }
+                                                    />
+                                                </td>
+                                            </tr>
+                                        )
+                                    )}
+                                </tbody>
                             </table>
                             <button
-                                className="btn btn-default btn-sm"
+                                className={classnames(
+                                    'btn',
+                                    'btn-default',
+                                    'btn-sm',
+                                    {
+                                        hidden: _.every(
+                                            this.selectedClinicalTrackValues,
+                                            v =>
+                                                rgbaToHex(
+                                                    getClinicalTrackColor(
+                                                        this
+                                                            .selectedClinicalTrack!,
+                                                        v as string
+                                                    )
+                                                ) ===
+                                                rgbaToHex(
+                                                    this.getDefaultSelectedClinicalTrackColor(
+                                                        v
+                                                    ) as RGBAColor
+                                                )
+                                        ),
+                                    }
+                                )}
                                 data-test="resetColors"
                                 style={{ marginTop: 5 }}
-                                disabled={_.every(
-                                    this.selectedClinicalTrackValues,
-                                    v =>
-                                        rgbaToHex(
-                                            getClinicalTrackColor(
-                                                this.selectedClinicalTrack!,
-                                                v as string
-                                            )
-                                        ) ===
-                                        rgbaToHex(
-                                            this.getDefaultSelectedClinicalTrackColor(
-                                                v
-                                            ) as RGBAColor
-                                        )
-                                )}
                                 onClick={() => {
                                     this.selectedClinicalTrackValues.forEach(
                                         v => {