RFC87: add button to load GroupComparison table data in external tool (…

…cBioPortal#4938)

* Visualize Your Data: add 3rd party tools section, link, and image.
* Allow for configuration of custom buttons in data tables that send data to third-party tools on client system

OPEN-SOURCE-DOCUMENTATION

@@ -49,3 +49,20 @@ Available under license:
     5. Products derived from this software may not be called
     "ColorBrewer", nor may "ColorBrewer" appear in their name, without
     prior written permission of Cynthia Brewer.
+
+* JavaScript/CSS Font Detector
+
+JavaScript/CSS Font Detector
+----------------------------
+Available under license:
+
+    JavaScript code to detect available availability of a
+    particular font in a browser using JavaScript and CSS.
+
+    Author : Lalit Patel
+    Website: http://www.lalit.org/lab/javascript-css-font-detect/
+    License: Apache Software License 2.0
+             http://www.apache.org/licenses/LICENSE-2.0
+
+
+

src/config/IAppConfig.ts

@@ -186,4 +186,5 @@ export interface IServerConfig {
     vaf_log_scale_default: boolean; // this has a default
     skin_study_view_show_sv_table: boolean; // this has a default
     enable_study_tags: boolean;
+    download_custom_buttons_json: string;
 }

src/config/config.ts

@@ -340,7 +340,10 @@ export function initializeServerConfiguration(rawConfiguration: any) {
             );
         } catch (err) {
             // ignore
-            console.log('Error parsing localStorage.frontendConfig');
+            console.log(
+                'Error parsing localStorage.frontendConfig:' +
+                    localStorage.frontendConfig
+            );
         }
     }
 

src/config/serverConfigDefaults.ts

@@ -243,6 +243,8 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
     vaf_log_scale_default: false,
 
     skin_study_view_show_sv_table: false,
+
+    download_custom_buttons_json: '',
 };
 
 export default ServerConfigDefaults;

src/pages/staticPages/visualize/Visualize.tsx

@@ -6,9 +6,61 @@ import { PageLayout } from 'shared/components/PageLayout/PageLayout';
 import './styles.scss';
 import styles from './visualize.module.scss';
 import { getNCBIlink } from 'cbioportal-frontend-commons';
