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.

• chromoscope/src/App.tsx

  Lines 650 to 663 in 4c9f8bc

  	<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>

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:

  chromoscope/src/App.tsx

  Lines 743 to 772 in 4c9f8bc

  	<span
  	className="title-btn"
  	onClick={() => {
  	const { xDomain } = gosRef.current.hgApi.api.getLocation(`${demo.id}-mid-ideogram`);
  	if (xDomain) {
  	// urlParams.set('demoIndex', demoIndex.current + '');
  	// urlParams.set('domain', xDomain.join('-'));
  	let newUrl = window.location.origin + window.location.pathname + '?';
  	newUrl += `demoIndex=${demoIndex.current}`;
  	newUrl += `&domain=${xDomain.join('-')}`;
  	if (externalDemoUrl.current) {
  	newUrl += `&external=${externalDemoUrl.current}`;
  	} else if (externalUrl) {
  	newUrl += `&external=${externalUrl}`;
  	}
  	navigator.clipboard
  	.writeText(newUrl)
  	.then(() =>
  	alert('The URL of the current session has been copied to your clipboard.')
  	);
  	}
  	}}
  	style={{ marginLeft: 100 }}
  	>
  	<svg className="button" viewBox="0 0 16 16">
  	<title>Export Link</title>
  	<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
  	<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
  	</svg>
  	</span>

• Export HTML/JSON:

  chromoscope/src/App.tsx

  Lines 697 to 742 in 4c9f8bc

  	<span
  	className="title-btn"
  	onClick={() => {
  	const a = document.createElement('a');
  	a.setAttribute(
  	'href',
  	`data:text/plain;charset=utf-8,${encodeURIComponent(
  	getHtmlTemplate(currentSpec.current)
  	)}`
  	);
  	a.download = 'visualization.html';
  	document.body.appendChild(a);
  	a.click();
  	document.body.removeChild(a);
  	}}
  	style={{ marginLeft: 40 }}
  	>
  	<svg className="button" viewBox="0 0 16 16">
  	<title>Export HTML</title>
  	{ICONS.HTML.path.map(p => (
  	<path fill="currentColor" key={p} d={p} />
  	))}
  	</svg>
  	</span>
  	<span
  	className="title-btn"
  	onClick={() => {
  	const a = document.createElement('a');
  	a.setAttribute(
  	'href',
  	`data:text/plain;charset=utf-8,${encodeURIComponent(currentSpec.current)}`
  	);
  	a.download = 'visualization.json';
  	document.body.appendChild(a);
  	a.click();
  	document.body.removeChild(a);
  	}}
  	style={{ marginLeft: 70 }}
  	>
  	<svg className="button" viewBox="0 0 16 16">
  	<title>Export Gosling Spec (JSON)</title>
  	{ICONS.JSON.path.map(p => (
  	<path fill="currentColor" key={p} d={p} />
  	))}
  	</svg>
  	</span>

• "Chromoscope" title:

  chromoscope/src/App.tsx

  Lines 665 to 667 in 4c9f8bc

  	<a className="chromoscope-title" href="./">
  	CHROMOSCOPE
  	</a>