Add a URL parameter for the `iframe` mode, e.g., hiding the hamburger button

[sehilyi]

There are some use cases for using Chromoscope with iframe, and I think we need to simplify the application for such use cases (cBioPortal integration and the Chromoscope Python package). For example, we need to hide the hamburger buttons in cBioPortal. We may also want to remove "Chromoscope" label and instead only show visualizations with minimal padding.

Use a URL parameter something like minimal_mode=true?

[sehilyi]

@crfmc Here are some pointers!

(1) You can conditionally set VIS_PADDING to 0 to make the padding around visualization zero

const VIS_PADDING = 60;

• https://github.com/hms-dbmi/chromoscope/blob/4c9f8bca4d7e535e8e06860471ad17c2e7599ca4/src/App.tsx#L34C2-L34C24

For example,

const urlParams = new URLSearchParams(props.location.search);
const isMinimalMode = urlParams.get('minimal_mode');
const VIS_PADDING = isMinimalMode == 'true' ? 0 : 60;

For the reference, this is how it looks with zero padding.

(2) You could conditionally hide the hamburger button.

• https://github.com/hms-dbmi/chromoscope/blob/4c9f8bca4d7e535e8e06860471ad17c2e7599ca4/src/App.tsx#L650-L663

for example, from

                <svg
                    className="config-button"
                    viewBox="0 0 16 16"
                    visibility={showSmallMultiples ? 'visible' : 'collapse'}
                    onClick={() => {
                        setShowSamples(true);
                    }}
                >
                    <title>Menu</title>
                    <path
                        fillRule="evenodd"
                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                </svg>

to

                {!isMinimalMode && <svg
                    className="config-button"
                    viewBox="0 0 16 16"
                    visibility={showSmallMultiples ? 'visible' : 'collapse'}
                    onClick={() => {
                        setShowSamples(true);
                    }}
                >
                    <title>Menu</title>
                    <path
                        fillRule="evenodd"
                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                </svg>}

(3) You can hide other buttons in the header as needed.

• Export Link Button: https://github.com/hms-dbmi/chromoscope/blob/4c9f8bca4d7e535e8e06860471ad17c2e7599ca4/src/App.tsx#L743-L772
• Export HTML/JSON: https://github.com/hms-dbmi/chromoscope/blob/4c9f8bca4d7e535e8e06860471ad17c2e7599ca4/src/App.tsx#L697-L742
• "Chromoscope" title: https://github.com/hms-dbmi/chromoscope/blob/4c9f8bca4d7e535e8e06860471ad17c2e7599ca4/src/App.tsx#L665-L667