+import { getCustomButtonConfigs } from 'shared/components/CustomButton/CustomButtonServerConfig';
 
 @observer
 export default class Visualize extends React.Component<{}, {}> {
+    /**
+     * Display the 'visualize_html' data associated with serverConfig.download_custom_buttons_json
+     * @returns JSX.element
+     */
+    customButtonsSection() {
+        const displayButtons = getCustomButtonConfigs().filter(
+            button => button.visualize_href
+        );
+        if (!displayButtons || displayButtons.length === 0) {
+            return;
+        }
+
+        return (
+            <>
+                <hr />
+
+                <h2>3rd party tools not maintained by cBioPortal community</h2>
+
+                <div
+                    style={{ display: 'flex' }}
+                    className={styles.customToolArray}
+                >
+                    {displayButtons.map((button, index) => (
+                        <div key={index} style={{ marginTop: 20 }}>
+                            <h2>
+                                <a href={button.visualize_href} target="_blank">
+                                    {button.visualize_title}
+                                </a>
+                            </h2>
+                            <p>
+                                {button.visualize_description}
+                                <a href={button.visualize_href} target="_blank">
+                                    Try it!
+                                </a>
+                            </p>
+                            {button.visualize_image_src && (
+                                <a href={button.visualize_href} target="_blank">
+                                    <img
+                                        className="tile-image top-image"
+                                        alt={button.visualize_title}
+                                        src={button.visualize_image_src}
+                                    />
+                                </a>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </>
+        );
+    }
+
     public render() {
         return (
             <PageLayout className={'whiteBackground staticPage'}>
@@ -128,6 +180,8 @@ export default class Visualize extends React.Component<{}, {}> {
                         </a>
                     </div>
                 </div>
+
+                {this.customButtonsSection()}
             </PageLayout>
         );
     }

src/pages/staticPages/visualize/visualize.module.scss

@@ -4,3 +4,10 @@
         padding-right: 40px;
     }
 }
+
+.customToolArray {
+    > div {
+        width: 550px;
+        padding-right: 40px;
+    }
+}

src/pages/staticPages/visualize/visualize.module.scss.d.ts

@@ -1,4 +1,5 @@
 declare const styles: {
+  readonly "customToolArray": string;
   readonly "toolArray": string;
 };
 export = styles;

src/shared/components/CustomButton/CustomButton.spec.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { CustomButton } from './CustomButton';
+import { CustomButtonConfig } from './CustomButtonConfig';
+import { ICustomButtonProps, CustomButtonUrlParameters } from './ICustomButton';
+
+jest.mock('cbioportal-frontend-commons', () => ({
+    DefaultTooltip: ({ children }: { children: React.ReactNode }) => (
+        <div>{children}</div>
+    ),
+}));
+
+describe('CustomButton Component', () => {
+    const testData = 'test data';
+    const testDataLengthString = testData.length.toString();
+    const testUrlFormat =
+        'http://example.com?study={studyName}&-DataLength={dataLength}';
+    const testStudyName = 'Test Study';
+    const navigatorClipboardOriginal = navigator.clipboard;
+
+    // we used to use window.location to navigate, then changed to window.open
+    const windowLocationOriginal = window.location;
+    const windowOpenOriginal = window.open;
+    const windowOpenMock = jest.fn();
+
+    const mockJson: string = `
+[
+    {
+        "id": "test",
+        "name": "Test Tool",
+        "tooltip": "This button shows that the Test Tool is working",
+        "image_src": "https://frontend.cbioportal.org/reactapp/images/369b022222badf37b2b0c284f4ae2284.png",
+        "url_format": "https://eu.httpbin.org/anything?-StudyName={studyName}&-ImportDataLength={dataLength}"
+    }
+]    
+    `;
+
+    const mockProps: ICustomButtonProps = {
+        toolConfig: {
+            name: 'Test',
+            id: 'test-tool',
+            url_format: testUrlFormat,
+            tooltip: 'Test Tooltip',
+            image_src: 'test-icon.png',
+        },
+        baseTooltipProps: {},
+        overlayClassName: '',
+        downloadDataAsync: () => Promise.resolve(testData),
+        urlFormatOverrides: {},
+    };
+
+    beforeEach(() => {
+        (window as any).groupComparisonPage = {
+            store: {
+                displayedStudies: {
+                    result: [{ name: testStudyName }],
+                },
+            },
+        };
+
+        // mock clipboard
+        Object.assign(navigator, {
+            clipboard: {
+                writeText: jest.fn().mockResolvedValueOnce(''),
+            },
+        });
+
+        // Mock window.location.href
+        delete (window as any).location;
+        (window as any).location = {
+            href: '',
+            assign: jest.fn().mockImplementation(url => {
+                (window as any).location.href = url;
+            }),
+        };
+
+        // Mock window.open
+        (window as any).open = windowOpenMock;
+    });
+
+    afterEach(() => {
+        delete (window as any).groupComparisonPage;
+        Object.assign(navigator, navigatorClipboardOriginal);
+        window.location = windowLocationOriginal;
+        window.open = windowOpenOriginal;
+    });
+
+    it('parses json correctly and creates Config objects', () => {
+        const config = CustomButtonConfig.parseCustomButtonConfigs(mockJson);
+        expect(config.length).toBe(1);
+        expect(config[0].id).toBe('test');
+        // TECH: compiler doesn't know that config[0] is valid, so we add a spurious optional chaining operator
+        expect(config[0]?.isAvailable?.()).toBe(true);
+    });
+
+    it('renders correctly', () => {
+        render(<CustomButton {...mockProps} />);
+        expect(screen.getByRole('button')).toBeTruthy();
+    });
+
+    it('returns the correct study name from getSingleStudyName', () => {
+        const component = new CustomButton(mockProps);
+        expect(component.getSingleStudyName()).toBe('Test Study');
+    });
+
+    it('calls handleClick on button click', () => {
+        const handleClickSpy = jest.spyOn(
+            CustomButton.prototype,
+            'handleClick'
+        );
+        const { getByRole } = render(<CustomButton {...mockProps} />);
+        const button = getByRole('button');
+        fireEvent.click(button);
+        expect(handleClickSpy).toHaveBeenCalled();
+    });
+
+    it('copies data to clipboard and calls openCustomUrl', async () => {
+        const openCustomUrlSpy = jest.spyOn(
+            CustomButton.prototype,
+            'openCustomUrl'
+        );
+        const { getByRole } = render(<CustomButton {...mockProps} />);
+        const button = getByRole('button');
+
+        fireEvent.click(button);
+
+        await waitFor(() =>
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(testData)
+        );
+
+        await waitFor(() => expect(openCustomUrlSpy).toHaveBeenCalled());
+
+        expect(openCustomUrlSpy).toHaveBeenCalledWith({
+            dataLength: testDataLengthString,
+        });
+    });
+
+    it('formats URL correctly and redirects', () => {
+        const component = new CustomButton(mockProps);
+        const urlParametersLaunch: CustomButtonUrlParameters = {
+            studyName: testStudyName,
+            dataLength: testDataLengthString,
+        };
+
+        // LOW: should manually assemble using actual test property values
+        const expectedUrl =
+            'http://example.com?study=Test%20Study&-DataLength=9';
+
+        component.openCustomUrl(urlParametersLaunch);
+
+        expect(windowOpenMock).toHaveBeenCalledWith(expectedUrl, '_blank');
+    });
+});